프론트엔드
쏘카 디자인 시스템 2.0 개발기 1편: 시스템으로 굴리기(웹)
두줄요약
쏘카프레임 2.0을 규칙·컴포넌트·Figma 연동·운영 프로세스를 아우르는 디자인 시스템으로 재정의했습니다.\n플러그인과 Code Connect, Slot 설계로 전달 흐름을 개선하고 직군 간 정책 합의와 QC를 운영했습니다.
문제 상황
- 기존 UI 라이브러리의 역할 분담 모호성과 낮은 유지보수 수준
- 서비스별 파편화된 UI/UX 개발로 저하된 제품 개발 일관성·효율성
구조와 흐름
- 규칙·정책, 컴포넌트 라이브러리, Figma-Code 연동, 릴리스·검증·피드백을 포함한 디자인 시스템 정의
- 디자인 토큰·컴포넌트·문서·연동 규칙은 공통 시스템 범위로, 서비스별 UI 정책·화면 구성은 개별 서비스 책임으로 분리
- 정기 회의, UI/UX 정책 합의, 구현, QC, 배포로 이어지는 장기 운영 흐름
해결 방법
- Figma Plugin으로 디자이너의 아이콘·스페이싱 토큰 PR 생성 과정 지원
- Figma Code Connect로 디자인 노드와 UI 라이브러리 코드 연결
- Slot 기반 Figma 설계와 합성 컴포넌트 구조의 정합성 확보
주의할 점
- PAT 기반 플러그인 인증의 보안·권한 관리와 별도 인증 서버 검토 필요
- 상태·변형이 많은 컴포넌트의 Code Connect 매핑 난도
- 직군별 설계·작업 방식 차이를 정책 합의와 QC로 조율할 필요
