SK플래닛 Syrup, Design System 구축으로 UX-FE 핸드오프 효율화 및 개발 생산성 극대화

SK플래닛의 Syrup 팀은 디자인과 개발 간 스타일 불일치 및 중복 작업을 해결하기 위해 Design System을 구축했다. 이는 단순한 시각 가이드를 넘어 재사용 가능한 컴포넌트, 규칙, 코드 가이드를 포함하는 시스템으로, Figma와 Storybook을 연동해 디자인-개발 흐름을 연결한다.

Design System 아키텍처와 Token 활용

Design System은 Foundation(타이포그래피, 색상 등), Component, Template의 3단계로 구성된다. 특히 Design Token을 색상, 간격 등 UI 스타일 속성의 변수로 정의해 디자인과 개발의 공통 언어로 사용한다. 개발자는 Figma에서 추출한 JSON 형태의 Token 데이터를 코드로 변환하여 사용함으로써, 스타일 변경 시 코드 수정 없이 일관성을 유지할 수 있다.

Figma-Storybook 기반 핸드오프 프로세스

디자인 종료 후 개발 시작 시점의 Hand-off 과정은 Figma의 Dev Mode와 Storybook을 활용해 효율화했다. 디자이너는 Figma에서 컴포넌트 명세와 Token 정보를 정리해 전달하고, 개발자는 이를 기반으로 Storybook에서 컴포넌트를 개발 및 테스트한다. 완성된 컴포넌트는 NPM 라이브러리로 패키징되어 사내 저장소(NEXUS)에 배포되며, 개발자들은 이를 손쉽게 가져와 프로젝트에 통합할 수 있다.

기술 구현 및 기대 효과

Syrup은 Figma Plugins를 이용해 디자인 요소를 JSON 및 SASS 파일로 자동 추출하며, 이를 CSS Variable로 변환해 적용한다. 버튼 등 주요 컴포넌트는 타입 안정성을 위해 TypeScript와 JSX로 개발된다. 이러한 시스템 도입으로 2024년 앱 개편 기준 196개 컴포넌트 중 67개(약 34%)가 적용되었으며, QA 리드 타임의 약 45.59% 감소와 평균 6.53일의 시간 절감 효과가 추정된다.