대한민국 지도 차트: 시도·시군구 지도와 타일 지도 (전남광주 반영)

지도 차트(단계구분도, choropleth)란 지역마다 값에 따라 색의 진하기를 달리 칠해, 어느 지역이 많고 적은지 한눈에 보여 주는 차트입니다. 시도별 인구, 지역별 매출, 시군구별 민원 건수처럼 지역이 기준인 통계에 씁니다.

82chart 의 대한민국 지도는 코어 위에 얹는 별도 패키지 @82chart/map-kr 입니다. 시도 경계와 시군구 경계가 패키지에 들어 있어 GeoJSON 을 따로 구할 필요가 없고, 데이터에는 '서울', '경기도' 같은 이름이나 행정기관코드만 넣으면 됩니다. 툴팁·키보드·내보내기·표 보기·서버 렌더링은 다른 82chart 차트와 똑같이 동작합니다.

npm i @82chart/core @82chart/map-kr

import { createMapChart } from '@82chart/map-kr';
import '@82chart/core/styles.css';

createMapChart('#map', {
  title: '시도별 인구',
  unit: '명',
  data: { series: [{ name: '인구', data: [{ x: '서울', y: 9310000 }, { x: '경기', y: 13720000 } /* … */] }] },
});

// 코어의 createChart 로 쓸 때는 한 번 등록합니다
import { createChart, use } from '@82chart/core';
import { koreaMap } from '@82chart/map-kr';
use(koreaMap); // 'map', 'tilemap'
createChart('#map', { type: 'map', data });

// 시군구 지도(map.level: 'sigungu')를 쓰면 경계 데이터를 하나 더 불러옵니다
import '@82chart/map-kr/sigungu';

아래는 16개 시도의 인구입니다(예시 값). 지역에 마우스를 올리거나 차트를 누른 뒤 화살표 키로 움직이면 툴팁에 값과 순위(16곳 중 몇 번째), 전체 중 비중이 나옵니다. 울릉도와 독도는 점선 상자 안에 그리고, 독도는 실제보다 조금 크게 그려 보이게 했습니다.

createChart('#chart', {
  type: 'map',
  title: '시도별 인구',
  subtitle: '2026년 9월, 예시 데이터',
  unit: '명',
  footnote: '지도 경계: 통계청 SGIS, vuski/admdongkor (CC BY 4.0)',
  data: {
    series: [{
      name: '인구',
      data: [
        { x: '서울', y: 9310000 }, { x: '부산', y: 3240000 }, { x: '대구', y: 2350000 }, { x: '인천', y: 3040000 },
        { x: '대전', y: 1440000 }, { x: '울산', y: 1090000 }, { x: '세종', y: 392000 }, { x: '경기', y: 13720000 },
        { x: '강원', y: 1510000 }, { x: '충북', y: 1590000 }, { x: '충남', y: 2140000 }, { x: '전북', y: 1720000 },
        { x: '전남광주', y: 3170000 }, { x: '경북', y: 2510000 }, { x: '경남', y: 3220000 }, { x: '제주', y: 668000 },
      ],
    }],
  },
});

데이터 형식

• 지역 하나는 { x: '서울', y: 9310000 } 입니다. labels: ['서울', '부산'] 과 숫자 배열로 넣어도 됩니다.
• 데이터에 없는 지역과 값이 null 인 지역은 회색으로 칠하고 툴팁에 "자료 없음"이라고 씁니다.
• 색은 한 가지 색의 진하기로 칠합니다(map.color, 기본은 첫 시리즈 색). 값에 음수와 양수가 함께 있으면 0을 가운데 둔 두 가지 색으로 칠합니다(아래 타일 지도).
• 이름은 지역 안에 들어갈 때만 씁니다. map.labels 로 이름 대신 값, 또는 이름과 값을 함께 쓸 수 있습니다.

16개 시도와 17개 시도 (광주·전남 통합)

2026년 7월 1일 광주광역시와 전라남도가 전남광주통합특별시로 합쳐져 시도는 16개가 되었습니다. 기본값 regions: 'auto' 는 데이터를 보고 정합니다. 데이터에 광주나 전남이 따로 있으면 이전처럼 17개 시도로, 그렇지 않으면 지금의 16개 시도로 그립니다. 16개 지도에서 전남광주는 옛 광주와 전남의 경계를 합쳐 한 지역으로 칠합니다.

아래는 2025년 말 통계라 광주와 전남이 따로 있습니다. 그래서 따로 설정하지 않아도 17개 시도로 그려집니다(이름과 값을 함께 쓴 예).

