🌟 디테일의 간격 시리즈! [✨ 프로그래스 바와 스피너 사용법] (👀간단 요약) 당신이 가게에서 줄을 서 있는데 오랜 시간 동안 제자리에 있다면 어떻게 느끼겠는가? 아마 참지 못하고 떠날 것이다. 사용자들은 스크린에서 몇 초동안 스피너를 보고 있는 것도 매우 길게 느끼면서 똑같은 상황에 처하게 된다. 📌 스피너는 긴 시간 동안 로딩하는 데 사용하는 것이 아니다. 스피너는 사용자에게 로딩이 얼마나 걸리는지 알려주지 않는다. 만약 긴 시간 동안 로딩하는데 스피너를 사용한다면 사용자는 앱에 뭔가 이상이 있다고 느낄 것이다. 부족한 피드백은 불확실한 상황을 만들고, 사용자은 그것이 나쁜 상황이라고 가정하게 된다. 📌 4초 규칙 사용자가 앱을 계속 사용하게 만들려면, 4초 이상 걸리는 로딩에는 스피너를 사용하면 안 된다. 연구 결과에 따르면 사용자가 인내심 있게 기다릴 수 있는 시간은 4초라고 한다. 📌 스피너를 보여주는 경우 1초 이상이 걸리는 프로세스라면 스피너를 보여주어야 한다. 그렇게 하면 사용자에게 앱이 로딩 중이라는 것을 알 수 있게 해 주고, 걱정을 덜어줄 수 있다. 📌 프로그래스 바는 긴 시간을 참을 수 있게 만들어준다. 4초 이상이 걸리는 프로세에서는 프로그래스 바를 사용해야 한다. 사용자들은 프로그래스 바를 볼 때 긴 시간을 견디기 쉬워진다. 프로그래스 바는 로딩 시간이 얼마나 걸릴지 명확하게 보여준다. 막대 모양의 시각적 단서는 진행 과정을 보여주어 사용자가 기다릴 수 있도록 도와준다. 📌 프로그래스 바를 보여주는 방식 프로그래스 바는 사용자에게 프로그래스가 얼마나 진척되었는지 보여주어야 한다. 프로그래스 바는 점진적이고 일관적인 속도로 왼쪽에서 오른쪽으로 애니메이션 되어야 한다. ✓ 프로그래스 바에는 또한 숫자로도 진척도를 보여주어야 한다. 프로그래스가 1분 미만이라면, 진행된 퍼센트나 로딩된 아이템의 개수를 보여주어라. 그리고 어떤 액티비티를 로딩하고 있는지도 보여주어라. ✓ 로딩이 1분이 넘어간다면, 로딩 시간이 얼마나 남았는지 보여주어야 한다. 이 정보를 통해 로딩 시간이 평소보다 더 걸릴 수 있음을 알려줄 수 있다. 📌 스피너를 남용하지 말아라(Don't Go Spinner Crazy). 많은 디자이너들이 모든 프로세스에 스피너를 사용하는 습관을 가지고 있다. 그러나 로딩 시간이 길 때 스피너를 사용하면 사용자의 불만을 일으킬 것이다. 필요할 때 프로그래스 바를 사용하여 사용자의 불만을 방지해야 한다. (👋중요한 이유가 뭔가요?) 저도 그렇지만, 사람의 심리가 참 재미있어요. 정말 짧은 시간을 기다리면 되는데, 그마저도 길게 느껴지는 경우가 많으니 말이죠. 프로그레스 바의 다양한 모습을 볼 수 있는 곳은 '게임'이에요. 특히 첫 실행 시 데이터를 내려받는 순간. 처음엔 프로그레스 바 형태를 변형해가며 지루함을 달랠 수 있도록 했는데, 최근에는 미니게임을 제공하거나 진행 막바지에 속도를 더 빠르게 느끼게 만드는 등의 방법을 활용하고 있어요. 스피너, 프로그레스 바를 언제 활용하냐도 중요하지만, 어떻게 활용하냐도 중요하다는 것을 알려주는 중요한 사례입니다. 스피너는 애니메이션을 더 빠르게 적용할 경우, 사용자가 로딩 시간을 짧게 느끼게 만들 수 있다는 연구 결과도 있으며, 프로그레스바를 왼쪽에서 오른쪽이 아닌, 오른쪽에서 왼쪽으로 채워지는 형태로 구현하면 더 빠르다고 느낀다고 하네요. 빠르다고 '지각'하게 만드는 방법인 것입니다. (물론, 서비스의 완성도가 높아야 이런 트릭을 활용할 환경이 되겠지만요!) (💌함께 읽어보세요!) ✓ 상황에 맞는 로딩 애니메이션 적용하기 : https://news.publy.co/comments/7036 ✓ 모바일 앱에서의 ‘로딩 애니메이션’ 어떻게 활용하면 좋을까? : http://icunow.co.kr/loading-animation/