로딩을 관리하는 데 필요한 요소, 시간에 따른 적합한 선택지와 단계별로 사용자 경험을 최적화하는 방법에 대해 소개합니다.

로딩의 기본 접근 방식은 프로세스 속도를 개선하는 것입니다. 그러나 로딩을 완전히 피할 수 없는 상황도 발생할 수 있습니다. 이러한 경우, 사용자가 로딩 중임을 명확히 인지하도록 정보를 제공하고 이에 맞는 사용자 경험을 설계하는 것이 중요합니다.

당근에서는 데이터 로딩 상태를 효과적으로 전달하기 위해 세 가지 주요 요소를 활용하고 있습니다.

	Progress Circle	Progress Bar	Skeleton
형태	원형으로 된 로딩 인디케이터입니다.	선형 막대 형태로 가로로 표시됩니다.	페이지의 콘텐츠 구조를 추상적으로 묘사한 형태로, 배경을 회색 톤으로 표시합니다.
특징	구체적인 콘텐츠 레이아웃을 미리 보여줄 필요가 없을 때, 주로 짧게 완료되는 프로세스를 표시하는 데 사용됩니다.	시작과 끝이 명확한 설치, 업로드, 다운로드 및 기타 연속적인 프로세스를 표시할 때 적합합니다.	길거나 복잡한 데이터가 로딩될 때 사용자가 곧 로딩될 콘텐츠의 레이아웃을 미리 이해할 수 있게 합니다.
장점	스크린의 공간을 많이 차지하지 않습니다. 다양한 상황에 쉽게 적용할 수 있는 범용적인 방법입니다.	사용자가 어느 정도의 시간이 남았는지 파악할 수 있게 해줍니다.	사용자에게 콘텐츠가 실제로 어떻게 배치될지를 예상할 수 있게 하여 기다리는 동안의 불확실성을 줄입니다.
로딩 시간	짧은 로딩 시에 적합 (1~4초 이내)	상대적으로 긴 로딩 시간 (1~10초 내)에서 10초 이상 걸리는 로딩 시간에도 적합	상대적으로 긴 로딩 시간에 적합 (1~10초 내)

1. Progress Circle

Progress Circle은 원을 이용해 로딩 상황을 표시하는 요소로, 로딩 유형에 따라 두 가지 방식으로 사용할 수 있습니다.

	Determinate Progress Circle (확정 로딩 시)	Indeterminate Progress Circle (불확정 로딩 시)
로딩 상황	로딩 시간을 알거나 추정할 수 있는 경우	로딩 시간이 가변적이거나 알 수 없는 경우
목적	로딩 프로세스가 완료될 때까지 남은 시간을 시각적으로 알림	로딩 프로세스가 진행 중임을 알림
동작	원을 처음부터 끝까지 채움	끊임없이 회전

1-1. 불확정 로딩 시 (Indeterminate)

불확정 로딩 지표는 프로세스의 진행이나 지속 시간이 가변적이거나 알 수 없는 경우 사용됩니다. Progress Circle은 가장 다재다능하게 사용할 수 있는 불확정 로딩 표현 요소이기도 합니다.

1-2. 확정 로딩 시 (Determinate)

확정 로딩 지표는 프로세스의 진행 또는 지속 시간을 알거나 추정할 수 있는 경우에 사용될 수 있습니다. 다운로드, 업로드, 파일 변환과 같은 프로세스와 같이 오래 걸릴 가능성이 있는 프로세스에 적합합니다.

2. Progress bar

Progress Bar는 직선 트랙을 따라 애니메이션을 적용해 진행 및 로딩 상태를 표시하는 요소로, 당근에서는 주로 외부 링크로 진입 시 로딩이 필요한 경우 사용됩니다.

3. Skeleton

Skeleton은 콘텐츠가 로딩 중임을 시각적으로 전달하여 사용자가 화면의 구조를 추상적으로 이해하도록 돕는 요소입니다. 이를 통해 사용자는 실제 콘텐츠가 더 빠르게 로딩되고 있다고 인식할 수 있습니다.

