01 · Skeleton
콘텐츠 자리채움
불러오는 동안 모양만 먼저 보여줍니다. 레이아웃이 갑자기 밀리지 않습니다.
대기 중
브랜드 웹사이트 리뉴얼
느린 곳을 재서 고치고, 필요한 기능만 얹었습니다.
Loading · empty · error states
기다리는 1초를,
어떻게 설계하는가
데이터가 오기 전, 아무것도 없을 때, 무언가 실패했을 때 — 화면은 비어 있으면 안 됩니다. 아래 6가지는 그 사이를 채우는 상태들입니다. 카드마다 “다시 보기”로 재생할 수 있습니다.
NOTE
새 화면을 새로 짓는 일에도, 이미 있는 화면의 로딩 상태만 다듬는 일에도 같은 원칙을 씁니다. 새로 짓는 일도, 이미 있는 것을 고치고 더하는 일도 합니다.
02 · Progressive image
흐림 → 선명
작은 이미지가 먼저 뜨고, 원본이 도착하면 선명해집니다.
03 · Optimistic UI
먼저 반영, 나중에 확인
서버 응답을 기다리지 않고 먼저 보여줍니다. 실패하면 되돌립니다.
대기 중
✓모바일 넘침 검사
✓문의 폼 검증
04 · Empty state
비어 있을 때
오류가 아니라 정말 없는 상태입니다. 다음 행동을 바로 제안합니다.
대기 중
05 · Error & retry
실패했을 때
무엇이 잘못됐는지 말하고, 다시 시도할 방법을 바로 붙입니다.
대기 중
06 · Saving states
저장 중 / 저장됨
바꾼 값이 실제로 저장되고 있는지, 끝났는지를 알려줍니다.
알림 이메일 받기
말이 아니라 상태로 보여줍니다.
“빠릅니다”라고 쓰는 대신, 로딩·빈·오류 상태를 실제로 눌러보게 했습니다. 화면이 무엇을 하고 있는지 사용자가 항상 알 수 있어야 합니다.