디자인 시스템 구축: Ark UI Avatar 구성 요소

카테고리

디자인

서브카테고리

UX 디자인

대상자

- 디자인 시스템 개발자 및 UI/UX 디자이너

- 난이도: 중간 (CSS 변수와 레시피 기반 스타일링 이해 필요)

핵심 요약

• data-scope 및 data-part 속성을 사용하여 구성 요소 파트를 정의하고 스타일링
• Panda CSS의 레시피(recipe)를 활용해 기본 스타일, 크기, 형태, 시각적 변형(variant)을 통합 관리
• avatar--subtle, avatar--solid, avatar--outline 등 시각적 변형을 통해 다양한 디자인 요구사항 충족

섹션별 세부 요약

1. Avatar 구성 요소의 구조

• data-scope="avatar" 속성을 사용해 모든 파트에 대한 스타일 적용 가능
• root, image, fallback 3가지 주요 파트로 구성
• fallback은 이미지 로드 실패 시 대체 텍스트로 사용

2. Vanilla CSS 기반 스타일링

• CSS 변수(--avatar-size, --avatar-font-size)를 사용해 반복 가능한 스타일 정의
• 크기 변형(size variant): xs, sm, md, lg, xl
• 형태 변형(shape variant): rounded, square, full
• 시각적 변형(variant): subtle (경량 배경), solid (색상 강조), outline (테두리 강조)

3. Panda CSS 레시피 기반 스타일링

• sva 함수를 사용해 root, image, fallback 파트에 대한 스타일 정의
• 레시피 구조: slots, className, base, variants, defaultVariants
• 크기, 형태, 시각적 변형을 variants 객체 내에서 정의
• defaultVariants로 기본 스타일을 명시하여 일관성 유지

결론

• 레시피(recipe)를 활용해 모듈화된 스타일링을 적용하고, defaultVariants로 디자인 시스템의 일관성을 유지하세요.
• @ark-ui/react/avatar 컴포넌트의 data-part 속성을 통해 재사용 가능한 스타일링을 구현할 수 있습니다.
• 전체 예제 코드는 GitHub에서 확인 가능.