🤖
2580 in / 1882 out / 4462 total tokens
v2 목업 화면이랑 실제 화면이랑 계속 어긋나 있어서 한 번에 싹 맞췄다. 출발 도착 핀, 1등 마커 강조, 카테고리 이모지, GPS 에러 토스트까지 6개 파일 210줄 추가해서 목업 정합성 작업을 마무리했다.
먼저 KakaoEndpointMarker 컴포넌트를 새로 만들었다. 카카오맵 SDK의 CustomOverlay로 출발 핀은 파란색, 도착 핀은 빨간색 물방울 형태로 렌더링한다. 목업 화면 4/5에 있던 pin-start / pin-end 디자인 그대로 구현한 건데, 솔직히 카카오 SDK에서 커스텀 오버레이로 원하는 모양 만드는 게 생각보다 귀찮았다. HTML 문자열을 인라인으로 넣어야 해서 JSX처럼 깔끔하게 안 된다. 어쨌든 MapContainer에 showEndpointMarkers, startCoords, endCoords 옵셔널 props를 추가해서 기본값 false로 뒀다. 메인 페이지나 기존 라우트에는 영향 없도록 격리해놓은 게 포인트다. 나중에 v2에서만 켜면 된다.
KakaoWaypointMarker도 손봤다. 이제 1등 경유지, 즉 베스트픽 마커는 52px 황금색으로 크게 뜬다. 나머지는 36px에 번호만 표시. index === 0이면 isBest 플래그를 세우고, 라벨을 🥇 이모지로 교체했다. 목업 화면 6의 POI best 비주얼이랑 동일하게 맞춘 건데, 게임 UI에서 보스 몬스터 체력바 크게 만드는 거랑 비슷한 원리다. 시각적 계층을 명확히 해서 사용자가 한눈에 최적 선택지를 인식하게 만드는 게 핵심이다.
카테고리 이모지도 추가했다. PlaceSearchOverlay랑 PlaceDetailSheet에 getCategoryEmoji() 헬퍼 함수를 각각 만들어서 카테고리 문자열에 따라 🚇 ☕ 🏪 🏬 💄 🛒 등을 반환한다. 사실 이 함수를 두 파일에 중복으로 넣은 건 좀 찝찝하다. 나중에 utils로 빼야겠다. includes()로 매칭하는 것도 엄밀하지 않은데, 카카오 API 카테고리 응답이 어차피 자의적이라 일단은 프래그매틱하게 간다.
GPS 거부 처리도 넣었다. v2 page.tsx에 gpsError 상태를 추가하고, 권한 거부나 타임아웃이 발생하면 인라인 토스트로 안내 메시지를 보여준다. 리뷰어가 P2-7으로 지적한 건데, GPS 안 되는데 아무 피드백 없으면 사용자 입장에서는 버그인지 느린 건지 구분이 안 된다. UE5에서도 로딩 화면 없으면 유저가 크래시한 줄 안다. 피드백은 기본이다.
MapContainer에서 KakaoEndpointMarker를 dynamic import로 불러오는 것도 SSR false로 설정했다. 카카오 SDK가 window 객체에 의존하니까 서버 사이드에서 터지는 걸 방지하는 건데, Next.js에서 지도 관련 컴포넌트 다루다 보면 이게 반복해서 등장하는 패턴이다.
전체적으로 목업이랑 1:1로 맞추는 작업이라 기능적으론 큰 변화가 없다. 하지만 시각적 일관성이 사용자 경험에 주는 영향이 크다. 특히 베스트픽 강조는 경로 추천 서비스에서 핵심 UX 패턴이다. 사용자가 10개 경유지 보여주면 다 읽기 귀찮아하니까, 대신 "이거 쓰세요"를 시각적으로 박아넣는 게 중요하다.
목업 정합성은 디자이너랑 싸우지 않기 위한 방어 코드다. 한 픽셀 어긋나면 또 피드백 오니까.