스켈레톤 상태 시스템

스켈레톤 상태 시스템은(는) 무엇을 하나요?

목적

스켈레톤 상태 시스템은 인터페이스의 '로딩' 상태를 설계하기 위한 방법론을 제공합니다. 일반적인 스피너나 진행 막대와 달리, 스켈레톤은 '뼈대'(저충실도 모양)를 사용하여 최종 레이아웃을 근사합니다. 이를 통해 사용자의 인지 대기 시간을 줄이고 콘텐츠가 도착하기 전에 필요한 공간을 확보하여 **누적 레이아웃 이동(Cumulative Layout Shift, CLS)**을 방지할 수 있습니다.

사용 사례

• 데이터가 많은 대시보드: 여러 위젯이 서로 다른 속도로 로드되는 경우.
• 콘텐츠 피드: 기사, 제품 또는 소셜 게시물 목록을 스크롤하는 경우.
• 이미지가 많은 그리드: 고해상도 이미지를 위한 공간을 확보하여 페이지 '점프'를 방지하는 경우.
• 검색 및 필터 뷰: 시스템이 쿼리를 처리 중이라는 즉각적인 피드백을 제공하는 경우.
• 싱글 페이지 애플리케이션(SPA): 데이터가 비동기적으로 가져와지는 라우트 간 전환을 관리하는 경우.

사용하지 말아야 할 경우

• 즉각적인 상호작용: 콘텐츠가 300ms 이내에 로드된다면, 스켈레톤이 산만한 '깜빡임'을 유발할 수 있습니다.
• 간단하고 맥락이 적은 로드: 단일 버튼이나 작은 태그와 같은 작은 요소에는 표준 스피너나 '로딩 중...' 텍스트가 더 적합합니다.
• 정적 콘텐츠: 하드코딩되거나 캐시되어 즉시 렌더링되는 콘텐츠.
• 고속 실시간 데이터: 데이터가 너무 빨리 변경되어 스켈레톤이 계속 나타났다 사라지면 시각적 피로를 유발할 수 있습니다.

입력값

1. 대상 레이아웃: 컴포넌트 또는 페이지의 최종 '완전히 로드된' 디자인.
2. 콘텐츠 변수: UI의 동적인 부분(텍스트, 이미지, 가격, 아바타).
3. 공간 치수: 최종 요소의 정확한 높이, 너비 및 종횡비.
4. 브랜드 색조: '뼈대' 기반 및 샤이머 효과에 사용되는 기본 및 보조 색상.

출력값

1. 스켈레톤 청사진: 뼈대의 배열을 보여주는 저충실도 맵.
2. 뼈대 명세: 모양(원형 대 직사각형) 및 크기(고정 대 백분율 기반)에 대한 정의.
3. 전환 전략: 스켈레톤이 페이드 아웃되고 콘텐츠가 페이드 인되는 규칙.
4. 접근성 요구 사항: aria-busy 및 aria-hidden 구현에 대한 지침.

워크플로

1. 대상 지오메트리 매핑

최종 컴포넌트를 기본 기하학적 기본 요소로 분해합니다:

• 원형: 아바타, 아이콘 또는 둥근 버튼용.
• 직사각형(둥근 모서리): 카드, 이미지 컨테이너 및 텍스트 블록용.
• 선: 텍스트의 단일 행(헤드라인, 메타데이터)용.

2. 뼈대 계층 정의

모든 요소에 뼈대가 필요한 것은 아닙니다. 구조적 '앵커'에 집중하세요:

• 1차 뼈대: 가장 큰 시각적 요소(예: 제품 이미지).
• 2차 뼈대: 헤드라인 및 기본 메타데이터.
• 3차 뼈대: 작은 메타 세부 사항 또는 액션 버튼(너무 작은 경우 생략 가능).

3. 공간 매칭 설정(CLS 규칙)

스켈레톤의 치수가 최종 콘텐츠의 컨테이너와 정확히 일치하는지 확인하세요:

• 종횡비: 뼈대에 고정 종횡비(예: 비디오의 경우 16:9)를 사용하여 자산이 로드될 때 크기가 변경되지 않도록 합니다.
• 텍스트 크기 조정: 뼈대가 나타내는 텍스트의 줄 높이 및 대략적인 너비와 일치하는 뼈대를 사용합니다.

4. 리듬과 샤이머 설계

스켈레톤은 '살아있는' 듯하지만 산만하지 않아야 합니다:

