안녕하세요.
헤이딜러 안드로이드팀 박상권입니다.
지금 이 글을 읽는 여러분들은 아래질문에 답하실 수 있으신가요?
“스켈레톤 로딩은 어떤 화면에서 사용해야 할까?”
질문에 대한 명확한 답이 떠오르지 않으셨다면 잘 찾아오셨습니다.🤗🤗
이 포스팅에서는 어떤 기준으로 스켈레톤 로딩을 사용해야 하는지에 대해
헤이딜러 제품팀에서 진행했던 UX 스터디에 대해서 공유합니다.
다른 UX스터디 주제들도 궁금하시다면 아래 목차에서 확인해보세요
이 내용은 지난 드로이드나이츠 2023 행사에서도 발표된 내용입니다.
YouTube영상으로도 확인하실 수 있습니다.
문제
- 언제 써야 하는지 기준이 명확하지 않았음😕
- 사용 시 화면을 어떻게 그려야하는지 가이드가 없어 리소스가 많이 든다.
스켈레톤 로딩이란?
- 스켈레톤 로딩은 빈 화면 대신, 어떤 형식으로 콘텐츠가 자리잡을지 구조적으로 미리 보여주는 로딩입니다.
(점진적 콘텐츠 로딩) - 사용자에게 로딩을 납득할 수 있는 충분한 정보를 제공합니다.
: 예시) 화면에서 어디가 텍스트고, 어디가 이미지인지
스켈레톤 로딩의 장점/단점
장점
- 대기시간의 주의를 분산시키고 진행 상황에 집중 할 수 있게 함
- 체감 로딩 시간이 짧음
단점
- 화면마다 새로운 스켈레톤 ui를 적용해야하므로 제작 비용이 많이 든다☠️
[참고] 스피너 로딩(Progress)
- 대부분의 스피너 로딩은 짧은 로딩 시간 (1~2초)에 사용
- 사용자 행동에 대한 강한 피드백을 제공
- 동적인 요소로 사용자가 지루함을 느끼지 않게 함
단, 체감 로딩 시간이 길다. ( 로딩 시간이 길어지면 지루함을 느낌 ) - 그래픽 요소를 다양하게 표현할 수 있기 때문에 서비스 브랜딩을 담을 수 있음
헤이딜러 제품팀의 기준
중요도가 높고
전체적인 레이아웃의 변경이 잦지 않은 화면에서 사용해야 한다.
용어 정의
- Shimmer(쉬머) 로딩 ❌
: 아마 안드로이드 라이브러리중 페이스북에서 만든 shimmer 라이브러리 영향일수도 - Skeleton(스켈레톤) 로딩 ✅
사용 기준📌📌
- 로딩이 짧게 느껴져야 하는 것이 중요한 화면
- 이전 화면 없이 새롭게 보여지는 화면
- 전체적인 레이아웃 변경이 잦지 않은 화면
: case에 따라서 최초 보여지는 UI가 다르면 X - API 응답시간이 짧은 경우에는 깜박거리는 것처럼 보여서 오히려 사용자 경험이 안좋을 수 있다.
위 기준에 맞는 화면이 무엇일지 정합니다.
무엇일지 정했다면 화면의 텍스트/이미지 영역을 가능한 비슷하게 그려냅니다.
단, 너무 마이너한 영역은 생략하도록 합니다.
( 아이콘이나 이미지안에 있는 아이콘, 텍스트 영역 등)
헤이딜러 앱 예시
지금까지 헤이딜러 제품팀에서 고민하고 UX스터디를 진행했던
‘스켈레톤 로딩의 사용기준’ 에 대해서 공유해드렸습니다.
여러분들의 ‘스켈레톤 로딩’에 대한 기준은 어떠신가요?
회사에서 정하신 기준이 있으시다면 공유해주시면 좋을것 같습니다.
저희와 함께 헤이딜러 서비스를 발전 시켜나가실 분들을 기다리고 있습니다.
감사합니다.
