기다리는 사용자: 멈춘 순간에도 경험은 계속된다

[UX] 로딩 컴포넌트 종류별로 파헤치기

벌써 12번째 사용자군요

안그래도 참을성 없는 우리인데..

그 아무도 기다리는 걸 좋아하지는 않을 겁니다. 특히 빠른 속도가 곧 품질의 상징처럼 느껴지는 디지털 세계에서는 더욱이요. 하지만 로딩 시간, 처리 지연, 각종 대기 상태는 마치 에러처럼 피할 수 없는 순간이며, 이 멈춰진 상태에서도 사용자 경험은 계속되어야 합니다.

우리는 늘 정상 시나리오만 염두한다(2)

사용자 도감 10화에서 다뤘던 [오류 상황]처럼, [멈춰진 상황] 또한 설계 과정에서 간과되기 쉬운 지점이예요. 대부분의 UX가 "끊김 없이 무언가를 '잘' 수행하는"상황을 전제로 하니까요. 검색을 하거나, 결제를 하거나, 콘텐츠를 소비하는- 즉, 서비스가 정상적으로 작동하는 시나리오만 상정하는 경우가 많습니다.

그러나 이 흐름이 멈추는 순간, 사용자는 시스템이 제대로 작동하고 있는지, 기다리면 해결되는게 맞는지 불안해하기 시작하죠. 따라서 바로 이 지점에서! 기다림의 UX가 필요하다는 것. 다행히 잘 설계된 대기 경험은 사용자의 몰입을 깨뜨리지 않으면서 흐름을 부드럽게 이어주고, 불필요한 이탈과 불안을 줄여줍니다. 그렇다면 멈춘 순간을 디자인하기 위해서는 어떤 UX 전략을 고민해야할까요?

---

1. 기다림의 패턴

모든 기다림이 똑같지는 않습니다. 10초를 기다려도, 시스템이 상태를 정확히 알려줄 수 있는지의 여부 등에 따라 사용자가 느끼는 감정과 경험, 그에 맞는 설계 전략이 달라져요.

3 pattern of wating UX

본 글에서는 기다림을 [예측 가능한/불가능한/선택을 유도하는] 3가지 패턴으로 분류하고, 각 상황에 맞는 디자인 방법과 실제 컴포넌트 적용 방침을 구체적으로 알아볼 예정입니다. 하나씩 뜯어보시죠.

---

2. 유형별 UX 설계 전략과 UI 컴포넌트 사례

❶ 예측 가능한 기다림

① 정의 및 사용자 심리

로딩, 처리, 도착 등의 '완료' 시점이 상대적으로 명확한 경우로, 남은 시간과 순서, 단계등을 안내할 수 있는 상태입니다. 사용자 입장에선 얼마나 기다려야하는지의 예상치를 알고 있기에 상대적으로 낮은 조바심과, 높은 신뢰를 느껴요. 단, 진행이 멈춰보이거나 잔여 프로세스가 대기 시간과 맞지 않는 경우, 신뢰도가 급격하게 떨어지므로 조심해야 합니다.

보통 명확한 ETA를 보여준다.

② 설계 전략과 적용 가능 대표 컴포넌트

진행률을 정확하고 투명하게 노출합니다. 신뢰를 주는 경험이 중요하므로, 과장된 ETA(Estimated Time of Arrival의 약자로, 도착/완료 예정 시간을 의미한다) 보다는 다소 보수적으로 예측값을 상정하는게 좋습니다.

예측 가능 컴포넌트: 각 요소를 결합하여 사용하기도 한다.

[1] Progress bar

전체 흐름에서 어느 지점까지 와 있는지를, 얼마나 남았는지를 시각적으로 표현한다.

[2] Timer

남은 시간이 짧고 정확할 시 제공한다. 서비스 사용 중간에 광고를 띄울 때(5초, 10초 뒤 Skip) 자주 사용된다.

[3] ETA 문구

택시나 배달 서비스 등에서 자주 활용되는 문구로, Timer을 쓰기에는 긴 시간이지만 잔여 시간을 상대적으로 명확히 안내할 수 있을 때 제공된다.

[4] Steper

다단계로 작업이 진행되어야할 경우 제공된다. '지난 과정 - 현재 단계 - 다음 단계'의 흐름 파악을 돕는 요소로, Progress bar(현재 단계에서의 진행률 표기)과 결합해 사용하는 경우도 많다.

---

❷ 예측 불가능한 기다림

① 정의 및 사용자 심리