createChart('#chart', {
  type: 'map',
  title: '시도별 인구 (2025년 말)',
  subtitle: '광주·전남이 따로 있어 17개 시도로 그립니다',
  unit: '명',
  footnote: '지도 경계: 통계청 SGIS, vuski/admdongkor (CC BY 4.0)',
  map: { labels: 'both' },
  data: {
    series: [{
      name: '인구',
      data: [
        { x: '서울', y: 9330000 }, { x: '부산', y: 3260000 }, { x: '대구', y: 2360000 }, { x: '인천', y: 3030000 },
        { x: '광주', y: 1400000 }, { x: '대전', y: 1440000 }, { x: '울산', y: 1090000 }, { x: '세종', y: 390000 },
        { x: '경기', y: 13700000 }, { x: '강원', y: 1520000 }, { x: '충북', y: 1590000 }, { x: '충남', y: 2130000 },
        { x: '전북', y: 1750000 }, { x: '전남', y: 1790000 }, { x: '경북', y: 2540000 }, { x: '경남', y: 3250000 },
        { x: '제주', y: 670000 },
      ],
    }],
  },
});

• map: { regions: 16 } 이나 regions: 17 로 어느 한쪽에 고정할 수 있습니다.
• 17개로 고정하면 '전남광주' 값은 그릴 곳이 없어 빠지고 콘솔에 경고가 남습니다.
• 17개 시도 통계를 16개 지도로 보여 주려면 광주와 전남 값을 더해 '전남광주' 한 줄로 넣으세요.

알아듣는 지역 이름과 코드

띄어쓰기, 가운뎃점, 대소문자는 가리지 않습니다(경 기도 경기). 알아듣지 못한 이름은 그리지 않고 콘솔에 경고를 남기므로, 지도가 비어 보이면 브라우저 콘솔을 먼저 보세요.

시군구 지도와 focus

map: { level: 'sigungu' } 는 시군구 경계로 그립니다. 시군구 경계는 파일이 커서(gzip 약 21 KB) 따로 불러옵니다: import '@82chart/map-kr/sigungu'. focus 에 시도를 주면 그 시도만 차트에 꽉 차게 그립니다. 아래는 서울의 25개 구입니다.

createChart('#chart', {
  type: 'map',
  title: '서울 구별 인구',
  subtitle: '25개 구, 예시 데이터',
  unit: '명',
  footnote: '지도 경계: 통계청 SGIS, vuski/admdongkor (CC BY 4.0)',
  map: { level: 'sigungu', focus: '서울' },
  data: {
    series: [{
      name: '인구',
      data: [
        { x: '종로구', y: 139000 }, { x: '중구', y: 121000 }, { x: '용산구', y: 210000 }, { x: '성동구', y: 281000 }, { x: '광진구', y: 336000 },
        { x: '동대문구', y: 346000 }, { x: '중랑구', y: 381000 }, { x: '성북구', y: 427000 }, { x: '강북구', y: 282000 }, { x: '도봉구', y: 301000 },
        { x: '노원구', y: 492000 }, { x: '은평구', y: 456000 }, { x: '서대문구', y: 306000 }, { x: '마포구', y: 361000 }, { x: '양천구', y: 431000 },
        { x: '강서구', y: 556000 }, { x: '구로구', y: 396000 }, { x: '금천구', y: 226000 }, { x: '영등포구', y: 376000 }, { x: '동작구', y: 377000 },
        { x: '관악구', y: 486000 }, { x: '서초구', y: 405000 }, { x: '강남구', y: 556000 }, { x: '송파구', y: 654000 }, { x: '강동구', y: 471000 },
      ],
    }],
  },
});

focus 는 시도 지도에도 쓸 수 있고, ['부산', '울산', '경남'] 처럼 여러 시도를 줄 수도 있습니다.

구가 있는 시는 시 이름 하나로

수원시(4개 구), 성남시, 고양시, 용인시처럼 구가 있는 시는 데이터에 '수원시' 처럼 시 이름만 쓰면 그 시의 구를 한 지역으로 묶어 칠합니다. 구별 값이 있으면 '수원시 장안구' 처럼 구까지 쓰면 됩니다. 아래는 경기도 31개 시군입니다.

