Skeleton Loading(스켈레톤 로딩) — 콘텐츠가 나타날 자리를 먼저 보여 주는 UI
웹사이트에서 목록이나 대시보드를 열었을 때, 실제 데이터가 표시되기 전에 회색 박스와 선이 먼저 나타나는 경우가 있습니다. 잠시 뒤 그 자리에 환자 목록이나 통계 카드, 공지사항이 채워집니다. 이처럼 콘텐츠가 들어올 자리와 형태를 미리 보여 주는 로딩 UI를 Skeleton Loading(스켈레톤 로딩)이라고 합니다.
스켈레톤 로딩은 단순히 기다리는 시간을 꾸미는 효과가 아닙니다. 사용자가 화면이 멈춘 것이 아니라 데이터를 불러오는 중이라는 사실을 이해하도록 돕고, 완성될 화면의 구조를 미리 알려 주는 역할을 합니다.
1. Skeleton Loading이란?
Skeleton Loading은 실제 데이터가 도착하기 전에 최종 콘텐츠의 레이아웃을 단순한 형태로 표현하는 UI입니다.
예를 들어 병원 관리자 대시보드에 환자 현황 카드 3개와 최근 공지 목록이 표시된다고 가정해 보겠습니다. 데이터가 도착하기 전에는 카드가 들어갈 위치에 둥근 사각형을, 제목이 들어갈 위치에는 짧은 선을, 목록 행에는 이미지와 텍스트를 대신하는 회색 도형을 보여 줍니다. 데이터가 준비되면 스켈레톤이 실제 정보로 교체됩니다.
로딩 스피너와 무엇이 다를까?
로딩 스피너(Spinner): 회전 아이콘 등을 보여 주며 작업이 진행 중임을 알립니다.
스켈레톤 로딩(Skeleton Loading): 완성될 콘텐츠의 위치와 형태를 미리 보여 줍니다.
프로그레스 바(Progress Bar): 전체 작업 중 어느 정도 진행됐는지 측정 가능한 진행률을 표현합니다.
진행률을 실제로 측정할 수 없다면 임의의 퍼센트를 표시하지 않는 것이 좋습니다. 스켈레톤 역시 데이터가 언제 도착할지 보장하는 표시가 아니라, 기다리는 동안 화면 구조를 이해하도록 돕는 표시입니다.
2. 화면에서는 어떻게 보일까?
병원 관리자 대시보드의 환자 현황 화면을 예로 들어보겠습니다.
데이터를 불러오는 동안 다음과 같은 형태가 표시됩니다.
상단 요약 카드 3개: 숫자가 들어갈 자리에 짧고 굵은 회색 막대
환자 목록: 환자 사진 자리에 원형 도형, 이름과 진료 정보 자리에 가로 선
공지사항: 제목과 날짜가 들어갈 자리에 길이가 다른 선
차트 영역: 실제 그래프의 크기와 비슷한 단순한 윤곽
핵심은 실제 화면과 스켈레톤 화면의 배치가 최대한 일치해야 한다는 것입니다. 실제 콘텐츠가 나타났을 때 화면이 크게 흔들리거나 요소가 갑자기 이동하면 사용 경험이 나빠집니다.
시각적 예시 방향
카드형 스켈레톤: 대시보드의 통계 카드나 KPI 카드에 사용합니다.
목록형 스켈레톤: 환자 목록, 예약 내역, 직원 목록처럼 반복되는 행이 있는 화면에 사용합니다.
상세 화면형 스켈레톤: 환자 상세정보나 검사 결과처럼 제목, 요약, 본문, 부가 정보가 있는 화면에 사용합니다.
색상은 배경과 구분되는 낮은 대비의 중립색을 사용하고, 움직이는 효과는 은은하게 적용합니다. 화면 전체를 과도하게 깜박이거나 빠르게 움직이게 만들 필요는 없습니다.
3. 실전 예제: 병원 관리자 대시보드
병원 운영관리자가 대시보드에 접속하면 오늘의 입원 환자 수, 병상 가동률, 당일 퇴원 예정자, 최근 환자안전 보고 현황을 확인한다고 가정하겠습니다.
서버에서 데이터를 불러오는 동안에는 다음과 같이 표시합니다.
입원 환자 수 카드: 숫자 영역을 나타내는 굵은 막대
병상 가동률 카드: 숫자와 보조 설명을 나타내는 두 개의 막대
퇴원 예정자 목록: 이름·병실·예정일 위치에 대응하는 선
환자안전 보고 현황: 상태 배지와 보고 제목 위치에 대응하는 도형
데이터가 도착하면 해당 영역만 실제 내용으로 교체합니다. 화면 전체를 새로 그리기보다 각 데이터 영역의 로딩 상태를 독립적으로 관리하면, 먼저 준비된 정보부터 확인할 수 있습니다.
단, 환자 정보처럼 민감한 데이터는 로딩 화면에 실제 환자 이름이나 사진을 임시로 노출해서는 안 됩니다. 스켈레톤은 실제 데이터를 대신하는 장식적 자리 표시자여야 합니다.
4. 복사해서 사용하는 실전 프롬프트
아래 프롬프트를 ChatGPT 등 AI 도구나 바이브코딩 환경에 입력해 보세요.
병원 관리자용 웹 대시보드에 Skeleton Loading UI를 구현해 줘.
목적
서버에서 데이터를 불러오는 동안 사용자가 화면이 멈춘 것으로 오해하지 않도록 한다.
실제 콘텐츠가 표시될 위치와 레이아웃을 미리 보여 준다.
대상 화면
오늘의 입원 환자 수, 병상 가동률, 퇴원 예정자 수를 보여 주는 요약 카드 3개
최근 환자 목록 5개 행
최근 공지사항 3개 항목
화면 구성
실제 콘텐츠와 동일한 크기와 배치로 스켈레톤을 만든다.
카드에는 숫자와 설명 문구를 대신하는 막대를 배치한다.
환자 목록에는 원형 아바타 자리와 텍스트 막대를 배치한다.
공지사항에는 제목과 날짜를 대신하는 길이가 다른 막대를 배치한다.
배경과 구분되는 부드러운 중립색을 사용한다.
동작 조건
데이터 로딩 중에는 해당 영역의 스켈레톤을 표시한다.
데이터가 도착하면 스켈레톤을 실제 콘텐츠로 교체한다.
데이터가 없는 경우에는 로딩 화면을 계속 보여 주지 말고 별도의 Empty State를 표시한다.
오류가 발생하면 오류 안내와 재시도 기능을 표시한다.
먼저 도착한 데이터 영역은 다른 영역을 기다리지 않고 표시할 수 있도록 한다.
접근성 및 품질 조건
로딩 중인 영역에 적절한 상태 정보를 제공한다.
장식용 스켈레톤 도형은 보조기술이 불필요하게 읽지 않도록 처리한다.
움직임을 줄이도록 설정한 사용자를 위해 애니메이션을 줄이거나 제거한다.
실제 콘텐츠가 표시될 때 레이아웃 이동이 최소화되도록 한다.
실제 환자정보를 로딩용 예시 데이터로 노출하지 않는다.
로딩, 성공, 데이터 없음, 오류 상태를 명확히 구분한다.
먼저 화면별 로딩 상태와 컴포넌트 구조를 설명한 다음, 실제 동작하는 UI로 구현해 줘. 임의의 진행률이나 가짜 서버 응답을 실제 데이터인 것처럼 표시하지 마.
5. 결과를 개선하는 5가지 팁
① 실제 화면과 크기와 위치를 맞추기
스켈레톤과 실제 콘텐츠의 높이·너비가 크게 다르면 데이터가 도착할 때 화면이 흔들립니다. 실제 카드, 목록, 이미지의 비율을 기준으로 자리 표시자를 설계하세요.
② 모든 화면에 무조건 적용하지 않기
짧은 작업이나 아주 작은 데이터 요청에는 스켈레톤보다 간단한 로딩 표시가 더 적절할 수 있습니다. 사용자가 기다리는 시간이 체감되고, 화면 구조를 미리 보여 주는 것이 도움이 될 때 적용합니다.
③ 로딩 상태를 영역별로 관리하기
대시보드의 모든 데이터가 동시에 도착해야 화면을 보여 주도록 만들 필요는 없습니다. 입원 현황이 먼저 준비됐다면 그 영역부터 실제 데이터로 바꾸고, 나머지 영역은 계속 로딩 상태로 유지할 수 있습니다.
④ 로딩·빈 화면·오류를 구분하기
Loading: 데이터를 불러오는 중
Empty: 정상적으로 조회했지만 표시할 데이터가 없음
Error: 데이터를 불러오는 데 실패함
데이터가 없는데 스켈레톤만 계속 보여 주거나, 오류가 발생했는데 무한히 기다리게 해서는 안 됩니다.
⑤ 움직임과 접근성을 함께 고려하기
반짝이거나 흐르는 애니메이션은 로딩 상태를 알아차리는 데 도움을 줄 수 있지만, 과도하면 피로감을 줍니다. 움직임을 줄이도록 설정한 사용자를 고려하고, 로딩 중인 영역에는 상태 정보도 제공하세요.
6. 바이브코딩 실습 체크리스트
☐ 데이터 로딩 중에 스켈레톤이 표시되는가?
☐ 스켈레톤의 크기와 위치가 실제 콘텐츠와 일치하는가?
☐ 데이터가 도착하면 실제 콘텐츠로 자연스럽게 교체되는가?
☐ 일부 데이터만 준비됐을 때 준비된 영역부터 표시되는가?
☐ 조회 결과가 없을 때 Empty State가 표시되는가?
☐ 서버 오류가 발생하면 오류 안내와 재시도 기능이 제공되는가?
☐ 불필요하게 빠르거나 강한 애니메이션을 사용하지 않는가?
☐ 민감한 실제 정보가 로딩 화면에 노출되지 않는가?
7. 핵심 정리
Skeleton Loading은 데이터가 도착하기 전에 완성될 화면의 구조를 미리 보여 주는 UI입니다. 병원 대시보드, 환자 목록, 예약 내역, 검사 결과 조회처럼 데이터 로딩이 필요한 화면에서 유용합니다.
좋은 스켈레톤은 단순히 회색 도형을 늘어놓는 것이 아닙니다. 실제 콘텐츠와 구조를 일치시키고, 로딩·빈 화면·오류 상태를 구분하며, 사용자가 기다리는 동안 화면의 맥락을 이해하도록 돕는 설계입니다.
좋은 로딩 UI는 기다리는 시간을 감추는 것이 아니라, 기다리는 동안에도 사용자가 화면을 이해할 수 있게 만드는 것입니다.
다음 편 예고 · 19편 Empty State
다음 19편에서는 Empty State(빈 상태 UI)를 살펴봅니다.
검색 결과가 없거나 아직 등록된 데이터가 없을 때, 화면을 단순히 비워 두는 대신 무엇을 안내하고 어떤 다음 행동을 제안해야 할까요? 병원 예약 목록, 환자 조회, 직원 교육 이력 화면을 예로 들어 데이터가 없는 상황에서도 사용자가 다음 단계로 자연스럽게 이동하도록 돕는 UI를 알아보겠습니다.