핵심 요약
올리브영의 디플롯 디자인 시스템은 피그마 토큰 자동화 파이프라인을 구축해 토큰 업데이트를 코드에 자동 반영하고, GitHub PR 생성으로 협업 효율을 높였습니다.
구현 방법
- Next.js 14(app route) 기반 SSR 및 모노레포(Panda CSS 포함) 구성
- 피그마 Tokens Studio로 토큰 정의 후 JSON으로 Export해 tokens.json 생성
- npx token-transformer로 Dark/Light/Primitive/Typo 토큰을 Panda CSS 형식으로 변환
- GitHub Actions로 토큰 변경 감지 → 커밋 및 PR 자동 생성
- Panda CSS 설정에 변환 토큰을 바인딩하고 재사용 구조를 갖추었습니다
주요 결과
- 토큰 변경이 코드에 자동 반영되어 협업이 크게 개선
- Panda CSS 토큰으로 재사용 가능한 디자인 시스템 구성의 기반 마련
- 피그마 토큰과 코드 토큰 간 매핑 파이프라인 구축으로 아키텍처 일관성 확보
