Loading
로딩을 관리하는 데 필요한 요소, 시간에 따른 적합한 선택지와 단계별로 사용자 경험을 최적화하는 방법을 소개해요.
로딩의 기본 접근 방식은 프로세스 속도를 개선하는 거예요. 그러나 로딩을 완전히 피할 수 없는 상황도 있어요. 이럴 때는 사용자가 로딩 중임을 명확히 알 수 있도록 정보를 주고, 그에 맞는 경험을 설계하는 것이 중요해요.
Components
데이터 로딩 상태를 효과적으로 전달하기 위해 세 가지 주요 요소를 활용해요.
| Progress Circle | Progress Bar | Skeleton | |
|---|---|---|---|
| 형태 | 원형으로 된 로딩 인디케이터예요. | 선형 막대 형태로 가로로 표시돼요. | 페이지의 콘텐츠 구조를 추상적으로 묘사한 형태로, 배경을 회색 톤으로 표시해요. |
| 특징 | 구체적인 콘텐츠 레이아웃을 미리 보여줄 필요가 없을 때, 주로 짧게 끝나는 프로세스를 표시해요. | 시작과 끝이 명확한 설치, 업로드, 다운로드 등 연속적인 프로세스에 알맞아요. | 길거나 복잡한 데이터가 로딩될 때 곧 나타날 콘텐츠의 레이아웃을 미리 이해할 수 있게 해요. |
| 장점 | 화면 공간을 많이 차지하지 않고, 다양한 상황에 쉽게 적용할 수 있어요. | 어느 정도의 시간이 남았는지 파악할 수 있어요. | 콘텐츠가 어떻게 배치될지 예상할 수 있어 기다리는 동안의 불확실성을 줄여요. |
| 로딩 시간 | 짧은 로딩에 적합 (1~4초 이내) | 비교적 긴 로딩(1~10초)부터 10초 이상까지 적합 | 비교적 긴 로딩에 적합 (1~10초) |
Progress Circle
Progress Circle은 원을 이용해 로딩 상황을 표시하는 요소로, 로딩 유형에 따라 두 가지 방식으로 사용해요.
| Determinate Progress Circle | Indeterminate Progress Circle | |
|---|---|---|
| 목적 | 로딩이 끝날 때까지 남은 정도를 시각적으로 알려요 | 로딩이 진행 중임을 알려요 |
| 동작 | 원을 처음부터 끝까지 채워요 | 끊임없이 회전해요 |
불확정(Indeterminate) 지표는 진행 정도나 소요 시간이 가변적이거나 알 수 없을 때 써요. Progress Circle은 가장 다양하게 쓸 수 있는 불확정 로딩 표현이기도 해요.
확정(Determinate) 지표는 진행 정도나 소요 시간을 알거나 추정할 수 있을 때 써요. 다운로드, 업로드, 파일 변환처럼 오래 걸릴 수 있는 프로세스에 알맞아요.
Progress Bar
Progress Bar는 직선 트랙을 따라 진행 상태를 표시하는 요소로, 주로 외부 링크로 진입할 때처럼 페이지 전체의 로딩이 필요한 경우에 써요.
Skeleton
Skeleton은 콘텐츠가 로딩 중임을 시각적으로 전달해 사용자가 화면의 구조를 추상적으로 이해하도록 도와요. 사용자는 실제 콘텐츠가 더 빨리 로딩되고 있다고 느끼게 돼요.
Skeleton은 목록이나 카드처럼 반복되는 데이터 기반 화면, 또는 곧 나타날 콘텐츠의 구조를 미리 보여줄 수 있는 페이지에서 주로 써요.
실제 목록의 썸네일과 텍스트 줄 배치를 따라 그려요.
로딩 후 나타날 레이아웃과 다르면 화면이 크게 바뀌어 오히려 혼란스러워요.
Use Cases
로딩 상황은 발생하는 사례에 따라 여러 가지로 나눌 수 있어요.
첫 진입 시
사용자가 처음 서비스에 접속할 때 발생하는 로딩이에요.
사용할 수 있는 로딩 요소: Progress Circle(Indeterminate), Skeleton
페이지 전환 시
페이지를 이동하며 새로운 콘텐츠를 불러오는 상황이에요. 일반적으로 전체 화면에 로딩 상태를 표시해요.
사용할 수 있는 로딩 요소: Progress Circle(Indeterminate), Skeleton, Progress Bar
더 많은 정보를 불러올 때
무한 스크롤이나 지연 로딩처럼, 사용자가 스크롤할 때 추가 콘텐츠를 불러오는 상황이에요.
사용할 수 있는 로딩 요소: Progress Circle(Indeterminate)
데이터를 다시 요청할 때
새 데이터를 받고 싶은 상황으로, 가장 흔한 예는 당겨서 새로고침(Pull to Refresh)이에요.
사용할 수 있는 로딩 요소: Progress Circle(Determinate)
입력 데이터를 저장하거나 제출할 때
로그인이나 인증처럼 데이터를 저장·제출하면서 서버와 통신하느라 로딩이 생기는 상황이에요.
사용할 수 있는 로딩 요소: Progress Circle(Indeterminate), 버튼의 Loading 상태
상태를 전환했을 때
새 상태에 필요한 데이터를 서버에서 가져오거나, 이미지·동영상 같은 리소스를 불러오는 상황이에요.
사용할 수 있는 로딩 요소: Progress Circle(Indeterminate), Skeleton
Time-based Recommendations
로딩 요소는 예상되는 로딩 시간에 맞춰 골라야 해요. 그래야 기다리는 동안의 불편함을 줄이고 더 나은 경험을 줄 수 있어요.
| 예상 시간 | 사용자가 느끼는 정도 | 권장 요소 |
|---|---|---|
| 1초 이내 | 거의 느끼지 못해요 | 표시하지 않아요 |
| 1~4초 | 약간의 지연을 느껴요 | Progress Circle(Indeterminate), Skeleton |
| 4~10초 | 기다린다고 느끼고 지루해지기 시작해요 | Skeleton, Progress Circle(Indeterminate), Progress Bar |
| 10초 이상 | 기다림을 충분히 느껴요 | Progress Circle(Determinate), Progress Bar |
| 1분 이상 | 오래 걸린다고 느껴요 | Progress Circle(Determinate), Progress Bar |
1초 이내
로딩을 인식할 수 없을 만큼 짧은 시간이에요. 이때 로딩 요소를 표시하면 화면이 깜빡이는 플리커링이 생겨 오히려 경험을 해치므로 따로 표시하지 않아요.
1~4초 이내
빠르지만 알아챌 수 있는 지연이에요. 사용자의 주의를 잠시 끌 수 있어요.
4~10초 이내
눈에 띄게 기다려야 하는 시간이에요. 적절한 피드백과 관심 전환이 필요하므로, 로딩과 관련된 안내를 함께 주는 것을 권장해요.
10초 이상
진행 상황을 알리고 기다림을 덜 지루하게 만드는 것이 중요해요. 시스템에 문제가 없다는 것을 알 수 있도록 예상 소요 시간을 보여주는 것을 권장해요.
1분 이상
명확한 진행 상황을 보여주는 것이 중요해요. 백그라운드 처리 옵션과 로딩을 취소할 수 있는 옵션을 함께 주는 것이 좋아요.
Skeleton vs Progress Circle
두 요소 모두 로딩 상태를 표시하지만 서로 다른 경험을 줘요.
Skeleton을 쓰는 경우
- 레이아웃이 명확하고 다양한 데이터가 로드되는 화면: 이미지와 텍스트로 이뤄진 상품 상세 페이지처럼 구조가 고정돼 로딩 후에도 큰 변화가 없는 화면이에요. 페이지가 준비되고 있음을 쉽게 이해할 수 있어요.
- 곧 나타날 콘텐츠의 구조를 미리 보여주고 싶은 경우: 댓글처럼 반복되는 형태의 콘텐츠는 Skeleton으로 곧 로드될 구조를 쉽게 예측하게 할 수 있어요.
Progress Circle을 쓰는 경우
- 로딩 범위가 한정적인 경우: 공간이 제한되고 로딩 범위가 좁을 때 알맞아요. 예를 들어 채팅에서 메시지를 보내는 동안 해당 말풍선 옆에 Progress Circle을 표시해 전송 중임을 알릴 수 있어요.
버튼 안에서 로딩을 표현할 때는 Action Button의 loading 속성을 써요.
Loading Process Steps
로딩 상태는 사용자와 시스템이 주고받는 상호작용의 일부예요. 단계마다 알맞은 피드백을 주면 경험이 좋아져요. 아래는 위치 인증 시나리오를 예로 든 단계예요.
시작 단계
사용자가 페이지 요청이나 데이터 제출 같은 작업을 시작하면 로딩이 시작돼요. 이때 로딩이 시작됐음을 알리는 첫 피드백을 줘요.
위치 인증에 들어가는 순간 Progress Circle로 로딩 중임을 알리고, 1초 안에 끝나면 표시하지 않아요.
진행 단계
데이터 전송과 서버 처리가 진행되는 단계예요. 로딩이 계속되고 있음을 알리고, 길어지면 진행 상황을 시각적으로 보여줘 예측할 수 있게 해요.
위치 정보를 가져오는 동안 5초가 지나면 안내 문구로 아직 진행 중임을 알려요.
완료 단계
간단한 로딩이라면 완료 메시지가 필요 없어요. 피드백이 필요한 상황이라면 성공 메시지 같은 표시를 함께 줘요.
인증이 끝나면 현재 위치를 바탕으로 인증된 지역 정보를 보여줘요.
실패 단계
로딩에 실패하면 무엇이 잘못됐는지, 다음에 무엇을 할 수 있는지 설명하는 오류 메시지를 보여줘야 해요.
시작하고 10초가 지나도 끝나지 않으면 실패 메시지와 함께 다시 시도할 수 있는 버튼을 보여줘요.