Inside Figma: 피그마를 (새 탭에서 열림)
멀티 브랜드 디자인 시스템은 일관된 사용자 경험을 유지하면서도 각 브랜드의 고유한 정체성을 유연하게 표현할 수 있는 구조를 제공합니다. 이를 위해 디자인 토큰을 활용한 계층 구조를 설계하고, 공통 요소와 개별 요소를 분리하여 관리하는 것이 핵심입니다. 결과적으로 개발 효율성을 극대화하고 새로운 브랜드 확장 시 발생하는 중복 작업을 최소화할 수 있습니다. **디자인 토큰을 활용한 계층형 아키텍처** - 모든 브랜드에서 공통으로 사용하는 '글로벌 토큰(Global Tokens)'을 정의하여 기본 색상 팔레트, 간격, 타이포그래피 등의 원천 데이터를 관리합니다. - 각 브랜드의 특성을 반영하는 '시맨틱 토큰(Semantic Tokens)' 계층을 두어, 동일한 의미(예: `action-primary`)가 브랜드별로 다른 글로벌 토큰 값을 참조하도록 매핑합니다. - 컴포넌트 전용 토큰을 별도로 운영함으로써, 특정 컴포넌트의 스타일 변경이 시스템 전체에 의도치 않은 영향을 주지 않도록 세밀하게 제어합니다. **공통 컴포넌트와 브랜드별 테마 주입** - 버튼, 입력창과 같이 논리적 구조와 기능이 동일한 컴포넌트는 '코어 라이브러리'에서 공통으로 개발하여 코드 베이스의 단일화를 유지합니다. - 각 브랜드의 고유한 시각적 스타일은 CSS 변수나 테마 프로바이더(Theme Provider)를 통해 주입하며, 로직은 공유하되 스타일은 독립적으로 적용합니다. - 브랜드 간 차이가 극명하여 공통화가 어려운 컴포넌트의 경우, 핵심 로직만 공유하고 렌더링 방식은 브랜드별로 분기하여 처리하는 전략을 취합니다. **시스템 운영을 위한 거버넌스와 문서화** - 여러 브랜드 담당자가 협업하는 환경이므로, 새로운 컴포넌트 추가나 토큰 변경 제안을 검토하는 명확한 기여 모델(Contribution Model)을 수립합니다. - 각 브랜드의 디자이너와 개발자가 시스템의 사용법을 쉽게 파악할 수 있도록 브랜드별 테마가 적용된 실시간 미리보기 기능을 포함한 문서를 제공합니다. - 디자인 도구(Figma 등)의 라이브러리 구조를 코드상의 토큰 구조와 일치시켜 디자인과 개발 사이의 싱크를 유지하고 커뮤니케이션 오류를 방지합니다. 멀티 브랜드 시스템 구축 시 초기부터 모든 브랜드를 완벽하게 수용하려 하기보다는, 2~3개의 핵심 브랜드에서 공통 분모를 찾아 토큰 구조를 먼저 정립하는 것이 중요합니다. 이후 점진적으로 시스템을 확장하며 각 브랜드의 요구사항을 반영해 나가는 반복적인 접근 방식을 권장합니다.