28.진행 표시기는 느린 시스템을 참을 수 있도록 한다

요약:

퍼센트 완료 막대나 로딩 스피너 같은 대기 애니메이션은 시스템이 현재 어떤 상태인지 사용자에게 알려주며, 불확실성을 줄여 사용자가 처리 과정을 더 참을 만하게 느끼도록 돕는다. 동적인 진행 표시기를 사용하는 사이트는 사용자 만족도가 더 높고, 사용자들은 더 오래 기다릴 의향이 있다.

웹 사용성을 위한 원래의 10가지 휴리스틱 중 하나인 ‘시스템 상태의 가시성’은 여전히 사용자 인터페이스 디자인에서 가장 중요하고 보편적으로 적용되는 원칙 중 하나이다. 이 원칙의 목표는 합리적인 시간 안에 시스템이나 인터페이스에서 무슨 일이 일어나고 있는지 사용자에게 피드백을 제공하며, 노먼의 상호작용 이론에서는 사용자와 시스템 사이의 평가 격차를 줄이는 것에 있다.

웹사이트와 애플리케이션에서 가장 흔한 시스템 피드백 형태 중 하나는 대기 애니메이션을 사용하는 진행 표시기이다. 이 디자인 요소는 사이트가 정보를 로딩하거나 처리하고 있을 때 ‘바쁨(busy)’ 상태를 보여준다. 이번 글에서는 진행 표시기의 주요 유형을 살펴보고, 상황에 따라 어떤 형태를 사용해야 하는지에 대한 권장 사항을 제시한다.

피드백의 힘: 사용자가 ‘시스템이 내 말을 듣고 있다’고 느끼게 하라

사용자의 행동에 적절한 피드백을 제공하면, 인터페이스는 시스템이 사용자의 입력을 이해했고 작업이 진행 중임을 확신시켜 준다. 이는 새로운 개념은 아니지만, 사용자 경험을 향상시키기 위해 반복해서 강조할 만한 중요한 원칙이다.

안타깝게도 많은 웹사이트와 컴퓨터 시스템은 정반대의 접근을 취하며, 사용자의 입력을 완전히 처리해 최종 결과를 보여주기 전까지 아무런 피드백을 제공하지 않는다. 이 경우 사용자는 시스템이 명령을 제대로 받았는지, 혹은 멈추거나 오류가 난 것은 아닌지 알 수 없어 큰 불안감을 느끼게 된다. 이러한 사용자-적대적 디자인은 불필요한 추가 클릭이나 중복 주문을 초래하곤 한다.

물론 가장 좋은 건 빠른 응답 시간이다. 하지만 서버 업그레이드를 한다고 해도 속도 가이드라인을 항상 만족시키는 것은 불가능하다. 이런 상황에서는 시스템이 사용자의 요청을 성실하게 처리하고 있다는 확신을 반드시 제공해야 한다. 결과가 나타나기까지 10초 이상 걸린다면, 언제 완료될 것인지 예상 시간도 함께 제공해야 한다. 그렇지 않으면 사용자가 시스템 대신 점심을 먹으러 떠날 것이다.

⸻

오프라인 사례: DMV(미국 차량등록국)에 전화했을 때

최근 나는 웹사이트에서 해결되지 않는 문제 때문에 캘리포니아 DMV에 전화해야 했다. 대기 시간이 끔찍할 것이라고 예상했기에 오후 시간을 비워두고 헤드폰을 끼고 전화 대기를 준비했다.

• 첫 번째 피드백은 예상대로 모든 상담원이 통화 중이라는 녹음 메시지였다.

• **보류 음악(on-hold music)**은 내 취향은 아니었지만, 전화를 끊기지 않고 연결이 유지되고 있다는 또 다른 형태의 피드백이었다. 게다가 음악을 들으며 피식 웃는 순간들 덕분에 기다리는 사실 자체를 잠시 잊기도 했다.

• 다음 메시지에서는 예상 대기 시간이 15~20분이라는 정보를 들을 수 있었다. 이 정보 덕분에 불확실성이 사라졌고, 그 15분을 어떻게 보낼지 내가 선택할 수 있게 되었다.

