Figma 디자인 시스템, 이제 C++ 코드로 자동 변환!

본문에서는 C++ 네이티브 UI 개발 시 디자인 시스템 부재로 인한 문제점을 지적하며, 디자인 시스템 도입의 필요성을 강조한다. 기존에는 색상, 폰트 등의 디자인 관련 값을 `#define`으로 관리하여, 코드 중복(Code Duplication), 수정 용이성 저하 등의 문제가 발생했다. 특히, 개발자마다 다른 색상값을 사용하거나, RGB/BGR 순서 혼동으로 인한 시각적 불일치 문제가 빈번하게 발생했다. 디자인 시스템 도입은 이러한 문제들을 해결하고, 일관된 UI/UX(Consistent UI/UX)를 제공하기 위한 핵심 전략이다.

저자는 Figma API 연동 대신 PDF를 활용하여 디자인 시스템을 구축하는 방식을 선택했다. Figma Dev Seat 또는 Full Seat 부재로 인한 API 접근 제한, View Seat의 API call 횟수 제한 등의 현실적인 제약 때문이다. 디자인 부서에서 제공하는 디자인 가이드 PDF를 Claude Code에 입력하여 C++ 코드를 자동 생성하는 방식을 채택했다. 이 방식은 별도의 도구 설치나 개발자 모드 권한 없이 누구나 쉽게 적용할 수 있다는 장점이 있다. PDF 내 텍스트와 테이블 데이터를 파싱하여 코드를 생성하는 Claude Code의 기능을 적극 활용했다.

Claude Code를 사용하여 Figma 디자인 가이드 PDF로부터 C++ 코드를 자동 생성하는 과정을 설명한다. PDF를 분석하여 원시 색상 토큰(DesignTokens.h), 시맨틱 토큰(SemanticTokens.h), 타이포그래피(Typography.h), 버튼 스타일(ButtonStyles.h), 그리고 통합 헤더 파일(DesignSystem.h)을 생성했다. 특히, `constexpr` 키워드를 사용하여 컴파일 타임에 색상값을 결정함으로써 런타임 오버헤드를 줄이고, 컴파일 단계에서 오류를 검출할 수 있도록 했다. 또한, Figma의 디자인 토큰 네이밍 규칙을 그대로 유지하여 디자인 변경 시 코드 수정 용이성을 확보했다.

원시 색상 토큰을 직접 사용하는 대신, 용도에 맞는 의미를 부여한 시맨틱 토큰을 활용하여 코드 가독성을 높였다. 예를 들어, `text::primary`는 `neutral::_100`을 가리키도록 정의하여, 해당 색상이 텍스트에 사용됨을 명확히 했다. 또한, 버튼의 비활성 상태(disabled state)를 표현하기 위해 배경색에 40% 투명도를 적용하는 코드를 Claude Code가 자동으로 생성했다. 이러한 시맨틱 토큰과 자동 블렌딩 계산은 코드의 유지보수성(Maintainability)과 가독성(Readability)을 향상시키는 데 기여한다.

가장 직접적인 효과는 시간 절약과 정확성 향상이다. PDF 분석부터 코드 생성까지 단시간에 완료되었으며, 수작업으로 인한 오류 발생 가능성을 줄였다. 또한, `constexpr` 키워드 활용으로 컴파일 타임 오류 검출, 새로운 개발자의 온보딩 편의성 증대 등의 부가적인 이점을 얻었다. 디자인 시스템 업데이트 시 PDF를 다시 export하여 Claude Code에 전달하는 방식으로 유지보수 부담을 최소화했다. 이 방식은 아이콘 가이드, 스페이싱 가이드 등 다양한 디자인 문서에도 적용 가능하며, 반복적인 수작업 자동화에 기여할 수 있다.