쏘카 디자인 시스템 2.0, 기술로 굴리다: Hook, Rollup, LLM 활용

쏘카 디자인 시스템 2.0은 UI와 상태 결합도에 따라 Hook과 객체로 컴포넌트를 분리하여 재사용성(Reusability)과 유지보수성(Maintainability)을 높였다. UI와 상태가 강하게 얽힌 BottomSheet는 Hook 중심으로, DatePicker와 같이 정책 로직이 복잡한 컴포넌트는 객체(core)와 Hook Adapter를 활용했다. 이러한 구조는 UI 정책과 비즈니스 로직의 분리를 통해 UI 변경에 유연하게 대응하고, 테스트 용이성을 확보하는 데 기여한다. 특히, DatePicker의 경우, UI와 직접 연결되지 않는 로직을 객체로 분리하여 테스트 가능성(Testability)을 향상시켰다.

쏘카는 Next.js 13~15 버전 혼용 환경에서 트리쉐이킹(Tree-shaking)을 위해 Rollup을 도입하고, `preserveModules` 옵션을 활용하여 서비스 번들러가 트리쉐이킹에 유리한 구조를 만들었다. 또한, `useClientBanner` 옵션을 통해 각 출력 모듈 파일 상단에 'use client'를 주입하여 SSR(Server-Side Rendering) 환경에 대응했다. 그 결과, 공통 청크 용량 61% 감소, first load js 33% 감소, 불필요한 청크 제거 등 번들 사이즈(Bundle Size) 최적화를 달성했다. 이러한 전략은 성능 개선(Performance Improvement)과 코드 유지보수성(Code Maintainability)을 동시에 확보하는 데 기여했다.

쏘카 디자인 시스템은 Alert 컴포넌트에서 명령형 API(Imperative API)를 사용하여 상태 관리와 콜백 흐름을 명확하게 관리했다. `Alert.open`을 통해 Alert를 열고, 버튼 클릭 결과를 Promise로 받는 패턴을 제공하여 UI 내부 상태 변경을 최소화했다. 또한, JSX 합성 패턴을 활용하여 합성 컴포넌트(Composition Component)를 구현하고, data attribute를 활용한 커스텀 스타일링을 지원하여 서비스팀의 유연한 커스터마이징(Customization)을 가능하게 했다. 이러한 접근 방식은 컴포넌트의 재사용성을 높이고, UI 복잡성을 관리하는 데 효과적이다.

쏘카는 LLM의 정확도를 높이기 위해 Instructions 기반의 지시 문서를 구축하고, Figma MCP(Model Context Protocol)를 활용하여 디자인-개발 협업을 개선했다. AGENTS.md와 llms.txt를 통해 UI 라이브러리 사용법, Figma 설계 규칙, 예외 처리 기준을 명확히 정의하고, LLM이 필요한 정보를 단계적으로 찾을 수 있도록 구성했다. Instructions 개선 후, 리뷰에서 반복되던 결점(토큰/슬롯/예외 처리)이 크게 줄고 일관성을 갖게 되었다. 이는 AI 환각(Hallucination)을 줄이고, 개발 생산성을 향상시키는 데 기여한다.

쏘카는 Figma MCP(Model Context Protocol)를 사내 LLM 서비스에 접목하여 디자이너와 개발자 간의 협업을 강화했다. 에디터 내에서 특정 노드 ID를 기준으로 디자이너가 그린 결과물을 개발자가 바로 코드로 확인하고 수정하는 방식을 구현했다. 이 과정에서 Instructions와 Figma 설계 방식이 결과 품질에 큰 영향을 미친다는 것을 확인하고, 지속적인 개선을 진행하고 있다. 개발자의 세세한 리뷰를 반영하고 비즈니스 로직 반영 기준을 정책화하여 협업 효율성(Collaboration Efficiency)을 높이고, UI 일관성(UI Consistency)을 유지하는 것을 목표로 한다.