디자인 시스템 내 디자인 토큰을 여러 도구를 사용하여 자동화하는 방법

올리브영 디플롯(D-PLOT) 서비스 개발팀은 Next.js 기반의 신규 아키텍처로 마이그레이션하며 디자인 시스템의 효율성을 높이기 위해 디자인 토큰 자동화를 도입했다.

기존에는 디자인 변경 시 개발자가 스타일을 일일이 수정해야 했으나, 이 과정에서 발생하는 사이드 이펙트 문제를 해결하고자 자동화 프로세스를 설계했다. 디자인 담당자가 Figma에서 토큰을 업데이트하면 변경 사항이 자동으로 GitHub PR로 생성되어 개발자가 손쉽게 확인할 수 있는 구조다.

구현된 기술 스택과 프로세스는 다음과 같다:

• Figma (Tokens Studio): 디자인 토큰 정의 및 Export
• GitHub Actions: 토큰 변환 및 코드 반영 자동화
• Panda CSS: Zero Runtime CSS-in-JS 라이브러리를 활용한 스타일 적용
• Monorepo: 디자인 시스템 컴포넌트의 재사용성 극대화

토큰은 기초적인 값을 정의하는 Primitive Tokens와 의미를 부여한 Semantic Tokens로 계층화하여 관리하며, 이를 통해 디자인 변경에 유연하게 대응하고 개발 생산성을 높였다.