🌟 디테일의 간격 시리즈! [💫 상황 별 로딩 애니메이션이 필요한 이유] (👀간단 요약) 버튼을 눌렀는데 화면에 어떤 변화도 없다면 사용자는 어떻게 느낄까요? 아무런 반응이 없는 화면은 고장 난 것처럼 보입니다. 로딩은 사용자의 행동에 대한 피드백으로 다음 화면을 불러올 준비를 하고 있다는 상황을 인지시켜줍니다. 적절한 로딩 애니메이션은 프로덕트의 완성도를 높일 뿐 아니라, 서비스의 브랜딩을 담아낼 수 있습니다. 📌 로딩 애니메이션의 종류 로딩 애니메이션은 맥락에 따라 전체 로딩과 부분 로딩으로 나눌 수 있습니다. 전체 로딩은 화면 전체에 적용되는 로딩으로 스켈레톤 UI, 스플래시 화면 등이 있습니다. 부분 로딩은 화면에서 일부 컴포넌트에 일어나는 로딩입니다. 대표적으로 버튼 로딩 애니메이션이 있습니다. ✓ 스켈레톤 UI (Skeleton UI) 스켈레톤 UI는 실제 데이터가 렌더링 되기 전, 보일 화면의 윤곽을 먼저 그려주는 로딩 애니메이션입니다. 사용자에게 ‘이 자리에 어떤 것들이 보이게 될 거야’라고 알려주는 화면의 예고편이라 할 수 있습니다. ✓ 루프 애니메이션 (Loop Animation) 단순한 그래픽 요소가 무한 반복되는 애니메이션입니다. 사용자 행동에 대한 강한 피드백을 제공하며, 동적인 요소로 사용자가 지루함을 느끼지 않게 합니다. ✓ 프로그래스 바 (Progress Bar) 프로그래스 바는 화면 상단에서 얇은 바 형태로 로딩의 상태를 직관적으로 보여주는 로딩 애니메이션입니다. 기존 화면을 유지하면서 로딩 상황을 직관적으로 보여줄 수 있습니다. 📌 어떤 상황에서 어떤 로딩 애니메이션을 사용해야 할까요? ✓ 스켈레톤 UI (Skeleton UI) - 로딩이 짧게 느껴지게 해야하는가? -이전 화면 없이 새로 그려지는 화면인가? -화면의 변동이 잦지 않은가? 홈 화면은 앱을 켜고 처음 마주하는 화면으로 중요도가 높습니다. 첫 로딩 속도는 서비스의 인상을 좌우하기도 합니다. 또한 변경이 잦지 않아 스켈레톤 UI를 매번 제작하는 것에 대한 부담이 적습니다. 로딩 전과 후가 부드럽게 이어져 심리적으로 로딩 속도가 더 짧게 느껴질 수 있는 스켈레톤 UI를 적용했습니다. ✓ 루프 애니메이션 (Loop Animation) 루프 애니메이션은 전체 로딩과 부분 로딩에 모두 활용할 수 있습니다. 마이리얼트립에서는 대부분의 로딩에 스피너를 사용하고 있었습니다. 전체 로딩에 새롭게 제작한 마이리얼트립 로딩 애니메이션을, 부분 로딩에 스피너를 활용하기로 했습니다. 스피너 -부분적인 로딩이 일어나는가? -사용자 액션에 대한 피드백이 강해야 하는가? (로딩이 일어나고 있음을 명확하게 인지시켜야 하는가?) 로딩 애니메이션 -전체 로딩이 일어나는가? -이전 화면의 정보가 유지되어야 하는가? 기타 로딩 화면 로딩 시간이 불가피하게 길고, 사용자에게 명확하게 전달하고자 하는 메세지가 있는 경우 화면에 커스텀 한 로딩 화면을 적용합니다. 마리트에서는 스플래시, 호텔 검색, 항공권 검색 로딩 화면 등이 있습니다. -로딩 시간이 불가피하게 길어지는가? -사용자에게 명확하게 전달하고자 하는 메세지가 있는가? (👋중요한 이유가 뭔가요?) 스플래시 화면에 대해 몇 번 글을 작성한 적 있는데요. 스플래시의 가장 큰 목적은 앱의 주요 데이터를 로딩하기 위한 시간을 벌기 위함입니다. 시각적으로 사용자를 잠시 머물게 하는 장치인 것이죠. 이처럼 앱의 실행부터 주요 화면으로의 이동, 조건에 따른 검색 등 다양한 과정에서 사용자는 '기다림'을 마주할 수 밖에 없습니다. 국내 사용자에게 이런 기다림은 앱을 평가하는 주요 기준이 되기도 하죠. 그래서 이번 글이 제게는 더 중요하게 다가왔습니다. 화면이나 상황에 따라 기준을 만들고, 구체적인 로딩 애니메이션을 활용하는 방법에 대한 글이 많이 없기 때문입니다. 기다림의 시간을 긍정적인 경험으로 바꾸는 이런 디테일들이 있다면, 사용자들에게는 서비스에 대한 전반적인 인식이 좋아질 수 밖에 없지 않을까요? (💌함께 읽어보세요!) 모바일 앱에서의 ‘로딩 애니메이션’ 어떻게 활용하면 좋을까? : http://icunow.co.kr/loading-animation/ 스플래시 화면, 어떻게 구성하면 좋을까? : https://stib.ee/Z722