createChart('#chart', {
  type: 'map',
  title: '경기도 시군별 인구',
  subtitle: '수원시·성남시처럼 구가 있는 시는 시 이름 하나로',
  unit: '명',
  footnote: '지도 경계: 통계청 SGIS, vuski/admdongkor (CC BY 4.0)',
  map: { level: 'sigungu', focus: '경기', color: '#0e9f6e' },
  data: {
    series: [{
      name: '인구',
      data: [
        { x: '수원시', y: 1190000 }, { x: '용인시', y: 1080000 }, { x: '고양시', y: 1070000 }, { x: '화성시', y: 960000 }, { x: '성남시', y: 910000 },
        { x: '부천시', y: 770000 }, { x: '남양주시', y: 730000 }, { x: '안산시', y: 620000 }, { x: '평택시', y: 600000 }, { x: '안양시', y: 540000 },
        { x: '시흥시', y: 520000 }, { x: '파주시', y: 510000 }, { x: '김포시', y: 490000 }, { x: '의정부시', y: 460000 }, { x: '광주시', y: 390000 },
        { x: '하남시', y: 330000 }, { x: '광명시', y: 280000 }, { x: '군포시', y: 260000 }, { x: '양주시', y: 250000 }, { x: '오산시', y: 230000 },
        { x: '이천시', y: 220000 }, { x: '안성시', y: 190000 }, { x: '구리시', y: 180000 }, { x: '의왕시', y: 160000 }, { x: '포천시', y: 140000 },
        { x: '양평군', y: 120000 }, { x: '여주시', y: 110000 }, { x: '동두천시', y: 90000 }, { x: '과천시', y: 80000 }, { x: '가평군', y: 60000 },
        { x: '연천군', y: 40000 },
      ],
    }],
  },
});

타일 지도

type: 'tilemap' 은 시도마다 같은 크기의 칸 하나를 대략 제자리에 놓은 지도입니다. 면적이 작은 서울·세종·대전도 경북만큼 잘 보여서, 면적보다 값 비교가 중요할 때 맞습니다. 16개 시도에서 전남광주는 두 칸 너비입니다. 아래는 음수와 양수가 함께 있어 두 가지 색으로 칠한 예이고, deltaColors: 'korea' 로 증가를 빨강, 감소를 파랑으로 했습니다.

createChart('#chart', {
  type: 'tilemap',
  title: '시도별 인구 증감률',
  subtitle: '1년 전 대비, 예시 데이터',
  unit: '%',
  deltaColors: 'korea',
  data: {
    series: [{
      name: '증감률',
      data: [
        { x: '서울', y: -0.5 }, { x: '부산', y: -0.9 }, { x: '대구', y: -0.7 }, { x: '인천', y: 0.9 },
        { x: '대전', y: -0.2 }, { x: '울산', y: -0.6 }, { x: '세종', y: 1.4 }, { x: '경기', y: 0.6 },
        { x: '강원', y: -0.4 }, { x: '충북', y: 0.1 }, { x: '충남', y: 0.4 }, { x: '전북', y: -1.1 },
        { x: '전남광주', y: -0.8 }, { x: '경북', y: -0.9 }, { x: '경남', y: -0.7 }, { x: '제주', y: -0.3 },
      ],
    }],
  },
});

칸 위치는 map.tiles 로 옮길 수 있습니다. 키는 시도 이름이나 코드입니다: tiles: { 제주: [1, 4] } 또는 tiles: { '50': [1, 4] }.

옵션 (map)

그 밖의 옵션(title, unit, theme, palette, height, language, table …)은 다른 차트와 같습니다. 차트 높이는 지도 비율에 맞춰 정하고, height 를 주면 그 안에 맞춰 그립니다.

함께 되는 것

• 툴팁: 지역 이름, 값, 순위(예: 2 / 16), 전체 중 비중. 마우스는 지역의 실제 모양으로 찾습니다.
• 키보드: 차트에 초점을 두고 화살표 키로 북쪽에서 남쪽, 서쪽에서 동쪽 순서로 지역을 하나씩 읽습니다. 화면 읽기 프로그램에는 지역 수와 가장 많은 곳·적은 곳을 요약해 읽어 줍니다.
• 내보내기: PNG·SVG·CSV·엑셀(xlsx). CSV·엑셀과 표 보기에는 지역, 코드, 값 열이 들어갑니다.
• 언어: 영어 페이지(language: 'en')에서는 시도 이름을 영어로 씁니다(Seoul, Gyeonggi). 시군구 이름은 한글 그대로입니다.
• 서버 렌더링: import { renderToSVG, use } from '@82chart/core/server' 에 use(koreaMap) 을 하면 DOM 없이 지도 SVG를 만듭니다. 보고서·OG 이미지·메일 본문에 씁니다.
• 필요한 차트만: @82chart/core/lite 에 use(map) 이나 use(tilemap) 만 등록해도 됩니다(필요한 차트만 불러오기).

