티스토리 다음, 구글 지도 넣기

 

 

오늘은 티스토리 글을 쓸 때 지도를 넣는 법에 대해 간단하게 설명 드리겠습니다

 

참고로 네이버 지도는 네이버 블로그 글에만 넣을 수 있기 때문에 티스토리 글은 다음, 구글 지도만 가능합니다

 

 

 

 

 

1. 다음 지도 넣기

 

장소 검색 후 길찾기 누르기

 

먼저 넣고 싶은 장소를 다음에서 검색 후 길찾기 버튼을 눌러줍시다

 

 

지도에 있는 장소를 클릭

 

이제 그 장소 근처의 지도가 열리는데 도착 표시로 마킹된 장소를 클릭하면 위와 같은 창이 하나 뜹니다

 

그리고 사진의 붉은 박스에 있는 공유하기 버튼을 누르세요

 

그러면 바로 밑에 URL 복사와 HTML 태그 복사 메뉴가 다시 생깁니다

 

 

갑자기 코드가 튀어나오지만 당황하지 마세요

 

이제 또다른 창이 나오는데 밑에 있는 소스 생성하기를 눌러줍니다

 

그러면 복잡하게 또다른 창이 나오고 그 안에 뭔지모를 코드가 잔뜩 써있습니다

 

슬슬 머리가 아파오지만 이제 끝났습니다

 

해당 소스를 복사(CTRL + C) 해주시면 됩니다

 

이제 티스토리로 넘어가 글쓰기를 해봅시다

 

 

기본 모드에서 HTML로 변경

 

기본 글쓰기 창에 있는 기본모드를 누르면 마크다운과 HTML이라는 글자가 나타납니다.

 

여기서 HTML을 클릭해 줍시다

 

 

갑자기 시커매진다

 

화면이 갑자기 어두워 지지만 당황하지 말고 좀전에 복사한 이상한 코드를 붙여넣기 해 줍니다

 

그리고 다시 HTML을 눌러서 기본모드로 변경합시다

 

 

 

블로그 글 밑에 지도가 들어갔다

 

그러면 내 글에 지도가 들어간 걸 확인하실 수 있습니다. 해보니까 별거없죠?

 

여기서 조금 지도를 다듬어 줘야 하는데요

 

왜냐하면 모바일과 피씨 모두 해상도가 다르기 때문에 적절하게 맞춰줘야 합니다

 

너비를 1000으로 한다면 피씨에서는 꽉 차서 이쁘게 보이겠지만

 

모바일에선 액정 화면을 한참 넘기기 때문에 옆으로 드래그를 해야 합니다

 

반대로 너비를 300으로 한다면 모바일에선 가독성이 좋겠지만

 

피씨에서는 너무 조그맣게 보일 것 입니다

 

그리고 결정적으로 이러한 모바일 친화적이지 않은 글을 구글이 매우 싫어합니다.

 

구글이 싫어한다는 의미는 여러분이 글을 얼마나 잘 쓰던 구글에서 검색되지 않을 수 있기 때문에

 

어느 정도 피씨와 모바일 환경에 크게 어긋나지 않게 세팅해 줘야 합니다

 

 

방법은 여러가지가 있는데 제 경험상 딱 이거 하나만 해도 충분하기 때문에 소개 드립니다.

 

<!-- * 카카오맵 - 지도퍼가기 -->
<!-- 1. 지도 노드 -->
<div id="daumRoughmapContainer1684851955343" class="root_daum_roughmap root_daum_roughmap_landing"></div>

<!--
	2. 설치 스크립트
	* 지도 퍼가기 서비스를 2개 이상 넣을 경우, 설치 스크립트는 하나만 삽입합니다.
-->
<script charset="UTF-8" class="daum_roughmap_loader_script" src="https://ssl.daumcdn.net/dmaps/map_js_init/roughmapLoader.js"></script>

<!-- 3. 실행 스크립트 -->
<script charset="UTF-8">
	new daum.roughmap.Lander({
		"timestamp" : "1684851955343",
		"key" : "2ew2p",
		"mapWidth" : "640",
		"mapHeight" : "360"
	}).render();
</script>

기존 코드인 요거를

 

<!-- * 카카오맵 - 지도퍼가기 -->
<!-- 1. 지도 노드 -->
<div id="daumRoughmapContainer1684851955343" class="root_daum_roughmap root_daum_roughmap_landing" style="width: 100%;">&nbsp;</div>
<!--
	2. 설치 스크립트
	* 지도 퍼가기 서비스를 2개 이상 넣을 경우, 설치 스크립트는 하나만 삽입합니다.
-->
<script src="https://ssl.daumcdn.net/dmaps/map_js_init/roughmapLoader.js"></script>
<!-- 3. 실행 스크립트 -->
<script>
	new daum.roughmap.Lander({
		"timestamp" : "1684851955343",
		"key" : "2ew2p",
		//"mapWidth" : "640",
		"mapHeight" : "360"
	}).render();
</script>

위와 같이 수정해 주시면 됩니다.

 

눈썰미가 좋으신 분들은 찾으셨겠지만

 

class="root_daum_roughmap root_daum_roughmap_landing" 뒤에 style="width: 100%;을 추가하고

 

"mapWidth" : "640", 앞에 //를 붙여 //"mapWidth" : "640",로 바꿔준게 끝입니다.

 

무슨 의미냐면 지도 화면의 너비를 화면의 100%로 항상 하겠다는 의미 입니다.

 

그리고 화면의 100%로 하겠다고 정의 했으므로 기존 mapWidth는 주석 처리를 해주는 거에요

 

별거 없지만 이것만 하셔도 지도 화면을 건드릴 일은 없다고 보시면 됩니다

 

꼭 이 옵션을 추가하여 구글의 분노를 사지 않으시길 바랍니다.

 

 

 

2. 구글 지도 넣기

 

이제 구글 지도를 넣는 법에 대해 간략하게 설명 드리겠습니다.

 

기본적인 방법은 앞의 다음과 거의 같기 때문에 빠르게 넘어가자면

 

 

공유 버튼 클릭

 

구글에서 장소를 검색 후 지도로 넘어갑니다.

 

특정 장소를 지도에서 클릭하고 공유 버튼을 눌러줍시다.

 

 

다음것과 조금 달라 보이지만 복사 붙여넣기를 하면 됩니다

 

 

지도 퍼가기를 누른 후 HTML 복사 버튼을 눌러서 해당 코드를 복사해 줍시다.

 

그 뒤는 위에서 설명한 다음 지도 넣기와 같습니다

 

블로그 글쓰기 후 HTML 화면으로 넘어가서 해당 코드를 복사하면 끝이죠

 

하지만 다음 지도가 되는데 굳이 구글 지도를 쓸 이유는 없어 보입니다

 

해외 장소라면 구글 지도가 훨씬 좋겠지만 국내 장소를 소개할때는 다음 지도가 좀 더 직관적인 것 같습니다.

 

 

 

 

 

 

 

 

오늘은 블로그 글에 지도 넣는 법에 대해 간략히 알아 봤는데요

 

구글이 모바일 환경에 부적합한 글은 매우 싫어한 다는 것을 알아두셨으면 좋겠습니다

 

지금 한 방법이 나중에 구글 서치 콘솔 오류를 수정하는 방법 중 하나가 되기도 합니다