디플롯 서비스의 디자인 시스템 자동화

디플롯은 Vue v2.x로 개발된 SPA에서 NextJs로 마이그레이션 중이며, 디자인 시스템을 통한 디자인 토큰 자동화 프로세스를 도입하고 있다.

디자인 변경 시 발생하는 오류를 줄이기 위해 Figma에서의 디자인 토큰 업데이트가 Github PR로 자동 생성되는 시스템을 구축하였다.

기술 스택

• NextJs v14
• Typescript
• Panda CSS
• AWS
• Datadog

디자인 토큰은 Primitive Tokens과 Semantic Tokens으로 구분되며, Figma의 Tokens Studio 플러그인을 통해 관리된다.

자동화 프로세스

디자인 토큰을 JSON 형식으로 변환한 후, Github Action을 통해 자동으로 PR이 생성되며, Panda CSS와의 통합을 통해 최종적인 디자인 시스템을 완성한다.

이러한 자동화는 디자인 업데이트의 효율성을 높이고, 개발자가 수동으로 스타일을 수정할 필요를 줄인다.