[UX/UI] 로딩 애니메이션

* 안드로이드 프로젝트를 하다가 로딩 애니메이션의 개념이 정리되어 있는 것을 보고 신기해서 찾아봤다.

 

* 로딩은 사용자의 행동에 대한 피드백으로 다음 화면을 불러올 준비를 하고 있다는 상황을 인지 시켜준다.

* 적절한 로딩 애니메이션은 프로덕트의 완성도를 높일 뿐 아니라, 서비스의 브랜딩을 담아낼 수 있다.

 

* 구글 리서치 자료에 따르면 모바일 웹 사이트의 로딩 시간이 3초 이상일 때 32%, 5초 이상은 90%, 6초 이상은 106% 마지막으로 10초가 넘으면 123%의 이탈률이 발생한다고 한다.

 

로딩 애니메이션에는 다양한 형태가 있다.

* 로딩 애니메이션은 맥락에 따라 전체 로딩과 부분 로딩으로 나눌 수 있다.

* 전체 로딩은 화면 전체에 적용되는 로딩으로 스켈레톤 UI, 스플래시 화면 등이 있다.

* 부분 로딩은 화면에서 일부 컴포넌트에 일어나는 로딩이다. 대표적으로 버튼 로딩 애니메이션이 있다.

 

1. 스켈레톤 UI (Skeleton UI)

* 스켈레톤 UI는 실제 데이터가 렌더링 되기 전, 보일 화면의 윤곽을 먼저 그려주는 로딩 애니메이션이다. 사용자에게 ‘이 자리에 어떤 것들이 보이게 될 거야’라고 알려주는 화면의 예고편이라 할 수 있다.

* 로딩이 완료되면 윤곽에 데이터가 대체되어 화면이 부드럽게 전환되기 때문에 체감 로딩 시간이 짧다는 장점이 있다. 하지만 화면마다 새로운 스켈레톤 UI를 적용해야 하므로 제작 비용이 많이 든다는 단점도 가지고 있다.

 

2. 루프 애니메이션 (Loop Animation)

* 단순한 그래픽 요소가 무한 반복되는 애니메이션이다. 사용자 행동에 대한 강한 피드백을 제공하며, 동적인 요소로 사용자가 지루함을 느끼지 않게 한다.

* 그래픽 요소를 다양하게 표현할 수 있기 때문에 서비스 브랜딩을 담을 수 있으며, 전체 로딩과 부분 로딩에 모두 활용할 수 있다.

  단점은 스켈레톤 UI보다 체감 로딩 시간이 길다는 점, 로딩 시간이 길어지면 금방 지루해질 수 있다는 점이 있다.

 

3. 프로그래스 바 (Progress Bar)

* 프로그래스 바는 화면 상단에서 얇은 바 형태로 로딩의 상태를 직관적으로 보여주는 로딩 애니메이션이다. 기존 화면을 유지하면서 로딩 상황을 직관적으로 보여줄 수 있다.

* 일부 웹에서는 스크롤 정도의 표시로써 네비게이션 역할을 하기도 한다. 일반적으로 웹뷰에서 주로 사용한다.

 

 

* 그래서, 어떤 상황에서 어떤 로딩 애니메이션을 사용해야 할까?

1. 스켈레톤 UI

스켈레톤 UI는 앞서 말했듯, 각 화면에 알맞은 레이아웃을 제작해야 하므로 꼭 필요한 부분에만 적용하는 것이 좋다.

• 로딩이 짧게 느껴지게 해야하는가?
• 이전 화면 없이 새로 그려지는 화면인가?
• 화면의 변동이 잦지 않은가?

surfit 웹 사이트

 

2. 루프 애니메이션

2-1. 스피너(spinner)

• 부분적인 로딩이 일어나는가?
• 사용자 액션에 대한 피드백이 강해야 하는가? (로딩이 일어나고 있음을 명확하게 인지시켜야 하는가?)

 

3. 프로그레스 바(Progress Bar)

 

• 프로그래스 바는 시각적인 정보와 수치 정보 이 두 가지를 담을 수 있어 긴 로딩 시간에 사용하기 적합하다.

4. 기타 로딩 화면

• 로딩 시간이 불가피하게 길어지는가?
• 사용자에게 명확하게 전달하고자 하는 메세지가 있는가?

마이리얼트립 어플

 

 

 

 

 

 

 

 

-----

참고 자료:

https://medium.com/myrealtrip-product/상황에-맞는-로딩-애니메이션-적용하기-2018af51c197

상황에 맞는 로딩 애니메이션 적용하기

https://blog.rightbrain.co.kr/?p=12479

긴 로딩으로 인한 사용자 이탈막기 – UX 디자이너를 위한 팁 3가지 - RightBrainLAB