본문 바로가기
명함 만들기 캐릭터 모음 16가지 디자인 · PNG / SVG / PDF

빈 상태

목록이 비었을 때 '데이터 없음' 대신, 여기서 무엇을 하면 되는지 알려 주는 화면.

정보 표시

실제 미리보기

출처

<div class="dc-empty">
  <div class="dc-empty__art" aria-hidden="true">
    <svg viewBox="0 0 64 64" width="40" height="40" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
      <rect x="9" y="14" width="46" height="38" rx="6" />
      <path d="M9 26h46" />
      <path d="M22 9v8" />
      <path d="M42 9v8" />
      <path d="M24 39h16" />
    </svg>
  </div>
  <h3 class="dc-empty__title">아직 등록한 일정이 없습니다</h3>
  <p class="dc-empty__text">첫 일정을 만들면 팀원 모두에게 같은 화면이 보입니다. 만드는 데 1분이 걸리지 않습니다.</p>
  <div class="dc-empty__acts">
    <button type="button" class="dc-empty__btn">일정 만들기</button>
    <a class="dc-empty__link" href="#guide">쓰는 방법 보기</a>
  </div>
</div>
.dc-empty { display:flex; flex-direction:column; align-items:center; gap:var(--dc-3); max-width:420px; margin:0 auto; padding:var(--dc-7) var(--dc-5); border:1px dashed var(--dc-line-bold); border-radius:var(--dc-r-lg); background:var(--dc-surface); text-align:center; font-family:var(--dc-font); }
.dc-empty__art { display:flex; align-items:center; justify-content:center; width:72px; height:72px; border-radius:var(--dc-r-full); background:var(--dc-sunken); color:var(--dc-text-mute); }
.dc-empty__title { margin:0; font-size:16px; font-weight:700; color:var(--dc-text); }
.dc-empty__text { margin:0; font-size:14px; line-height:1.7; color:var(--dc-text-sub); }
.dc-empty__key { font-weight:700; color:var(--dc-text); }
.dc-empty__acts { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:var(--dc-3); margin-top:var(--dc-2); }
.dc-empty__btn { min-height:44px; padding:0 var(--dc-5); border:1px solid var(--dc-brand); border-radius:var(--dc-r-sm); background:var(--dc-brand); color:var(--dc-text-on); font:inherit; font-weight:600; cursor:pointer; }
.dc-empty__btn:hover { background:var(--dc-brand-hi); border-color:var(--dc-brand-hi); }
.dc-empty__btn--ghost { border-color:var(--dc-line-field); background:var(--dc-surface); color:var(--dc-text); }
.dc-empty__btn--ghost:hover { background:var(--dc-sunken); border-color:var(--dc-line-field); }
.dc-empty__link { font-size:14px; color:var(--dc-brand-text); }

이렇게 씁니다

  • 왜 비었는지와 다음에 할 일을 한 쌍으로 적는다
  • 처음이라 비었을 때와 검색 결과가 없을 때의 글을 다르게 쓴다
  • 버튼은 하나만 — 여기서 할 수 있는 가장 쉬운 일로

주의할 점

  • 그림만 두고 글을 빼지 않는다. 그림에는 aria-hidden 을 준다
  • '데이터가 없습니다'는 사용자 잘못처럼 읽힌다. 무엇을 하면 채워지는지 쓴다

다음에 볼 것