[UX/UI 디자인 패턴] 로딩 로딩

로딩

로딩은 앱이나 웹에서 화면이 그려지는 동안 사용자가 잠깐 기다려야 할 때 보여주는 화면

💡 좋은 로딩 화면이란?
가능한 한 빨리 콘텐츠를 표시. 콘텐츠를 로드 중이고 완료하는 데 시간이 얼마나 걸릴지 명확하게 전달. 로딩 시간이 불가피하게 길어지면 사람들이 기다리는 동안 볼 수 있는 내용을 제공하는 것이 좋음

 

 

로딩의 종류

 

스피너 아이콘 혹은 (브랜드 아이덴티티를 담음) 애니메이션 활용

 

1️⃣  스피너 아이콘 혹은 애니메이션 활용 

• 데이터를 서버에서 불러오거나, 반대로 데이터를 보낼 때 앱과 사용자와의 상호작용을 돕는다.
• 연속적인 움직임을 통해 시스템이 정보를 처리하고 있음을 사용자에게 알려준다.
• 움직이는 모션이나 애니메이션은 로딩 지속 시간에 대한 사용자의 인식을 낮춰 기다리는 시간을 짧게 느끼게 한다.

 

2️⃣  프로그레스 바

• (상단 내비게이션이나 타이틀 아래에 붙어서) 현재 상황을 시각적으로 파악할 수 있는 로딩 바.
• 진행 상황을 유저에게 알려 주어야 하는 케이스에서 사용.

 

3️⃣  스켈레톤 

• 스켈레톤은 불러오는 화면의 빈 버전으로, 화면에서 가장 먼저 노출되어 사용자가 실제 페이지를 예측할 수 있도록 함.
• 단, 스켈레톤이 실제 화면의 로드를 방해하는 주객전도의 상황이 생기지 않도록 주의. 가능한 가장 단순한 모습의 회색 박스를 사용하여 불러오는 페이지를 예측할 수 있는 형태로 표현하는 것이 좋다.