# Skeleton URL: /components/skeleton Source: https://github.com/daangn/seed-design/blob/dev/docs/content/components/skeleton.mdx 콘텐츠가 로딩되는 동안 이후 나타날 요소의 윤곽을 미리 보여주어 로딩 시간을 짧게 느끼게 하는 UI 요소입니다. | Platform | Status | | --- | --- | | Figma | Done | | [React](/react/components/skeleton) | Done | | Lynx | Not Ready | | iOS | Done | | Android | Done | ## Anatomy ![Skeleton의 Anatomy 이미지. Background와 Corner Radius로 구성됩니다.](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/40b03933-0147-4b2a-ae1b-f20180603d15) Skeleton은 background, Corner radius로 구성되며 로딩 시작 시 shimmer animation이 나타납니다. ## Properties ### Size ![Skeleton의 Size - Width와 Height를 자유롭게 조절할 수 있습니다.](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/4c836e3c-e497-48a3-a7bb-46291f59d9c6) Skeleton의 너비(Width)와 높이(Height)는 자유롭게 조절할 수 있습니다. 표시될 실제 콘텐츠의 크기를 반영해 조절합니다. ### Radius ![Skeleton의 Radius Property - 0, 8, 16, 9999](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/80f34a90-a209-4601-9bc6-ca0ad1a93f30) Skeleton의 Radius 값은 표현하려는 콘텐츠의 형태에 따라 0, 8, 16, 9999를 사용합니다. | 콘텐츠 유형 | Radius | | ------------------------------------- | ------ | | **텍스트** | 8 | | **카드 및 썸네일** | 16 | | **[Avatar](/components/avatar) (원형)** | 9999 | ### Tone ![Skeleton의 Tone Property - Neutral, Magic](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/2325d507-6550-44f8-aed0-094174a27f5b) 일반 콘텐츠는 neutral, AI 활용 콘텐츠는 magic 스타일을 사용합니다. ### Animation ![Skeleton의 Animation - Shimmer 애니메이션](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/37d52dff-1e31-4516-ad5f-52897a0b6979) Skeleton은 로딩 중임을 나타내기 위해 시머(Shimmer) 애니메이션을 기본으로 제공합니다. SEED React Skeleton을 통해 Skeleton의 Shimmer 애니메이션을 확인합니다. ## Guidelines ### Skeleton의 사용 ![Skeleton 사용 예시 - 검색 화면에서의 활용](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/5ceb6a53-a5c2-46c0-8e7a-b2e888dcf3b7) ![Skeleton 사용 예시 - 게시글 상세 화면에서의 활용](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/3352d23e-de64-4d58-923a-bf0868700687) Skeleton은 주로 목록이나 카드 뷰, 리스트 뷰 등 반복되는 데이터 기반의 화면 또는 곧 나타날 콘텐츠의 구조를 미리 보여줄 수 있는 페이지에서 사용됩니다. **Skeleton을 언제 사용해야 하는지에 대한 자세한 기준은 로딩 가이드를 참고해 주세요.** ### 상황에 맞는 Tone 사용하기 ![Tone 사용 예시 - Neutral](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/81256fd2-48b2-4ed3-b0b1-fa4e09322f3e) ![Tone 사용 예시 - Magic](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/c8a27de4-b129-4628-bca9-141045142060) 데이터 종류에 따라 Skeleton이 다른 색상으로 표시됩니다. 맥락에 알맞은 Tone을 선택하여 사용해주세요. | Tone | 사용 상황 | | ----------- | ---------------------------------------- | | **Neutral** | 데이터를 불러오는 일반적인 로딩 경험일 때 표시됩니다. | | **Magic** | 빈 공간을 자동으로 채워주는 등 AI 기능이 활성화되었을 때 나타납니다. | **AI 로딩에 대한 자세한 내용은 AI UI 가이드를 참고해 주세요.** ### Skeleton vs. Progress Circle ![로딩 상태를 나타내기 위해 Skeleton을 사용한 예시](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/7e50e877-abd4-4d9d-9107-f4d58e151541) ![로딩 상태를 나타내기 위해 Progress Circle을 사용한 예시](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/aba383cf-a5f9-4151-ba4e-05884e25c1f0) Skeleton과 [Progress Circle](/components/progress-circle)은 콘텐츠 로딩 상태를 보여준다는 공통점 때문에 자주 혼동될 수 있습니다. Skeleton은 무엇이 로딩될지 콘텐츠의 구조를 보여주는 반면, [Progress Circle](/components/progress-circle)은 '지금 로딩 중'이라는 상태 자체를 알려준다는 점에서 핵심적인 차이가 있습니다. | | **Skeleton** | **Progress Circle (Indeterminate)** | | --------- | -------------------------------------- | ----------------------------------- | | **핵심 용도** | 콘텐츠의 구조를 미리 볼 수 있음 | 콘텐츠의 형태와 상관 없이 시스템이 작동 중이라는 사실을 알려줌 | | **위치** | 콘텐츠가 실제로 표시될 영역에 표시 | 특정 영역(특정 컴포넌트)의 중앙 또는 화면 전체에 표시 | | **특징** | 넓은 영역의 콘텐츠가 한 번에 로딩될 때 반복되는 콘텐츠가 로딩될 때 | 데이터 저장, 일부 새로고침 등 특정 행동으로 인해 로딩될 때 | | **로딩 시간** | 상대적으로 긴 로딩 시간에 적합 (1~10초 내) | 짧은 로딩 시에 적합 (1~4초 내) | | **애니메이션** | 곧 내용이 나타날 것을 표현하는 shimmer 애니메이션이 나타남 | 지속적인 회전 애니메이션이 나타남 | ## Specification Component spec (JSON): /rootage/components/skeleton.json