Design System
공통 UI를 확장 가능하게: DCButton variant 시스템과 vanilla-extract 토큰 바인딩
디자인 시스템 시리즈의 한 편. 앞선 글에서 흩어진 토큰을 빌드 파이프라인으로 세운 얘기를 했다면, 이번엔 그 토큰을 실제 컴포넌트 로 소비하는 첫 실물, 공통 버튼 얘기다. 버튼 하나 만드는 게 왜 이렇게 어렵나 버튼이다. 세상에서…
#Design System
4 posts
Design System
모노레포 도입한다고요? 그럼 이때가 기회다 — 디자인 시스템 리뉴얼 (왜 npm이 아니라 서브모듈인가)
디자인 시스템 시리즈 세 번째 글. 어느 날 "프론트엔드 모노레포를 도입한다"는 얘기가 나왔다. 만든 건 팀 동료지, 내가 아니다. 근데 그 소식을 듣자마자 든 생각은 하나였다 — "이때다. 늘 채택률 0%로 방치되던 디자인 시스템,…
Design System
디자인 토큰 도입기: 채택률 0%에서 시작하기
디자인 시스템 시리즈 1편. 우리 프론트엔드가 왜 이렇게 파편화됐는지, 그걸 토큰부터 풀기로 한 이야기다. 시작은 "레포가 몇 개죠?" 디자인은 하나인데 구현은 여러 개다. 이게 무슨 말이냐면, 웹회사(v2) 말고도 앱웹 화면용 레포…
Design System
Figma에서 코드까지: 디자인–데이터 브릿지 (데이터브릿지 플러그인)
디자인 시스템 시리즈 2편. 1편이 "토큰이라는 값의 파편화"였다면, 이번 편은 "디자인 안에 들어가는 데이터 의 파편화" 이야기다. 카드 하나 만드는데 왜 이렇게 손이 많이 가지 차량 카드 목업을 만들 때마다 반복되는 장면이 있다.…