디자인 아틀라스
EN
⌘ UX 용어·법칙

빈 상태

Empty State

데이터가 하나도 없을 때의 화면. 그냥 비워두는 대신 왜 비었는지·무엇을 하면 되는지 알려줍니다.

다른 이름: Zero stateBlank slate
···
html
<div class="stage">
  <div class="pane"><div class="tag">A</div></div>
  <div class="pane">
    <div class="ico"></div>
    <p>아직 항목이 없어요</p>
    <button class="cta">+ 새로 만들기</button>
  </div>
</div>
css
.stage{width:94%;height:88%;display:flex;gap:6%}
.pane{position:relative;flex:1;border-radius:14px;border:1px dashed var(--line);background:var(--surface);display:grid;place-items:center;gap:10px;text-align:center;padding:10px}
.tag{position:absolute;top:8px;left:10px;font:700 11px/1 monospace;color:var(--muted)}
.ico{width:15%;aspect-ratio:1;min-width:34px;border-radius:12px;border:2px dashed var(--muted);animation:float 3s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
p{margin:0;font-size:12px;color:var(--muted)}
.cta{border:0;border-radius:8px;padding:8px 14px;background:var(--accent);color:#fff;font-weight:700;font-size:12px;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 40%,transparent)}50%{box-shadow:0 0 0 8px transparent}}

빈 상태는 종종 "첫인상"입니다 — 신규 가입자, 새 프로젝트, 검색 결과 0건이 전부 빈 상태를 거칩니다. 아무 설명 없는 흰 화면은 사용자에게 "고장난 건가?"라는 의심을 줍니다.

좋은 빈 상태는 세 가지를 합니다: (1) 지금 비어있는 이유를 짧게 말하고, (2) 다음 행동을 유도하는 CTA를 주고, (3) 가능하면 가벼운 일러스트로 부정적 느낌을 완화합니다. 검색 결과가 0건이면 철자 제안이나 필터 초기화 버튼을 주는 것도 같은 원리입니다.

데모 A는 아무 설명 없는 빈 목록, B는 아이콘 + 메시지 + CTA가 있는 빈 상태입니다.

언제 쓰나

목록·대시보드·검색 결과 어디든 "데이터 0건" 상태를 설계할 때 빠뜨리지 마세요. 로딩 중과 빈 상태를 같은 화면으로 착각하지 않게 구분하세요.