경력 프로젝트 A: 커머스 프론트 리빌드

문제 정의

상품 전시와 상세 페이지의 상태 동기화가 불안정해 필터 재진입 시 사용자가 원하는 맥락을 잃는 문제가 있었습니다.

제약 조건

• 기존 운영 데이터 구조는 유지해야 했다
• 대규모 페이지 리뉴얼을 짧은 스프린트 내 단계적으로 진행해야 했다
• 검색/필터/정렬 조합이 많은 상태에서도 성능을 유지해야 했다

목표

• 사용자 탐색 맥락을 URL과 상태에 일관되게 반영
• 필터 조합 증가 시 렌더링 비용 감소
• 운영팀이 배너/섹션을 더 안전하게 관리할 수 있도록 구조 개선

구현 접근

• 쿼리스트링과 내부 상태를 단일 계약으로 맞추고 재진입 로직 표준화
• 데이터 페칭 계층을 분리해 화면 컴포넌트의 복잡도를 감소
• 목업 기반 시나리오 테스트로 회귀 구간을 사전 검증

결과

• 필터 재진입 시 사용자 맥락 유지율 개선
• 렌더링 병목 구간 축소로 체감 반응성 개선
• 운영 변경 시 코드 수정 범위 축소

시각 증빙

회고

복잡한 탐색형 서비스에서는 URL, 서버 상태, 클라이언트 상태의 계약을 먼저 고정하는 것이 이후 개발 속도와 품질 모두에 유리했습니다.

추가 기록