프로젝트 소개
Peak Map 
(바로가기)
•
한 줄 설명 : 기업 정보를 지도에서 탐색하고, 경로를 확인할 수 있도록 돕는 웹 애플리케이션입니다.
•
상세설명 : Peak Map은 사용자가 기업 정보를 지도에서 탐색하고, 경유지와 목적지를 체크하여 바쁜 미팅 일정을 효율적으로 활용할 수 있도록 경로 확인을 돕습니다.
카카오 지도 API 및 카카오 모빌리티 API를 활용하여 마커를 표시하고, 최적 경로를 제공하는 기능을 구현하였습니다.
•
개발 기간 : 2025년 02월 17일 → 2025년 03월 12일
상세 기능
1) 기업 탐색하기
1.
기업 정보 탐색
a.
Kakao map API 활용
b.
기업 리스트에서 기업 선택 시 상세 정보 표시
c.
지도에서 마커 클릭 시 모달 표시 (전화하기, 홈페이지 방문 버튼) , 선택 시 해당 위치로 지도 이동
d.
기업 리스트 페이지네이션 지원
e.
Zustand 스토어로 전역상태 관리 (지도 상태, 기업 정보 관리)
f.
useCallback, useMemo 등 활용하여 상태관리 최적화
2) 경유지, 목적지 지정하여 경로 찾기
2.
경로 탐색하기 ( PoC 기반 기능 구현)
a.
Kakao 모빌리티 경유지 API 활용 (axios 활용)
b.
기업 정보를 기반으로 경유지 탐색 기능 제공 (Kakao map Geocoder 주소 변환)
c.
사용자가 직접 경유지, 목적지를 선택 가능 (모달 UI에서 선택)
d.
경유지와 목적지 경로 색상 구분 (출발지 - 경유지는 보라색, 경유지 - 목적지는 빨간색) UI 개선
e.
최단 거리 / 최단 시간 옵션 선택 가능
f.
경로 초기화 시 기존 경로 모두 reset
3) 모바일로 서비스 활용하기
3.
모바일 및 다크모드 구현
a.
Zustand 전역 상태에서 기업 데이터 및 페이지 상태 관리
b.
다크모드 지원 및 반응형 UI 적용 (localStorage에 상태 저장)
c.
한 번에 10개의 기업만 표시하고, ‘더보기’ 버튼을 눌러 추가 로드
아키텍처
트러블슈팅 & 성능 개선
Map 컴포넌트 로딩 속도 개선
모바일 UI 작업 중 발생했던 트러블슈팅 & 해결 과정
성과
1.
렌더링 최적화 : 불필요한 렌더링 제거로 성능 향상 (useMemo, useCallback 사용)
2.
전역 상태 관리 적용 : useState → Zustand로 변경
3.
API 호출 최적화 : Mock 데이터 활용 및 상태 기반 데이터 관리
4.
Lighthouse 성능 개선 → LCP 2.2초 → 2.0초 (10% 향상) (CompanyList 컴포넌트 비교 기준)
성능 지표 | 리팩토링 전 | 리팩토링 후 | 개선 여부 |
LCP (Largest Contentful Paint) | 2.2초 | 2.0초 | 개선 (0.2초 감소) |
TBT (Total Blocking Time) | 0ms | 0ms | 동일 |
CLS (Cumulative Layout Shift) | 0 | 0.004 | 증가 |
Speed Index | 1.2초 | 1.2초 | 동일 |
성과: LCP 개선, 마커 로드 최적화로 지도 렌더링 속도 개선
보완할 점: CLS 증가 문제 해결 필요 (레이아웃 변화 최소화 작업 필요)