Loading
Loading (로딩)
로딩 패턴은 정보를 처리하고 화면에 나타내는 데 시간이 오래 걸릴 때 사용해요. 스켈레톤 상태(skeleton states)와 로딩 컴포넌트는 데이터가 로딩 중이고 화면이 멈춘 것이 아님을 전달하는 두 가지 시각적 표시자입니다.
출처: Loading
본문
개요 (Overview)
로딩 전략은 사용자에게 요청이 진행 중임을 보장하고 앱에서 더 짧은 로드 시간의 착시를 만들 수 있어요. Nielsen Norman Group의 연구에 따르면 스켈레톤 상태와 다른 로딩 표시자는 사용자 만족도를 개선합니다.
이 패턴에서는 스켈레톤 상태, 로딩 표시자, 점진적 로딩을 살펴볼게요.
스켈레톤 상태 (Skeleton states)
스켈레톤 상태는 페이지의 정보가 아직 완전히 로드되지 않았음을 나타내기 위해 초기 페이지 로드에 사용되는 컴포넌트의 단순화된 버전이에요. 컴포넌트와 콘텐츠가 페이지를 채우면 몇 초만 나타나고 사라져야 합니다.
스켈레톤 상태는 페이지가 멈추지 않고 데이터가 여전히 로딩 중임을 전달하기 위해 모션을 사용해요. 이는 사용자 불확실성을 줄이는 데 도움이 될 수 있습니다.
스켈레톤 상태는 타일과 구조화된 리스트 같은 컨테이너 기반 컴포넌트나 데이터 테이블과 카드 같은 데이터 기반 컴포넌트에만 사용하세요. 대부분의 경우 동작 컴포넌트(예: 버튼, 입력 필드, 체크박스, 토글)는 스켈레톤 상태가 필요하지 않습니다.
토스트 알림, 오버플로 메뉴, 드롭다운 항목, 모달, 로더를 스켈레톤 상태로 절대 나타내지 마세요. 모달 안의 요소는 스켈레톤 상태를 가질 수 있지만, 모달 자체는 그래서는 안 됩니다.
로딩 표시자 (Loading indicators)
로딩 표시자는 사용자 동작이 처리 중임을 알립니다. 프로그레스 바와 달리 로딩 표시자는 로딩이 발생 중임을 알릴 뿐 진행 상황에 대한 어떤 표시도 주지 않아요. 프로세스 완료에 잠시보다 더 걸린다면 프로그레스 인디케이터를 대신 사용하세요.
전체 화면 로딩 표시자는 전체 애플리케이션이 처리 중임을 알려주는 반면, 인라인 표시자는 특정 선택이나 동작이 처리 중임을 보여줍니다.
전체 화면 로딩 (Full-screen loading)
전체 페이지가 처리 중일 때 로딩 컴포넌트를 사용해야 해요. 이것은 사용자가 데이터를 제출하거나 저장한 후에 자주 적용됩니다.
프로세스가 몇 분 이상 걸릴 것이라면 알림을 포함하는 것을 고려하세요.
| When to use | |
|---|---|
| 동작이 일시적으로 애플리케이션을 비활성화 | 사용자의 동작이 처리 중에 일시적으로 애플리케이션을 비활성화하면 로딩 표시자와 전체 화면 오버레이를 사용하세요. |
| 처리가 몇 초 이상 걸림 | 로딩 프로세스가 애플리케이션의 전체 리소스를 요구하고 잠시보다 더 걸릴 것이라면 전체 화면 로딩 표시자를 사용하세요. |
| 사용자 입력의 데이터가 저장되거나 제출 중 | 사용자 입력 다음의 데이터 저장은 종종 몇 순간 걸려요. 로딩 표시자를 사용하면 사용자가 계속하기 전에 애플리케이션이 처리를 끝내도록 합니다. |
인라인 로딩 (Inline loading)
단일 컴포넌트가 처리 중일 때 인라인 로딩 컴포넌트를 사용하세요. 예를 들어 관리자가 사용자를 초대할 때 인라인 로딩 컴포넌트는 시스템이 초대 요청을 처리 중임을 나타냅니다.
점진적 로딩 (Progressive loading)
점진적 로딩은 페이지를 배치 단위로 로드하는 기법이에요. 페이지의 가장 단순한 뷰가 먼저 로드되고, 전체 뷰포트가 로드될 때까지 점진적으로 더 상세한 배치가 따라옵니다.
첫 배치에는 페이지의 기본 구조(컨테이너 기반 컴포넌트의 스켈레톤 상태 버전), 데이터 기반 텍스트(텍스트의 스켈레톤 상태 버전), 비데이터 텍스트를 보여줘야 해요. 뒤따르는 배치에는 이미지, 뷰포트 밖의 콘텐츠, 인터랙티브(동작 기반) 컴포넌트, 데이터 기반 텍스트가 포함될 수 있습니다.
모든 항목이 스켈레톤 상태를 필요로 하지는 않으며 로드될 때까지 음수 또는 공백으로 표현될 수 있어요. 예를 들어 600 x 600px 이미지는 전체 이미지가 로드될 때까지 600 x 600px 영역의 공백으로 보여질 수 있습니다.
| When to use | |
|---|---|
| 페이지 뷰 로드가 느림 | 대시보드처럼 여러 소스에서 데이터를 가져오는 페이지는 로드가 느릴 수 있어요. |
| 사용자가 테이블 뷰에서 필터나 패싯을 변경 | 테이블은 큰 데이터 세트에서 정보를 가져올 수 있어 처리가 몇 순간 걸릴 수 있어요. |
더 보기 (Load more options)
더 보기(Load more) 옵션은 옵션의 작은 일부만 표시되는 리스트를 확장하는 데 사용될 수 있어요. 옵션 리스트가 데이터베이스를 통해 채워지는 경우에도 사용될 수 있습니다. Load more를 사용하면 데이터가 점진적 배치로 로드될 수 있게 해줍니다.
접근성 (Accessibility)
스크린 리더는 애플리케이션이 로딩 중이거나, 바쁘거나, 멈추거나, 프로세스가 실패하면 사용자에게 알려야 합니다.
특정 로딩 접근성 문제는 WCAG의 Notification of Loading/Busy 문서를 참고하고 로딩 컴포넌트의 접근성 가이드라인을 따르세요.
관련 (Related)
컴포넌트 (Components)
- 데이터 테이블 (Data table)
- 로딩 (Loading)
- 페이지네이션 (Pagination)
패턴 (Patterns)
- 빈 상태 (Empty states)
- 폼 (Forms)
- 알림 (Notifications)
참고 자료 (References)
- Bill Chung, Everything you need to know about skeleton states (Medium UX Collective, 2018)
- Jakob Nielsen, Progress Indicators Make a Slow System Less Insufferable (Nielsen Norman Group, 2001)
- Web Content Accessibility Guidelines, Notification of Loading/Busy (W3C, 2016)
더 알아보기 (Learn more)
로딩 패턴은 데이터 처리 중 화면이 멈추지 않았음을 사용자에게 확신시키는 데 핵심이에요. 초기 로드에는 스켈레톤 상태를 사용하되 컨테이너·데이터 기반 컴포넌트에 국한하고, 단일 동작 처리에는 인라인 로딩을, 전체 페이지 처리에는 전체 화면 로딩을 사용하세요. 점진적 로딩과 Load more 옵션으로 큰 데이터를 배치 단위로 로드하고, 스크린 리더에 로딩 상태를 알리는 것도 잊지 마세요.