빈 상태 vs. 스켈레톤
빈 상태는 콘텐츠가 없다는 뜻이에요. 스켈레톤은 콘텐츠가 아직 로딩 중이고 모양은 알고 있다는 뜻이죠.
내용이 없는 이유와 다음에 해야 할 일을 설명하려면 빈 상태를 사용하세요. 레이아웃을 알 때 짧은 로드에는 스켈레톤을 사용하세요.
각 패턴이 무엇을 하는지 확인하세요
각 예제를 시도해 보세요. 그런 다음 그것이 수행하려는 작업에 대해 읽어보세요.
비어 있음, 오류 및 성공 상태 — 학습 번들
이 학습 번들은 세 가지 다른 앱 상태를 다룹니다. Empty는 아직 콘텐츠가 없음을 의미합니다. Error는 무언가가 실패했음을 의미합니다. Success는 완료를 확인합니다. 각 상태는 고유한 메시지와 다음 단계를 필요로 합니다. 이 번들은 하나의 표준 상태 용어가 아닙니다.
Save a guide to keep the patterns your team uses most within reach.
새 프로젝트 목록은 첫 항목을 어떻게 만드는지 알려줘요. 인터넷이 끊기면 다시 시도 버튼이 나타나고 필터는 그대로 저장돼요.
- 사용할 때
- 체크리스트로 이 가이드를 사용하십시오. 데이터에 따라 달라지는 모든 뷰의 각 상태를 디자인하십시오.
- 다음 경우에는 사용하지 마세요
- 빈 화면이나 막다른 길을 남기지 마세요. 실패를 설명하고 성공을 확인하세요.
- 코드에서 사용된 이름
status state machine
골격
Skeleton은 아직 로딩 중인 내용의 모양처럼 생긴 간단한 임시 화면이야.
프로필 페이지는 사진과 글이 들어갈 자리를 남겨둬요. 화면 구조는 자료가 불러와져도 흔들리지 않아요.
- 사용할 때
- 레이아웃이 알려져 있고 대기 상태가 쉽게 눈에 띌 때 사용하세요.
- 다음 경우에는 사용하지 마세요
- 거짓 세부 사항을 만들거나, 영원히 반짝이거나, 콘텐츠가 거의 동시에 나타날 때 스켈레톤을 사용하지 마세요.
- 코드에서 사용된 이름
aria-busy="true"
빠른 비교
| UI 패턴 | 이런 경우에 가장 좋아요 | 대상 아님 | 코드에서 사용된 이름 |
|---|---|---|---|
| 비어 있음, 오류 및 성공 상태 — 학습 번들Empty, Error & Success State — Learning Bundle | 체크리스트로 이 가이드를 사용하십시오. 데이터에 따라 달라지는 모든 뷰의 각 상태를 디자인하십시오. | 빈 화면이나 막다른 길을 남기지 마세요. 실패를 설명하고 성공을 확인하세요. | status state machine |
| 골격Skeleton | 레이아웃이 알려져 있고 대기 상태가 쉽게 눈에 띌 때 사용하세요. | 거짓 세부 사항을 만들거나, 영원히 반짝이거나, 콘텐츠가 거의 동시에 나타날 때 스켈레톤을 사용하지 마세요. | aria-busy="true" |
출시하기 전에
- 01
그 사람이 해야 할 일을 적으세요.
- 02
키보드, 포커스, 터치, 확대/축소, 로딩, 비어 있음, 오류 상태를 테스트하세요.
- 03
사람들이 마우스 오버나 동작 없이 동일한 정보를 얻을 수 있도록 하세요.
- 04
작은 화면과 큰 화면에서 실제 콘텐츠로 테스트하세요.
비교 요청 복사 가능
팀이 패턴 사이에서 선택하는 데 도움이 필요할 때 이것을 복사하세요.
실제 사용자 흐름에 가장 적합한 패턴을 비어 있음, 오류 및 성공 상태 — 학습 번들 (Empty, Error & Success State — Learning Bundle)、골격 (Skeleton)에서 선택하세요. 이 규칙 사용: 빈 상태는 콘텐츠가 없다는 뜻이에요. 스켈레톤은 콘텐츠가 아직 로딩 중이고 모양은 알고 있다는 뜻이죠. 작업, 콘텐츠 양, 흐름 중단 비용을 기록하세요. 키보드, 터치, 로딩, 오류, 축소 동작을 확인하세요. 선택 이유를 설명한 후 프로젝트 디자인 시스템으로 가장 작은 접근 가능한 버전을 만드세요.