• 그리고 놀랍게도, 상담원이 가능해지면 DMV에서 나에게 다시 전화해 주겠다는 콜백 옵션까지 제공되었다. 기다리는 동안 줄에서 밀려나지 않는다는 보장도 있었다.

이로써 대기 시간을 대략 알게 되었고, 휴대폰을 들고 시간을 계속 확인하지 않아도 다른 일을 자유롭게 할 수 있었다.

촌스럽다고 농담을 듣는 보류 음악이지만, 여러 피드백이 제공된 덕분에 DMV와 연결되기까지의 대기 시간이 훨씬 덜 불편하게 느껴졌다. 결국 나는 그들의 서비스에 깊은 인상을 받았다. 이런 소규모 디자인 개선만으로도 두 배의 콜센터 상담원을 고용하는 것보다 훨씬 비용 효율적이었을 것이다. (게다가 인력을 늘려도 가장 혼잡한 시간대에는 여전히 부족했을 것이다.)

⸻

진행 표시기는 사용자에게 두 가지를 알려준다

1. 시스템이 이전 사용자 행동을 처리하는 데 시간이 더 필요하다(예: 파일 로딩, 업데이트 설치).

2. 대략 얼마나 시간이 남았는지.

진행 표시기는 다음과 같은 네 가지 주요 장점이 있다:

1. 시스템이 제대로 작동하고 있다는 확신을 준다.

DMV 사례에서 모든 상담원이 바쁘다는 메시지는 아무 피드백도 없는 것보다 훨씬 안심이 되었다.

2. 사용자가 기다리는 동안 볼 것이 생겨, 대기 시간이 덜 고통스럽다.

DMV의 ‘보류 음악’이 이 역할을 했다.

3. 기다릴 이유를 제공한다.

나는 DMV가 전화를 받기까지 약 15분이 걸린다는 걸 알고 있었기 때문에 기꺼이 기다릴 수 있었다.

4. 사용자가 기다림을 덜 인식하게 만든다.

사용자가 피드백을 처리하는 데 인지 자원을 쓰기 때문에 실제 대기 시간에 덜 집중하게 된다.

음악을 듣고 생각하는 동안 대기 시간이 덜 불쾌하게 느껴진 것처럼 말이다.

⸻

연구: 진행 표시기가 기다림의 고통을 줄인다

웹사이트를 대상으로 한 연구에서도 DMV의 보류 음악과 메시지가 수행한 역할과 동일하게, 그래픽 진행 표시기가 사용자에게 느껴지는 기다림의 부정적 경험을 완화하고, 사이트에 더 오래 머물도록 하는 효과가 있음이 확인되었다.

네브래스카–링컨 대학교 연구팀은 사람들이 웹페이지 로딩을 위해 얼마나 오래 기다릴지를 실험했다.

링크를 클릭한 후:

• 한 그룹은 계속 반복 재생되는(루프되는) 진행 막대 애니메이션을 보았고,

• 다른 통제 그룹은 아무런 진행 표시기도 보지 않았다.

연구 결과, 애니메이션을 본 사람들은 만족도가 높았고, 진행 표시기가 없는 그룹보다 평균 3배 더 오래 기다렸다.

대기 애니메이션(progress indicator)

인터넷 연결 속도는 매년 빨라지고 있지만, 느린 웹사이트 응답 시간은 여전히 흔하게 발생한다. 이는 사용자에게 큰 불편을 주며, 사람들이 작업이나 웹사이트 자체를 포기할 가능성을 높인다.

사용자가 시스템이 작업을 완료할 때까지 기다릴 의향은 여러 요인에 따라 달라진다:

• 목표나 작업의 긴급성과 복잡성

• 사용하는 맥락 (예: 줄 서 있는 동안 모바일로 시간을 때우는 상황인지, 중요한 프로젝트 파일을 급하게 업로드해야 하는 상황인지)

• 웹사이트나 유사한 과정에 대한 이전 경험을 기반으로 한 기대치

