화면 상태 설계

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

화면 상태 설계의 개념

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

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

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

네 가지 기본 상태

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

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

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

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

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

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

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

상태 표현 방식

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

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

상태는 data-state 값으로 선언합니다. 값은 넷 — loading / empty / error / success(정상).
안내문 셋은 항상 렌더되는 i_status(role="status") 상자 안에 둡니다. 상자가 미리 있어야 상태가 바뀔 때 보조 기술이 읽어 줍니다 — ARIA 최소 사용 원칙의 라이브 영역 규칙과 같은 이유입니다.
CSS는 상태 값을 해석해 해당 영역만 노출합니다. 이 전환 규칙은 공통 레이어(global.css)가 담당하므로 블록마다 다시 쓰지 않습니다. 지금 상태가 아닌 안내문은 display:none으로 숨깁니다 — 읽히면 안 되는 문장이므로 접근성 트리에서도 빠지는 것이 맞습니다.
하나의 구조 안에서 상태만 전환되며, 구조는 바뀌지 않습니다.

슬롯 안에는 문장만 둬도 되고 스켈레톤·빈 상태 패널을 넣어도 됩니다. 단 i_loading에는 읽힐 문장을 하나 둡니다 — 스켈레톤만이면 보조 기술에 읽히지 않습니다(a11y_hidden 가능). 로딩의 기본은 스피너 + 읽힐 문장(「불러오는 중…」)입니다 — 위 예시처럼 문장 하나면 충분하고, 스피너(슬러 디자인의 spinner)는 aria-hidden 장식입니다. 콘텐츠 형태를 흉내 낸 스켈레톤은 표·카드 목록처럼 모양이 정해진 넓은 영역에서 고르는 선택지이며, 그때도 읽힐 문장을 숨겨 함께 둡니다. 빈·에러 상태는 안내 문구와 다음 행동(다시 시도, 만들기)을 함께 둡니다. JavaScript는 block.dataset.state = 'loading' 한 줄입니다. 전환 규칙 자체는 공통 레이어(global.css)에 있습니다.

상태 기반 UI와의 관계

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

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

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

화면 상태 설계의 목적

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

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