서버 지연, 인증 처리 등 기다림의 소요 시간이 불분명한 상태입니다. 얼마나 기다려야하는지 알지 못하므로 사용자는 쉽게 불안해하고 의심하게 되는데요, 이 때 아무런 피드백이 없으면 문제가 생겼다고 인식하기 쉽습니다. 그 경우 동일한 작업을 반복적으로 시도하거나, 앱을 완전히 종료하는 등의 행동 양상을 보이죠.

보통 종료 지점 없이 반복되는 애니메이션을 활용한다.

② 설계 전략과 적용 가능 대표 컴포넌트

계산된 남은 시간을 알려줄 수 없으므로, '지금 뭔가 진행되고 있다, 서비스가 멈추지 않았다'는 감각을 제공하는데 주안점을 둡니다. 스피너, 스켈레톤 모션과 같은 로딩 애니메이션이 주로 활용되며, 분명한 ETA 정보 대신 "찾고 있어요", "약 _분 거리의 기사님을 찾고 있어요"등 진행 상태를 대략적으로 표현합니다.

예측 불가능 컴포넌트

[1] Loading spinner

가장 보편적으로 쓰이는 컴포넌트로, 보통 4초 이내의 비교적 짧고 부분적인 로딩이 필요할 때 사용된다.

[1-2] Spinner with Branding

스피너에 서비스의 브랜딩을 녹여 사용하는 경우다. 짧은 순간에도 사용자에게 일관된 브랜드 경험을 전달하는 디테일한 설계다. (브런치: 글 쓰는 플랫폼 아니랄까봐, 책장이 넘겨지는 듯한 애니메이션이 적용됐다.)

✅ 심화: 마이크로하지만, 짚고 넘어가야 할 [스피너 인터랙션 디테일]

동일한 스피너라도 어떤 모션을 주냐에 따라 사용자에게 전하는 의미와 감정이 완전히 달라진다는 사실. 정말 기본적이고 단순한 애니메이션이지만, 아래 두 가지 타입을 구분하여 이해할 필요가 있어요.

두 가지 타입의 스피너 인터랙션.

1. Indeterminate Type

로딩의 끝 시점을 예측할 수 없는 스피너로, 시작점과 종료점이 연결되어 있지 않은 모션입니다. 보통 서버 응답 속도가 예측 불가능할 때나 일시적인 지연 상황(데이터 요청, 인증 등)에 사용됩니다. 작동 중이라는 정말 최소한의 피드백을 제공하는 모션이기 때문에 기대 형성이 어려워요.

2. Determinate Type

로딩의 끝을 암시하거나 진행 상황을 유추할 수 있는 스피너로, Indeterminate 타입처럼 빠르게 회전하는 모션을 유지하나, 각 회전이 지나갈 수록 원 내부가 점진적으로 채워지는 시각적 피드백을 제공합니다. 따라서 로딩 시간이 예상 가능하지만 정확한 수치를 제공하기 어려울 때, 사용자에게 '조금만 기다리면 끝난다'라는 강한 감정적 신호가 필요할 때 사용돼요. 단, 사용자가 '곧 끝나겠구나'라는 기대를 품게 되므로 실제로 끝나지 않는다면 해당 타입은 사용하지 않는게 좋습니다.

워낙 기본적으로 사용되는 컴포넌트다보니 심층적으로 다뤄봤어요. 후후.

[2] 서술형 라이팅

진행 중이라는 감각을 풀어 표현한다. 정확히 남은 시간을 표기할 수 없어도, "곧 연결됩니다."등의 표현은 사용자가 기다리는 상황을 포기하지 않도록 감정적 안정감을 제공하는 심리적 완충 장치로 작동한다.

[3] Skeleton

실제 데이터가 올라오기 전, 이 자리에 어떤 형식으로 콘텐츠가 제공될 지의 화면 구조를 미리 보여주는 디자인 패턴이다.

---

⭕️ 잠깐! 루프 애니메이션에 대해 조금 더 파헤쳐보기.

짧은 로딩 구간: 특히 4~5초 이내의 대기 시간은 사용자 입장에서 그리 길지 않지만, 아무런 정보 없이 기다리게 되면 불안과 지루함이 빠르게 올라오는 순간입니다. 이때 가장 자주 활용되는 것이 바로 루프 애니메이션(Loop Animation)인데요. 루프 애니메이션은 이름 그대로 반복 재생되는 시각적 움직임으로, 서비스가 '멈추지 않고 계속 작동 중'이라는 인상을 주기 위해 사용됩니다.

대표적인 예로 스피너(Spinner)와 스켈레톤 UI(Skeleton UI)를 들 수 있습니다.

다양한 Spinner design

