RN 디자인 시스템 구현하기 - 2편, 절차

1. 기초 토큰(Foundation Tokens) 정의

먼저 가장 기본이 되는 요소들을 정리하세요:

Color Tokens

• Primary, Secondary, Tertiary 컬러 팔레트
• Neutral/Gray 스케일 (50~900)
• Semantic colors (success, warning, error, info)
• 각 색상의 명암비를 확인해서 접근성 확보

Typography Scale

• Font family 정의 (제목용, 본문용)
• Font size scale (예: 12, 14, 16, 20, 24, 32, 40, 48...)
• Line height, Letter spacing
• Font weight 체계

Spacing System

• 일관된 간격 체계 (예: 4px 기반 - 4, 8, 12, 16, 24, 32, 48, 64...)
• Padding, Margin, Gap에 사용할 값들

Border & Radius

• Border width 값들
• Border radius 체계 (없음, 작음, 중간, 큼, 원형)

Shadows & Effects

• Elevation 단계별 그림자 정의

2. Components 구축 순서

Atomic 레벨부터 시작하세요:

1. Atoms (가장 작은 단위)
   • Button (Primary, Secondary, Tertiary, Ghost, Disabled 등)
   • Input field
   • Checkbox, Radio button, Toggle
   • Icon
   • Label, Badge
2. Molecules (조합)
   • Input + Label
   • Button group
   • Search bar
   • Card 기본형
3. Organisms (복잡한 구조)
   • Navigation bar
   • Form
   • Modal
   • Card 완성형

3. Figma에서 실무 작업

Variables 활용

• Color, Number, String 변수 생성
• Mode 기능으로 Light/Dark 테마 관리
• Semantic naming (예: color/background/primary)

Components 설정

• Properties로 variant 관리 (size: small/medium/large, state: default/hover/disabled)
• Auto Layout 적극 활용
• Constraints 설정으로 반응형 대응

라이브러리 구조

 

 

📁 Design System
  ├─ 📄 Foundation (Colors, Typography, Spacing)
  ├─ 📄 Components/Atoms
  ├─ 📄 Components/Molecules
  ├─ 📄 Components/Organisms
  ├─ 📄 Patterns (자주 쓰는 레이아웃)
  └─ 📄 Examples (실제 적용 예시)

4. 문서화

각 컴포넌트마다 명시:

• 사용 목적과 시나리오
• Do's and Don'ts
• 접근성 가이드 (키보드 네비게이션, 스크린리더)
• 반응형 동작 방식

5. 실전 팁

• 일관성이 핵심: 네이밍 규칙을 정하고 팀 전체가 따르도록
• 작게 시작: 모든 컴포넌트를 한번에 만들지 말고, 실제 사용하는 것부터
• 버전 관리: Figma의 branching 기능 활용
• 개발자와 협업: Figma Dev Mode로 핸드오프 원활하게
• 정기 리뷰: 사용되지 않는 컴포넌트 정리, 개선점 반영