로딩 최적화와 Skeleton UI 사용 이유

[sgoldenbird]

📌 배운 내용

Skeleton UI는 콘텐츠 로딩 중 사용자에게 미리 레이아웃의 "뼈대"를 보여주는 전략이다.
이를 통해 화면 깜빡임, 점프 현상, 위치 변경 등 사용자 불쾌감을 유발하는 Layout Shift 문제를 해결할 수 있다는 점을 배웠다.
기존에는 단순히 로딩 스피너로만 처리하면 된다고 생각했지만, 시각적 안정성까지 고려해야 한다는 점이 새로웠다.

---

🔍 배경 / 문제 상황

React 앱에서 페이지를 구성하던 중, 로딩 중에 텍스트와 버튼이 갑자기 튀는 현상이 발생했다.
UX 개선을 위해 Skeleton UI를 도입하게 되었고, 그 과정에서 Layout Shift와의 연관성을 학습함.

---

✅ 핵심 정리 / 해결 방법

왜 Skeleton UI를 사용하는가?

목적	설명
레이아웃 안정성 보장	콘텐츠 로딩 중에도 레이아웃이 갑자기 바뀌지 않아 사용자 혼란을 줄임
체감 속도 향상	실제 콘텐츠가 늦게 도착해도 화면에 무언가가 먼저 뜨기 때문에 더 빠르게 느껴짐
시각적 일관성 유지	데이터 유무에 관계없이 항상 일정한 UI 구조를 유지할 수 있음

---

Performance 탭에서 확인하는 Layout Shift

Layout Shift는 Experience 항목에서 CLS(Cumulative Layout Shift) 지표나 Layout Shift 이벤트 항목(체크 무늬 바) 으로 확인한다.
또, Timings 패널이나 아래 Summary > Layout Shift Events 등에서도 확인할 수 있다.

• 크롬 개발자도구 → Performance 탭 → Record
• Timeline 상단에 나타나는 초록색 막대는 성능이 양호한 프레임을 의미함
• Layout Shift 이벤트는 "Experience" > "Layout Shift" 항목에서 따로 확인 가능
• Layout Shift는 요소의 크기나 위치가 예기치 않게 변경되었을 때 기록되며, UX 불안정성의 원인이 될 수 있음

---

Skeleton UI로 해결되는 문제

문제 상황	Skeleton UI 도입 효과
데이터 도착 전 UI가 비어 있음	뼈대 UI로 사용자가 어떤 정보가 표시될지 예상 가능
실제 콘텐츠 도착 시 요소 위치 변경	Skeleton과 실제 콘텐츠 크기가 비슷하여 레이아웃 이동 없음
로딩 중 깜빡임 또는 점프 현상 발생	초기부터 공간이 확보되어 깜빡임이나 이동 없이 콘텐츠가 자연스럽게 등장

---

🧠 느낀점 또는 생각 메모

단순히 데이터를 기다리는 시간만 고려했던 기존 로딩 방식은 시각적으로 불안정할 수 있다는 걸 체감했다.
Skeleton UI는 심리적 체감 속도와 실제 UX 모두를 개선할 수 있는 좋은 전략임을 알게 됐다.
향후에도 리스트, 카드, 등 로딩 전후 UI 위치가 달라질 수 있는 곳에는 적극적으로 Skeleton을 도입할 예정이다.

---

📚 래퍼런스

• Google Web.dev - Cumulative Layout Shift
• Chrome DevTools - Performance Panel Overview
• Skeleton Screens - NNGroup