사내 디자인 시스템

문제

컴포넌트를 소비하는 쪽이 쉽게 쓸 수 있어야 하고 번들이 무분별하게 커지면 안 되는데, 기존 CI 번들 게이트 수치가 실제 번들 크기를 반영하는지는 한 번도 검증된 적이 없었다.

해결

• size-limit 게이트가 진입점 파일만 측정해 실제 번들의 1/47~1/85만 재고 있던 것을 발견
• preset-small-lib으로 측정 방식을 교체해 게이트 8개를 실측 기준(Button 8.46KB 등)으로 재설계
• 근거 없던 기존 번들 수치 주장을 스스로 철회하고 MR에 정정 기록을 남김
• tsup으로 CSS를 사전 컴파일해 동봉, 소비 측은 import 2줄만으로 사용
• base/semantic 2계층 토큰 구조로 컴포넌트 8종(Button, Input, Dropdown, Badge, Modal, Toast, Tooltip, Popover) 구축
• 컴포넌트 생성 하네스 PoC를 설계한 뒤 역할을 분담해 통합

효과

• 측정 근거 없는 주장을 스스로 검증·정정해 팀 신뢰도 확보
• Storybook play + axe로 접근성 위반 자동 검출