개발자 아니어도 할 수 있다! 무료 공개된 지도 데이터로 나만의 지리정보 사이트 만들어보기💡
안녕하세유~ 요즘엔 진짜 뭐든 다 '웹'으로 보여줘야 멋있고 간지나는 시대죠?
뭔가 뚝딱 만든 것 같은데 막상 보면 “이거 혼자 만들었다고?😳” 이런 느낌 나는 거...
그런 거 하나쯤 만들고 싶었던 분들! 오늘 꿀팁 제대로 챙겨가십셔 💥
특히 국토지리정보원에서 나오는 공식 지도 데이터,
이거 생각보다 꽤 쓸만하고, 심지어 공짜입니다!
이걸로 내 지도 서비스도 만들고, 시각화된 공간 정보도 보여줄 수 있쥬~
“나 개발도 모르는데...”, “웹사이트 만들 줄 모르는데...” 하셨다면,
그런 걱정은 일단 넣어두고 따라오세요.
진짜 어렵지 않게 하나하나 알려드릴게요ㅎㅎ 직접 해보면 의외로 할만합니다!
국토지리정보원이 제공하는 지도 데이터, 도대체 뭐가 있길래 이렇게 추천하는 걸까요?
그리고 이걸로 웹사이트를 만들면 어떤 식으로 보이고, 어떤 도구들을 활용해야 할까요?
심지어 데이터를 시각화하는 데 필요한 핵심 포인트까지!
이번 글에서는
✔ 국토지리정보원 지도 데이터 종류
✔ 웹사이트에 지도를 붙이는 방법
✔ 좌표 기반 데이터 연동법
✔ 초보자용 무료 도구 추천
✔ 실제 결과물 샘플 이미지
✔ 실수 없이 세팅하는 팁
까지 몽땅 알려드릴 테니
한 번 따라 만들어보시면, 생각보다 재밌고 뿌듯하실 거예요 😊
🌍 국토지리정보원, 여기가 지도 데이터 보물창고!
국토지리정보원은 이름만 들으면 뭔가 딱딱하고 공무원 냄새 폴폴 나는 기관 같지만...
진짜 솔직히 말해서, 지도 데이터 분야에선 끝판왕임다.
정밀한 지도 이미지부터 시작해서, 공간 좌표, 고도 정보, 항공 사진, 심지어 건물 단위까지!
이거 다 공짜로, 그것도 고화질로 받을 수 있다는 거... 이건 진짜 혜자.
대표적으로 많이 쓰는 건 국토정보플랫폼에 있는 오픈API!
주소-좌표 변환부터 시작해서, 건물정보 조회, 고도 데이터까지 다 있습니다.
웹 개발할 때 지도에 어떤 거 올리고 싶은지에 따라 골라서 쓰면 돼요.
아, 참고로 포맷은 대부분 GeoJSON, XML, PNG 형태로 나와서 활용도 굿!
💻 지도 데이터를 어떻게 웹에 띄우냐구요? 라이브러리 하나면 끝!
웹사이트에 지도 붙일 때 제일 많이 쓰는 거?
바로 Leaflet.js 혹은 OpenLayers.
특히 Leaflet은 진짜 진입장벽 낮고, 예쁘고, 가볍기까지 하쥬~
기본 HTML 문서 하나 만들어서, Leaflet 링크 걸고
국토지리정보원에서 받은 타일 맵 URL만 넣어주면 끝!
예시👇
L.tileLayer('https://map.ngii.go.kr/api/tms/1.0.0/항공사진', {
maxZoom: 19,
attribution: '국토지리정보원'
}).addTo(map);진짜 이 코드 몇 줄만 써도 지도 나오기 시작합니다ㅋㅋ
그 위에 마커나 팝업, 라인 등등 쓱쓱 얹으면
“오? 이 사람 뭔가 좀 하는데?” 소리 들을 수 있어요 ㅎㅎ
📦 GeoJSON 데이터로 정보 시각화도 가능?!
지도에 데이터 얹을 때 가장 많이 쓰는 포맷이 바로 GeoJSON입니다!
지역 경계선, 도로, 건물 위치 같은 공간 데이터를 구조화해서 보여줄 수 있쥬.
국토지리정보원에서 제공하는 도형 정보나 공간 경계 데이터를 GeoJSON으로 변환한 뒤,
그걸 Leaflet에 얹기만 하면 끝. 진짜임.
L.geoJSON(geoData).addTo(map);이렇게 한 줄만 넣으면 지도 위에 그 데이터 쫘악~
색상 넣고, 마우스오버로 정보 뜨게도 가능해서
분석 리포트나 시각화용 웹 만들 때도 개꿀입니다요 💯
⚙️ 초보자용 툴 추천! 개발 몰라도 되는 플랫폼도 있다?
사실 코딩 하나도 모르겠다! 하시는 분들 계시죠?
그럴 땐 uMap이나 Mapbox Studio, QGIS + 웹 익스포트 추천합니당!
- uMap: 오픈스트리트맵 기반. 로그인만 하면 지도 만들고 공유 가능
- Mapbox Studio: 감각적이고 예쁜 지도 커스텀 가능, 다만 영문기반이라 살짝 낯설
- QGIS: 설치형이지만 국토지리정보원 데이터랑 찰떡궁합! 웹페이지로 내보내기도 쉬움
특히 QGIS에서 GeoJSON 변환해서qgis2web 플러그인으로 바로 HTML로 익스포트하면
진짜 5분 만에 웹사이트 완성 가능!! 이건 좀 감동이쥬...
🧩 좌표 변환, 여기서 실수 많이 한다!
지도 데이터 쓰다보면 꼭 나오는 게 좌표계 이슈
UTM-K, WGS84, EPSG 코드 뭐시기... 이거 들으면 진짜 머리 아프쥬ㅠㅠ
근데 걱정 노노~
국토지리정보원은 대부분 EPSG:5179(UTM-K)을 씁니다.
근데 웹은 대부분 EPSG:4326(WGS84)이기 때문에 변환이 필요해요.
이럴 땐 proj4js라는 JS 라이브러리 쓰면 깔끔하게 좌표 변환 가능!
혹은 QGIS에서 그냥 데이터 불러와서 다른 좌표계로 바꿔주면 굿굿.
잘못 맞추면 지도랑 데이터 안 맞아서 미스매칭 생기니 이 부분은 주의요망!!
🎯 내가 만든 지도 사이트, 어디다 쓸 수 있냐면요?!
이거 만들고 나면 진짜 쓸 곳 많아요~
관광지 소개, 우리 동네 맛집 지도, 부동산 매물 시각화,
지역 분석 리포트, 통계 자료 시각화 등등 다 가능합니다!
특히 포트폴리오용으로 쓰면
“공공데이터 활용 + 지도 시각화 + 웹 개발” 이 세 가지 스킬 한번에 보여줄 수 있음!
이거 채용 담당자가 보면 아주 환장합니다ㅋㅋㅋ
진짜 정성껏 하나 만들어두면, 나중에 면접 때도 말빨 팍팍 세워줄 거예요.
❓많이들 궁금해하시는 점들 모아봤슴미다!
지도 데이터, 그냥 다운받아서 써도 되는 건가요?
웬만한 건 전부 공공데이터 개방이라 상업적 목적 아니면 마음껏 쓰셔도 됩니다!
다만 출처는 꼭 밝혀야 해요. “출처: 국토지리정보원” 이 한 줄만 넣어주면 OK!
모바일에서도 잘 나오게 만들 수 있나요?
물론이죠~ Leaflet는 반응형 레이아웃도 기본 지원하고,
CSS만 살짝 조정해주면 모바일에서도 빵빵하게 작동합니다!
요즘은 모바일부터 대응하는 게 국룰이쥬 😎
지도에 사진이나 설명 넣을 수도 있나요?
됩니다 됩니다~ 마커나 도형 클릭했을 때 팝업창으로 정보, 이미지, 링크까지 넣을 수 있어요.
맛집 지도 만든다면 가게 사진, 후기, 블로그 링크 등 넣으면 아주 감동 그 자체...🤤
🌈이런 지도 웹사이트, 직접 만들고 나면 진짜 감격임ㅠㅠ
한줄 한줄 코딩하거나, 지도 위에 데이터 올릴 때는
“이게 뭐야 왜 안 나와!!😡” 하다가도
최종 결과물 보이면... 세상 든든하고 뿌듯하쥬.
특히 내가 만든 지도가 웹에 공개됐을 때
누가 클릭해서 봐주고, 칭찬 댓글이라도 하나 달리면?
그날 저녁은 고기각입니다ㅋㅋㅋ🔥
지도 데이터, 들여다보면 생각보다 할 수 있는 게 많아요.
공공데이터 + 무료도구 조합으로
정말 실용적인 웹사이트 뚝딱 만들어보는 경험,
한번쯤 꼭 해보셨음 좋겠슴미다🙌
국토지리정보원의 지도 데이터를 활용한 웹사이트 제작은
코딩 초보자도 도전할 수 있는 흥미로운 프로젝트입니다.
- 무료로 제공되는 고품질 데이터 활용 가능
- 다양한 무료 도구로 쉽게 시작 가능
- 실용적이고 시각적으로 매력적인 결과물 제작
- 포트폴리오 및 실무에서 높은 가치
여러분만의 창의적인 아이디어로 멋진 지도 웹사이트를
만들어보세요. 이는 단순한 기술 습득을 넘어 실제 문제를
해결하고 가치를 창출하는 경험이 될 것입니다.