2nd/10_Wiki/Topics/Frontend/크로스 플랫폼(Web, iOS, Android) UI 개발 및 배포 파이프라인.md

크로스 플랫폼(Web, iOS, Android) UI 개발 및 배포 파이프라인

📌 Brief Summary

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

📖 Core Content

• 다중 플랫폼을 위한 디자인 토큰(Design Tokens) 디자인 토큰은 플랫폼에 구애받지 않는(platform-agnostic) 형태의 디자인 결정 데이터입니다 [1, 2]. 대규모 다중 플랫폼 프로젝트에서는 색상, 타이포그래피, 간격 등의 원시 값을 JSON과 같은 중립적인 형식으로 저장합니다 [3]. 이 단일 토큰을 기반으로 Web, iOS, Android 등 각기 다른 플랫폼에서 요구하는 코드를 모두 생성해낼 수 있습니다 [1].
• 배포 파이프라인 및 자동화 도구 (Transformation Pipelines) Figma와 같은 디자인 도구에서 만들어진 토큰은 JSON 형식으로 추출되며, 이후 Style Dictionary나 Theo와 같은 변환 시스템을 사용하여 각 플랫폼에 특화된 코드로 컴파일됩니다 [3-6].
  • Web: CSS 변수(_variables.css), Sass/SCSS 변수, 또는 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), 디자인 토큰(Design Tokens), 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