피드로 돌아가기
Dev.toFrontend
원문 읽기
JSON 기반 Single Source of Truth로 30개 앱의 Design System 통합 관리
From Figma to Flutter: Designing a System That Scales Across 30 Apps
AI 요약
Context
Figma 설계와 Flutter 구현체 간의 괴리로 인한 디자인-엔지니어링 간 신뢰 저하 발생. 앱 개수가 증가함에 따라 중복 레이아웃 구현과 파편화된 컴포넌트 관리로 인한 개발 효율성 저하 직면.
Technical Solution
- JSON 기반 Design Tokens를 Single Source of Truth로 설정하여 Figma와 Dart 코드로 동시 생성하는 동기화 메커니즘 구축
- Tokens Studio 플러그인을 통한 Figma 반영 및 build script를 통한 strongly-typed constants 생성으로 런타임 값 불일치 제거
- Atomic 단위의 Tokens 위에 Variants와 Properties를 미러링한 Component Library를 설계하여 디자인-코드 간 1:1 매핑 실현
- Scaffold 스타일의 Layout Primitives를 사전 정의하여 개별 위젯 단위가 아닌 레이아웃 수준의 화면 구성으로 개발 복잡도 감소
- 내부 Git Monorepo 내 단일 패키지 구조를 채택하고 Semantic Versioning을 통해 30개 앱의 의존성 및 업데이트 주기 제어
- Storybook 앱을 구축하여 모든 컴포넌트 상태를 시각화하고 CI 단계에서 Visual Snapshot Test를 통한 Regression 방지
실천 포인트
- Design Tokens를 JSON으로 정의하고 이를 기반으로 Figma/Code 자동 생성 파이프라인 구축 검토 - 단순 위젯 라이브러리를 넘어 공통 화면 구조를 정의하는 Layout Primitives 설계 적용 - 컴포넌트 단위의 Visual Diff Test를 CI/CD 파이프라인에 통합하여 디자인 드리프트 방지 - 앱별 개별 커스텀 대신 Token Override 방식을 통해 디자인 시스템의 일관성과 유연성 확보