brunch

You can make anything
by writing

C.S.Lewis

by 이새봄 May 21. 2021

빙글빙글 돌아가는 로딩만 로딩이 아니야!

로딩 UI 파헤쳐보기


로딩 로딩 로딩 무한 로딩  
 

사용자에게는 로딩이 길어지면 길어질수록 사용성이 떨어지고 해당 서비스 앱 또는 웹사이트 재방문을 꺼려하게 될 것이다. 나 조차도 갑자기 먹통이 돼버리거나 로딩이 너무 늦어지면 앱을 꺼버리고는 한다. ^^

서비스를 이용하려고 앱을 켠 유저 입장에서는 즉각적으로 버벅거림 없이 보였으면 하는 게 당연하지만, 상황에 따라서 앱에서 서버와의 통신이 늦어지거나, 데이터를 불러오는데 텀이 생길 때 활용되는 것이 바로 로딩 UI이다. 로딩 애니메이션의 종류를 몇 가지 예시와 함께 살펴보도록 하자.




루프 애니메이션 (Loop animation)

루프 애니메이션이란 단순한 그래픽 요소가 무한 반복되는.. 돌고 도는 애니메이션을 말한다.  


로딩 스피너 

로딩이 돌 때 흔히 쓰이는, 우리에게 가장 익숙한 로딩 애니메이션이 바로 '스피너'이다. 보통 스피너는 4초 이내에 비교적 짧고 부분적인 로딩이 필요할 때 사용한다. 간혹 최종 CTA 버튼에 인디케이터로 함께 활용하기도 한다. Progress Button의 자세한 설명글은 여기! 

돌봄이 필요로 한 부모님과 돌 봄시터를 매칭 하는 중개 플랫폼 '맘 시터'에서는 등록해둔 신청서를 바탕으로 그날마다의 시터를 추천해주는 화면이 있는데, 이때 로딩 스피너를 활용해서 데이터를 불러오고 있음을 인지시켜주고 있다. 현재 사용하는 앱의 대다수에서 확인할 수 있는 UI이다. 


좌측부터 맘 시터, 에어비앤비, 스타벅스 APP 화면


로딩 애니메이션 

로딩 애니메이션은 흔히 서비스의 브랜딩을 녹여 사용하는데, 그래픽 요소가 무한 반복되면서 유저에게 강한 인상을 줄 수 있다. 이러한 장점도 있는 반면, 예시 이미지들을 보면 나 지금 로딩되는 중이야! 임을 대놓고 보여주는 듯한 느낌이 들기도 한다. 모든 화면에서의 이동마다 활용하기보다는 서비스의 핵심 액션을 할 때 활용하는 것이 좋을 것 같다. 요청서 작성, 구매, 찜하기 등등


좌측부터 숨고, 케어 네이션, 펫 프렌즈 APP 화면


스켈레톤 스크린 (Skeleton screens)

스켈레톤 스크린은 로딩 스피너나 다른 로딩 UI에 비해 흔하게 사용되지는 않는 것 같다.라고 말하고 여러 앱들을 살펴보니 중요한 화면에서는 꽤 사용하고 있더라! 머쓱. 필자도 이번 글을 쓰면서 새로 접한 용어인데, 스켈레톤 UI란 단순히 빙글빙글 돌아가는 UI가 아니라 실제 데이터가 렌더링 되기 전에, 로딩이 끝나고 이 자리에 어떤 형식 (Layout)으로 콘텐츠가 자리 잡을지 대략적인 화면을 구조적으로 보여주는 것이다. 아래 몇 가지 예시 이미지를 보면 이해가 더 수월할 것 같다! 


By css-tricks

슬랙 예시를 보면 중앙에 기본 로딩 인디케이터와 좌측 메뉴 부분의 스켈레톤 스크린이 함께 보이고 있다.


마이 리얼 트립 APP 화면


마이 리얼 트립 APP을 살펴보면 더 이해하기 쉽다. 좌측에 데이터가 랜더링 되기 전.. 정말 짧은 찰나의 순간에 보이는 화면이 바로 스켈레톤 스크린이다. 캡처도 몇 번만에 성공할 정도로 정말 찰나의 순간이다. 좌측에서 우측으로, 로딩되기 전과 후 화면을 보면! 부드럽게 점진적으로 이어지기 때문에 다른 로딩 UI 보다 로딩 속도 면에서 사용자가 비교적 짧게 느낄 수 있을 것 같다. 이러려고 일종의 트릭?으로 UI를 사용하나 보다..

다만 중요도가 조금 높고 전체적인 룩의 변경이 잦지 않은 레이아웃 화면에 활용하는 것이 용이하다. 모든 화면이 호출 또는 이동될 때마다 이 UI를 활용하기에는 각 화면마다 작업을 해야 한다는.. 자원적 부담이 있을 것이기 때문이다ㅎㅎ.


프로그레스 바 (Progress Bar)

얇은 바 형태로 지금 얼마나 진행되고 있는지를 가장 직관적으로 보여줄 수 있는 UI가 바로 프로그레스 바다.

한마디로.. 당신이 요청한 사항에 답하려고 하고 있어! 지금 이 정도 진행되고 있으니 조금만 더 기다려줘. 하는 느낌으로 생각하면 쉽다. 각 단계에 대한 노티 정보를 줄 때 나, 진행률을 보여줄 때 사용하는 것이 가장 일반적인 예시인 것 같다. 회원가입이나 설문 등에 주로 쓰이고 경우에 따라 진행률(%)도 함께 노출하기도 한다.


좌측 숨고, 우측 pooq APP 화면


아무리 좋은 서비스를 론칭하더라도 '로딩'이 전혀 없을 수는 없다. 실제로 서비스를 경험할 때 로딩이 꽤나 큰 영향을 끼치는 만큼, 상황에 맞는 로딩 UI를 활용하여 유저의 기다림을 조금은 덜 지루하도록 제공하는 것이 중요할 것 같다. 우연한 기회로 로딩 애니메이션의 종류를 찾아보는 시간을 가지게 되었는데, 훗날 기획할 서비스에서 활용할 수 있기를!! 

작가의 이전글 왜 꼭 소셜 로그인일까  
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari