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

구조와 흐름

• UI 상태와 상호작용이 강결합된 BottomSheet·Accordion의 Hook 중심 설계
• 정책 로직이 복잡한 DatePicker·Carousel의 객체 core와 React Hook Adapter 분리
• JSX 합성 컴포넌트, data attribute 기반 확장 지점, Promise 기반 Alert 명령형 API

선택 이유

• UI 정책과 비즈니스 로직 혼재로 인한 재사용성·유지보수성 저하 방지
• 객체 분리를 통한 정책 테스트 용이성 및 서비스 간 재사용성 확보
• 서비스별 커스텀 요구에 대응하는 안전한 스타일링 확장 경로 제공

성능/운영 포인트

• Rollup의 preserveModules로 소비 서비스 번들러의 트리쉐이킹 친화적 모듈 구조 구성
• banner 옵션으로 출력 모듈에 use client 주입, Next.js 13~15 혼재 환경의 SSR/CSR 요구 대응
• 공통 청크 1.45MB에서 567.07KB, First Load JS 373KB에서 248KB로 감소

적용해볼 점

• AGENTS.md·llms.txt 기반 Instructions로 라이브러리 규칙, Figma 설계, 예외 처리 기준 전달
• Figma MCP 결과 품질 향상을 위한 슬롯·상태·hidden 노드 규칙과 Instructions의 지속 보완
• 합의된 UI/UX 명세를 기반으로 한 커뮤니케이션 비용 및 AI 테스트 코드 작성 부담 축소