쏘카 디자인 시스템 2.0, Figma 연동으로 디자인-개발 협업 효율 UP!
쏘카의 디자인 시스템 2.0 개발을 통해 기존 UI 라이브러리의 문제점을 해결하고, 일관성 있는 UI/UX 개발 환경 구축을 목표로 함
Figma Plugin을 활용하여 디자이너가 직접 PR을 생성하도록 하여 리드 타임(Lead Time) 단축 및 디자인 에셋(Asset) 관리 효율성을 증대
Figma Code Connect를 통해 UI 라이브러리 코드 사용법을 간소화하고, 디자이너와 개발자 간의 설계 방식 합의를 통해 생산성 향상
릴리스와 피드백 루프(Feedback Loop)를 통해 UI/UX 정책 합의 및 품질 관리를 진행하며, 장기적인 디자인 시스템 개발을 위한 기반 마련
디자인 시스템의 정의와 범위 설정
본문에서는 디자인 시스템을 컴포넌트 UI 라이브러리(Component UI Library) 이상의 개념으로 정의하고, 규칙, 연동, 운영 방식을 포함하는 반복 가능한 생산 체계로 규정한다.
규칙/정책, 컴포넌트 라이브러리, 연동 체계, 운영 프로세스 4가지 요소 정의
디자인 토큰, 컴포넌트, 문서, 연동 규칙을 시스템 범위로 포함
서비스별 UI 정책과 화면 구성은 각 서비스 책임으로 분리하여 역할 분담(Role Separation)을 명확히 함
Figma Plugin을 활용한 디자인-개발 협업 최적화
쏘카는 Figma Plugin을 도입하여 디자이너가 직접 PR을 생성하도록 함으로써, 기존 슬랙을 통한 에셋 전달 방식의 리드 타임(Lead Time)을 단축했다.
기존 아이콘, 스페이싱 토큰 관리 프로세스 개선
PAT(Personal Access Token) 기반 인증 방식 도입
보안 및 권한 문제 해결을 위한 별도 인증 서버(Authentication Server) 도입 검토
이러한 플러그인 활용은 디자인 시스템의 효율적인 운영을 위한 중요한 단계이다.
Figma Code Connect를 통한 UI 라이브러리 코드 사용성 개선
Figma Code Connect를 통해 디자이너가 선택한 노드에 대응되는 UI 라이브러리 코드를 즉시 확인할 수 있도록 하여, 개발자가 UI 라이브러리 코드를 서비스에 구현하는 과정을 간소화했다.
Storybook을 통한 UI 확인 방식에서 Code Connect로 전환
DatePicker와 같은 상태/변형(State/Variant)이 많은 컴포넌트의 매핑 어려움
디자인 직군과 개발 직군의 설계 방식 차이(Design and Development Differences)로 인한 러닝 커브 발생
결과적으로 합성 컴포넌트 형태와 Figma 설계 형태의 유사성을 높여, 개발 생산성(Development Productivity) 향상을 도모했다.
운영 프로세스 및 품질 관리
쏘카 디자인 시스템 개발은 장기 프로젝트로 진행되었으며, 정기 회의, UI/UX 정책 합의, 구현, 검증 구조를 유지하며 운영되었다.
릴리스(Release) 우선순위 결정 및 N차 개발 마일스톤(Milestone) 설정
구현 완료된 컴포넌트의 부분 적용(Partial Application) 및 피드백 루프(Feedback Loop) 운영
OS별 구현 방식 차이, Code Connect 매핑 규칙 등 직군 간의 합의(Cross-functional Agreement)를 통해 품질 관리
큰 틀의 정책 합의 후 담당 개발자가 구현하고 QC(Quality Check)를 거쳐 배포 전략 결정
이러한 운영 프로세스를 통해 디자인 시스템의 지속적인 발전(Continuous Improvement)을 도모했다.
