사내 디자인 시스템

문제

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

소비 앱에 실제로 붙이자 두 번째 문제가 드러났다. 예약 앱에 도입한 직후 lg: 반응형이 무력화돼 운영에서 롤백해야 했다.

size-limit 게이트가 컴포넌트 스텁 파일 하나만 재고, 그 파일이 끌고 들어오는 의존 청크를 집계하지 못하던 측정 범위 결함을 발견
preset-small-lib으로 측정 방식을 교체해 게이트 8개를 실측 기준으로 재설계 (스텁만 재던 값 대비 의존성 포함 값은 Button 기준 약 66배)
팀에 공유됐던 번들 수치가 실제와 무관함을 밝히고, 근거 없던 본인의 이전 주장도 함께 철회
tsup으로 CSS를 사전 컴파일해 동봉, 소비 측은 import 2줄만으로 사용
base/semantic 2계층 토큰 구조로 컴포넌트 8종(Button, Input, Dropdown, Badge, Modal, Toast, Tooltip, Popover)에서 시작해, 예약 페이지·백오피스 컴포넌트를 더해 현재 37종(0.17.0)
DS의 컴파일된 CSS가 앱과 같은 유틸리티 레이어에 bare 유틸리티를 담고 있어, 빌드 병합 후 .flex가 lg:flex 미디어 블록 뒤에 놓이던 캐스케이드 충돌을 산출 CSS에서 확인 → 앱 Tailwind가 DS 클래스를 직접 생성하는 @source 방식으로 전환하고, 우회용 ! 오버라이드 116건 제거 후 운영 재도입
스토리북 CI가 develop 전용이라 MR에 파이프라인이 생기지 않아 머지가 막히던 문제를 rules: 기반으로 전환, 브라우저 캐시 키를 lockfile에서 분리해 공유 러너 디스크 부족 해소
컴포넌트 생성 하네스 PoC를 설계한 뒤 역할을 분담해 통합