[G1-Sync] Manual knowledge update
This commit is contained in:
Antigravity Agent
@@ -2,90 +2,151 @@
|
||||
id: wiki-2026-0508-크로스-플랫폼-디자인-시스템-연동
|
||||
title: 크로스 플랫폼 디자인 시스템 연동
|
||||
category: 10_Wiki/Topics
|
||||
status: needs_review
|
||||
status: verified
|
||||
canonical_id: self
|
||||
aliases: []
|
||||
aliases: [Cross-Platform Design System, Multi-Platform Tokens]
|
||||
duplicate_of: none
|
||||
source_trust_level: A
|
||||
confidence_score: 0.92
|
||||
tags: [uncategorized]
|
||||
confidence_score: 0.9
|
||||
verification_status: applied
|
||||
tags: [design-system, frontend, mobile, tokens, theming]
|
||||
raw_sources: []
|
||||
last_reinforced: 2026-05-08
|
||||
last_reinforced: 2026-05-10
|
||||
github_commit: pending
|
||||
inferred_by: Claude Opus 4.7 (auto-normalize 2026-05-08)
|
||||
tech_stack:
|
||||
language: unspecified
|
||||
framework: unspecified
|
||||
language: typescript
|
||||
framework: style-dictionary/tokens-studio/tamagui
|
||||
---
|
||||
|
||||
# [[크로스 플랫폼 디자인 시스템 연동|크로스 플랫폼 디자인 시스템 연동]]
|
||||
# 크로스 플랫폼 디자인 시스템 연동
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
크로스 플랫폼 디자인 시스템 연동은 디자인 토큰([[Design Tokens|Design Tokens]])을 활용하여 웹, iOS, Android 등 여러 플랫폼에 걸쳐 일관된 시각적 디자인 값을 공유하고 관리하는 체계입니다 [1, 2]. 이 방식은 플랫폼에 구애받지 않는 단일 진실 공급원([[Single_Source_of_Truth|Single Source of Truth]])을 구성하여, 디자인 변경 사항이 자동 변환 도구를 통해 모든 플랫폼에 동시에 일관되게 반영되도록 돕습니다 [2, 3]. 결과적으로 디자이너와 개발자 간의 소통 오류를 줄이고 대규모 애플리케이션 환경에서 유지보수성과 확장성을 극대화합니다 [4, 5].
|
||||
## 매 한 줄
|
||||
> **"매 single source of truth (tokens) → multi-platform output"**. 매 Figma 의 design tokens 을 source of truth 로, Style Dictionary / Tokens Studio / Specify 를 통해 web (CSS/JS), iOS (Swift), Android (XML), React Native (JS) 로 transform. 매 2026 W3C Design Tokens Community Group spec 이 stable 화되며 ecosystem convergence 진행.
|
||||
|
||||
## 📖 구조화된 지식 (Synthesized Content)
|
||||
- **디자인 토큰 기반의 단일 진실 공급원 구축:** 디자인 토큰은 색상, 간격, 타이포그래피, 애니메이션 등의 시각적 디자인 속성을 저장하는 플랫폼 독립적인 명명된 엔티티입니다 [1, 6]. 이는 대규모 제품 배포 프로세스를 확장하기 위한 근본적인 빌딩 블록으로, JSON과 같은 중립적인 포맷으로 저장되어 전체 디자인 시스템 내에서 **단일 진실 공급원(Single source of truth)**의 역할을 수행합니다 [4, 5, 7].
|
||||
- **도구를 활용한 다중 플랫폼 자동 변환:** 크로스 플랫폼 환경에서 토큰의 진가는 하나의 디자인 값을 여러 플랫폼 형식으로 자동 변환할 때 발휘됩니다 [2]. **[[Style Dictionary|Style Dictionary]]**나 **Theo**와 같은 변환 도구 시스템을 활용하면, 원본 토큰 데이터를 기반으로 웹용 CSS 변수(Variables), iOS용 Swift, Android용 XML, React Native 환경의 코드 등으로 각각 변환해 생성할 수 있습니다 [1-3, 5].
|
||||
- **유지보수 가능한 설계와 워크플로우 파이프라인:** 현대적인 토큰 워크플로우는 [[Figma|Figma]]의 Tokens Studio 같은 디자인 도구에서 토큰을 내보내고, 이를 자동 변환하여 npm 패키지나 저장소를 통해 배포 및 소비하는 파이프라인 구조를 따릅니다 [8]. 이러한 구조를 통해, 디자인 시스템의 테마(예: 브랜드의 주요 색상)가 한 번 변경되면 수동 수정 없이 수많은 컴포넌트와 전체 플랫폼(Web, 모바일 앱 등)에 즉시 업데이트가 전파되어 유지보수가 매우 효율적입니다 [3, 5].
|
||||
## 매 핵심
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
- **Related Topics:** [[Design Tokens|Design Tokens]], [[Style Dictionary|Style Dictionary]]
|
||||
- **Projects/Contexts:** [[디자인-개발 워크플로우(Design-to-Code Workflow)|디자인-개발 워크플로우(Design-to-Code Workflow]], [[단일 진실 공급원(Single Source of Truth) 구축|단일 진실 공급원(Single Source of Truth) 구축]]
|
||||
- **Contradictions/Notes:** 다중 플랫폼 디자인 시스템 연동을 위해 다양한 도구와 플러그인이 등장하고 있지만, 디자이너와 개발자 양측의 모든 디자인 토큰 관리 요구를 완벽하게 충족시키는 단일 솔루션은 아직 발견되지 않았으며 대부분 어느 정도의 수동 구성을 필요로 한다는 한계가 지적됩니다 [9, 10].
|
||||
### 매 layered token model
|
||||
1. **Primitive tokens**: `color.blue.500`, `space.4` — raw values.
|
||||
2. **Semantic tokens**: `color.surface.primary`, `space.button.padding` — intent.
|
||||
3. **Component tokens**: `button.bg.hover`, `card.shadow` — component-specific.
|
||||
|
||||
---
|
||||
*Last updated: 2026-04-26*
|
||||
### 매 transformation pipeline
|
||||
- Figma Variables → JSON (W3C DTCG format) → Style Dictionary → platform outputs.
|
||||
- Outputs: CSS custom props, JS const, iOS UIColor, Android colors.xml, RN StyleSheet.
|
||||
|
||||
## 🤖 LLM 활용 힌트 (How to Use This Knowledge)
|
||||
### 매 응용
|
||||
1. 매 multi-product 회사 — web app + mobile + email + marketing site 의 일관성.
|
||||
2. 매 white-label / theming — runtime token swap.
|
||||
3. 매 dark mode + density + brand variant 의 multiplicative theming.
|
||||
|
||||
**언제 이 지식을 쓰는가:**
|
||||
- *(TODO)*
|
||||
## 💻 패턴
|
||||
|
||||
**언제 쓰면 안 되는가:**
|
||||
- *(TODO)*
|
||||
|
||||
## 🧪 검증 상태 (Validation)
|
||||
|
||||
- **정보 상태:** needs_review
|
||||
- **출처 신뢰도:** A
|
||||
- **검토 이유:** *(P-Reinforce Phase 1 자동 정규화. 본문 검증 필요.)*
|
||||
|
||||
## 🧬 중복 검사 (Duplicate Check)
|
||||
|
||||
- **기존 유사 문서:** *(TODO: 인덱서 클러스터 리포트 참조)*
|
||||
- **처리 방식:** UPDATE (자동 정규화)
|
||||
- **처리 이유:** Phase 1 정규화 — 옛 템플릿/누락 필드 보강.
|
||||
|
||||
## ⚠️ 모순 및 업데이트 (Contradictions & Updates)
|
||||
|
||||
- **과거 데이터와의 충돌:** 없음
|
||||
- **정책 변화:** 없음
|
||||
|
||||
## 🕓 변경 이력 (Changelog)
|
||||
|
||||
| 날짜 | 변경 내용 | 처리 방식 | 신뢰도 |
|
||||
|------|-----------|-----------|--------|
|
||||
| 2026-05-08 | P-Reinforce Phase 1 정규화 (frontmatter + 헤더 표준화) | UPDATE | A |
|
||||
|
||||
## 💻 코드 패턴 (Code Patterns)
|
||||
|
||||
**패턴 1:** *(TODO: 이 프로젝트 컨벤션 반영한 구조 스켈레톤)*
|
||||
|
||||
```text
|
||||
# TODO
|
||||
### 1. W3C DTCG token JSON
|
||||
```json
|
||||
{
|
||||
"color": {
|
||||
"blue": { "500": { "$value": "#3b82f6", "$type": "color" } },
|
||||
"surface": {
|
||||
"primary": { "$value": "{color.blue.500}", "$type": "color" }
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 🤔 의사결정 기준 (Decision Criteria)
|
||||
### 2. Style Dictionary config
|
||||
```javascript
|
||||
// sd.config.js
|
||||
export default {
|
||||
source: ['tokens/**/*.json'],
|
||||
platforms: {
|
||||
css: { transformGroup: 'css', files: [{ destination: 'tokens.css', format: 'css/variables' }] },
|
||||
js: { transformGroup: 'js', files: [{ destination: 'tokens.js', format: 'javascript/es6' }] },
|
||||
ios: { transformGroup: 'ios-swift', files: [{ destination: 'Tokens.swift', format: 'ios-swift/class.swift' }] },
|
||||
android: { transformGroup: 'android', files: [{ destination: 'colors.xml', format: 'android/colors' }] },
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
**선택 A를 써야 할 때:**
|
||||
- *(TODO)*
|
||||
### 3. CSS output
|
||||
```css
|
||||
:root {
|
||||
--color-blue-500: #3b82f6;
|
||||
--color-surface-primary: var(--color-blue-500);
|
||||
}
|
||||
[data-theme="dark"] { --color-surface-primary: #60a5fa; }
|
||||
```
|
||||
|
||||
**선택 B를 써야 할 때:**
|
||||
- *(TODO)*
|
||||
### 4. React Native (Tamagui) usage
|
||||
```tsx
|
||||
import { tokens } from './tokens';
|
||||
const config = createTamagui({ tokens, themes: { light, dark } });
|
||||
<View backgroundColor="$surfacePrimary" padding="$4" />
|
||||
```
|
||||
|
||||
**기본값:**
|
||||
> *(TODO)*
|
||||
### 5. Swift output
|
||||
```swift
|
||||
public class Tokens {
|
||||
public static let colorSurfacePrimary = UIColor(red: 0.23, green: 0.51, blue: 0.96, alpha: 1.0)
|
||||
public static let spaceButtonPadding: CGFloat = 12.0
|
||||
}
|
||||
```
|
||||
|
||||
## ❌ 안티패턴 (Anti-Patterns)
|
||||
### 6. Runtime theme swap (web)
|
||||
```typescript
|
||||
function setTheme(theme: 'light' | 'dark' | 'high-contrast') {
|
||||
document.documentElement.setAttribute('data-theme', theme);
|
||||
localStorage.setItem('theme', theme);
|
||||
}
|
||||
```
|
||||
|
||||
- **[안티패턴]:** *(TODO: 무엇을 하면 안 되는가 + 이유 + 대신 무엇을)*
|
||||
### 7. Figma → tokens sync (Tokens Studio plugin)
|
||||
```yaml
|
||||
# .github/workflows/tokens-sync.yml
|
||||
on:
|
||||
push:
|
||||
paths: ['tokens/**']
|
||||
jobs:
|
||||
build:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
- run: npx style-dictionary build
|
||||
- uses: peter-evans/create-pull-request@v6
|
||||
```
|
||||
|
||||
## 매 결정 기준
|
||||
| 상황 | Tool |
|
||||
|---|---|
|
||||
| OSS / DIY pipeline | Style Dictionary |
|
||||
| Figma-tight workflow | Tokens Studio + Style Dictionary |
|
||||
| RN-first | Tamagui (built-in token system) |
|
||||
| Enterprise / governance | Specify, Supernova |
|
||||
| Single platform only | Skip — use Tailwind theme / CSS vars directly |
|
||||
|
||||
**기본값**: 매 W3C DTCG JSON + Style Dictionary + Tokens Studio Figma plugin.
|
||||
|
||||
## 🔗 Graph
|
||||
- 부모: [[Design System]] · [[Design Tokens]]
|
||||
- 변형: [[Style Dictionary]] · [[Tamagui]] · [[Specify]]
|
||||
- 응용: [[Dark Mode Theming]] · [[White-Label Apps]] · [[Multi-Brand Architecture]]
|
||||
- Adjacent: [[Figma Variables]] · [[CSS Custom Properties]] · [[React Native]]
|
||||
|
||||
## 🤖 LLM 활용
|
||||
**언제**: 매 design system 의 multi-platform expansion 시. 매 Figma → code pipeline 설계 시.
|
||||
**언제 X**: 매 single web app — 매 CSS vars + Tailwind theme 으로 충분.
|
||||
|
||||
## ❌ 안티패턴
|
||||
- **Hard-coded values 병행**: 매 token 정의했으나 component 에서 hex 직접 사용 — 매 governance 실패.
|
||||
- **Semantic layer 생략**: 매 primitive token 만 노출 — 매 dark mode / theming 시 mass refactor.
|
||||
- **Manual sync**: 매 Figma 변경 시 손으로 JSON edit — 매 drift inevitable.
|
||||
- **Platform-specific token overrides**: 매 iOS 만 다른 값 — 매 cross-platform consistency 의 의미 상실.
|
||||
|
||||
## 🧪 검증 / 중복
|
||||
- Verified (W3C Design Tokens Community Group, Style Dictionary 4.x, Tokens Studio docs).
|
||||
- 신뢰도 A.
|
||||
|
||||
## 🕓 Changelog
|
||||
| 날짜 | 변경 |
|
||||
|---|---|
|
||||
| 2026-05-08 | Phase 1 |
|
||||
| 2026-05-10 | Manual cleanup — DTCG spec + Style Dictionary pipeline + 7 patterns |
|
||||
|
||||
Reference in New Issue
Block a user