SPIDesign System
Patterns

Patterns Overview

SPI 디자인 시스템의 복합 컴포넌트 및 UI 패턴 가이드입니다.

Patterns

Patterns는 기초 컴포넌트(Atoms, Molecules)들을 조합하여 특정 기능이나 도메인 맥락을 담고 있는 복합 컴포넌트(Organisms)들의 모음입니다.

컴포넌트와 패턴의 차이

  • Components: Button, Input, Card와 같이 범용적이고 독립적인 최소 단위의 UI 요소입니다.
  • Patterns: StatCard, ExpertCard와 같이 특정 데이터 구조나 사용자 시나리오에 특화된 조합형 UI 요소입니다.

포함된 패턴 목록

Cards

  • StatCard: 데이터 수치와 변동률을 시각화하는 카드
  • ExpertCard: 전문가 프로필 및 주요 정보를 표시하는 카드
  • ArticleCard: 콘텐츠 목록 및 요약 정보를 위한 카드

Data & Intelligence

  • AISummary: AI가 분석한 텍스트 요약을 보여주는 패널
  • DataTable: 복잡한 데이터를 구조화하여 보여주는 테이블 패턴

각 패턴의 상세 스펙과 사용법은 왼쪽 사이드바의 메뉴를 통해 확인하실 수 있습니다.

On this page