디자인 시스템, 디자인과 코드의 간극 줄이기
프론트엔드
디자인 시스템, 디자인과 코드의 간극 줄이기
두줄요약
디자인 시스템에서 Figma와 코드 간 간극이 커지며 커뮤니케이션 비용과 개발 피로도가 늘어나는 문제를 다뤘습니다. Figma 규약 정비와 Plugin API 기반 도구로 명세 검증과 코드 변환을 자동화하는 방안을 소개했습니다.
문제 상황
- 디자인 시스템 개발과 서비스 개발 전반에서 디자이너와 개발자의 인터페이스 이해 차이로 반복 커뮤니케이션 발생
- 커스텀 속성 명명 불일치와 명세 재확인으로 EDS Figma와 EDS Code 간 간극 확대
- 서비스 개발 단계에서는 명세 확인 부담 증가로 개발 피로도 상승
원인 분석
- 컴포넌트의 기능·상태·속성에 대한 초기 예측 한계
- Figma 컴포넌트 속성 가이드 부재와 팀 내 명명 규칙 불일치
- 디자인 시스템 단계에서 생긴 차이가 서비스 개발 단계까지 누적
해결 방법
- 신규 명세 작성 시 디자이너와 개발자가 인터페이스를 함께 협의
- Figma ComponentSetNode 이름, property, enum 값을 규약화하여 필요한 정보 표준화
- Figma Plugin API 기반 EDS Lint와 EDS Codegen으로 규약 검사 및 코드 변환 자동화
적용해볼 점
- 디자인과 코드 양쪽에서 동일한 속성 체계와 명명 규칙 유지
- Figma 산출물만으로 구현 정보가 충분히 전달되도록 규격 정의
- 플러그인 기반 검증과 코드 생성으로 수작업 확인 최소화