Skeleton screen, Facebook이 빠르게 따라한 2013년 디자인

한 줄로

로딩 스피너 대신 회색 박스로 콘텐츠 자리를 미리 보여주는 디자인입니다. 한 디자이너의 2013년 블로그 글이 시작이었습니다.

어디서 왔나

2013년 9월, UI 디자이너 루크 브로블레스키(Luke Wroblewski)가 자신의 블로그에 "Mobile Design Details: Avoid The Spinner"라는 글을 올렸습니다. 핵심 주장은 단순했습니다.

"스피너가 돌아가는 동안 사용자는 '얼마나 기다려야 하지?'를 생각한다. 빈 화면은 '아무것도 안 일어나고 있다'고 느끼게 만든다. 차라리 앞으로 들어올 콘텐츠의 윤곽을 회색으로 미리 그려주면, 사용자는 '곧 채워질 것'이라고 느낀다."

브로블레스키는 이 패턴에 이름을 붙였습니다. Skeleton Screen. 살이 붙기 전의 뼈대입니다.

이 글이 발표된 직후, Facebook이 모바일 앱에 같은 패턴을 도입했습니다(2014). YouTube, LinkedIn, Slack이 차례로 따라갔습니다. 2017년 무렵에는 거의 모든 모바일 앱의 표준이 됐습니다.

흥미로운 사실은 skeleton은 실제 로딩 시간을 줄이지 않습니다. 인지된 로딩 시간만 줄입니다. 평균 1.5초 빠르게 느껴진다는 측정이 있습니다.

지금 우리가 쓰는 방식

콘텐츠 카드 형태는 이미지 자리, 제목 자리, 본문 자리를 회색 박스로 미리 그립니다. shimmer 효과는 회색 박스 위에 좌에서 우로 흐르는 빛입니다. "곧 채워질 것"을 강조합니다. 데이터의 가짜 골격은 실제 데이터의 길이를 추정해서 비슷한 길이의 회색 막대로 표현합니다.

대안 패턴으로 Progressive image loading은 이미지를 흐릿하게 먼저 보여주다가 점점 선명해집니다(Medium, Pinterest). Optimistic UI는 서버 응답을 기다리지 않고 일단 화면에 반영, 실패하면 롤백합니다(Twitter 좋아요).

바이브 메이커가 챙길 한 가지

Skeleton은 "기다림을 기다림처럼 안 보이게" 만듭니다. 사용자는 1초가 2초가 되는 걸 견디기 어렵지만, 무언가 나타나고 있다고 느끼면 3초도 견딥니다.

관련

Spinner · Optimistic UI · Doherty Threshold