쏘카플랜 개편기

빠듯한 일정과 증가하는 요구사항 속에 쏘카플랜 개편을 진행한 프론트엔드 개발자가 DRY vs WET 원칙, 콜로케이션 패턴, Storybook 도입 등 코드 품질과 생산성 사이에서 내린 구체적인 기술 결정들을 정리했다. 130개 이상의 QA 이슈를 처리하면서 배운 레거시 개선 접근법과 TypeScript + ESLint 도입 경험도 포함한다.

핵심 포인트

DRY vs WET 선택: 공통화를 서두르면 예외 처리가 쌓여 유지보수 비용 증가 → 코드 안정까지 WET(복사 우선), 안정화 후 리팩터링
콜로케이션 패턴: 자주 함께 수정되는 파일을 같은 폴더에 배치, features 폴더로 도메인별 응집도 관리
Storybook 도입: API 명세처럼 컴포넌트 명세 문서화 → 중복 컴포넌트 생성 방지, 팀 내 컴포넌트 인지도 향상
레거시 개선: TypeScript 도입, any 타입 제거, ESLint + Prettier로 코딩 컨벤션 일원화
QA 대응: 130개+ 이슈를 Critical/Major/General/Minor 우선순위로 분류 처리, 이슈 수정이 신규 이슈 유발 시 침착함 유지

상세 정리

쏘카플랜: 월 단위 차량 구독 서비스, 자동 갱신 구독·디자인 개편·차량 필터 강화 등 대규모 개편
개발 일정 추정 실패 원인: 점진적 요구사항 추가, 기획·디자인·백엔드 완료 후 프론트엔드 시작되는 의존성 구조
WET 적용 사례: 혜택 태그 필터 컴포넌트가 필터 화면·목록 화면에서 비슷하지만 세부 동작이 달라 처음엔 공통화 → 출시 후 Tag 컴포넌트(외형·선택), 커스텀 훅(도메인 로직), Context Provider(선택 상태)로 분리
콜로케이션 근거: React 공식 문서 권고사항 — 처음엔 단일 폴더, 프로젝트 성장에 따라 점진 분리
Storybook 효과: 팀 내 컴포넌트 중복 생성 방지, 기존 컴포넌트 사용법 공유
레거시 "Usage History" 개선: 순차 화면(계약 갱신·차량 반납) 간 상태 추적 복잡도 높아 백로그로 분류 후 리팩터링
QA 과정: QA 엔지니어(기능 검증) + 디자이너 QC(피그마 대비 구현 검수), 이슈 발생 시 우선순위 분류해 처리
일정 추정 개선법: 스토리포인트 속도 측정, 개인 회고로 반복 패턴 파악, 추정 전 충분한 시간 확보