[React] 스켈레톤 로딩이란?

스켈레톤 로딩(스켈레톤 스크린)이란?

스켈레톤=뼈대

페이지 콘텐츠가 완전히 렌더링되기 전에 나타나는 화면, 최종 콘텐츠가 제자리에 로드되기 전에 페이지 구조의 윤곽을 나타내는 연한 색상의 배경, 선 및 텍스트로 구성

 

대표적인 사이트: 유튜브 아래 연회색 화면 처럼 썸네일 화면이 뜨기전에 자리잡고 있는 스크린

 

---

Q. 무조건 스켈레톤 화면을 보여주는게 사용자 경험에 도움이 될까요?

스켈레톤 화면을 다 사용하는 것이 올바를까? 이것에 대한 답은 카카오 에서 찾을 수 있었다.

 

 

Progress Indicator에 대한 UX 리서치

세계적인 UX 리서치 그룹 닐슨 노먼은 Progress Indicator에 대한 중요성을 강조하며 아래와 같은 주요 지침을 이야기 하였습니다.

(Progress Indicator: 로딩 중임을 나타내는 사용자 인터페이스 요소. 단어 뜻 그대로 작업의 진행(progress)을 표시(indicate)하는 것이다.)

좋은 Progress Indicator는 사용자에게 긍정적인 경험을 줄 수 있고 사용자가 작업을 끝까지 수행할 수 있도록 만들 수 있습니다.

Progress Indicator와 관련된 주요 지침은 다음과 같습니다.

1. 약 1초 이상 걸리는 작업에는 Progress Indicator를 사용하십시오.
2. Loop Animation은 빠른 동작에만 사용하십시오.
3. Percent-done Animation은 10초 이상 걸리는 작업에 사용하십시오.
4. Static Indicator는 사용하지 마십시오.

로드하는데 1초 미만이 소요되는 모든 항목의 경우 반복되는 애니메이션을 사용하면 주의가 산만해집니다. 사용자는 화면에서 어떤 일이 발생했는지 따라갈 수 없고, 화면에 깜빡이는 내용에 대해 불안을 느낄 수 있습니다.

출처: https://www.nngroup.com/articles/progress-indicators/

 

<API의 지연 시간이 100ms과 300ms인 두 가지 케이스: 모두 스켈레톤 로딩 적용의 경우> 

API 지연 시간 300ms인 화면에서는 “즉각적으로 무언가를 불러오고 있다” 는 느낌을 받았습니다. 스켈레톤을 통해 웹 페이지와의 상호작용이 빠르고 쾌적하다는 생각도 들었습니다. 하지만 API 지연 시간이 100ms인 경우는 어떤가요? 실제로 제가 요청한 화면은 더 빠르게 노출되었지만 스켈레톤이 화면에 보여지는 시간이 너무 짧았기 때문에 되려 거슬리는 인상을 받았습니다. 중간 화면이 스켈레톤임을 인지하지 못하고 봤다면 화면이 깨진 느낌, 혹은 살짝 덜그럭거리는 느낌을 받았을 것 같습니다.

이런 경우에는 오히려 사용자에게 스켈레톤을 보여주지 않는 게 나을수도 있지 않을까요?

지연시간이 100ms으로 아주 짧기 때문에 하얀 화면이 중간에 뜨는 부분이 어색하지 않게 느껴지는 것이죠.

>>

공지사항 API는 평균적으로 60ms 전후의 지연시간을 보여주고 있습니다. 만약 이 정도 지연시간이 보편적이라고 생각하면 “API 응답 시간이 짧은 경우에는 스켈레톤이 보여지지 않게끔” 하는 기능을 넣어주는게 오히려 더 좋은 사용자 경험을 줄 수 있지 않을까요?

>>

Firebase Performance Monitoring

저희 카카오페이 프론트엔드 팀에서는 Firebase Performance Monitoring으로 다양한 성능 지표를 수집하고 있습니다.

아래 화면은 모 서비스의 운영 환경 네트워크 요청 응답 시간 지표입니다. 이 서비스를 사용하는 사용자들은 평균적으로 110ms의 지연 이후 API 응답을 받고 있음을 알 수 있습니다.

세부 정보를 보니 75%의 사용자들(75%의 API요청)은 192ms 이내에 응답을 받고 있네요. 만약 스켈레톤 화면을 200ms정도 지연시켜 사용자에게 노출한다면 75%의 사용자에게는 덜그럭 거리는 스켈레톤 뷰를 보여주지 않을 수 있습니다. 더 자연스러운 사용자 경험을 제공할 수 있다는 말과 같은 뜻이겠네요.

“사용자는 100ms~200ms 정도의 스켈레톤 노출에서 덜그럭거림을 느낀다” 라고 가정해봅시다. 이 가정이 맞다면 스켈레톤 노출을 200ms 만큼 지연 시킬 경우 대략 300ms 정도의 지연 시간을 갖는 사용자들은 덜그럭거림을 느낄 수 있겠죠.

지금 이야기중인 이 서비스에서는 대략 90%의 사용자들이 296ms 이내에 응답을 받는다고 합니다. 이 수치를 토대로 생각해보면 스켈레톤을 200ms 지연시킬 경우 전체 사용자 중 75%는 기존에 느끼던 덜그럭거림을 느끼지 않을 수 있지만, 기존에 덜그럭거림을 느끼지 못하던 15%의 사용자들은 덜그럭거리는 스켈레톤 뷰를 보게 된다는 생각을 해볼 수 있을 것 같습니다.

(물론 실 서비스에서는 다양한 시나리오를 세워보고 고민하며, 실험과 검증을 통해 지속적으로 개선 프로세스를 진행해야겠지만) 위 가설이 참이여서 전체 사용자의 75%가 느끼던 덜그럭거림을 덜어내고 15%의 사용자에게만 덜그럭거림을 느끼게 한다면 마냥 손해보는 장사는 아닐 수 있겠다는 생각이 듭니다.

>>

우리는 사용자 경험 향상을 위해 항상 모든 로딩 화면에 Progress Indicator(=Skeleton)을 사용하고 있습니다. 하지만 빠른 인터넷 환경을 사용중인 사용자에게는 오히려 Progress Indicator가 선택적으로 제공될 때 더 좋은 사용자 경험을 줄 수 있을 것 같습니다.

 

"즉, API 응답시간이 짧은 경우에는 스켈레톤 없이 넘어가고, 긴 시간 경우에만 스켈레톤을 적용하는 것이 사용자 경험에 좋다."

 

 

 

 

참고사이트)

[CSS + JS] 스켈레톤 로딩(Skeleton Loading) - 컨텐츠 모자이크

 

무조건 스켈레톤 화면을 보여주는게 사용자 경험에 도움이 될까요? | 카카오페이 기술 블로그