안동 용상동 스마트 관광지도 만들기

0. 지도는 어떻게 만들어질까?

지도를 한 장의 그림이라고 생각하면 어렵습니다. 사실은 여러 장을 층층이 겹친 것입니다.

📍 맨 위: 관광자원 · 설명 · 동선 — 학생이 만드는 부분

🟦 실제 용상동 경계 — SGIS 자료

⛰ 산의 높낮이와 그림자 — Esri World Hillshade

🛣 도로 · 건물 · 지명 — OpenStreetMap

⚙ 맨 아래: 지도를 움직이게 하는 프로그램 — Leaflet

한 문장으로: Leaflet이 지도를 움직이고, OpenStreetMap이 길을 보여주고, Esri가 산을 보여주고, SGIS가 용상동 경계를 보여주고, 학생이 관광자원을 올립니다.

1. 학생은 무엇을 하면 될까?

STEP 1 · 동네 보기Google Earth에서 산, 강, 길, 사람들이 사는 곳을 봅니다.

STEP 2 · 장소 고르기소개하고 싶은 장소 3개를 고릅니다.

STEP 3 · 위치 찾기장소의 위도·경도를 확인합니다.

STEP 4 · 지도에 넣기이름·좌표·설명·아이콘만 바꿉니다.

STEP 5 · 이야기 만들기세 장소를 어떤 순서로 보여줄지 정합니다.

핵심: 학생이 평가받는 것은 “지도를 얼마나 복잡하게 만들었는가”가 아니라, 어떤 관광자원을 왜 선택했고, 어떤 관광 경험으로 연결했는가입니다.

2. 어떤 사이트를 쓰나?

🌍 Google Earth 동네를 위에서 보고, 산·강·도로·건물을 관찰하는 곳 🛣 OpenStreetMap 도로·건물·지명을 보여주는 기본지도 🗻 OpenTopoMap 등고선·산·하천을 함께 보는 지형도 ⛰ Esri World Hillshade 산의 높낮이를 빛과 그림자로 보여주는 지도 🟦 SGIS 실제 행정동 경계를 가져오는 통계지리 사이트 ⚙ Leaflet 지도를 움직이고, 핀·팝업·선·경계를 올리는 도구

3. 실제로 눌러보는 예시 지도

지도 보기 모드 — 버튼과 관련 웹사이트를 연결해서 보세요

🛣 OpenStreetMap 도로 · 건물 · 지명 기본지도

🗻 OpenTopoMap 등고선 · 산 · 하천 지형도

⛰ Esri World Hillshade 고도 기반 산 음영

⚙ Leaflet 관광지 핀 · 팝업 · 동선 표시

🟦 SGIS 실제 읍면동 행정경계 자료

🗺️ SGIS 안동시 전체 읍·면·동 경계

① 길·건물 보기: 도로·건물·지명만 봅니다.

※ 왼쪽 버튼은 지도 화면을 바꾸는 버튼, 오른쪽은 그 지도에 사용된 자료·도구의 웹사이트입니다.

지도 로딩 중… 인터넷 연결이 필요합니다.

버튼을 누르면 서로 다른 지도 화면이 나옵니다. 예시 중심점은 안동 용상동 일대입니다. 현재는 실제 안동 관광·문화자원 3곳을 넣었습니다. 실제 과제에서는 학생이 자신이 선택한 장소와 좌표로 바꿉니다.
🎭 안동 하회마을 참고 좌표: 36.53806, 128.52056 · 지도 왼쪽 위의 하회마을 보기 버튼을 누르면 바로 이동합니다.
행정경계: SGIS 2025 자료를 이용해 안동시 전체 24개 읍·면·동을 표시했습니다. 구성은 풍산읍 1개 · 면 13개 · 동 10개입니다. 읍은 초록색, 면은 갈색, 동은 파란색 경계선으로 구분하며, 용상동도 다른 동과 같은 파란색으로 표시합니다. · 용상동 경계 밖

학생이 바꾸는 곳은 이것뿐

아래 내용은 지도 바로 아래의 실습 안내입니다. 위에서 아래로 순서대로 따라 하면 됩니다.

순서: HTML 열기 → Ctrl + F로 수정할 곳 찾기 → 이름·좌표·설명·아이콘 수정 → Ctrl + S 저장 → 브라우저 F5 새로고침

어떤 프로그램으로 바꾸나요? → VS Code

HTML 파일을 VS Code로 열고, 아래 4가지만 바꾼 뒤 저장하면 됩니다. VS Code 공식사이트 ↗

