같은 대기시간도 더 짧게 : 스켈레톤 화면의 힘
스켈레톤 언제 어떻게 쓰는걸까?
앱 서비스를 디자인하다 보면 우리가 보편적으로 생각하는 화면 이외에도 디자인이 필요한 부분들이 굉장히 많다. 예를 들면 다양한 오류 상황에서의 화면이나 새로고침 화면, 오픈 그래프 이미지, 로딩 화면 등 사용자가 무심코 지나갈법한 것들을 섬세하게 챙겨야 한다.
오늘 다뤄볼 주제는 그중에서 대다수의 사용자는 눈치채지 못하고 지나치는 '스켈레톤 화면'이다.
스켈레톤 화면이란?
스켈레톤 화면 예시유튜브나 인스타그램을 켰을 때, 위와 같은 화면이 빠르게 스쳐 지나간 것을 본 적이 있을 것이다.
해당 화면을 본 적이 있다면, 이 화면이 잠깐 나타난 뒤 우리가 보고자 하는 '진짜' 화면이 바로 나타나는 것 또한 알아차렸을 것이다.
스켈레톤 화면이란 화면을 로딩하는 동안 사용자에게 나타나는 와이어프레임 형태의 화면이다. 보통은 실제 콘텐츠의 대략적인 윤곽을 나타내는 선과 면으로 표현하며 대체로 무채색을 사용한다.
스켈레톤 화면의 종류
1. 정적 스켈레톤 화면 (Static-Content and -Image Skeleton Screens)
가장 일반적 형태의 스켈레톤 화면이다. 와이어프레임 형태의 화면이 로딩 상황에서 특별한 모션 없이 정지된 상태로 나타난다.
2. 애니메이션 스켈레톤 화면 (Animated Skeleton Screens)
정적 스켈레톤 화면에 그라데이션이나 움직임이 추가된 형태이다.
애니메이션 형태는 펄싱 애니메이션(*Pulsing animation)과 웨이브 애니메이션(Wave animation)으로 또 나뉜다. *Pulsing : 맥박, 진동
(1) 펄싱 애니메이션(Pulsing animation)
일정한 간격으로 깜빡이는 형태의 애니메이션으로, 투명도를 조절해 인 앤 아웃되는 형태이다.
펄싱 애니메이션 예시(2) 웨이브 애니메이션(Wave animation)
왼쪽에서 오른쪽(혹은 그 반대로)으로 물결치는 형태의 애니메이션이다.
펄싱 애니메이션보다 조금 더 역동적인 느낌을 준다.
스포티파이 예시정적 스켈레톤 화면보다는 애니메이션 스켈레톤이 대기 시간이 짧았다고 느끼고, 펄싱 애니메이션보다는 웨이브 애니메이션을 사용했을 때 대기시간을 조금 더 짧게 느낀다는 조사 결과가 있다.
여건상 애니메이션 스켈레톤을 적용하지 못할 수도 있고, 애니메이션이 나타날정도로 로딩이 길지 않을 수도 있다. 로딩이 짧은 경우 애니메이션 스켈레톤을 적용하면 되려 사용자에게 혼란을 야기할 수도 있다. 때문에 어떤 스켈레톤을 써야하는가 고민될 때는 담당한 프로젝트의 사정이나 환경을 고려해 정하는 것을 추천한다.
스켈레톤 화면, 왜 써야 할까?
위 이미지와 같이 로딩 중인 화면에서 스켈레톤 말고도 스피너나 자체 제작 애니메이션을 사용하기도 한다. 그중에서 왜 스켈레톤 화면을 사용해야 하며, 사용했을 때 어떤 좋은 점이 있는지 살펴보자.
1. 로딩 중인 화면의 대기시간을 비교적 짧게 느낀다.
스켈레톤 화면은 와이어프레임처럼 보이기 때문에 마치 화면이 점진적으로 나타나는듯한 착각을 하게 한다.
때문에 이미 화면이 나타났다는 인식을 갖게 하여 비교적 로딩이 짧았던 것처럼 느낀다.
2. 나타날 화면을 예측할 수 있다.
스켈레톤 화면을 통해 나타날 화면이 리스트인지 카드 형태인지 대략적으로 미리 파악할 수 있다. 화면에서 쏟아지는 정보를 접하기 직전에 내가 어떤 화면을 맞닥뜨리게 될 것인지 예측하고 멘탈모델을 구축할 수 있다. 이를 통해 사용자는 나타날 화면을 좀 더 편안하게 받아들일 수 있다.
3. 서비스가 응답 중이라는 어포던스를 준다.
현재 원활하게 서비스가 응답 중이라는 것을 사용자에게 시각적으로 보여주며 사용자를 안심시킨다.
실무에서 어떤 가이드라인을 잡고 활용해야 할까?
1. 이런 상황에서는 쓰지 말 것
대기 시간이 10초 이상일 때는 진행 표시줄을 사용
스켈레톤 화면이나 스피너는 명확한 대기 시간을 보여주지 않으므로, 10초 미만일 경우에만 사용한다. 그 이상일 경우 사용자에게 명확한 소요 시간 전달을 위해 진행 표시줄을 사용하는 것이 좋다.
로딩이 1초 미만일 경우에는 사용하지 말 것
너무 짧은 시간에 스켈레톤 화면이 나타나면 효과도 미미할뿐더러, 사용자 입장에서는 화면을 따라잡지 못해 짜증을 유발할 수 있다.
전체 페이지를 로드하는 프로세스에서만 사용
다운로드, 업로드, 파일 변환가 관련된 프로세스의 경우 스켈레톤 화면을 표시하는 것이 적합하지 않다. 이러한 프로세스에는 진행 표시줄을 사용하는 것이 적절하다.
2. 스피너와 스켈레톤은 각각 언제 사용해야 할까?
스피너 (Spinner)
사용자의 요청이나 액션에 따라 발생하는 진행 중인 작업을 보여줄 때 사용한다.
예를 들면, 버튼을 클릭하여 내용을 불러오거나 어떤 작업을 수행하는 동안 사용할 수 있다.
스켈레톤
초기 로딩 상황에서 전체 페이지를 로드할 때 대기시간 감축 효과를 위해 사용한다.
하지만 다양한 서비스를 사용하다 보면 이러한 구분이 명확하지 않을 때가 있다. 한 서비스 내에서 같은 기준인데도 어떤 화면은 스켈레톤을 사용하고 또 어떤 화면은 사용하지 않는다.
좀 더 디테일한 가이드라인을 살펴보자.
(1) 비교적 적은 양의 콘텐츠를 가지고 있거나, 이미 이전 화면에서 로드된 콘텐츠를 활용하여 더 빠르게 로딩할 수 있는 경우가 있다. 이 경우에는 로딩시간이 짧기 때문에 스켈레톤을 사용하지 않아도 사용자 경험에 영향을 미치지 않는다.
(2) 복잡하거나 다양한 컴포넌트를 포함하고 있어서 스켈레톤을 구현하기가 어려울 수 있다. 특히 복잡한 화면에서 스켈레톤을 구현하려면 추가적인 디자인 및 개발 노력이 필요할 수 있으므로 사용하지 않는다.
(3) 때로는 실제 콘텐츠를 바로 제공하는 것이 사용자 경험 측면에서 더 나을 수 있다. 특히 사용자가 이미 로딩된 콘텐츠를 보고 있는 상태에서 다른 탭으로 이동하는 경우, 사용자는 스켈레톤 화면보다 실제 콘텐츠를 바로 볼 수 있기를 기대할 것이다.
3. 점진적 표출 형태로 사용해야 한다
화면 내에 여러 컴포넌트가 있고, 각 컴포넌트는 서버에서 불러올 때 시간차가 발생할 수 있다. 때문에 각각의 컴포넌트에 대해 스켈레톤을 별도로 처리하는 것이 좋다. (이때 각 컴포넌트가 어떻게 분리되는지는 모르겠다면 개발자에게 확인하도록 한다) 이렇게 함으로써 사용자는 화면 전체가 아니더라도 최소한의 정보를 먼저 받아볼 수 있어 해당 화면이 응답 중이라는 것을 알아차릴 수 있다.
또한, 가능하다면 사용자에게 중요한 정보 순서에 따라 점진적으로 콘텐츠가 나타나면 더욱 효과적이다.
아래 스포티파이의 예시를 통해 자세히 살펴보자.
1,2번 : 제일 처음 헤더에 해당하는 타이틀 영역과 내 프로필이 먼저 나타난다.
3번 : 이후 내 라이브러리에 추가한 리스트 스켈레톤이 나타난다.
4번 : 화면의 메인 리스트가 스켈레톤을 전체적으로 표출되며, 이때 필터 영역은 우선적으로 보여진다.
5,6번 : 내 라이브러리 리스트 및 플레이어 영역의 재생 중인 음악 타이틀이 보인다.
7번 : 최상단의 라이브러리 목록 영역 텍스트가 먼저 나타난다.
8번 : 각 목록의 자켓 표지가 컬러로 변한다. (이후 나타날 자켓 표지의 컬러감을 미리 보여준 것)
9번 : 최종적으로, 각 목록의 사진들이 전부 표출되며 완성된 화면이 나타난다.
이렇듯 모든 화면을 하나의 스켈레톤으로 묶기보다, 각 컴포넌트 별로 나눠서 스켈레톤 처리를 진행해야 한다. 또한, 화면 전체를 스켈레톤 상태로 대기하는 것이 아니라 완성된 콘텐츠가 점진적으로 표출되어야 한다.
4. 스켈레톤, 디자인은 어떻게 해야 할까?
(1) 컬러 : 스켈레톤은 최종 화면이 나타나기 전 아직 미완성 상태의 화면 역할을 한다. 때문에 기능을 갖추거나 눈에 띄어서는 안 된다. 차분한 컬러톤을 사용하며 지나치게 뚜렷한 대비를 줄 필요가 없다.
(2) 형태 : 최종적으로 나타날 컴포넌트의 와이어프레임 형태로 디자인한다.
대체로 카드나 리스트 컴포넌트일 때 많이 사용하며, 세부적으로 이미지나 텍스트가 나타나는 위치에 간단한 도형을 사용해 표현한다. 이때 px단위까지 신경 써가면서 최종 화면과 정확히 맞아떨어져야 할 필요는 없다.디테일한 크기나 형태, 위치 등은 조금씩 달라져도 괜찮다.
다만, 최종 화면과 너무 상이한 컴포넌트 형태를 사용하지는 않도록 주의한다.
실무에 뛰어들어 일하다 보면 때로 너무 중요한데 아무도 가르쳐주지 않은 것들이 있다.
내게 그중 하나가 스켈레톤 화면이었다. 각 프로젝트를 진행하다 보면 로딩 화면은 매번 필요하다. 그때마다 스켈레톤 화면을 잡고 있다 보니, 정확한 가이드라인의 필요성을 느껴 이번 글을 작성하게 되었다.
사용자는 아주 짧은 시간 내에 서비스에 대한 인상을 결정한다. 아마 대다수의 사용자들은 스켈레톤 화면을 '인지'하지는 못할 테지만, 이러한 잠깐의 경험에도 사용자를 생각한다면 사용자에게 분명 '경험'은 남을 것이다. 이러한 긍정적 경험이 쌓이고 쌓인다면 반드시 서비스에 대한 애정으로 연결될 것이라 생각한다.
참고자료
https://www.nngroup.com/articles/skeleton-screens/
https://uxdesign.cc/what-you-should-know-about-skeleton-screens-a820c45a571a
