레거시 코드 누적과 일관성 없는 컴포넌트로 개발 속도 저하 및 버그 빈발. 디자인 시스템 부재로 디자인-개발 간 병목 발생.

토투스는 웹툰/영상의 자막 번역, 식자, 검수 작업을 지원하는 B2B SaaS 플랫폼입니다. 메인 서비스(토투스), 작업 에디터, 어드민 시스템 3개 프로덕트의 유지보수와 기능 개발을 담당했습니다.

[문제 상황]
- 개발자마다 다른 컴포넌트 스타일로 일관성 부재
- 디자인 변경 시 퍼블리싱 병목 발생
- 레거시 코드 누적으로 버그 빈발, 고객 컴플레인 증가
- 전역 상태 관리 코드가 비대해져 유지보수 어려움

[해결 방안]

1. Headless UI 기반 디자인 시스템 구축
- 기능(로직)과 디자인(스타일)을 분리한 컴포넌트 설계
- 디자이너와 협업하여 일관된 컴포넌트 구조 정의
- Storybook으로 컴포넌트 문서화 및 테스트 환경 구축
- 결과: 디자인-퍼블리싱 생산성 100% 향상

2. 대규모 리뉴얼 프로젝트 주도
- 작업 공고, 전문가 리뷰, 스터디 라운지, 마이페이지 등 핵심 페이지 개편
- 페이지 리뉴얼과 동시에 코드 구조 개선
- 유저 정보 전역 스토어(useAuthStore) 전면 리팩토링

3. 레거시 코드 상시 리팩토링
- 피쳐 개발과 병행하여 구조 개선, 디자인 시스템 적용
- 일관된 코드 컨벤션과 가독성 확보
- 결과: 컴플레인 성격의 고객 문의 50% 감소

4. 이벤트 페이지 개발
- 전문가 리뷰 프로모션, 번역 대회 등 마케팅 이벤트 페이지 개발
- 이벤트 성격에 맞는 효율적 개발로 비즈니스 민첩성 확보

[기술적 의사결정]
- Headless UI 패턴 채택: 디자인 변경에 유연하게 대응하면서 로직 재사용성 확보
- Storybook 도입: 컴포넌트 단위 개발/테스트로 QA 비용 절감
- Apollo Client + TanStack Query 병행: GraphQL과 REST API 혼용 환경에 대응