이 게시물은 쏘카 디자인 시스템 2.0의 컴포넌트 아키텍처, 패키지 전략, LLM 활용 경험을 정리한 글입니다.

컴포넌트 아키텍처: UI와 로직 분리를 목표로 UI 결합도가 높은 컴포넌트는 Hook 중심, 정책 로직이 복잡한 컴포넌트는 객체(core)로 분리하고 Hook을 어댑터로 사용

패키지·번들 전략: rollup 전환과 preserveModules, use client 배너 적용으로 트리쉐이킹 최적화와 SSR(Next.js 13~15 혼재) 대응

합성·명령형 API: JSX 합성 패턴과 data-attribute 기반 확장 지점 제공, Alert.open 같은 명령형 API로 호출부 중심 흐름 설계

AI 활용: Instructions(llms.txt, AGENTS.md)로 LLM 친화적 문서 구성 및 Figma MCP 연동으로 디자이너→개발자 워크플로우 보강