이런 상황들은 예측하거나 통제하기 어렵지만, 다음 가이드라인을 지키면 사용자가 페이지 로딩을 기다릴 가능성을 높일 수 있다.

⸻

항상 즉각적인 피드백을 제공하라

사용자의 대기 시간은 화면을 터치하거나, 마우스 버튼을 클릭하거나, 키보드를 누르거나, 음성 명령을 말하는 행동을 시작하는 순간부터 시작된다.

이때 시스템은 즉시 시각적 피드백을 제공해 요청을 받았음을 사용자에게 알려야 한다.

예를 들어:

• 버튼이 눌린 상태처럼 변화할 수 있고,

• 페이지가 새로 고침되는 모습을 보일 수도 있다.

시스템에서 아무 시각적 변화가 없으면 대부분의 사용자는 입력이 제대로 전달되지 않았다고 생각하고 다시 시도하게 된다.

⸻

약 1초 이상 걸리는 작업에는 진행 표시기를 사용하라

몇 초가 지나면 사용자의 주의는 분산되고, 결국 사이트를 떠날 수도 있다.

진행 표시기는 크게 두 가지 유형이 있다:

1. 반복(loop)되는 애니메이션

2. 진행률(%) 기반 표시기

어떤 것을 사용할지는 작업이 얼마나 오래 걸리는지에 주로 달려 있다.

1. 반복(looped) 애니메이션: 짧은 작업에만 사용하라

반복되는 애니메이션 그래픽은 시스템이 작동 중이라는 피드백을 제공하지만, 사용자가 얼마나 기다려야 하는지에 대한 정보는 주지 않는다.

일반적으로 볼 수 있는 로딩 스피너 아이콘이 이러한 진행 표시기의 대표적인 예다.

이러한 진행 표시기는 2~10초 정도 걸리는 작업에만 사용하는 것이 좋다.

1초 미만으로 끝나는 작업에 반복 애니메이션을 사용하면 오히려 산만해지고, 사용자는 화면에 잠깐 나타났다가 사라지는 무언가를 제대로 파악하지 못해 불안감을 느낄 수 있다.

개발 관점에서 보면 반복 애니메이션은 작업 시간을 추정할 필요가 없기 때문에 짧은 지연뿐 아니라 긴 지연에도 쉽게 사용하고 싶은 유혹이 있다.

그러나 10초 이상 걸리는 작업에는 반복 애니메이션을 추천하지 않는다.

사용자는 진행 상황이 보이지 않으면 빠르게 조급함을 느끼기 때문이다.

게다가 스피너가 계속 돌기만 하면 시스템이 여전히 작동 중인지, 멈춘 것인지 사용자 입장에서는 알 수 없어 결국 작업을 포기할 수도 있다.

(실제 사례로, 어떤 사용자는 한 테스트 세션에서 잡지 콘텐츠가 로딩되기를 15분 동안 기다렸다. 결국 앱이 멈춰 있었고 다시 시작해야 한다는 사실을 알게 되었는데, 이런 상황은 실제 서비스보다는 사용성 테스트에서 더 자주 발생한다.)

사용자가 왜 기다리고 있는지 설명하는 텍스트를 함께 제공하면 명확성이 높아질 수 있다.

예: “댓글 불러오는 중…”.

하지만 한 가지 주의할 점이 있다.

스피너처럼 계속 도는 아이콘은 서버에서 데이터를 불러오는 작업에 있어 위험할 수 있다.

왜냐하면 통신 품질은 개발자가 통제할 수 없는 경우가 많기 때문이다.

이론적으로는 2초면 끝날 요청이 실제로는 환경에 따라 15초 이상 걸릴 수 있다.

⸻

2. 퍼센트(%) 기반 진행 표시기: 10초 이상 걸리는 작업에 사용하라

퍼센트 기반 진행 표시기는 가장 정보량이 많고 신뢰성 있는 대기 애니메이션 방식이다.

이 방식은

• 현재 진행 상황,

• 완료된 양,

• 남은 양을

모두 보여주며, 대기 시간이 대략 어느 정도인지 사용자에게 알려준다.

