Skeleton

Skeleton 컴포넌트는 데이터가 로드되는 동안 콘텐츠의 기본 레이아웃을 임시로 보여 주는 컴포넌트예요. 사용자가 빈 화면 대신 콘텐츠 구조를 미리 볼 수 있어요. 덕분에 사용자는 로딩 중이라는 인식을 할 수 있고, 페이지가 느리게 로딩될 때도 사용자 경험을 높이는 데 도움이 돼요.

사용법

패턴 사용하기

Skeleton 컴포넌트는 자주 사용하는 레이아웃을 쉽게 설정할 수 있도록 미리 정의된 패턴을 제공해요. 다음 패턴 중 필요한 것을 선택해서 사용할 수 있어요.

• topList: 제목이 상단에 있는 리스트예요.
• topListWithIcon: 제목이 상단에 있고 아이콘이 포함된 리스트예요.
• amountTopList: 제목과 부제목이 상단에 있는 리스트예요.
• amountTopListWithIcon: 제목과 부제목이 상단에 있고 아이콘이 포함된 리스트예요.
• subtitleList: 부제목이 포함된 리스트예요.
• subtitleListWithIcon: 부제목과 아이콘이 포함된 리스트예요.
• listOnly: 리스트 형태만 있는 패턴이에요.
• listWithIconOnly: 아이콘이 포함된 리스트예요.
• cardOnly: 카드 형태만 있는 패턴이에요.

각 패턴을 선택하면 Skeleton이 자동으로 해당 레이아웃에 맞는 구조로 렌더링돼요. 필요한 패턴을 선택해서 바로 적용해 볼 수 있어요.

<Skeleton pattern="topListWithIcon" style={{ width: '100%' }} />

커스텀 패턴 사용하기

기본적으로 제공되는 패턴 외에도 사용자 정의 패턴을 활용해서 원하는 레이아웃을 자유롭게 설정할 수 있어요. 커스텀 패턴을 사용할 때는 custom 속성에 배열 형태로 패턴을 정의할 수 있고, 다양한 타입을 조합해서 레이아웃을 구성할 수 있어요. 각 타입은 다음과 같아요.

• title: 제목에 해당하는 굵고 큰 스켈레톤 바예요. 일반적으로 상단에 배치해서 제목의 위치를 표현할 때 사용해요.
• subtitle: 제목보다 얇은 부제목용 스켈레톤 바예요. 제목 아래에 위치할 때 사용하면 좋아요.
• list: 리스트 형태의 스켈레톤이에요. 여러 줄의 가로형 바(bar)로 이루어져 있어서, 데이터 목록을 미리 보여줄 때 유용해요.
• listWithIcon: 아이콘과 함께 리스트 형태로 구성된 스켈레톤이에요. 각 아이템 왼쪽에 아이콘의 위치를 미리 시각화할 수 있어요.
• card: 카드 형태의 스켈레톤이에요. 직사각형 블록으로, 카드 레이아웃을 미리 보여줄 때 적합해요.
• spacer(${number}): 지정한 픽셀 수만큼의 빈 공간을 추가하는 타입이에요. spacer(20)처럼 숫자를 넣어 빈 공간을 조절할 수 있어요. 각 요소 간의 여백을 맞출 때 유용해요.

<Skeleton custom={['title', 'subtitle', 'spacer(20)', 'card']} repeatLastItemCount={1} style={{ width: '100%' }} />

반복 설정하기

repeatLastItemCount 속성을 사용하면 Skeleton 컴포넌트가 마지막 요소를 반복해서 렌더링하게 할 수 있어요. 이 속성에는 반복할 개수를 숫자로 지정하거나, 무한 반복을 위해 'infinite' 값을 사용할 수 있어요. 단, 'infinite' 값을 설정할 경우 실제로는 마지막 요소가 최대 30번 반복돼요. 아무 값도 설정하지 않으면 기본값으로 3번 반복돼요.

<Skeleton pattern="listOnly" repeatLastItemCount={5} style={{ width: '100%' }} />

배경 설정하기

Skeleton 컴포넌트는 background 속성으로 배경 색상을 설정할 수 있어요. 배경 색상은 로딩 중인 화면의 전체적인 느낌을 조절하는 데 유용해요. 설정할 수 있는 배경 색상은 다음과 같아요.

• white: 흰색 배경이에요. 어두운 배경에서 로딩 상태를 표현할 때 적합해요.
• grey: 회색 배경으로, 일반적인 로딩 화면에 많이 사용돼요.
• greyOpacity100: 불투명한 진한 회색 배경이에요. 밝은 배경에서 로딩 화면을 강조하고 싶을 때 유용해요.

<div style={{ background: adaptive.grey300 }}>
  <Skeleton pattern="amountTopListWithIcon" background={'white'} style={{ width: '100%' }} />
</div>

인터페이스

SkeletonProps