Noti화면은 목업부터목업 · 참고 화면 · UI 용어
화면이 있는 일을 AI에게 맡길 때 가장 흔한 말이 "깔끔하게 해 줘"예요. 그리고 가장 흔한 결과는, AI가 생각한 '깔끔'이 내 '깔끔'과 다른 거예요.
바로 만들지 말고 목업부터
화면이 있는 일은 HTML 목업(미리보기 화면)부터 받아요. 정하기 어려운 부분은 안 2~3개를 나란히 그리게 해서 눈으로 골라요.
- 고르기 전에는 앱에 넣지 않아요. 말로 정하면 꼭 한 번 더 고치게 돼요.
- 고른 목업은 지우지 않고 정답지로 남겨요. 나중에 "목업 보고 맞춰" 하면 AI가 그걸 기준으로 고쳐요.
AI에게 이렇게"바로 만들지 말고, 이 화면을 안 3개로 HTML 목업을 나란히 그려 줘. 고른 다음에 앱에 넣자."
보통은 시안을 셋씩 그려 비교하는 게 사치예요. 이제는 AI가 몇 분 만에 그려요. 비교가 공짜가 되니 퀄리티가 올라가요. 노티폴드 저장소에는 목업 화면이 103개 있고, 그중 72개는 안을 나란히 놓고 고른 거예요.
따라 할 화면은 말 대신 보여 주기
"토스처럼"을 말로 설명하면 잘 안 돼요. 큰 제목이 얼마나 크고 굵은지, 설명 글씨가 얼마나 흐린지는 말로 하기 어렵거든요. 참고할 앱 화면을 캡처해 붙이거나, 폰을 컴퓨터에 연결해 AI가 직접 찍어 보게 하고 "글씨 크기와 간격은 이 화면을 참고해 줘"라고 해요.
UI 용어 한마디가 설명 열 줄
"네모 칸들이 크기가 다르게 막…"이라고 하면 AI가 헤매지만, "벤토 그리드로 해 줘"라고 하면 바로 그 모양이 나와요.
벤토 그리드 — 도시락 칸처럼 크기가 다른 카드를 섞어 놓은 배치
바텀 시트 — 화면 아래에서 올라오는 판
칩 — 눌러서 고르는 작은 알약 모양 버튼
토스트 · 스낵바 — 잠깐 떴다 사라지는 안내 한 줄
스켈레톤 — 불러오는 동안 회색 빈 틀로 자리만 보여 주는 것
FAB — 화면 구석에 떠 있는 동그란 버튼
이름을 모르면 화면을 보여 주고 "이걸 뭐라고 불러?"라고 물으면 돼요.
정리
- "깔끔하게"는 사람마다, AI마다 다르다
- 목업 안을 나란히 받아 고른 뒤에 만들기, 고른 목업은 정답지로
- 비교가 공짜가 되니 퀄리티가 올라간다
- 따라 할 화면은 말 대신 보여 주기
- UI 용어로 말하기 — 모르면 "이걸 뭐라고 불러?"