프로그레스바

정의

프로그레스바는 진행 중인 작업이 지금 어디까지 왔는지 막대로 보여 주는 요소입니다. 크게 두 종류로 나뉩니다. 하나는 진행률을 계산할 수 있을 때 쓰는 형태로, 파일 업로드처럼 전체 대비 몇 퍼센트가 끝났는지 알 수 있으면 막대가 그만큼 채워집니다. 다른 하나는 진행률을 알 수 없을 때 쓰는 형태로, 서버 응답을 기다리는 동안처럼 끝을 예측하기 어려우면 막대 위로 무언가가 계속 흘러가는 애니메이션을 반복해 작업이 멈추지 않고 진행되고 있음을 알립니다. 이 둘을 구분해 쓰는 것이 핵심이며, 어떤 형태를 고르느냐는 진행률을 계산할 수 있느냐 없느냐에 따라 자연히 정해집니다.

왜 중요한가

프로그레스바가 중요한 이유는 사용자의 기다림을 견딜 만한 것으로 바꿔 주기 때문입니다. 똑같은 시간을 기다리더라도, 얼마나 남았는지 눈에 보이면 사람은 훨씬 덜 답답해하고 화면을 떠나지 않습니다. 아무 피드백 없이 멈춰 있는 화면은 사용자에게 고장 났다는 의심을 심어 주지만, 조금씩 차오르는 막대는 시스템이 살아서 일하고 있다는 안심을 줍니다. 스피너가 그저 기다리라는 신호라면, 진행률을 아는 프로그레스바는 얼마나 남았는지까지 알려 주는 더 친절한 신호입니다. 그래서 남은 시간을 예측할 수 있는 작업일수록 프로그레스바로 진행 상황을 보여 주는 편이 사용자 경험에 크게 도움이 됩니다.

흔한 실수

• 진행률을 알 수 있는데도 흐르는 애니메이션만 보여 주는 경우입니다. 실제로는 퍼센트를 계산할 수 있는 작업인데 막연히 도는 표시만 쓰면, 사용자는 끝이 언제인지 가늠하지 못해 불필요하게 불안해합니다.
• 막대가 중간에 오래 멈춰 있는 경우입니다. 90퍼센트에서 한참을 정지해 있으면 사용자는 진행 표시 자체를 믿지 못하게 되어, 차라리 없는 편이 나았을 신뢰를 잃고 작업이 멈춘 것은 아닌지 의심하게 됩니다.
• 진행이 끝난 뒤 아무 마무리 신호도 주지 않는 경우입니다. 막대가 슬그머니 사라지기만 하면 사용자는 작업이 성공했는지 실패했는지 몰라 한 번 더 확인하게 되고, 끝났다는 확신을 얻지 못한 채 화면을 떠나게 됩니다.

실무 팁

• 진행률을 계산할 수 있으면 채워지는 막대로 퍼센트를 보여 주고, 알 수 없으면 흐르는 형태를 쓰세요. 안다는 것을 아는 대로, 모른다는 것을 모르는 대로 정직하게 표현하는 것이 사용자에게 가장 큰 안심을 줍니다.
• 아주 짧게 끝나는 작업에는 프로그레스바를 굳이 띄우지 마세요. 나타났다 곧바로 사라지는 막대는 오히려 화면을 산만하게 만들고 깜빡임처럼 느껴져, 없는 편이 더 매끄럽게 보일 때가 많습니다.
• 막대와 함께 지금 무엇을 하는 중인지 짧은 문구를 곁들이면 좋습니다. 파일 정리 중처럼 맥락을 덧붙이면 같은 시간도 더 짧게 느껴지고, 사용자는 자신이 무엇을 기다리는지 이해한 채로 기다리게 되어 답답함이 한결 줄어듭니다.

관련 개념