본문 바로가기
카테고리 없음

UXUI 스켈레톤 스크린이란 무엇인가?

by 유메딧 2024. 1. 12.

UXUI 스켈레톤 스크린은 오랫동안 존재해 왔지만 점점 더 인기 있는 UX 최적화 도구가 되고 있습니다. 왜 사용해야 하는지, 언제 나타나야 하는지 설명해 드립니다. 속도를 위한 디자인은 좋은 UX의 점점 더 중점이 되고 있습니다. 더 많은 사용자가 고속 웹 페이지와 앱을 사용할수록 로딩 시간이 길어질 때 더 많은 지루함을 느낄 것입니다. 안타깝게도 로딩 시간이 항상 디자이너의 통제 하에 있는 것은 아닙니다. 하지만 로딩하는 데 약간 더 오랜 시간이 걸리는 내용이 많은 웹 페이지에서는 사용자의 기대를 부응할 방법과 그들이 정확히 무엇을 기다리고 있는지에 대한 대응은 UX 디자이너에게 달려 있습니다. 이것이 사용자 인터페이스(UI) 기능인 스켈레톤 스크린이 프로세스에 들어가는 이유입니다.

 

페이스북의 스켈케톤 스크린

 

스켈레톤 스크린이란?

 

해골을 뜻하는 '스켈레톤'이라는 용어는 페이지가 로드되는 동안 볼 수 있는 할로윈 스타일의 해골 이미지를 연상시킬 수 있지만 현실은 덜 으스스합니다. 스켈레톤 스크린은 콘텐츠가 기다리는 동안 로딩 이미지를 제공하여 사용자가 작업에 집중할 수 있도록 도와줍니다. 또한 활동을 표시하고 앱이나 웹사이트의 목적을 전달하는 데에도 사용할 수 있습니다.

 

스켈레톤 스크린 주요 목적 4가지

  1. 사용자에게 무슨 일이 일어나고 있는지 보여주기
  2. 사용자에게 다음에 나올 내용에 대한 아이디어를 제공하기
  3. 문제해결을 위해 노력하고 있음을 알리기
  4. 사용자에게 실제 페이지를 보는 데 얼마나 걸리는지 예상하게 하기

스켈레톤 스크린은 오랫동안 사용되어 왔지만 특히 인지 부하의 최소화와 관련하여 점점 더 인기 있는 UX 최적화 도구가 되고 있습니다. 사람들은 페이지 로딩이 완료되었을 때 페이지가 어떻게 보일지 시각화하는 데 도움이 되고 백그라운드에서 활동이 진행 중일 때 피드백을 제공하기 때문에 즐겨 사용합니다.

스켈레톤 스크린은 단순 빈 페이지나 오류 메시지가 아닙니다. 이는 사용자 경험을 염두에 두고 세심하게 제작된 것입니다. 콘텐츠가 로드되기를 기다리는 동안 방해 없는 보기(예: 빈 공간의 이미지)를 제공함으로써 스켈레톤 화면은 사용자가 모든 일을 제대로 하고 있는지 걱정하는 대신 기다리는 동안 작업에 집중할 수 있도록 도와줍니다.

스켈레톤 스크린은 애니메이션 스피너 또는 정적 이미지와 같은 다른 방법과 함께 사용할 때 가장 효과적입니다.

 

스켈레톤 스크린이 유용한 이유

사용자가 앱이나 웹사이트 페이지를 클릭했지만 아무 일도 일어나지 않는다면 무언가 잘못되었다고 생각할 것입니다. 긍정적으로 사용자 경험을 위해서는 페이지가 로드될 때 무슨 일이 일어나고 있는지 명확하게 전달하는 것이 중요합니다.

스피너 아이콘으로 대체하여 무슨 일이 일어나고 있다는 것을 전달하거나 사용자에게 기다려야 한다는 것을 알리기 위한 명백한 선택처럼 보일 수 있습니다. 그러나 연구에 따르면 진전이 없어 보이는 빈 상태는 사용자의 신뢰를 높이기가 쉽지 않습니다.