◼️ 우선 스피너는 가장 전통적인 형태의 루프 애니메이션이에요. 보통 원형 회전 형태를 띠며, 사용자가 버튼을 누르거나 모달이 열릴 때, 콘텐츠가 잠시 늦게 로드될 때 등, 전체 페이지 혹은 컴포넌트 레벨에서 대기를 알릴 때 주로 활용됩니다. 진행 상태를 직접 알려주지는 않지만, 최소한 "뭔가 되고 있다"는 감각은 제공하죠. 공간을 많이 차지하지 않고, 인터랙션 직후 즉각적인 피드백을 줄 수 있다는 점에서 보편적으로 쓰입니다.

Skeleton UI

◼️ 반면 스켈레톤 UI는 실제 콘텐츠의 레이아웃을 흐릿한 회색 박스로 미리 보여주는 방식으로, 사용자가 기다리는 동안 페이지의 구조를 예측할 수 있게 만드는 디자인 패턴입니다. 기본적으로는 정적인 UI지만, 여기에 펄싱(pulsing)이나 쉐이머(shimmer) 같은 반복 애니메이션을 적용하면 일종의 루프 애니메이션처럼 작동하죠. 스켈레톤은 보통 앱 최초 진입 시 전체 페이지를 로딩할 때 자주 사용되나, 요즘은 무한 스크롤 구조가 많아지다보니 리스트 뷰나 카드 뷰, 프로필 등 컴포넌트 단위로 부분적인 스켈레톤 UI를 활용하는 경우를 자주 찾아볼 수 있습니다.

✅ 같은 루프 애니메이션이라도 스피너는 즉각적 피드백에, 스켈레톤은 구조 예측과 안정감에 초점을 둔다는 점에서 적용 맥락이 달라집니다. 단순히 돌고 있다는 메시지를 주는 스피너에 비해, 스켈레톤은 맥락과 구조까지 함께 전달할 수 있다는 점에서 체감 대기 시간을 더 짧게 만드는 효과가 있어요.

---

❸ 선택 유도형 기다림

① 정의 및 사용자 심리

마지막은 시스템이 처리를 완료했지만, 사용자의 행동이나 선택이 있어야 다음 단계로 넘어가는 상황입니다. 일반적인 '로딩'과는 조금 다른데요, 설계자가 흐름을 의도적으로 잠시 멈춤으로써 사용자의 행동과 결정을 유도하는 패턴입니다. "나에게 선택권이 있다"는 주체적인 감각은 사용자 몰입을 보다 강화할 수 있기 때문에, 또 다른 중요한 기다림 유형으로 분류할 수 있습니다.

② 설계 전략과 적용 가능 대표 컴포넌트

보통 콘텐츠 중심의 서비스에서 자주 활용되는 컴포넌트로, 자동 재생 구조 안에서 '짧은 딜레이 구간'과 '건너뛰기/바로 재생'의 선택 가능한 옵션을 제공하여 자동 흐름과 사용자 선택 흐름 사이의 균형을 설계합니다.

---

3. 기다림의 심리학

앞서 설명한 UX 전략들은 기다림이라는 불안정한 상황 속에서 심리적 안정을 유지하게 만드는 설계입니다.

사용자는 실제보다 기다림을 더 길게 체감하는 경향이 있고(→ 체감 시간의 왜곡), 아무런 정보가 없으면 "이게 정상인가?"같은 의문에 빠지며 불안을 느낍니다(→ 의문으로 비롯된 불안). 따라서 이를 해결하기 위해, [곧 기다림이 끝난다]라는 감각(→ 예측 가능성)을 심어주는 것이 중요한 것이고, 실제 처리가 느리더라도 로딩 애니메이션과 같은 눈에 보이는 단서를 통해 '잘 진행되는 중'이라는 일종의 착각(→ 진행의 환상)을 만드는거예요.

---

잘 기다리게 만드는 UX 디자인, 6가지.

1️⃣ 즉각적인 피드백이 핵심이다.

✏️ 반응이 없으면 사용자는 다시 눌러보거나, 시스템이 멈췄다고 생각해 앱을 종료해버리는 등 과정에서 이탈할 수 있어요. 1~2초라는 짧은 순간이더라도, 즉각적인 피드백을 제공하세요.

2️⃣ 시각적 단서를 적절하게 사용하세요.

✏️ 현재 잘 돌아가고 있음을 시각적으로 표현해주세요. 본문에서 자세히 다뤘던 주요 컴포넌트(Progress bar, Loading spinner, 스켈레톤 UI, Steper 등)를 목적과 맥락에 맞게 사용합니다.

3️⃣ 현실적인 기대치를 설정하세요.

