④ 로딩 · 빈 상태 · 결과
데이터가 있기 전, 없을 때, 일이 끝난 뒤. 세 화면은 한 세트로 함께 설계합니다.
⚠️
가장 자주 빠뜨리는 화면입니다. 데이터가 있는 상태만 만들어 두면, 실제 사용자는 처음 들어온 순간 빈 화면을 봅니다.
① 로딩 — 무엇을 기다리는지 알립니다
| 기다리는 시간 | 무엇을 |
|---|---|
| ~1초 | 아무것도 안 함 — 깜빡임이 오히려 거슬립니다 |
| 1~3초 | 로더 + “무엇을 불러오는 중”이라는 문장 |
| 3초 이상 / 화면 전체 | 스켈레톤 — 곧 나올 화면의 골격을 미리 |
<span class="jt-loader" role="status" aria-label="불러오는 중"></span>
<div aria-hidden="true">
<div class="jt-skeleton" style="height:14px;width:80%"></div>
<div class="jt-skeleton" style="height:14px;width:55%"></div>
</div>스켈레톤은 aria-hidden="true"입니다. 의미 없는 회색 막대를 스크린리더가 읽으면 안 됩니다.
그리고 실제 화면과 같은 모양이어야 합니다 — 다르면 로딩이 끝나는 순간 화면이 튑니다.
② 빈 상태 — 다음 행동을 안내합니다
<div class="jt-empty">
<span class="jt-ico-mask jt-ico-lg" style="--jt-ico-url:url(/brand/icons/inventory_2.svg)" aria-hidden="true"></span>
<p class="jt-empty-title">등록된 품목이 없습니다</p>
<p class="jt-empty-desc">품목을 먼저 등록하면 적재 최적화를 계산할 수 있습니다.</p>
<button class="jt-btn">품목 등록</button>
</div>빈 상태는 세 종류이고 문구가 서로 달라야 합니다.
| 종류 | 제목 | 다음 행동 |
|---|---|---|
| 아직 아무것도 없음 (첫 사용) | 등록된 품목이 없습니다 | 품목 등록 |
| 검색·필터 결과 없음 | 조건에 맞는 결과가 없습니다 | 필터 초기화 |
| 오류로 못 불러옴 | 불러오지 못했습니다 | 다시 시도 |
전부 “데이터 없음”으로 처리하면 사용자가 무엇을 해야 할지 알 수 없습니다.
다음 행동 버튼은 하나만 두세요. 여러 개면 무엇을 할지 더 헷갈립니다.
③ 결과 — 끝났음을 알리고 길을 엽니다
<div class="jt-result" role="status">
<span class="jt-result-icon jt-result-pass">…</span>
<h3 class="jt-result-title">시험성적서를 발행했습니다</h3>
<p class="jt-result-desc">LOT 26H21-03 · 적합</p>
<div class="jt-row" style="justify-content:center">
<button class="jt-btn">PDF 내려받기</button>
<button class="jt-btn-ghost">목록으로</button>
</div>
</div>- 무엇이 끝났는지 구체적으로 — “완료되었습니다”보다 “시험성적서를 발행했습니다”
- 다음 행동 2개까지 — 방금 만든 것을 보는 길(주) + 원래 자리로 돌아가는 길(보조)
- 실패도 같은 형태로.
jt-result-fail+ 무엇을 다시 하면 되는지
하지 말 것
- 빈 화면을 그냥 비워두기
- “데이터 없음” 한 줄만 두기
- 스켈레톤을 실제 화면과 다른 모양으로 만들기
- 결과 화면에 다음 행동이 없어 뒤로가기밖에 못 하게 하기
- 로딩 중에 화면 높이가 변해 버튼이 튀어 오르게 하기 — 스켈레톤이 실제 높이를 잡아줘야 합니다
접근성
- 로더
role="status"+aria-label/ 스켈레톤aria-hidden="true" - 결과 화면을
role="status"로 감싸면 화면 전환이 읽힙니다 - 아이콘은 장식이므로
aria-hidden. 의미는 제목 글자가 전달합니다 prefers-reduced-motion에서 shimmer가 자동으로 멈춥니다 (토큰 파일이 처리)