🗺️ 74. React Native에서 지도(Map) 기능 구현 전략 — react-native-maps, 마커, 경로 표시까지

---

위치 기반 서비스를 만들다 보면 지도 기능은 필수다.
매장 찾기, 배달 경로 표시, 주변 장소 검색 등 지도는 생각보다 많은 앱에서 사용된다.
처음엔 단순히 지도를 띄우는 것만 구현하면 될 줄 알았는데,
마커, 줌 레벨, 경로 표시, 위치 권한 처리까지 고려해야 할 게 많았다.

이번 글은 React Native에서 지도 기능을 구현했던 과정과 전략을 정리한 것이다.

---

✅ 지도 기능이 필요한 이유

항목	설명
직관적인 UI	시각적으로 위치를 바로 확인할 수 있다
사용자 편의	주소보다 지도가 훨씬 이해하기 쉽다
다양한 확장성	검색, 경로 안내, 주변 탐색 기능까지 확장 가능

---

📦 react-native-maps 설치와 기본 사용

설치

npm install react-native-maps
npx pod-install

기본 예시

import MapView, { Marker } from 'react-native-maps';

<MapView
  style={{ flex: 1 }}
  initialRegion={{
    latitude: 37.5665,
    longitude: 126.9780,
    latitudeDelta: 0.01,
    longitudeDelta: 0.01,
  }}
>
  <Marker
    coordinate={{ latitude: 37.5665, longitude: 126.9780 }}
    title="서울"
    description="서울특별시"
  />
</MapView>

• initialRegion으로 지도 시작 위치와 줌 범위를 설정한다.
• Marker를 사용해 특정 위치를 표시할 수 있다.

---

📍 사용자 현재 위치 표시

위치 권한을 먼저 요청해야 한다.
react-native-permissions나 Expo 환경이라면 expo-location을 사용할 수 있다.

npm install expo-location

import * as Location from 'expo-location';

const getCurrentLocation = async () => {
  const { status } = await Location.requestForegroundPermissionsAsync();
  if (status !== 'granted') return;

  const location = await Location.getCurrentPositionAsync({});
  console.log(location.coords);
};

이 값을 Marker 좌표로 넣으면 현재 위치를 표시할 수 있다.

---

🛣️ 경로(Route) 표시

경로를 보여주려면 Google Directions API 같은 외부 API를 사용한다.
응답으로 받은 좌표 리스트를 Polyline 컴포넌트로 그린다.

import { Polyline } from 'react-native-maps';

<Polyline
  coordinates={[
    { latitude: 37.5665, longitude: 126.9780 },
    { latitude: 37.5700, longitude: 126.9920 },
  ]}
  strokeColor="#007bff"
  strokeWidth={4}
/>

---

⚙️ UX 개선 포인트

기능	이유
줌 제스처 제한	사용자가 너무 멀리/가깝게 보지 않도록
마커 커스터마이징	브랜드 아이콘이나 이미지를 사용할 수 있다
클러스터링	마커가 많을 때 성능과 가독성 개선
위치 버튼	사용자가 언제든 현재 위치로 이동할 수 있도록

---

🧠 실전에서 겪었던 일

배달 경로 표시 기능을 만들었을 때,
단순히 마커와 선만 표시하면 될 줄 알았다.
하지만 실제 사용 환경에서는

• GPS 오차
• API 응답 지연
• 지도 이동 시 성능 저하
  같은 문제들이 있었다.

그래서 마커를 최소화하고, Polyline 렌더링 최적화를 적용했고,
위치 갱신 주기를 조절해서 배터리 소모도 줄였다.
그 결과 지도가 훨씬 부드럽게 동작하게 됐다.

---

🗺️ 지도는 단순한 시각 요소가 아니라, 실시간 정보와 UX가 결합된 기능이다.

---