이 정보는 사용자에게 선택권(기다릴지 말지 결정할 수 있는 능력) 을 주며,

프로세스 길이에 대한 불확실성을 줄이고,

사용자가 느끼는 체감 대기 시간까지 감소시킨다.

0~100%로 채워지는 **진행 막대(progress bar)**나 원형 로딩 게이지가 이러한 방식의 대표적인 예이다.

일반적으로 퍼센트(%) 기반 진행 표시기는 10초 이상 걸리는 긴 작업에 사용하는 것이 좋다.

완료를 향해 점진적으로 움직이는 시각적 표시기는 사용자를 안심시키고, 기다릴 의향도 높여 준다.

퍼센트 표시기는 작업이 10초 미만이더라도, 여러 문서나 레코드를 연속적으로 처리하는 작업이라면 사용할 수 있다.

이 경우 사용자는 시스템이 일정 개수의 항목을 처리하고 있다는 사실을 이해하기 때문이다.

반복 애니메이션과 마찬가지로,

예: “50개 중 3번째 주소 업데이트 중…”

과 같은 설명 텍스트를 함께 포함하라.

조금 시간이 걸리는 작업이라면, 사용자가 작업을 중단할 수 있는 옵션도 제공해야 한다.

그렇지 않으면 디자인이 시스템의 통제권을 빼앗는 형태가 되어, 사용자를 무력하게 만들 수 있다.

퍼센트 진행 표시기를 사용하면 사용자는 작업 처리 속도에 대한 기대치를 갖게 된다.

따라서 속도 변화는 즉시 눈에 띄고, 이는 사용자 만족도에 영향을 준다.

예를 들어 처음에는 빠르게 진행되다가 마지막 1%에서 멈칫한다면, 사용자는 큰 좌절감을 느끼며 진행 표시기의 장점이 사라지게 된다.

⸻

퍼센트 진행 표시기의 예상 시간 계산이 어려울 때 해결 방법

디자이너와 개발자에게 가장 어려운 부분은 전체 작업 시간이 정확히 얼마나 걸릴지 계산하는 것이다. 이를 해결하기 위한 방법은 다음과 같다:

• 초반은 느리게, 끝으로 갈수록 빠르게 진행되는 애니메이션을 사용하라.

이렇게 하면 시스템이 감당할 수 있는 것보다 빠른 기대치를 만들 위험이 줄어든다.

기대보다 더 빠른 완료는 만족도를 높이지만, 기대보다 느린 완료는 큰 실망을 준다.

(참고: 이 ‘느리게 시작해서 빠르게 끝나는’ 방식은 대기 애니메이션에만 해당된다.

설문조사에서는 반대로 빠르게 시작해서 느리게 끝나는 방식이 이탈률을 줄인다는 연구 결과가 있다.)

• 대략적인 시간 추정치를 제공하라.

정확히 맞추려 하지 말라. 어차피 언젠가 틀릴 수밖에 없으며, 사이트의 신뢰도만 떨어질 수 있다.

예: “1분 이상 걸릴 수 있습니다.”

“약 3분 남았습니다.”

이런 간단한 문구만으로도 사용자는 정보를 얻고 기다릴 의향이 생긴다.

항상 여유 시간을 포함해 표시하라.

실제로 더 빨리 끝나면 사용자에게는 기분 좋은 깜짝 선물이다.

사람들은 **“너무 빨리 끝나서 불만이다”**라고 불평하지 않는다.

• 퍼센트 대신 ’단계 수(steps)’를 표시하는 방법도 고려하라.

각 단계가 얼마나 걸리는지는 몰라도, 단계 수를 알면 사용자들은 대략적인 예상이 가능하다.

⸻

3. 정적인 진행 표시기: 사용하지 마라

마지막 종류의 피드백 방식은 정적인 진행 표시기다.

이는 움직이지 않는 이미지나 텍스트를 의미하며,

예: “불러오는 중…”

“요청을 처리하는 동안 잠시만 기다려 주세요.”

와 같은 메시지가 여기에 해당한다.

