🗺️ React + Google Maps + GeoJSON으로 대한민국 시도별 색상 시각화하기

안녕하세요!
이번 포스팅에서는 Google Maps API를 사용해서 대한민국의 시도(서울, 부산 등)를 GeoJSON 데이터 기반으로 맵에 그리고, 각 시도별로 서로 다른 색상을 입혀보는 과정을 정리해보았습니다.

프론트엔드 기술 스택은 React + TypeScript이며, 지도 위에 데이터를 시각화하는 간단한 예제를 만들어봤습니다.

🎯 목표

• Google Maps를 React에서 사용하기
• GeoJSON을 기반으로 지도에 행정구역 표시하기
• 각 시도마다 다른 색상 입히기
• 마우스 오버시 스타일 변화 적용하기

📦 사용한 라이브러리

npm install @react-google-maps/api

@react-google-maps/api는 Google Maps를 React에서 쉽게 사용할 수 있도록 도와주는 라이브러리입니다.

🧩 GeoJSON 데이터 준비

GeoJSON은 다음과 같이 생긴 형태로, 각 시도별 경계 정보를 담고 있어요.

{
  "type": "Feature",
  "geometry": {
    "type": "Polygon",
    "coordinates": [...]
  },
  "properties": {
    "CTP_KOR_NM": "대구광역시",
    "CTP_ENG_NM": "Daegu"
  }
}

properties.CTP_KOR_NM 속성을 활용해서 색상을 지정합니다.

🧪 구현 코드

// components/KoreaMap.tsx
import { GoogleMap, LoadScript } from "@react-google-maps/api";
import { useRef } from "react";

const containerStyle = {
  width: "100%",
  height: "100vh",
};

const center = {
  lat: 36.5,
  lng: 127.5,
};

const regionColors: Record<string, string> = {
  서울특별시: "#e41a1c",
  부산광역시: "#377eb8",
  대구광역시: "#4daf4a",
  인천광역시: "#984ea3",
  광주광역시: "#ff7f00",
  대전광역시: "#ffff33",
  울산광역시: "#a65628",
  세종특별자치시: "#f781bf",
  경기도: "#999999",
  강원특별자치도: "#66c2a5",
  충청북도: "#fc8d62",
  충청남도: "#8da0cb",
  전라북도: "#e78ac3",
  전라남도: "#a6d854",
  경상북도: "#ffd92f",
  경상남도: "#e5c494",
  제주특별자치도: "#b3b3b3",
};

export default function KoreaMap({ geoJson }: { geoJson: any }) {
  const mapRef = useRef<google.maps.Map | null>(null);

  const onLoad = (map: google.maps.Map) => {
    mapRef.current = map;

    map.data.addGeoJson(geoJson);

    map.data.setStyle((feature) => {
      const name = feature.getProperty("CTP_KOR_NM");
      const fillColor =
        typeof name === "string" && name in regionColors
          ? regionColors[name]
          : "#cccccc";

      return {
        fillColor,
        strokeColor: "#555",
        strokeWeight: 1,
        fillOpacity: 0.6,
      };
    });

    map.data.addListener("mouseover", (event: any) => {
      map.data.overrideStyle(event.feature, { fillColor: "#FEB24C" });
    });

    map.data.addListener("mouseout", () => {
      map.data.revertStyle();
    });
  };

  return (
    <LoadScript googleMapsApiKey={process.env.REACT_APP_GOOGLE_MAPS_API_KEY!}>
      <GoogleMap
        mapContainerStyle={containerStyle}
        center={center}
        zoom={7}
        onLoad={onLoad}
      />
    </LoadScript>
  );
}

참고: .env 파일에 Google Maps API Key를 넣어주고 REACT_APP_GOOGLE_MAPS_API_KEY=... 형식으로 설정해야 합니다.

🤯 타입스크립트 이슈 해결

처음엔 이런 에러가 발생했어요:

TS2538: Type 'unknown' cannot be used as an index type.

이는 feature.getProperty("CTP_KOR_NM")의 반환 타입이 unknown이기 때문이었습니다.
이를 해결하기 위해 typeof name === "string"으로 먼저 체크한 다음,
name in regionColors로 키 존재 여부를 확인해 타입 안정성을 확보했습니다.

if (typeof name === "string" && name in regionColors) {
  const fillColor = regionColors[name]; // 안전!
}

🌈 결과 화면

• 대한민국 시도가 지도에 표시됨
• 각 시도마다 지정한 색상으로 구분됨
• 마우스를 올리면 fillColor가 변경되어 하이라이트 효과

💡 배운 점

• Google Maps API에서 map.data.addGeoJson()으로 GeoJSON을 직접 추가할 수 있다.
• map.data.setStyle()은 Feature별로 스타일을 커스터마이징할 수 있는 유용한 기능!
• value is Type 형태의 타입 가드 함수로 TypeScript에서도 안전한 GeoJSON 핸들링이 가능
• in 연산자는 객체의 키 존재 여부를 안전하게 체크하는 데 꼭 필요함

🧩 다음 목표

• 시도 클릭 시 해당 지역 정보 표시
• 시각화에 animation 효과 추가
• 공공데이터 API와 연동하여 실시간 데이터 반영하기

🙌 마무리

지도 시각화는 생각보다 재미있고, 활용도가 높은 작업이었습니다.
특히 GeoJSON을 어떻게 활용하느냐에 따라, 행정구역 시각화부터 데이터 기반 분석까지 다양한 프로젝트로 확장할 수 있겠다는 가능성을 느꼈어요.

궁금한 점이나 도움이 필요하신 분은 댓글로 남겨주세요!
읽어주셔서 감사합니다 ☺️