✏️ 사용자가 기다릴 수 있는 한계를 넘지 않도록, 솔직하고 현실적인 시간 정보를 제공하세요. 예상 시간은 보수적으로 접근하는 편이 좋습니다. 특히 [약 2분 소요 예정]이었으나, 상황이 바뀌었다면 ETA를 바로 업데이트하여[2분→ 3분으로 변경] 정보의 신뢰도를 높이세요.

4️⃣ 대안을 제공하세요.

✏️ 오랜 기다림이 예상될 경우, 사용자가 상황을 유연하게 조정할 수 있도록 [대기 끝나면 알림 받기] 등의 다른 옵션을 제공해 주세요. 상담원 연결을 기다리고 있는 중이라면 'AI 챗봇으로도 해결해 볼 수 있어요'등의 버튼을 준다던지요.

5️⃣ 기다리는 시간을 '의미 있는 경험'으로 전환해 보세요.

✏️ 단순히 시간만 보내게 하지 말고, 가치 있거나 유쾌한 콘텐츠를 통해 잠시 감정을 환기시켜주세요. 듀오링고는 로딩 중에 간단한 퀴즈나 단어를 알려주고 있답니다.

6️⃣ 일러스트 등 브랜드 모션을 활용하는 것도 방법.

✏️ 서비스 톤과 일치한다는 전제 하에, 브랜드 특성을 녹인 유머나 감성적인 표현(모션)을 제공해보세요. 단, 자주 반복하기보다는 초기 서비스 진입 단계(Splash, 로그인 등)와 같이 브랜드 인상을 강화시키는 구간에서 사용하는 편을 권장드려요.

---

기다리지 않는 환경이 최선이겠지만.

서버 응답, 데이터 처리, 복잡한 인터페이스 환경 속에서 '로딩'은 피할 수 없는 현실입니다. 게다가 앱에 담기는 정보가 많아질수록, 사용자가 밟아야하는 프로세스가 다양해질수록 우리는 더 많은 기다림—등록, 제출, 확인의 과정을 마주하게 되죠. 속도를 높이는 기술에는 분명 한계가 있습니다. 그래서 그 이후부터는, 얼마나 잘 기다릴 수 있도록 설계했는가가 오히려 서비스의 품질을 좌우할지도 몰라요. 생각보다 자주 마주치는 순간인 만큼, 더 정교하게, 더 신중하게 디자인해주자구요.

요약해 봅시다.

✔️ 기다림의 3가지 패턴

❶ 예측 가능한 기다림

: 로딩, 처리, 도착 등의 '완료' 시점이 상대적으로 명확한 경우로, 남은 시간과 순서, 단계등을 안내할 수 있는 상태. 대표 컴포넌트로는 [Progress bar, Timer, ETA 문구, Steper]가 있다.

❷ 예측 불가능한 기다림

: 서버 지연, 인증 처리 등 기다림의 소요 시간이 불분명한 상태. 대표 컴포넌트로는 [Loading spinner, 서술형 라이팅, Skeleton UI]가 있다. 4-5초 내외의 짧은 로딩의 경우, 루프 애니메이션이 적용된 스피너와 스켈레톤 모션이 활용된다.

❸ 선택 유도형 기다림

: 설계자가 흐름을 의도적으로 잠시 멈춤으로써 사용자의 행동과 결정을 유도하는 패턴으로, 주로 영상/OTT 서비스에서 다음 콘텐츠를 자동 재생할 때 쓰인다.

✔️ 잘 기다리게 만드는 UX 디자인 전략

즉각적인 피드백이 핵심이다.

시각적 단서를 적절하게 사용하세요.

현실적인 기대치를 설정하세요.

대안을 제공하세요.

기다리는 시간을 '의미 있는 경험'으로 전환해 보세요.

일러스트 등 브랜드 모션을 활용하는 것도 방법입니다.

@Greening Brunch book ㅣ Ep (12)

UX/UI 디자인에서 가장 중요한 것은, 결국 사용자를 이해하는 것. 본 시리즈에서는 다양한 유형의 사용자들을 분석하고, 그들의 심리와 행동 패턴을 UX 설계 원칙과 함께 탐구합니다.

* 참고 자료:

https://www.nngroup.com/articles/designing-for-waits-and-interruptions/

Designing for Long Waits and Interruptions: Mitigating Breaks in Workflow in Complex Application Design

https://uxdesign.cc/loading-ux-make-users-not-care-about-having-to-wait-c3b02a0220b5

Loading UX: make users not care about having to wait

https://boldist.co/usability/loading-spinner-ux-killer/

Your Loading Spinner Is a UX Killer! Here’s an Alternative