Syncspot

Problem

장소 입력 컴포넌트는 700줄이 넘는 하나의 파일에 UI 렌더링, 데이터 페칭, 상태 관리, 이벤트 핸들링이 모두 뒤섞여 있었습니다. 기획이 조금만 바뀌어도 파일 전체를 다시 파악해야 했고, 단순한 요구사항 하나를 반영하는 데도 복잡한 수정이 뒤따르는 구조적 한계가 있었습니다.

Solution

단일 책임 원칙을 적용해 UI 로직과 데이터 로직을 분리했습니다. 비즈니스 로직은 커스텀 훅으로 분리해 상태 관리와 API 호출 책임을 나누고, Context API로 상태와 함수를 계층 간에 전달하는 구조를 다시 설계했습니다.

Result

관심사 분리와 중복 코드 제거로 700줄이던 파일을 400줄로 줄였습니다. 기능 추가나 버그 수정 시 관련 파일만 수정하면 되는 구조가 되어 유지보수성이 높아졌고, 팀원들이 코드를 이해하는 속도와 요구사항을 구현하는 속도도 함께 빨라졌습니다.

Problem

서비스가 커지면서 실제 사용자 환경에서 어떤 에러가 발생하는지 파악하기 어려웠습니다. 사용자 활동, 네트워크 상태 같은 디버깅에 필요한 맥락 정보를 수집하는 체계가 없었고, API 통신 실패·렌더링 오류·비동기 처리 예외처럼 성격이 다른 에러를 구분해 추적할 방법도 없어 사용자 불만이 접수된 뒤에야 문제를 인지하는 수동적인 구조였습니다.

Solution

에러 유형(API 에러, 일반 예외, 중요 이벤트)별로 캡처 메커니즘을 세분화해 상황에 맞는 컨텍스트 정보를 수집하도록 설계했습니다. SentryErrorBoundary를 도입해 렌더링 오류를 처리하고, 동일한 에러가 중복 보고되지 않도록 플래그 시스템을 함께 구현했습니다. React Query와 통합해 API 요청 실패를 자동으로 캡처하도록 만들어, 백엔드 에러 코드와 연계된 상세 컨텍스트가 함께 기록되게 했습니다.

Result

에러 발생 시 상세한 컨텍스트 정보가 함께 쌓이면서 원인 파악과 문제 해결까지 걸리는 시간이 줄었습니다. "사용자 불만이 들어오면 대응"하던 수동적 방식에서 "이상 신호를 먼저 감지"하는 능동적 모니터링 구조로 전환됐고, 반복적으로 발생하던 주요 에러들의 근본 원인을 해결해 서비스 안정성과 사용자 경험이 함께 개선됐습니다.

Problem

모바일 사용자 비율이 늘면서, 제한된 화면 공간 안에서 장소 입력과 중간 지점 결과를 지도와 함께 동시에 보여줘야 하는 화면 구성 제약이 발생했습니다.

Solution

사용자가 필요에 따라 정보 노출량을 직접 조절할 수 있도록 맨 아래에서 위로 끌어올릴 수 있는 패널 UI를 구현했습니다. 다양한 화면 크기와 방향 변경에 대응하기 위해 dvh 단위 기반으로 높이를 동적으로 계산했고, 드래그 로직은 useBottomSheet라는 커스텀 훅으로 분리해 UI와 인터랙션 로직의 결합도를 낮췄습니다. 터치와 마우스 이벤트를 모두 지원해 모바일과 태블릿 등 다양한 입력 환경에서 일관된 경험을 제공했습니다.

Result

1차·2차 사용자 테스트 결과, 바텀시트 도입 이전 43%였던 모바일 환경 사용자 만족도가 89%로 올랐습니다. 지도와 상세 정보를 동시에 보여주면서도 사용자가 필요에 따라 정보량을 조절할 수 있는 직관적인 인터페이스를 제공했고, 이 컴포넌트는 장소 입력·중간지점 결과 페이지 등 여러 핵심 화면에서 재사용되어 개발 효율에도 기여했습니다.