쏘카 디자인 시스템 2.0 개발기 1편: 시스템으로 굴리기(웹)
Summary
단순한 UI 라이브러리를 넘어 '생산 체계'로, 쏘카 디자인 시스템 2.0 구축기
Figma와 코드를 실시간으로 잇는 연동 체계와 운영 프로세스로 개발 효율 극대화하기
쏘카의 차세대 디자인 시스템인 '쏘카프레임 2.0'은 단순한 컴포넌트 모음을 넘어 디자인과 코드가 긴밀하게 연결된 운영 체계를 지향합니다. 피그마 플러그인과 Code Connect를 도입하여 디자이너와 개발자의 작업 흐름을 하나로 정렬하고, 직군 간의 설계 방식 합의를 통해 지속 가능한 운영 기반을 마련한 과정을 상세히 다룹니다.
- 01정책과 연동, 운영을 포함하는 진정한 의미의 디자인 시스템 재정의
- 02Figma Plugin을 활용하여 아이콘 및 토큰의 PR 생성부터 배포까지 자동화
- 03Figma Code Connect로 디자인 결과물에서 즉시 라이브러리 코드를 확인하는 환경 구축
- 04개발의 합성 컴포넌트 구조와 디자인의 Slot 개념을 정렬하여 정합성 확보
- 05단기 구현이 아닌 장기적 관점의 정기 회의 및 피드백 루프 운영 프로세스 정립
RECOMMENDATION
디자인 시스템을 구축 중이거나 디자인-코드 간의 파편화로 고통받는 개발팀에게 권장하며, 특히 피그마의 최신 기능을 실무 워크플로우에 녹여내고 싶은 시니어 개발자에게 유용한 인사이트를 제공합니다.
The Problem
기존의 UI 라이브러리가 유지보수되지 않고 서비스별로 파편화되면서, 디자이너와 개발자 간의 일관성이 떨어지고 제품 개발의 효율성이 저하되는 문제가 발생했습니다.
The Solution
컴포넌트 라이브러리를 넘어 정책, 연동, 운영을 포함한 '시스템'으로 재정의하고, Figma Plugin을 통한 에셋 배포 자동화와 Figma Code Connect를 활용한 디자인-코드 직결 체계를 구축했습니다.
The Result
아이콘 및 토큰 배포의 리드타임을 단축하고 피그마 내에서 실시간으로 라이브러리 코드를 확인할 수 있게 되었으며, 디자인의 Slot 개념과 개발의 합성 컴포넌트 구조를 일치시켜 협업 효율을 높였습니다.
Trade-off
디자인의 Variant 방식과 개발의 설계 구조 차이로 인해 Code Connect 매핑 과정에서 높은 러닝커브가 발생했으며, 현재 플러그인 인증 방식이 보안상 개인 액세스 토큰(PAT)에 의존하고 있다는 한계가 있습니다.
Key Concepts
More from 쏘카
View all posts from 쏘카
S3 + CloudFront 기반 SPA 배포에서 캐시와 fallback 전략 설계하기
CloudFrontS3SPA2주 전쏘카 디자인 시스템 2.0 개발기 2편: 기술로 굴리기(웹)
Design SystemReactComponent Architecture4개월 전Node.js 컨테이너, 왜 깔끔하게 안 죽을까? (feat. Graceful shutdown)
Node.jsKubernetesDocker5개월 전쏘카프레임 - 블루투스 모듈
BluetoothBLEMobile Architecture6개월 전쏘카프레임 - 앱 프레임워크와 개발자 경험
Socar Frame개발자 경험Android6개월 전
