MapLibre3 [React] 지도 운영기: 마커가 육지에 찍히는 문제와 좌표 50개 보정 (다크→라이트·워터마크 제거) 📌 이 글의 핵심 요약핵심 내용: 화면 뒤의 현실 문제 ─ 스팟 마커가 바다가 아닌 육지에 찍히던 문제를 좌표 50개 보정으로 해결한 과정주요 포인트: 마을 중심·내륙 좌표 오차 진단, 교차 검증으로 해안선 보정, 다크→라이트 전환, 워터마크 제거기대 효과: 마커가 실제 해변 위에 정확히 표시되는, 신뢰할 수 있는 지도적용 시점: 외부 좌표 데이터로 POI를 찍는 모든 지도 서비스📚 시리즈 구성이 글은 Whale-Log 지도 기능 구현 시리즈의 3편(마지막)입니다.1편: Supercluster로 마커 클러스터링하기2편: 지도 UX 디테일 5선3편: 지도 운영기 ─ 좌표 보정·테마·워터마크 (현재 글)들어가며: 예쁜 지도의 함정1·2편으로 묶이고, 누르고 싶고, 한눈에 들어오는 지도를 만들었습니다. 그.. 2026. 6. 15. [React] 지도를 '쓰고 싶게' 만드는 UX 디테일 5가지 (바텀시트·flyTo·펄스 애니메이션) 📌 이 글의 핵심 요약핵심 내용: 기능만 있던 지도에 "쓰고 싶은 감성"을 입히는 5가지 UX 디테일주요 포인트: 바텀 시트, 지역 퀵 이동(flyTo), 색상 범례, 고점수 펄스 애니메이션, fitBounds 자동 줌기대 효과: 정보를 누르고 싶고, 좋은 스팟이 한눈에 들어오고, 첫 화면부터 답답하지 않은 지도적용 시점: 1편(클러스터링)으로 마커 표시가 끝난 뒤, 실사용 단계📚 시리즈 구성이 글은 Whale-Log 지도 기능 구현 시리즈의 2편입니다.1편: Supercluster로 마커 클러스터링하기2편: 지도 UX 디테일 5선 (현재 글)3편: 지도 운영기 (스팟 좌표 50개 보정 · 다크→라이트 전환 · 워터마크 제거)들어가며: 기능은 됐다, 이제 '감성'이다1편에서 마커가 수백 개여도 끊김 .. 2026. 6. 14. [React] 지도에 마커 수백 개를? Supercluster로 클러스터링하기 (react-map-gl 실전) 📌 이 글의 핵심 요약핵심 내용: 지도에 100개 넘는 마커를 그냥 찍으면 생기는 문제를 Supercluster 클러스터링으로 해결하는 실전 가이드주요 포인트: MapLibre + OpenFreeMap 무료 조합, useSpotClusters 커스텀 훅, 클러스터 클릭 시 자동 줌인기대 효과: 마커가 수백 개여도 끊김 없이 부드러운 지도, 줌 레벨에 따라 자동으로 묶이고 풀리는 UX적용 시점: 지도 위에 다수의 POI(스팟·매장·숙소 등)를 표시해야 하는 모든 프로젝트📚 시리즈 구성이 글은 Whale-Log 지도 기능 구현 시리즈의 1편입니다.1편: Supercluster로 마커 클러스터링하기 (현재 글)2편: 지도 UX 디테일 5선 (바텀시트 · flyTo 퀵이동 · 색상 범례 · 펄스 애니메이션 .. 2026. 6. 14. 이전 1 다음