① 파일 열기 다운로드한 HTML을 우클릭 → VS Code로 열기

② 수정할 곳 찾기 VS Code에서 Ctrl + F를 누릅니다.
검색창에 const 관광자원 입력

③ 4곳 수정 이름 · 좌표 · 설명 · 아이콘만 자기 장소 정보로 바꿉니다.

④ 저장 Ctrl + S로 저장합니다.

⑤ 확인 브라우저에서 다시 열거나 F5 새로고침합니다.

② Ctrl + F는 무슨 뜻인가요?

Ctrl + F는 VS Code 안에서 원하는 글자를 빨리 찾는 찾기(Search) 기능입니다. HTML 코드가 길기 때문에 학생이 수정할 위치를 직접 찾기 어렵습니다.

1키보드에서 Ctrl + F를 누릅니다.

2화면에 작은 검색창이 나타납니다.

3const 관광자원을 입력합니다.

4VS Code가 수정할 코드 위치로 바로 이동합니다.

찾아야 하는 문장: const 관광자원 = [
이 문장이 보이면 바로 아래에 있는 이름 · 좌표 · 설명 · 아이콘을 자기 장소 정보로 바꾸면 됩니다.

찾았을 때 보이는 코드

const 관광자원 = [ { 이름: "안동시립박물관", 좌표: [36.5795213, 128.7666525], 설명: "안동의 생활문화와 민속자료를 전시하는 박물관", 아이콘: "🏛️" } ];

학생이 바꾼 예시

const 관광자원 = [ { 이름: "유교랜드", 좌표: [36.5696513, 128.7786001], 설명: "유교문화를 전시와 체험 콘텐츠로 경험하는 공간", 아이콘: "🎎" } ];

쉽게 말하면: Ctrl + F = 수정할 곳으로 바로 점프하는 버튼입니다.

딱 4가지만 바꾸세요.
① 장소 이름 · ② 위도/경도 · ③ 한 줄 설명 · ④ 아이콘

바꾸기 전

이름: "안동시립박물관" 좌표: [36.5795213, 128.7666525] 설명: "안동의 생활문화와 민속자료를 전시하는 박물관" 아이콘: "🏛️"

바꾼 뒤 예시

이름: "국립경국대학교 박물관" 좌표: [36.5425946, 128.7973185] 설명: "안동의 역사·고고·민속 자료를 살펴볼 수 있는 대학 박물관" 아이콘: "🎓"

아래 배열에서 이름 · 좌표 · 설명 · 아이콘만 바꾸면 됩니다.

const 관광자원 = [ { 이름: "안동시립박물관", 좌표: [36.5795213, 128.7666525], 설명: "안동의 생활문화와 민속자료를 전시하는 박물관", 아이콘: "🏛️" }, { 이름: "유교랜드", 좌표: [36.5696513, 128.7786001], 설명: "유교문화를 전시와 체험 콘텐츠로 경험하는 공간", 아이콘: "🎎" }, { 이름: "국립경국대학교 박물관", 좌표: [36.5425946, 128.7973185], 설명: "안동의 역사·고고·민속 자료를 살펴볼 수 있는 대학 박물관", 아이콘: "🎓" } ];

현재 지도에 넣은 실제 안동 예시

🏛️ 안동시립박물관 — 안동관광 공식 안내 ↗
🎎 유교랜드 — 안동관광 공식 안내 ↗
🎓 국립경국대학교 박물관 — 국립경국대학교 공식 안내 ↗

세 장소 모두 SGIS 2025 용상동 행정경계 안에 위치하는지 좌표로 확인한 뒤 예시에 사용했습니다.

장소와 좌표는 어디서 찾나요?

🌍 Google Earth — 장소와 위도·경도 찾기 🛣 OpenStreetMap — 위치 다시 확인하기 🔎 Google 검색 — 관광자원 정보 찾기

좌표 찾는 법

Google Earth에서 장소 검색
장소를 클릭해 위도·경도 확인
[위도, 경도] 순서로 복사
HTML의 좌표 숫자만 교체

배경지도 바꾸기

지도 위의 ① 길·건물 보기 · ② 산·하천 보기 · ③ 산 높낮이 보기 · ④ 내가 고른 장소 3개 · ⑤ 용상동 실제 경계 버튼을 직접 눌러 비교해 보세요. “우리 콘텐츠에는 어느 배경이 가장 적합한가?”도 설계 판단입니다.

실제 행정경계 자료

이 HTML의 용상동 경계는 임의로 그린 선이 아닙니다. 사용자가 제공한 SGIS bnd_dong_37040_2025_2Q SHP에서 ADM_NM = 용상동을 추출하고, 원 좌표계 EPSG:5179를 웹지도용 EPSG:4326으로 변환하여 HTML 안에 직접 넣었습니다.

기준일: 2025-06-30 · 행정코드: 37040540 · 자료: SGIS 센서스용 행정구역 경계

동네를 볼 때는 이것만 생각하세요

① ⛰ 산이나 강은 어디에 있나요?

② 🏠 사람들이 많이 사는 곳은 어디인가요?

③ 🛣 큰길과 들어가는 길은 어디인가요?

④ 📍 소개하고 싶은 장소는 무엇인가요?

4. 학생이 따라 하는 제작 순서

단계	학생이 하는 일	도구	결과물
① 지역 보기	학생이 배정된 동네의 산·강·길·주거지를 직접 봅니다.	Google Earth	관찰 메모
② 장소 고르기	학생이 소개할 실제 장소 3개를 고르고 이유를 씁니다.	Google 검색·지자체 관광사이트	장소 3개 + 이유
③ 위치 찾기	학생이 각 장소의 위도·경도를 확인합니다.	Google Earth / OpenStreetMap	[위도, 경도]
④ 배경 고르기	학생이 길·건물 / 산·하천 / 산 높낮이 중 알맞은 배경을 고릅니다.	OpenStreetMap / OpenTopoMap / Esri	배경지도 선택
⑤ 지도 만들기	학생이 이름·좌표·설명·아이콘만 HTML에 넣습니다.	VS Code	인터랙티브 지도
⑥ 이야기 설명	학생이 “누구에게 무엇을 보여주는 지도인가”를 설명합니다.	완성한 HTML	관광기획 설명

5. 실제 동 경계는 누가 준비하나?

학생 실습

행정경계가 없어도 관광 콘텐츠 지도는 만들 수 있습니다. 먼저 관광자원과 경험 설계에 집중합니다.

기본지도 + 관광자원 3개 + 팝업 / 아이콘 / 애니메이션 = 스마트 관광 지도

교수자 준비용

정확한 동 경계를 보여주고 싶다면 SGIS SHP를 GeoJSON으로 변환한 뒤, 더블클릭 실행용 수업 파일에서는 GeoJSON 내용을 JavaScript 변수로 직접 넣는 방식을 권장합니다.

SGIS SHP (EPSG:5179) ↓ GeoJSON (EPSG:4326) ↓ GeoJSON 객체를 JS에 삽입 ↓ Leaflet 점선 경계

관광자원은 꼭 유명 관광지만 뜻하지 않습니다

동네에서 사람들이 보고, 먹고, 걷고, 체험하고, 이야기를 들을 수 있는 장소라면 관광자원이 될 수 있습니다.

🌳 공원·산책길·하천

🏛 문화재·박물관·전시공간

☕ 카페·시장·로컬상점

🍜 음식점·먹거리 공간

🎨 벽화·공방·문화공간

📷 전망 좋은 곳·사진 명소

6. 학생이 꼭 넣어야 할 것

✓ 실제 장소 3개 이상

✓ 각 장소의 실제 위도·경도

✓ 선정 이유 1문장씩

✓ 관광 경험 또는 이용자 관점 설명

✓ 팝업 정보

✓ 배경지도 1개 이상 적절히 선택

✓ 아이콘 또는 움직임 1개 이상

✓ 출처·지도 데이터 Attribution 유지

7. 무엇을 평가할까?

평가 항목	비중	무엇을 보는가
관광자원 선정 논리	30%	왜 이 장소를 선택했는가
관광 경험 설계	30%	누구에게 어떤 경험을 제공하는가
지역 연결성	20%	3개 자원이 동선·이야기로 연결되는가
지도 표현	10%	배경·아이콘·팝업이 목적에 맞는가
출처·정확성	10%	좌표와 출처가 확인 가능한가

8. 마지막 한 문장

“우리 지도는 [대상 이용자]를 위해 [지역의 핵심 문제/기회]를 해결하고, [장소 1–2–3]을 연결하여 [어떤 관광 경험]을 제공한다.”

지도의 기술보다 이 문장이 설득력 있게 완성되는 것이 더 중요합니다.

화면 아래의 출처표시는 왜 있나요?

Leaflet은 지도를 움직이는 도구, OpenStreetMap은 길과 건물 지도, Esri World Hillshade는 산의 높낮이 그림입니다. 다른 사람이 만든 지도자료를 사용했기 때문에 출처를 꼭 표시해야 합니다.