• 기본 색상: 명도 대비가 낮은 중립 색상(예: 밝은 회색)을 사용합니다.
• 샤이머(맥박): 왼쪽에서 오른쪽으로 움직이는 미묘한 그라데이션 애니메이션을 적용합니다.
• 동기화: 화면에 여러 스켈레톤이 있는 경우 애니메이션이 동기화되어 시각적 혼란을 방지하도록 합니다.
• 동작 줄이기: 샤이머 키프레임 애니메이션을 @media (prefers-reduced-motion: reduce) 쿼리로 감싸서 움직임을 비활성화하고 정적이거나 부드럽게 불투명도가 맥동하는 뼈대로 대체합니다.

5. '핸드오프' 전환 정의

스켈레톤의 종료를 계획합니다:

• 타이밍: 실제 콘텐츠에 대해 짧은 페이드 인(예: 200ms)을 사용하여 급격한 '스냅' 전환을 방지합니다.
• 지연 표시: 목록의 경우 항목이 한 번에 나타날지 아니면 개별적으로 로드될지 결정합니다.

결정 규칙

• 300ms 규칙: 로드 시간이 300ms 이상 걸릴 것으로 예상되는 경우에만 스켈레톤을 표시합니다.
• 뼈대 정확성: 뼈대는 특정 데이터가 아닌 컨테이너를 나타내야 합니다. 예를 들어, 텍스트 뼈대는 특정 문자를 모방한 톱니 모양 선이 아닌 단순한 막대여야 합니다.
• 줄 수: 여러 줄 텍스트의 경우 다양한 너비의 2~3개의 뼈대(예: 마지막 줄은 60% 너비)를 사용하여 자연스러운 단락 흐름을 시뮬레이션합니다.
• 스피너 대 스켈레톤:
  • 페이지 수준 또는 섹션 수준 전환에는 스켈레톤을 사용합니다.
  • 작은 로컬 작업(예: '저장 중...' 버튼 상태)에는 스피너를 사용합니다.

제약 조건

• 접근성: 스켈레톤은 스크린 리더가 빈 막대를 '읽으려고' 시도하지 않도록 aria-hidden="true"로 표시해야 합니다. 상위 컨테이너는 로딩 중에 aria-busy="true"를 사용해야 하며, 이상적으로는 '로딩 중'을 알리고 콘텐츠가 스켈레톤을 대체하면 완료 상태를 알리는 시각적으로 숨겨진 aria-live="polite" 영역을 보유해야 합니다. 스켈레톤 뼈대 자체에는 aria-live를 사용하지 마십시오. 샤이머 효과에 대해 prefers-reduced-motion을 존중하십시오.
• 대비: 스켈레톤 색상은 배경과 구별되어야 하지만 활성 콘텐츠처럼 보일 정도로 명도 대비가 높아서는 안 됩니다.
• 반응형: 스켈레톤 뼈대는 최종 콘텐츠와 동일한 그리드/플렉스 로직을 사용하여 크기를 조정해야 합니다.

일반적인 실패 패턴

• 'CLS 점프': 200px 높이의 스켈레톤이 300px 높이의 콘텐츠로 대체되어 페이지가 '점프'하는 현상.
• 샤이머 과부하: 너무 빠르거나 명도 대비가 높은 애니메이션은 멀미나 주의 산만을 유발합니다.
• 콘텐츠-뼈대 불일치: 정사각형 이미지에 원형 뼈대를 사용하거나 그 반대의 경우.
• 과도한 복잡성: 모든 작은 아이콘을 뼈대로 재현하려고 시도하여 복잡한 '유령' 레이아웃이 발생합니다.
• '정적 스켈레톤': 애니메이션이 없는 스켈레톤은 페이지가 깨졌거나 비어 있다고 오인될 수 있습니다.

검증 기준

• 스켈레톤 치수가 최종 '로드된' 상태와 정확히 일치합니다(CLS 제로).
• 이미지/비디오의 종횡비가 고정 컨테이너를 사용하여 확보됩니다.
• 샤이머 애니메이션이 미묘하고 왼쪽에서 오른쪽으로 움직입니다.
• 텍스트가 많은 영역은 자연스러운 줄 길이를 시뮬레이션하는 뼈대를 사용합니다.
• aria-hidden="true"가 스켈레톤 요소에 적용되고 로딩 컨테이너는 aria-busy="true"를 사용합니다.
• 샤이머 애니메이션이 prefers-reduced-motion: reduce를 존중합니다.
• 스켈레톤에서 콘텐츠로의 전환이 부드러운 페이드(약 200ms)입니다.
• 300ms보다 빠른 로드에는 스켈레톤이 나타나지 않습니다.