Loading
기다리는 시간과 맥락에 맞게 Spinner, Skeleton, Progress bar 를 골라요.
로딩 표시는 "시스템이 일하고 있어요" 라는 신호예요. 너무 빨리 띄우면 화면이 깜빡이고, 너무 늦게 띄우면 멈춘 것처럼 보여요. 얼마나 기다리는지, 무엇을 기다리는지, 진행률을 알 수 있는지에 따라 컴포넌트를 골라요.
무엇을 언제
| 상황 | 컴포넌트 | 예 |
|---|---|---|
| 화면 구조를 알고, 콘텐츠를 불러오는 중 | Skeleton | 보드 카드, 이슈 목록, 댓글 |
| 결과가 곧 나타나지만 모양을 예측하기 어려움 | Spinner | 검색 결과, 패널 내용 |
| 버튼으로 시작한 작업 | Button isLoading | 저장, 제출 |
| 진행률을 알 수 있는 긴 작업 | Progress bar | 파일 업로드, 가져오기 |
| 여러 단계로 나뉜 작업 | Progress tracker | 프로젝트 설정 마법사 |
시간 기준
| 기다림 | 처리 |
|---|---|
| 1초 미만 | 아무것도 띄우지 않아요. 깜빡임이 오히려 느리게 느껴져요. |
| 1~10초 | Spinner 나 Skeleton 을 보여줘요. |
| 10초 이상 | 진행률이 보이는 Progress bar 를 쓰고, 다른 작업을 계속할 수 있게 해요. |
지연 표시
응답이 빠를 때 깜빡임을 막으려면 로딩 표시를 짧게 늦게 띄워요. Spinner 의 delay 를 쓰거나, 300ms 정도 지난 뒤에 Skeleton 을 보여줘요.
Skeleton
- 실제 콘텐츠와 같은 크기·모양으로 그려서, 로딩이 끝났을 때 레이아웃이 밀리지 않게 해요.
- 시간이 꽤 걸린다면 반짝이는(shimmer) 효과를 써요. 아주 짧은 로딩이나 촘촘하게 반복되는 목록에서는 움직임이 산만할 수 있어요.
- 색은 은은하게 둬요. 상태 표시나 차트, 눌러야 하는 요소처럼 보이면 안 돼요.
- 콘텐츠가 준비되면 바로 걷어내요.
Spinner
- 한 화면에 하나만 보여줘요.
- 일부만 새로 고칠 때는 그 영역 안에 둬요. 위치가 애매하면 로딩이 끝난 뒤 사용자가 봐야 할 곳에 둬요.
- 기존 콘텐츠 위에 띄울 때는 콘텐츠에
opacity-(--ds-opacity-loading)을 줘서 흐리게 하고, 상호작용을 막아요. - 무엇을 하는 중인지
label을 꼭 줘요. ("불러오는 중", "저장하는 중") - 동작 줄이기 설정에서도 Spinner 는 계속 돌아요. 멈춘 Spinner 는 작업이 멈춘 것처럼 보이기 때문이에요.
Progress bar
- 진행률을 알 수 있다면
value로 실제 진행률을 보여줘요. 알 수 없다면isIndeterminate를 써요. - 끝나면
success모양으로 바꾸고, 결과는 Flag 로 알려줘요.
버튼 로딩
버튼으로 시작한 작업은 버튼 자체에 isLoading 을 줘요. 라벨 자리에 Spinner 가 나타나고 버튼 너비는 그대로라 레이아웃이 흔들리지 않아요. 로딩 중에는 다시 누를 수 없어요.
표와 목록
- 처음 불러올 때는 행 모양의 Skeleton 을, 정렬·페이지 이동처럼 이미 데이터가 있을 때는 표 위 Spinner 를 써요.
- 무한 스크롤은 목록 끝에 작은 Spinner 를 둬요.
실패했을 때
로딩이 실패하면 로딩 표시를 걷어내고, 그 자리에 무엇이 잘못됐는지와 다시 시도할 방법을 보여줘요. 영역 단위면 Section message, 화면 전체면 Empty state 의 오류 유형을 써요.