쏘카 디자인 시스템 2.0 개발기 2편: 웹에서 기술로 굴리기

컴포넌트는 UI 결합도에 따라 Hook 중심과 객체(core) + Hook Adapter로 나뉘었다.

상태 전이가 곧 애니메이션·제스처 제어인 BottomSheet와 Accordion은 Hook 중심으로 설계했고, DatePicker처럼 정책 로직이 복잡한 컴포넌트는 DateManager 같은 객체로 분리했다. React 쪽에서는 useDateManager 같은 Adapter Hook을 두어 라이프사이클과 상태 반영을 안정적으로 연결했다.

합성 컴포넌트는 JSX 조합을 유지하면서 data-attribute를 통해 서비스별 커스텀 스타일링 여지를 넓혔다. Alert는 상태 분기와 콜백 흐름을 줄이기 위해 Alert.open() 기반의 명령형 API를 제공했고, 호출부에서 Promise 결과에 따라 후속 처리를 하도록 만들었다.

패키징은 tsup에서 rollup으로 전환했다. preserveModules와 preserveModulesRoot로 모듈 구조를 유지해 트리쉐이킹에 유리하게 만들고, banner로 각 모듈 상단에 use client를 주입해 Next.js 13~15 혼재 환경과 SSR/CSR 요구에 대응했다.

그 결과 공통 static/chunk는 1.45MB → 567.07KB, first load JS는 373KB → 248KB로 줄었고, pages_app-xxx.js 같은 큰 청크도 제거됐다. 필요한 컴포넌트만 node_modules 안에서 빌드되는 구조를 확인하며 번들 전략의 효과를 검증했다.

AI 활용은 프롬프트가 아니라 Instructions 고정으로 접근했다. AGENTS.md와 llms.txt를 함께 운영해 UI 라이브러리 사용법, Figma 규칙, 예외 처리 기준을 정리했고, llms-full.txt와 index.txt로 LLM이 필요한 정보를 단계적으로 찾게 했다.

여기에 Figma MCP까지 붙여 디자이너가 만든 결과를 에디터 안에서 바로 코드로 확인·수정할 수 있는 흐름도 만들었다. 다만 같은 디자인이라도 Instructions와 Figma의 슬롯, 상태, hidden 노드 정의에 따라 결과 품질이 크게 달라져, 문서와 설계 규칙의 정교함이 핵심이라는 점을 확인했다.