# [[크로스 플랫폼(Web, iOS, Android) UI 개발 및 배포 파이프라인|크로스 플랫폼(Web, iOS, Android) UI 개발 및 배포 파이프라인]]

## 📌 Brief Summary
크로스 플랫폼(Web, iOS, Android) UI 개발 및 배포 파이프라인은 디자인 시스템의 시각적 요소를 '디자인 토큰([[Design Tokens|Design Tokens]])'으로 추상화하여 단일 진실 공급원(Single Source of Truth)을 구축하는 체계적인 과정입니다. 저장된 토큰은 [[Style Dictionary|Style Dictionary]]와 같은 자동화 도구와 CI/CD 파이프라인을 거쳐 웹 및 모바일(iOS, Android) 환경에 맞는 네이티브 코드로 자동 변환 및 배포되며, 이를 통해 대규모 프로젝트에서 수동 오류를 제거하고 완벽한 시각적 일관성과 높은 유지보수성을 확보할 수 있습니다.

## 📖 Core Content

*   **다중 플랫폼을 위한 디자인 토큰(Design Tokens)**
    디자인 토큰은 플랫폼에 구애받지 않는(platform-agnostic) 형태의 디자인 결정 데이터입니다 [1, 2]. 대규모 다중 플랫폼 프로젝트에서는 색상, 타이포그래피, 간격 등의 원시 값을 JSON과 같은 중립적인 형식으로 저장합니다 [3]. 이 단일 토큰을 기반으로 Web, iOS, Android 등 각기 다른 플랫폼에서 요구하는 코드를 모두 생성해낼 수 있습니다 [1].
*   **배포 파이프라인 및 자동화 도구 (Transformation Pipelines)**
    [[Figma|Figma]]와 같은 디자인 도구에서 만들어진 토큰은 JSON 형식으로 추출되며, 이후 Style Dictionary나 Theo와 같은 변환 시스템을 사용하여 각 플랫폼에 특화된 코드로 컴파일됩니다 [3-6].
    *   **Web**: CSS 변수(`_variables.css`), Sass/[[SCSS|SCSS]] 변수, 또는 [[JavaScript|JavaScript]]/TypeScript 객체 형식으로 출력됩니다 [3, 4, 7].
    *   **Android**: XML 파일(`colors.xml`, `font_dimens.xml`) 또는 Jetpack Compose를 위한 Kotlin 파일(`StyleDictionaryColor.kt` 등)로 변환됩니다 [1, 3, 7].
    *   **iOS**: Swift 클래스 파일(`StyleDictionaryColor.swift`)이나 Objective-C 헤더/구현 파일(`StyleDictionaryColor.h`) 형태로 변환됩니다 [1, 3, 7].
*   **디자인-투-코드 워크플로우 (Design-to-Code Workflow)**
    크로스 플랫폼 UI 파이프라인은 일반적으로 다음과 같은 순서로 진행됩니다.
    1. **설계(Design)**: Figma에서 Tokens Studio 등의 플러그인을 활용하여 디자인 토큰을 생성합니다 [5].
    2. **추출 및 변환(Export & Transform)**: 생성된 토큰을 JSON으로 내보낸 뒤, Style Dictionary를 거쳐 플랫폼별 파일로 변환합니다 [5].
    3. **배포 및 소비(Distribute & Consume)**: 변환된 에셋을 npm 패키지로 배포하거나 코드 저장소에 포함시켜 Web, iOS, Android 애플리케이션에서 가져와 사용합니다 [5].
    4. **CI/CD 연동**: Figma에서 디자이너가 브랜드 색상 등을 변경하면, 이 변경 사항이 CI/CD 파이프라인 및 Style Dictionary를 통해 React 웹 앱이나 Flutter 모바일 앱 등에 자동으로 전파되도록 구성합니다 [5, 8].
*   **유지보수성과 확장성**
    이러한 자동화 파이프라인은 수동 변환 과정에서 발생하는 오류를 원천적으로 차단합니다 [3]. 스타일링 아키텍처의 관점에서 볼 때, 기술적 복잡성을 시스템화함으로써 소프트웨어가 성장하더라도 유지보수성(Maintainability)을 극대화할 수 있습니다 [8, 9]. 

## 🔗 Knowledge Connections
- **Related Topics:** [[디자인 시스템 (Design Systems)|디자인 시스템(DesignSystems]], 디자인 토큰(Design Tokens), [[Style Dictionary|Style Dictionary]]
- **Projects/Contexts:** 대규모 엔터프라이즈 프론트엔드 아키텍처, 단일 진실 공급원(Single Source of Truth) 기반 협업
- **Contradictions/Notes:** 플러그인을 활용한 파이프라인 구축 시 기술적 한계가 존재할 수 있습니다. 예를 들어, Figma Tokens 플러그인은 실시간 스타일 동기화가 제대로 되지 않거나 오토 레이아웃 값을 지원하지 않는 등의 버그가 보고된 바 있습니다 [10, 11]. Toolabs Design System Manager는 동기화 측면에서 우수하지만, 세밀한 타이포그래피 토큰 분리 생성에 제약이 있는 등 완벽한 단일 툴은 없으므로 프로젝트에 맞는 구성과 약간의 수동 설정이 필요합니다 [12, 13].

---
*Last updated: 2026-04-26*