티스토리 블로그에 구글지도 반응형으로 넣는 방법

티스토리 신형 글쓰기 에디터를 사용하시는 분들 중 지도 오류를 경험하신 분들이 계실 겁니다. 개인적으로 지도는 구글 지도를 이용합니다. 글로벌 지도 플랫폼이기 때문입니다. 따라서 여러분들에게도 구글 지도를 이용해 보시라고 적극 권장하고 싶습니다. 평소 잘 돌아다니시고 여행이나 캠핑을 즐기시는 분들은 지도 첨부가 필수일 겁니다. 이 본문에서는 어떻게 구글 지도를 반응형으로 삽입하는지에 대해서 다룹니다.

티스토리에 구글 지도를 반응형으로 넣어보자!

보니까 아이프레임(iframe) 방식으로 넣는데 이렇게 되면 반응형이 아닌 고정형이 되어 버립니다. 실제 코드를 살펴보면 가로 및 세로 사이즈가 고정된 방식을 취하는데, 이렇게 되면 반응형이 아니라서 만약 해상도가 떨어지는 모바일에서 보는 경우 지도가 어긋날 수 있습니다.

예전에 오사카 여행을 다녀온 경험이 있습니다. 후기 글에서 구글 지도를 넣어봤는데 잘 들어가는걸 확인했습니다. 특히 사이즈를 줄여도 알아서 가로사이즈가 조절되는 반응형으로 넣어두었기 때문에 어떤 해상도에서든지 가로가 꽉 차도록 나옵니다. 방법은 쉽습니다. HTML을 잘 몰라도 됩니다.

구글지도에서 원하는 위치를 클릭하면 이렇게 관련 정보가 나옵니다. 혹은 정확한 주소를 알고 있다면 직접 검색란에 입력하셔도 됩니다.

블로그에 넣고자 하는 위치가 맞다면 구글지도의 공유 버튼을 누릅니다.

그러면 링크 공유와 지도 퍼가기가 나오는데 우리가 쓸 부분은 지도 퍼가기 부분입니다. 한번 들어가보죠.

지도 퍼가기 부분을 선택하니 이렇게 URL 주소가 나옵니다. 그 왼쪽에는 중간이라고 써있는 부분이 보이실텐데, 이건 지도의 사이즈를 정하는 부분입니다. 어차피 반응형으로 만들 것이므로 신경쓰지 않아도 됩니다. 해당 URL 부분을 복사하고 메모장에 붙여넣습니다.

그러면 이런 다소 복잡한 코드로 이루어진 URL 주소가 보입니다. 여기서 변경해줘야 하는 부분은 바로 저 빨간색으로 표시가 된 부분으로 기존 가로사이즈가 600픽셀로 고정되어 있습니다.

여기를 100%로 변경하면 이제 가로사이즈는 자동으로 반응형 크기에 맞춰집니다. 알아서 해당 화면에 맞는 가로 사이즈로 변경되기 때문에 삐져나오거나 너무 부족하여 맵이 작게 보일 일은 없습니다. 단 바로 다음에 있는 height 부분의 수치는 세로 값입니다. 여기는 그냥 임의로 늘리셔도 되고 더 줄이셔도 됩니다. 저 위에서 언급했던 지도 사이즈 부분도 결국 이 수치 부분이 바뀌면서 저장되는 것입니다. 세로 사이즈는 400~600 정도로 수정하면 스마트폰에서 보기엔 적당한 것 같다는 생각이에요. 이 부분은 정답이 없으니 본인이 마음에드는 높이의 사이즈로 설정하시고 중요한건 가로 사이즈인 width 값입니다. 여기는 무조건 100%로 만들어주면 반응형 구글지도는 완성됩니다.