프론트엔드
쏘카 디자인 시스템 2.0 개발기 2편: 기술로 굴리기(웹)
두줄요약
쏘카 디자인 시스템 2.0 웹 개발에서 컴포넌트 구조, 패키지 전략, LLM 활용 방식을 정리했습니다. 상태 결합도에 따라 Hook과 객체를 분리하고, rollup과 Instructions 체계로 운영성을 높였습니다.
구조와 흐름
- 쏘카 디자인 시스템 2.0 웹 개발에서 컴포넌트 아키텍처, 패키지 전략, LLM 활용 방식을 정리한 사례
- UI와 로직의 결합도를 기준으로 Hook 중심 컴포넌트와 객체 분리형 컴포넌트를 나누고, Hook Adapter로 React 흐름에 연결
- 합성 컴포넌트와 명령형 API로 서비스별 커스텀과 복잡한 상태 흐름을 다루는 구조를 구성
선택 이유
- BottomSheet처럼 상태 전이가 UI와 강하게 얽힌 경우는 Hook 중심 구조를 선택
- DatePicker처럼 정책 로직이 복잡한 경우는 객체로 분리하고 Hook을 어댑터로 사용
- 트리쉐이킹과 SSR 대응을 위해 rollup, preserveModules, use client banner를 적용
성능/운영 포인트
- tsup에서 rollup 전환으로 모듈 구조를 유지해 트리쉐이킹에 유리한 번들 구조 확보
- external 설정으로 공통 의존성을 분리해 중복 청크 감소
- 공통 static/chunk와 first load js 용량 감소로 번들 효율 개선
적용해볼 점
- AGENTS.md와 llms.txt로 LLM이 바로 소비 가능한 Instructions 체계 구성
- Figma MCP와 LLM 연동 시 슬롯, 상태, hidden 노드 규칙을 명확히 정의
- 디자인 시스템을 단순 컴포넌트 모음이 아닌 운영 가능한 시스템으로 확장