디자인 시스템 구축 — 토큰·핸드오프·운영
발행디자인 시스템을 체계로 세우는 법부터 공통 컴포넌트 관리, Storybook 구축, 디자인 토큰 자동화, 피그마→코드 핸드오프, 가치 측정까지. 디자인-개발 간극을 줄이는 실전 모음.
- 글
- 12
- 01
- 02
- 03
카카오페이공통 컴포넌트를 건강하게 기르기 위한 고민
공통 컴포넌트 라이브러리는 시간이 갈수록 누가 관리하고, 어떻게 기여 받고, breaking change 는 어떻게 알릴지 모호해진다.
- 04
8퍼센트디자인 시스템, 디자인과 코드의 간극 줄이기
8퍼센트의 EDS(피그마)와 코드 구현이 따로 놀면서 동일 기능이 컴포넌트마다 disabled, usable="unable" 같은 다른 이름으로 정의돼 디자이너·개발자 커뮤니케이션 비용이 폭증했다.
- 05
SK플래닛Syrup 디자인시스템 개발: UX-FE로의 효과적인 핸드오프
UX와 FE 간 핸드오프에서 디자인 의도가 코드로 정확히 반영되지 않아 QA 이슈의 45.59%가 디자인 시스템으로 예방 가능했음.
- 06
올리브영 테크블로그Emotion과 Storybook으로 구축한 올리브영 디자인 시스템
개발자 간 UI 지식 수준 불일치와 컴포넌트 비체계적 관리로 서비스 간 일관성 유지가 어려웠다.
- 07
- 08
라포랩스 (퀸잇)단 한 줄로 전환하는 다크 테마 - Variables 기반 디자인 토큰 자동화
퀸잇·팔도감 두 서비스의 다크 테마 구현 시 모드별 컬러를 조건문으로 각각 관리해 코드가 복잡해지고 디자이너-개발자 간 싱크 비용이 높음.
- 09라포랩스 (퀸잇)
"딸깍"이면 끝! 피그마에서 바로 리액트 컴포넌트로 변환하기
Figma 컴포넌트를 React로 수동 변환할 때 속성 입력 실수와 디자인-코드 간 명명 불일치로 생산성이 저하됨.
- 10
- 11
NOL Tech디자인 시스템, 이제 감이 아니라 데이터로 말하기 — 3,272시간의 가치
2024년에 새로 만든 NOL Design System은 효과가 느낌으로만 이야기되고 있어 리소스 배분, 개선 방향, 협업 효과 설명 모두에서 근거가 부족했다.
- 12
