progress bar

프로그레스 바의 효과적 활용법

무엇인가를 기다리는 것 쉽지 않은 과정입니다. 특히 웹 페이지나 모바일 앱의 로딩 타임을 기다리는 건 지루하고 짜증 나는 일 중에 하나인데요. 그에 대한 해결책으로 프로그레스 바는 로딩 타임에 적용하기 좋은 UX convention 중의 하나입니다.

프로그레스 바는 사용자에게 시각적인 애니메이션을 보여줌으로써 사용자가 미리 페이지가 로딩 중이라는 것을 예측할 수 있고 심지어 로딩을 위한 시간이 얼마나 남았는지를 알려줄 수도 있습니다. 프로그레스 바의 대표적인 3가지 종류는 아래와 같습니다.

반복되는 애니메이션 (Lopped animation)

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


단순한 디자인 엘리먼트의 반복되는 에니메이션은 짧은 시간 (초 단위) 을 기다리는 동안 사용하는 데 좋습니다.







퍼센트 애니메이션 (Percent-done animation)


2. 퍼센트 애니메이션 (Percent-done animation)


퍼센트 애니메이션 명확하게 시작과 완료의 상황을 보여줍니다. 아마도 단순한 바모양이나 동그라미 모양의 엘리먼트로 이용 될 수 있습니다. 진행 상황을 실시간으로 보여주기 때문에 좀 더 긴 시간의 로딩 타임에 사용되는 게 좋습니다. 상황에따라 숫자 퍼센티지를 사용하여 프로그레스 바와 같이 보여주는 것도 좋습니다. 예를 들어 여러 가지 파일을 같이 업로드할때 사용자는 각각의 파일이 언제 완료될지 예측하기 쉽습니다. (한가지 유의할 사항으로는 퍼센트가 완료 점까지 도착한 후에 재로딩을 보여주는 애니메이션은 긴 시간의 로딩 타임에서는 좋은 사용자 경험을 주지 못합니다.)








프로그레시브 페이지 로딩 (Progressive page loading)


3. 프로그레시브 페이지 로딩 (Progressive page loading)


페이지가 로딩될 때 텍스트, 이미지, 비디오 등의 플레이스홀더를 미리 보여주고 점진적으로 실제 콘텐츠를 로딩시키는 방식으로 대표적으로 유튜브에서 이 방법을 사용하고 있습니다. 몇몇 사이트에서는 우선순위가 높은 메뉴와 버튼을 먼저 로딩시킨 후 나머지 콘텐츠를 로딩시켜서 사용자가 페이지로딩을 기다리는동안 자신이 달성할 테스크를 빠르게 작업할 수 있습니다.

SNS 공유하기

Share on facebook
Share on twitter
Share on linkedin

매주 주말마다 새로운 디자인 뉴스레터를 받아보세요 📪

Scroll to Top