목록 화면 시안에는 대개 항목이 여섯 개쯤 들어 있습니다. 제목 길이는 고르고, 이미지는 전부 있고, 오류는 없습니다. 그런데 실제 사이트에서 그 화면은 항목이 0개인 날부터 시작합니다. 개설 직후, 필터를 잘못 건 방문자, 검색 결과 없음 — 빈 화면은 예외가 아니라 자주 일어나는 상태입니다.
빈 화면이 시안에 없으면 그 화면은 구현 중에 만들어집니다. 대개는 아무것도 없는 흰 화면이 되고, 방문자는 그것을 “고장” 으로 읽습니다. 디자이너가 의도한 적 없는 화면이 사이트에 존재하게 되는 것입니다.
반드시 함께 그려야 하는 상태
모든 예외를 그릴 필요는 없습니다. 아래 다섯 가지가 구현이 갈라지는 지점의 대부분을 덮습니다.
빈 상태는 가장 값이 큽니다. 여기에는 세 가지가 들어가야 합니다 — 지금 왜 비어 있는지, 그것이 정상인지, 그리고 방문자가 할 수 있는 다음 행동. “아직 등록된 항목이 없습니다” 로 끝나면 방문자는 나갑니다. “조건에 맞는 글이 아직 없습니다. 필터를 지우고 전체를 보시겠어요?” 는 다음 클릭을 만듭니다.
긴 제목은 실제 운영에서 반드시 옵니다. 카드 제목을 두 줄로 자를지, 세 줄까지 허용하고 그 아래를 밀지, 말줄임표로 끊을지 — 이 결정을 시안에 담지 않으면 카드 높이가 제각각인 목록이 만들어집니다. 그리고 그 상태는 배포 후에야 발견됩니다.
예외는 콘텐츠에서 옵니다
어떤 예외를 그려야 하는지 모르겠다면, 콘텐츠를 관리하는 사람에게 물어보는 것이 가장 빠릅니다. “제목이 제일 긴 항목이 뭔가요”, “이미지가 없는 항목이 있나요”, “이 목록이 비는 경우가 있나요”. 대답 세 개가 곧 그려야 할 예외 세 개입니다.
워드프레스 사이트라면 이 상태들이 특히 뚜렷하게 드러납니다. 아카이브 화면은 조건에 따라 언제든 0건이 될 수 있고, 태그나 필터가 늘어날수록 그 확률이 올라갑니다. 목록을 설계할 때 빈 화면을 같은 비중으로 그리는 습관이 그래서 값을 합니다.
상태 설계가 실제 화면에서 어떻게 검증되는지는 개발 워크플로우 아카이브에 더 있고, 운영 중인 사이트의 빈 화면 · 오류 화면까지 함께 정리하는 작업은 최적화 지원 사업에서 다룹니다.
다음 회차
상태를 그리려면 실제 콘텐츠가 필요합니다. 다음 회차는 자리표시자 텍스트로 만든 시안이 감추는 문제들 — 길이가 고른 가짜 문장이 왜 레이아웃을 속이는지 다룹니다.