Skeleton은 주로 목록이나 카드 뷰와 같은 반복되는 데이터 기반의 화면 또는 곧 나타날 콘텐츠의 구조를 미리 보여줄 수 있는 페이지에서 사용됩니다.

로딩 상황: 사례별 분석

로딩 상황은 발생하는 사례에 따라 여러 가지로 나눌 수 있습니다. 당근에서는 사용자가 경험할 수 있는 로딩 상황을 다음과 같이 구분할 수 있습니다.

1. 첫 진입 시

사용자가 처음 서비스에 접속할 때 발생하는 로딩 상황입니다.

사용할 수 있는 로딩 요소: Progress Circle(Indeterminate), Skeleton

2. 페이지 전환 시

페이지 간 이동 시, 새로운 콘텐츠를 로드하는 상황입니다. 일반적으로 이러한 경우 전체 화면에 로딩 상태를 표시합니다.

사용할 수 있는 로딩 요소: Progress Circle(Indeterminate), Skeleton, Progress Bar

3. 더 많은 정보를 로드 시

무한 스크롤 혹은 지연 로딩을 사용하는 경우로 사용자가 페이지를 스크롤 할 때 추가 콘텐츠가 로드되는 상황이에요.

사용할 수 있는 로딩 요소: Progress Circle(Indeterminate)

4. 데이터 재요청 시

새로운 데이터를 받고 싶은 상황으로, 가장 많이 경험하는 상황은 PTR(pull to refresh)와 같아요.

사용할 수 있는 로딩 요소: Progress Circle(Determinate)

5. 입력 데이터를 저장 혹은 제출할 시

로그인이나 인증 과정과 같이 데이터를 저장하고 제출할 때 서버와의 통신으로 인해 로딩이 발생하는 상황이에요.

사용할 수 있는 로딩 요소: Progress Circle(Indeterminate), Loading Animation

6. 상태를 전환했을 시

새로운 상태에 필요한 데이터를 서버에 가져올 때 혹은 새로운 상태에 필요한 이미지, 비디오 등의 리소스를 로드할 때의 상황이에요.

사용할 수 있는 로딩 요소: Progress Circle(Indeterminate), Skeleton

로딩 시간에 따른 적합한 요소

로딩 요소는 예상되는 로딩 시간에 맞춰 적절하게 선택되어야 하며, 이를 통해 사용자가 기다리는 동안 불편함을 최소화하고 더 나은 사용자 경험을 제공할 수 있습니다.

따라서 로딩 시간에 따라 적합한 요소를 사용하는 것이 중요합니다.

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분 이상 걸리는 경우, 명확한 진행 상황을 표시하는 것이 중요합니다. 또한, 백그라운드 처리 옵션을 제공하는 것을 고려하고, 로딩 과정을 취소할 수 있는 옵션을 제공하는 것이 좋습니다.

Skeleton vs Progress Circle: 선택 가이드

Skeleton과 Progress Circle(Spinner)를 헷갈려하는 이유는 두 요소 모두 로딩 상태를 표시하지만, 서로 다른 사용자 경험을 제공하기 때문입니다. 이에 따라 두 가지 주요 로딩 UI인 Skeleton과 Progress Circle의 차이점과 적절한 사용법을 설명합니다.

Skeleton 사용이 적합한 경우

1. 레이아웃이 명확하고, 다양한 데이터가 로드되는 화면일 경우

레이아웃이 명확하고 이미지와 텍스트의 조합으로 이루어진 제품 상세 페이지의 경우 Skeleton을 사용하는 것이 적합합니다. 이러한 페이지는 콘텐츠 구조가 고정되어 있어 로딩 후에도 큰 변화가 없기 때문에, Skeleton을 사용하면 사용자가 페이지가 준비되고 있음을 시각적으로 쉽게 이해할 수 있습니다.