물론 아무 피드백이 없는 것보다는 낫지만, 정적 표시기는 무슨 일이 일어나고 있는지 충분한 정보를 제공하지 못한다.

시스템이 멈추거나 오류가 나도 사용자는 이를 알 방법이 없기 때문에 작업을 다시 시작해야 한다는 사실을 눈치채지 못한다.

따라서 정적인 표시기는 다른 유형의 진행 표시기로 대체하는 것이 좋다.

4. 다시 클릭하지 말라는 경고: 사용하지 마세요.

가장 나쁜 디자인 사례 중 하나는 “두 번 클릭하면 주문이 한 번 더 생성될 수 있습니다” (또는 송금, 기타 명령 대상)처럼 사용자에게 위협적인 경고를 주는 것입니다.

첫째로, 사용자 친화적 디자인에서는 사용자를 위협하지 않는 것이 기본 원칙입니다.

둘째로, 이런 장문의 경고 문구는 사용자가 이미 늦은 후에야 읽는 경우가 대부분이기 때문에 거의 소용이 없습니다.

추가 클릭을 막는 진짜 방법은, 첫 번째 클릭이 제대로 접수되어 처리 중이라는 것을 사용자에게 명확하게 보여주는 것입니다.

아이들, 게임, 그리고 진행 표시기에 대한 참고 사항

웹을 사용하는 어린이 연구에서, 로딩에 오래 걸리는 많은 인터랙티브 도구와 게임을 발견했습니다. 로딩 화면을 더 재미있고 흥미롭게 만들기 위해 많은 사이트가 영상 콘텐츠나 간단한 미니 게임을 넣어두었지만, 이는 도움이 되기보다 오히려 아이들을 혼란스럽게 만들었습니다.

아이들은 로딩 화면과 실제 게임을 구분하지 못했고, 임시 게임이 중간에 갑자기 멈추면(실제 게임을 시작하기 위해) 그 이유를 이해하지 못했습니다.

사용자의 흥미는 유지하면서도, 본 활동에서 주의를 분산시키지 않기 위해 다음과 같은 방법을 권장합니다:

• 오래 걸리는 활동에는 반드시 퍼센트 기반 진행 표시기를 사용하고, 아이들이 쉽게 알아볼 수 있도록 화면에서 충분히 눈에 띄게 배치합니다.

(아이들도 어른처럼 시스템이 작동 중인지, 얼마나 남았는지 알고 싶어합니다.)

• 임시 애니메이션이 주 진행 표시기를 가리지 않도록 하고, 실제 게임으로 오해받지 않을 것을 보장합니다.

• 본 활동과 관련이 있는 간단하고 재미있는 애니메이션을 사용하세요. 이런 애니메이션이 사용자 관심을 유지하고 기다리는 시간을 더 짧게 느끼게 합니다.

⸻

결론

피드백 제공은 긍정적인 사용자 경험의 핵심입니다.

디자이너가 대기 시간에 대해 명확하고 투명하게 안내하면, 사용자의 불확실성을 줄이고 더 오래 기다릴 의향을 높일 수 있습니다.

핵심 가이드라인은 다음과 같습니다:

• 2–9초 지연 반복(looped) 애니메이션 사용

• 10초 이상 지연 퍼센트 진행 표시기(percent-done indicator) 사용

그러나 정확한 지연 시간을 항상 예측할 수 없기 때문에, 실제로 10초 이상 걸릴 가능성이 높은 상황에서는 더 낮은 기준점에서 퍼센트 진행 표시기를 사용하는 것이 좋습니다.

예상 시간의 변동 폭이 클수록, 더 이른 시점에 정교한 피드백을 보여주는 것이 안전합니다.

좋은 진행 표시기는 사용자가 작업을 계속하도록 돕고, 전반적으로 웹사이트나 앱에 대해 더 긍정적인 인상을 갖게 합니다.

⸻

참고 문헌:

Nah, F. (2004). A study on tolerable waiting time: how long are web users willing to wait? Behaviour and Information Technology, Vol. 23, No. 3.

-

정확한 내용은 원문을 확인해주세요.

https://www.nngroup.com/articles/progress-indicators/