콘텐츠

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

역량 개발 · 쏘카 테크 · 2026.02.25

쏘카의 디자인 시스템 2.0 개발 과정 중 아키텍처, 패키지 전략, 그리고 LLM 활용에 대한 기술적 기록을 담고 있습니다. 먼저 컴포넌트 설계 시 재사용성과 독립성을 높이기 위해 UI와 로직을 분리하는 구조를 채택했습니다. BottomSheet처럼 UI와 상태가 밀접한 경우는 Hook 중심으로, DatePicker처럼 복잡한 로직이 필요한 경우는 객체(Object)와 Hook Adapter를 사용하는 방식으로 설계했습니다. 패키지 전략 측면에서는 Rollup을 사용하여 Tree-shaking 효율을 높이고, Next.js 환경에서의 SSR 대응을 위해 'use client'를 주입하는 방식을 적용했습니다. 이를 통해 번들 사이즈를 획기적으로 줄이는 성과를 거두었습니다. 마지막으로, LLM이 디자인 시스템의 규칙을 정확히 이해하고 활용할 수 있도록 llms.txt와 AGENTS.md를 통해 구조화된 Instructions를 제공하는 등 AI 시대에 맞춘 효율적인 커뮤니케이션 환경을 구축한 경험을 공유하고 있습니다.