화면 상태 설계

화면은 데이터가 있을 때의 모습 하나로 완성되지 않습니다.
사용자는 데이터를 기다리는 순간, 데이터가 없는 순간, 실패한 순간까지
모든 상태를 실제로 마주합니다.
화면 상태 설계는 이 모든 순간을 빠짐없이 설계하기 위한 기준입니다.

화면 상태 설계의 개념

화면 상태 설계는
화면을 하나의 완성된 결과가 아니라,
사용자가 마주하는 여러 상태의 묶음으로 바라보는 방식입니다.

화면은 항상 여러 상태 중 하나를 보여줍니다.
정상 상태만 설계하면 나머지 순간은 방치됩니다.
방치된 상태는 빈 화면이나 깨진 화면으로 사용자에게 노출됩니다.

정상 상태를 만들기 전에
어떤 상태들이 존재하는지 먼저 정의합니다.

네 가지 기본 상태

모든 화면은 최소한 다음 네 가지 상태를 검토합니다.

로딩(Loading) — 데이터를 기다리는 동안 보여줄 모습
빈(Empty) — 데이터가 하나도 없을 때의 모습
에러(Error) — 요청이 실패했을 때의 모습과 다음 행동
정상(Default) — 데이터가 정상적으로 있는 모습

정상 상태는 이 중 하나일 뿐이며,
나머지 세 상태를 함께 설계해야 화면이 완성됩니다.

왜 네 가지를 모두 설계하는가

상태를 빠뜨리면 그 순간의 경험은 사용자에게 떠넘겨집니다.

로딩을 설계하지 않으면 사용자는 멈춘 화면을 봅니다.
빈 상태를 설계하지 않으면 사용자는 텅 빈 화면을 실패로 오해합니다.
에러를 설계하지 않으면 사용자는 다음에 무엇을 할지 알 수 없습니다.

상태 설계는 예외 처리가 아니라
화면의 기본 구성 요소입니다.

상태 표현 방식

화면 상태는 개별 클래스 조합이 아니라 상태 값으로 표현합니다.
표현 방식은 상태 기반 UI의 원칙을 따릅니다.

<section class="list_program" data-state="loading">
    <div class="i_loading">불러오는 중…</div>
    <div class="i_empty">등록된 프로그램이 없습니다.</div>
    <div class="i_error">불러오지 못했습니다. 다시 시도해 주세요.</div>
    <ul class="i_body"><!-- 정상 상태 목록 --></ul>
</section>

상태는 data-state 값으로 선언합니다.
CSS는 상태 값을 해석해 해당 영역만 노출합니다.
하나의 구조 안에서 상태만 전환되며, 구조는 바뀌지 않습니다.

상태 기반 UI와의 관계

두 문서는 다른 층을 다룹니다.

상태 기반 UI는 상태를 코드로 어떻게 표현하고 제어하는지를 정의합니다.
화면 상태 설계는 사용자가 어떤 상태들을 마주하는지를 빠짐없이 정의합니다.

메커니즘이 아무리 정확해도
설계해야 할 상태 자체를 빠뜨리면 경험은 완성되지 않습니다.

화면 상태 설계의 목적

화면 상태 설계는
정상 상태에 가려지기 쉬운 순간들을
화면의 기본 요소로 끌어올리기 위한 기준입니다.

모든 상태가 설계될수록
사용자는 어떤 순간에도 방치되지 않습니다.