스켈레톤 스크린은 활동이 일어나고 있다는 것과 그리고 결정적으로 오래 걸리지 않을 것이라는 것을 사용자와 소통하기 위한 방법으로 사용될 수 있습니다. 사이트를 다시 사용할 수 있게 되기까지 얼마나 기다려야 하는지에 대한 시각적 단서를 제공함으로써 사용자와 제품 간의 신뢰를 구축하는 데 도움을 줄 수 있습니다.
긴 로딩 시간은 사용자들을 짜증나게 할 수 있지만 스켈레톤 스크린은 주요 지점들에서 피드백을 제공하고 그러한 대기 시간들을 더 견딜 수 있도록 만듭니다. 여러분은 또한 활동을 나타내기 위해 스켈레톤 스크린을 사용할 수 있습니다. 예를 들어, 애니메이션 스켈레톤 스크린은 진행률 표시기로 사용되거나 심지어 무엇인가 잘못되었음을 나타내는 에러 메시지로 사용될 수 있습니다.

 

 

스켈레톤 스크린 사용법

스켈레톤 스크린은 사용자가 제품에 계속 참여할 수 있도록 하는 훌륭한 방법입니다. 하지만 모든 상황에서 작동하는 것은 아니며 전략적으로 사용해야 합니다. 스켈레톤 화면에서 가장 많이 사용되는 것 중 하나는 대시보드, 카드 또는 목록과 같은 콘텐츠 및 이미지가 많은 웹 페이지입니다. 웹 페이지에서 여러 이미지를 동시에 로드하거나 여러 다른 소스에서 데이터를 꺼낼 필요가 있는 경우 사용자의 불만을 피하기 위해 스켈레톤 화면이 필요할 것입니다. 예상 로드 시간이 지나치게 길다면, 나머지 콘텐츠는 백그라운드로 로드하고 필요한 내용만 페이지에 표시하는 대신 게으른 로드를 고려해 볼 가치가 있을 수도 있습니다.

 

스켈레톤 스크린을 사용하는 것에는 단점이 없는 것처럼 보일지도 모르지만 사용자에 따라 스켈레톤 스크린은 명확성보다 더 큰 혼란을 야기할 수 있습니다. 스켈레톤 스크린이 올바른 시각적 단서(그리고 대신 사용할 것)가 아닌 경우 몇 가지 예가 있습니다:

  • 빠르게 페이지를 로드한다. 스켈레톤 스크린은 가장 일반적으로 느린 로딩 시간에 사용되므로 페이지가 로드되기 전에 0.5초 동안만 스크린을 볼 수 있습니다. 이 경우에는 필요 없습니다.
  • 비디오 콘텐츠 스피너는 비디오 버퍼링의 업계 표준 기호로 간주되므로 스크립트를 고수하는 것이 가장 좋습니다.
  • 장기간 실행되는 프로세스 파일 변환, 업로드/다운로드 또는 데이터 가져오기는 프로세스의 각 단계를 설명하는 진행 막대 또는 텍스트 표시기를 사용해야 합니다.

 

스켈레톤 스크린을 평결하다

스켈레톤 스크린은 가능한 한 실제 콘텐츠의 외관과 일치해야 한다는 점도 중요합니다. 사용자가 기다려야 하고 콘텐츠가 스켈레톤 스크린 요소가 표시한 위치에 있지 않으면 페이지 뒤로가기를 할 수도 잇습니다.

스켈레톤 스크린은 웹사이트나 앱에 대한 사용자의 전반적인 경험을 향상시키는 데 매우 중요합니다. 새로운 사용자에게 앱이나 웹사이트의 가치 제안을 설명하고 콘텐츠가 로딩되기 전에 참여도를 높이는 효과적인 방법입니다. 또한 콘텐츠가 느리게 로딩될 때에도 사용자의 가치 있는 피드백을 제공합니다.
스켈레톤 스크린, 로딩 바, 스피너 또는 빈 페이지 중 어느 것을 선택할 지 확신할 수 없나요? 청중들에게 스켈레톤 스크린이 얼마나 효과적인지 평가하기 위해 테스트할 가치가 있습니다. 스켈레톤 스크린은 UX 최적화를 위한 도구이지만 긴 로딩 시간이나 원활한 페이지 간 전환을 위한 완전한 해결책은 아닙니다. 페이지마다 다른 로딩 시각화를 하면 가능한 가장 효과적인 방법으로 속도를 위해 설계할 수 있습니다.

 

반응형