상태 설계 — 화면은 다섯 벌이다

디자인 시안은 보통 데이터가 알맞게 찬 '이상적인 상태' 한 벌만 그린다. 실제 화면은 최소 다섯 벌이다. 이상적 · 빈 · 로딩 · 에러 · 부분(데이터가 이상하게 많거나 적음). 다섯 벌을 설계하지 않으면 나머지 넷은 사고 현장에서 즉흥으로 태어난다.

그림같은 화면의 다섯 벌
이상적
빈 상태
아직 기록 없음
첫 글 쓰기
로딩
에러
불러오지 못함
다시 시도
극단값
₩1,234,567 · 아주아주아주 긴 닉네임…
시안은 보통 첫 벌만 그린다. 나머지 넷을 설계 때 안 그리면 배포날 즉흥으로 태어난다.
  • 빈 상태가 첫인상이다. 새 사용자는 전부 빈 화면부터 만난다. 안내와 첫 행동 버튼을 꼭 넣는다.
  • 에러 상태엔 출구를 둔다. 재시도 버튼, 도움말, 문의 길. 막다른 골목을 만들지 않는다.
  • 극단값을 시험한다. 제목이 두 줄이면? 닉네임이 20자면? 가격이 ₩1,234,567이면? 깨지는 건 늘 극단값이다.
  • 목록이 셋 미만일 때와 백 개일 때의 화면은 다른 화면이다. 페이지네이션·접기·검색은 많아진 뒤가 아니라 설계 때 정한다.
"데이터가 없으면 뭐가 보이지?"에 답하지 못하면 그 화면은 아직 설계 전이다.

브루니가 적는다

색을 바꾸며 숨는 카멜레온이다. 화면을 보는 눈과 만드는 손을 한 강씩 적는다.

UI/UX 교과서 표지 · 전체 26강 →