상황에 맞는 로딩 애니메이션 적용하기
버튼을 눌렀는데 화면에 어떤 변화도 없다면 사용자는 어떻게 느낄까요?
아무런 반응이 없는 화면은 고장 난 것처럼 보입니다. 로딩은 사용자의 행동에 대한 피드백으로 다음 화면을 불러올 준비를 하고 있다는 상황을 인지시켜줍니다. 적절한 로딩 애니메이션은 프로덕트의 완성도를 높일 뿐 아니라, 서비스의 브랜딩을 담아낼 수 있습니다.
로딩은 다양한 형태로 적용될 수 있습니다. 스켈레톤 UI(Skeleton UI)는 표시될 정보의 대략적인 형태를 미리 보여주어 다음 화면에 부드럽게 연결합니다. 동적인 루프 애니메이션(Loop Animation)은 기다림이 지루하지 않도록 만들기도 합니다. 또 텍스트와 이미지를 넣어 서비스에서 주고자 하는 가치를 직접적으로 전달할 수도 있습니다.
마이리얼트립에서는 스피너(Spinner), 스켈레톤 UI, 프로그래스 바(Progress Bar) 등 다양한 로딩 애니메이션이 명확한 규칙 없이 혼재되어 사용되고 있었습니다. 서비스가 확장되고, 화면이 많아지면서 로딩에 대한 규칙이 필요해졌습니다.
이번 글에서는 일반적인 로딩 상태의 종류와 특징에 대해 알아보고, 마이리얼트립 서비스 내에 녹여내기 위해 고민했던 점들, 그리고 어떻게 구현했는지를 정리해보려 합니다.
로딩 애니메이션의 종류
로딩 애니메이션은 맥락에 따라 전체 로딩과 부분 로딩으로 나눌 수 있습니다. 전체 로딩은 화면 전체에 적용되는 로딩으로 스켈레톤 UI, 스플래시 화면 등이 있습니다. 부분 로딩은 화면에서 일부 컴포넌트에 일어나는 로딩입니다. 대표적으로 버튼 로딩 애니메이션이 있습니다.
조금 더 세부적으로 나눠보면, 형태에 따라 스켈레톤 UI, 루프 애니메이션(단순한 그래픽으로 된 무한 반복하는 애니메이션), 프로그래스 바 등으로 나뉠 수 있습니다. 각각의 형태는 맥락에 따라 전체와 부분 로딩에 활용됩니다. 각 로딩 애니메이션의 특징과 장단점에 대해 간단히 살펴보겠습니다.
스켈레톤 UI (Skeleton UI)
스켈레톤 UI는 실제 데이터가 렌더링 되기 전, 보일 화면의 윤곽을 먼저 그려주는 로딩 애니메이션입니다. 사용자에게 ‘이 자리에 어떤 것들이 보이게 될 거야’라고 알려주는 화면의 예고편이라 할 수 있습니다.
로딩이 완료되면 윤곽에 데이터가 대체되어 화면이 부드럽게 전환되기 때문에 체감 로딩 시간이 짧다는 장점이 있습니다. 하지만 화면마다 새로운 스켈레톤 UI를 적용해야 하므로 제작 비용이 많이 든다는 단점도 가지고 있습니다.
루프 애니메이션 (Loop Animation)
단순한 그래픽 요소가 무한 반복되는 애니메이션입니다. 사용자 행동에 대한 강한 피드백을 제공하며, 동적인 요소로 사용자가 지루함을 느끼지 않게 합니다.
그래픽 요소를 다양하게 표현할 수 있기 때문에 서비스 브랜딩을 담을 수 있으며, 전체 로딩과 부분 로딩에 모두 활용할 수 있습니다. 단점은 스켈레톤 UI보다 체감 로딩 시간이 길다는 점, 로딩 시간이 길어지면 금방 지루해질 수 있다는 점이 있습니다.
프로그래스 바 (Progress Bar)
프로그래스 바는 화면 상단에서 얇은 바 형태로 로딩의 상태를 직관적으로 보여주는 로딩 애니메이션입니다. 기존 화면을 유지하면서 로딩 상황을 직관적으로 보여줄 수 있습니다. 일부 웹에서는 스크롤 정도의 표시로써 네비게이션 역할을 하기도 합니다. 일반적으로 웹뷰에서 주로 사용합니다.
그럼 어떤 상황에서 어떤 로딩 애니메이션을 사용해야 할까요?
다양한 로딩 애니메이션을 적용하기에 앞서 기준을 정할 필요가 있었습니다. 로딩의 형태에 따라 적용되어야 할 원칙을 세웠습니다.
스켈레톤 UI
스켈레톤 UI는 앞서 말했듯, 각 화면에 알맞은 레이아웃을 제작해야 하므로 꼭 필요한 부분에만 적용하기로 했습니다. 기준은 다음과 같이 정했습니다.
- 로딩이 짧게 느껴지게 해야하는가?
- 이전 화면 없이 새로 그려지는 화면인가?
- 화면의 변동이 잦지 않은가?
홈 화면은 앱을 켜고 처음 마주하는 화면으로 중요도가 높습니다. 첫 로딩 속도는 서비스의 인상을 좌우하기도 합니다. 또한 변경이 잦지 않아 스켈레톤 UI를 매번 제작하는 것에 대한 부담이 적습니다. 로딩 전과 후가 부드럽게 이어져 심리적으로 로딩 속도가 더 짧게 느껴질 수 있는 스켈레톤 UI를 적용했습니다.
홈 → 상품 탐색 → 구매로 이어지는 플로우는 마이리얼트립 서비스에서 가장 핵심적인 기능입니다. 각 과정에서 체감 로딩 시간을 최소화 할 수 있는 스켈레톤 UI를 적용하고 있습니다.
루프 애니메이션
루프 애니메이션은 전체 로딩과 부분 로딩에 모두 활용할 수 있습니다. 마이리얼트립에서는 대부분의 로딩에 스피너를 사용하고 있었습니다. 로딩 애니메이션을 정비하면서, 이번 기회에 ‘여행 슈퍼 앱’의 서비스 가치를 녹여 다양한 종류의 상품 아이콘이 리듬감 있게 넘어가는 루프 애니메이션을 새로 제작했습니다. 전체 로딩에 새롭게 제작한 마이리얼트립 로딩 애니메이션을, 부분 로딩에 스피너를 활용하기로 했습니다.
1) 스피너
- 부분적인 로딩이 일어나는가?
- 사용자 액션에 대한 피드백이 강해야 하는가? (로딩이 일어나고 있음을 명확하게 인지시켜야 하는가?)
사용자가 선택한 날짜에 따라 옵션이 새롭게 표시되어야 하며, 이미 그려진 화면 안에서 부분적인 로딩이 일어나는 곳입니다. 또한, 옵션의 개수에 따라 높이가 다르게 적용되기 때문에 유연하게 사용할 수 있는 스피너를 적용했습니다.
버튼을 누르는 동작은 사용자에게 크게 느껴지는 행동이므로 즉각적인 피드백을 주는 것이 좋습니다. 버튼 컴포넌트에 모두 기본적으로 적용하기로 했습니다.
2) 마이리얼트립 로딩 애니메이션
- 전체 로딩이 일어나는가?
- 이전 화면의 정보가 유지되어야 하는가?
새롭게 적용된 마이리얼트립 로딩 애니메이션은 스피너보다 면적이 넓기 때문에 전체 로딩에서 활용합니다. 배경 투명도 적용은 다음과 같은 규칙을 따르기로 했습니다.
- 화면 전환 이후 로딩되는 상황은 흰 배경 위에 로딩을 사용합니다.
- 한 화면 내에서 전환 없이 로딩되는 상황은 흰색 opacity 85% 배경 위에 로딩을 사용합니다.
이렇게 기준을 잡은 이유는 다음과 같습니다.
- 이미 로딩된 요소가 계속 보여짐으로 새로운 요소가 다시 로딩될 때 시각적 맥락이 이어질 수 있다. (ex. 탭 전환)
- 한 화면에서 특정 액션 후 보이지 않는 결과를 기다릴 때 이전 맥락이 이어질 수 있다. (ex. 후기 작성 완료, 예약 취소 완료)
마리트 앱은 전체적으로 화이트 톤을 사용하고 있기 때문에, 블랙보다는 화이트 배경으로 dimmed를 적용했습니다.
기타 로딩 화면
로딩 시간이 불가피하게 길고, 사용자에게 명확하게 전달하고자 하는 메세지가 있는 경우 화면에 커스텀 한 로딩 화면을 적용합니다. 마리트에서는 스플래시, 호텔 검색, 항공권 검색 로딩 화면 등이 있습니다.
- 로딩 시간이 불가피하게 길어지는가?
- 사용자에게 명확하게 전달하고자 하는 메세지가 있는가?
각 기준을 요약하면 다음과 같습니다.
*프로그래스 바는 웹뷰에 기본적으로 적용되어 있어 제외했습니다.
어떻게 구현할 수 있나요?
로딩 애니메이션을 구현하는 방법은 플랫폼마다 차이가 있으며, 형태에 따라 구현하는 방법이 다양합니다. 여기서는 새롭게 적용한 마이리얼트립 로딩 애니메이션을 적용한 과정을 정리했습니다.
Android, iOS → Lottie 적용
Lottie는 Airbnb에서 개발한 백터 그래픽 애니메이션으로 용량대비 퀄리티가 뛰어납니다. 어도비 에프터이펙트로 작업을 한 후 Bodymovin 플러그인을 통해 JSON으로 내보내어 개발에 적용할 수 있습니다. Lottie 애니메이션 제작 방법은 이 아티클을 참고했습니다.
Web → APNG, Gif 적용
프론트팀에서는 서드파티 라이브러리 사용을 지양하고 있어 Lottie 라이브러리를 적용하는 대신, APNG를 적용하기로 했습니다. APNG는 PNG를 확장한 이미지 파일 포맷으로 애니메이션을 지원합니다. IE에서는 APNG를 지원하지 않기 때문에 Gif도 함께 적용해주었습니다. APNG 제작은 이 아티클과 라인의 공식 가이드를 참고했습니다.
정리하며
로딩 애니메이션을 적용하는 규칙이 필요하게 된 배경, 로딩 애니메이션의 종류와 특징, 어떤 상황에서 어떻게 적용해야 하는지, 플랫폼별 구현 방법까지 살펴보았습니다. 아직 모든 화면에 구현이 되어있진 않지만, 규칙에 따라 적용해나갈 예정입니다.
로딩 시간을 느끼지 못할 만큼 서비스 속도가 빠른 것이 가장 좋겠지만, 아무리 잘 만든 서비스라도 로딩은 필수적인 요소가 아닐까 싶습니다. 상황에 맞는 적합한 로딩 애니메이션을 사용하는 것이 프로덕트의 완성도를 높이는 데에 기여하며, 프로덕트에서 브랜드 가치를 전달할 수 있다는 점에서 이번 로딩 애니메이션 적용은 의미 있는 프로젝트였습니다.
위에 작성한 규칙들이 모든 서비스에 알맞게 적용될 수는 없겠지만, 합의된 규칙을 가지고 디자인하는 것이 더 나은 프로덕트를 만들 수 있는 방향이 되지 않을까 싶습니다.
아울러 마이리얼트립은 좋은 동료분들을 계속해서 모시고 있습니다!
기술을 바탕으로 여행시장을 혁신하는데 관심 있는 분들은 아래의 채용 페이지를 방문해 주세요.
https://career.myrealtrip.com/
참고자료
스켈레톤 UI
로딩 애니메이션
Lottie 적용하기
APNG 적용하기