스크립트 태그 (82chart-map-kr.min.js)

82chart.min.js 다음에 82chart-map-kr.min.js(gzip 약 15 KB)를 넣으면 전역 Chart82 에 map · tilemap 이 등록됩니다. 시군구 지도는 그 다음에 82chart-map-kr-sigungu.min.js(gzip 약 21 KB)를 하나 더 넣습니다. jsDelivr 주소의 패키지 이름은 @82chart/map-kr@0.6.0 이고, 82chart.com 에서는 같은 /cdn/v0.6.0/ 폴더에 있습니다(CDN). 폐쇄망용 오프라인 zip 에도 두 파일이 들어 있습니다.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@82chart/core@0.6.0/dist/cdn/82chart.css">
<script src="https://cdn.jsdelivr.net/npm/@82chart/core@0.6.0/dist/cdn/82chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@82chart/map-kr@0.6.0/dist/cdn/82chart-map-kr.min.js"></script>
<!-- 시군구 지도까지 쓸 때만 -->
<script src="https://cdn.jsdelivr.net/npm/@82chart/map-kr@0.6.0/dist/cdn/82chart-map-kr-sigungu.min.js"></script>
<!-- 대안: https://82chart.com/cdn/v0.6.0/82chart-map-kr.min.js, https://82chart.com/cdn/v0.6.0/82chart-map-kr-sigungu.min.js -->

<div id="map"></div>
<script>
  Chart82.createChart('#map', { type: 'map', data: { series: [{ data: [{ x: '서울', y: 9310000 }] }] } });
</script>

지도 경계 데이터와 출처 표시

지도 경계: 통계청 통계지리정보서비스(SGIS) 행정동 경계(공공누리 제1유형)를 vuski/admdongkor 가 가공(CC BY 4.0, https://github.com/vuski/admdongkor), 82chart 가 단순화. 기준 2026-10-01.

코드는 MIT 이고 경계 데이터는 CC BY 4.0 이라 상업 서비스에도 무료로 쓸 수 있습니다. 다만 CC BY 4.0 조건에 따라 지도가 보이는 화면에 출처를 밝혀 주세요. 위 예제처럼 footnote 에 한 줄 넣는 것이 가장 간단합니다. 자세한 내용은 패키지의 DATA-LICENSE.md 에 있습니다.

자주 묻는 질문

대한민국 지도 차트를 그릴 수 있나요?

네. 0.6 부터 별도 패키지 @82chart/map-kr 로 시도 지도(단계구분도), 시군구 지도, 타일 지도를 그립니다. 경계 데이터가 패키지에 들어 있어 GeoJSON 을 따로 구할 필요가 없고, 데이터에는 '서울' 같은 지역 이름이나 행정기관코드만 넣으면 됩니다. 코어와 같은 MIT 라 무료입니다.

광주·전남 통합 이후 지도는 어떻게 그리나요?

2026년 7월 1일부터 광주광역시와 전라남도는 전남광주통합특별시 하나입니다. 기본값(regions: 'auto')은 데이터에 광주와 전남이 따로 있으면 이전 17개 시도로, 그렇지 않으면 전남광주를 한 지역으로 칠한 16개 시도로 그립니다. 그래서 통합 전 통계와 지금 통계를 같은 코드로 그릴 수 있고, 한쪽으로 고정하려면 map.regions 에 16 이나 17 을 줍니다.

시군구 이름이 여러 시도에 있으면(중구, 동구) 어떻게 하나요?

'서울 중구' 처럼 시도를 붙이거나, 5자리 시군구 코드(11140)를 쓰거나, map.focus 로 시도를 정하세요. 어느 곳인지 알 수 없는 이름은 그리지 않고 콘솔에 후보 목록과 함께 경고를 남깁니다.

지도 데이터를 상업 서비스에 무료로 써도 되나요?

네. 코드는 MIT, 경계 데이터는 통계청 SGIS(공공누리 제1유형)를 vuski/admdongkor 가 가공한 것(CC BY 4.0)이라 상업적으로 쓸 수 있습니다. CC BY 4.0 조건에 따라 지도가 보이는 화면에 출처를 한 줄 밝혀 주세요(footnote).

세계 지도나 읍면동 지도도 있나요?

없습니다. 대한민국 시도·시군구 지도와 시도 타일 지도만 있습니다. 세계 지도나 읍면동처럼 더 작은 단위가 필요하면 GeoJSON 을 직접 넣어 그리는 EC●●rts 같은 라이브러리가 맞습니다.