모두립 (modorip) 의 디자인 시스템. 토스 TDS, 당근 seed-design 운영 사례를 참고해 코드 레포에서 분리된 public 저장소로 운영합니다.
모두립 앱은 한국관광공사 OpenAPI 기반의 게이미피케이션 여행 도감 앱입니다. 이 저장소는 그 앱이 사용하는 디자인 토큰·컴포넌트·패턴의 단일 원천(Single Source of Truth) 입니다.
- 토큰: 컬러·타입·라운드·모션
- 컴포넌트: Button · Badge · Chip · Avatar · IconButton · Card · ListRow · Progress
- 패턴: AppHeader · TabBar · SegmentedControl · BottomSheet · EmptyState · PresetCard · CourseMap
- 아이콘: Lucide stroke 스타일 자체 셋
- 자산: Pretendard / Wanted Sans 폰트 라이센스 안내, 한국 17광역 SVG path
- 차분하고 정확하게. 과장 금지. 사용자를 가르치려 들지 않습니다.
- 이모지 없이. Lucide stroke 아이콘만 사용합니다.
- 한글 우선. Pretendard를 본문/UI 표준 폰트로 사용합니다.
- 블러는 신중하게. 그림자는 다중 박스 섀도우 컴포지트로 깊이를 표현합니다.
- 위계를 통한 강조. 색·굵기 남발 대신 크기·간격으로 위계를 설계합니다.
seed-design/
├── tokens/ 디자인 토큰 명세 (컬러·타입·라운드·모션·스페이싱)
├── primitives/ 원시 컴포넌트 (Button · Badge · Chip 등)
├── patterns/ 복합 패턴 (AppHeader · TabBar 등)
├── icons/ 아이콘 카탈로그
├── assets/ 폰트·SVG 자원 (southKoreaHigh.svg)
├── reference/ claude design 레퍼런스 구현 (app · wanted)
├── scripts/ 토큰 생성기 generate.mjs (zero-dep)
├── dist/ 생성 산출물 (tokens.css · tokens.dart · tokens.json)
└── tokens/tokens.json ★ 토큰 단일 소스 (SSOT)
| Phase | 산출물 |
|---|---|
| 0 (현재) | 마크다운 명세 + 참고 토큰 |
| 1 | @modorip/seed-design npm 패키지 (React + TypeScript) |
| 2 | Figma 라이브러리 동기화 |
| 3 | 외부 컨트리뷰션 가이드 정착 |
MIT. 자세한 내용은 LICENSE.
기여 가이드는 CONTRIBUTING.md.
이 디자인 시스템은 Wanted Design System (wanted-design.com) 의 토큰·컴포넌트 구조를 기반으로 모두립의 도메인(도감·발견·광역 등)에 맞춰 확장한 결과물입니다. 사용된 폰트와 라이브러리의 원 라이센스는 각 디렉터리의 안내를 따릅니다.
토큰의 단일 소스는 tokens/tokens.json 하나다. 생성기가 이를 각 플랫폼 포맷으로 변환해 mockup(web)과 client(Flutter)가 동일한 값을 공유한다. 당근 seed-design / 토스 TDS 의 토큰 파이프라인과 같은 구조.
tokens/tokens.json (SSOT)
│ node scripts/generate.mjs
├── dist/tokens.css → mockup/src/styles/tokens.css (CSS 변수)
├── dist/tokens.dart → client/lib/design/tokens.dart (Dart 상수)
└── dist/tokens.json (정규화 복사본)
cd seed-design
node scripts/generate.mjs # dist/ 만 갱신
node scripts/generate.mjs --sync # dist/ + mockup·client 로 직접 배포
# 또는: npm run build / npm run sync- web (mockup):
globals.css가@import "../styles/tokens.css"로 로드 →var(--color-primary),var(--text-title-1-size)등 사용. - flutter (client):
import 'design/seed.dart';→SeedColor.primary,SeedText.title1,SeedRadius.r2xl,SeedColor.region['jeju']등 사용. 앱 테마는seedTheme().
dist/와 각 소비처의tokens.*는 생성물이다. 직접 수정하지 말고tokens.json을 고친 뒤 재생성한다.- 토큰 추가 시:
tokens.json에 키 추가 →npm run sync→ web/flutter 양쪽 자동 반영.