Day 3 : SVG와 자바스크립트를 활용한 세계지도 만들기

세계지도 mark 1

이 화면을 틀어두고 방법을 모색하는 데

내 화면이 너무 구려보이는 것이다.

뭔가 허전하달까...?

 

원래는

aws 세계지도

그래서 오늘 다른 디자인을 찾다가 보니 다음 사이트를 찾을 수 있었다.

https://simplemaps.com/world

HTML5/JavaScript Interactive World Map | Simplemaps.com

해당 사이트는 정확히 내가 원하는 모양과

기능들을 모두 탑재한 svg 및 자바스크립트 기능까지

지원하는 사이트였다.

 

개꿀

근데 아니 결제를 해야 한다는 문구를 보았다.

그래,,, 뭐 엄청난 기능을 하는 곳이니까 돈 낼만하지...

그래서 얼마지? 하고 봤는 데

금액이 부려 $199.00!

ㅎㅎㅎ 바로 포기했다.

chatGPT로 이러한 기능을 해주는 곳을 검색해보기도 하고

GPT의 결과를 믿지 못해 직접 구글링을 해보았지만

도트형이 아닌 완벽한 지도 svg에서 나라를 구분해 주는 곳은 없었습니다...

 

어림도 없다.

나는야 의지의 한국인.

돈 없이 노가다로 개발을 시작하기로 마음먹었습니다.

 

노가다만 하다가 프로젝트 끝나는 거 아니야?

이런 걱정을 덜기 위해 앞으로의 플랜을 다음과 같이 짰습니다.

1. 일단 하나의 나라를 지도에서 인식하도록 작업
   1. 완성된 하나의 나라를 가지고 하나의 프론트, 백엔드의 흐름을 완성하기
   2. 매일매일 조금씩 svg 깎는 노인 svg에서 나라를 표현하도록 하기

이렇게 투 트랙으로 프로젝트를 진행해야겠다고 생각이 듭니다.

이렇게 하지 않으면 프로젝트의 진도가 나지 않겠더라고요..!

 

투 트랙으로 가면서 명심해야 할 것은

1-1로 하나의 트랙을 완성하면서

자바스크립트로 구현하는 기능을 철저히 모듈화를 해서

차후 다른 나라들에도 기능을 부여하기 쉽도록 설계, 작성해야 한다는 것!

 

 

오늘은 그래도 뭘 배웠나요?

한 동안 열심히 svg를 깎아야 다뤄야 하기 때문에

svg에 대해 좀 알아야 할 필요가 있다고 해서 조사를 했습니다.

밑에다가 svg에 대한 설명, 그리고 속성들에 대한 간단한 설명으로 

오늘 블로그 포스팅 마무리 하겠습니다 :)

 

<svg height="599.1070366699703" 
version="1.1" 
width="1400" 
xmlns="http://www.w3.org/2000/svg"
style="overflow: hidden; position: relative; left: -0.5px;"
viewBox="0.686818632309217 0.686818632309217 1400 599.1070366699703" 
preserveAspectRatio="xMinYMin">

 

 

<svg> 요소가 먼저 나타나는데, 이는 SVG 그래픽을 생성하기 위한 컨테이너 역할을 합니다.

 

height와 width 속성은 SVG의 높이와 너비를 정의하며,

xmlns 속성은 SVG 문서가 XML 문서임을 나타냅니다.

 

viewBox 속성은 SVG의 보기 영역을 정의하며,

preserveAspectRatio 속성은 이 보기 영역이

SVG 컨테이너에 어떻게 맞춰질지를 결정합니다.

 

<rect x="-4035.01" y="-1726.15" 
        	width="10090" 
            height="4317.85" 
            r="0" rx="0" ry="0" 
            fill="#ffffff" 
            stroke="none"
            transform="matrix(0.6938,0,0,0.6938,0,0)" 
            stroke-width="1.4414285714285715"
            style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); 
            fill-opacity: 0;" fill-opacity="0" />

다음으로, <rect> 요소는 사각형을 그리는 데 사용됩니다.

 

x와 y 속성은 사각형의 왼쪽 상단 모서리의 위치를 정의하며,

width와 height 속성은 사각형의 너비와 높이를 정의합니다.

 

fill 속성은 사각형의 내부 색상을,

stroke 속성은 사각형의 테두리 색상을 정의합니다.

이 경우, 사각형의 내부 색상은 흰색이고 테두리는 없습니다.

 

transform 속성은 그래픽 요소를 변형하는 데 사용되며,

이 경우에는 사각형을 확대/축소하는 데 사용됩니다.

matrix 함수는 이동, 회전, 확대/축소, 기울임 등의 변형을 한 번에 수행할 수 있습니다.

마지막으로, style 속성은 CSS 스타일을 적용하는 데 사용되며, 이 경우에는 사각형의 내부 색상을 투명하게 만듭니다.

 

<path fill="#88a4bc" stroke="#ffffff"
            d="M1166.7,673.5H1162.60000000000 ... 등등"
            class="sm_state sm_state_ID" 
            opacity="1" 
            stroke-opacity="1" 
            stroke-width="3.78375" 
            stroke-linejoin="round"
            transform="matrix(0.6938,0,0,0.6938,0,0)"
            style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 1; cursor: pointer; stroke-opacity: 1; stroke-linejoin: round; fill-opacity: 1;"
            fill-opacity="1"

 <path> 태그는 SVG에서 복잡한 도형을 그릴 때 사용되며, d 속성에는 도형을 그리는 데 필요한 명령어와 좌표가 들어갑니다.

 

fill="#88a4bc"는 도형의 내부 색상을 지정하며,

stroke="#ffffff"는 도형의 테두리 색상을 지정합니다.

stroke-width="3.7837499999999995"는 테두리의 두께를 지정하며,

stroke-linejoin="round"는 선이 만나는 지점의 모양을 둥글게 만듭니다.

 

class="sm_state sm_state_MZ"는 이 도형에 적용되는 CSS 클래스를 지정합니다.

이 클래스는 외부 CSS 파일이나 <style> 태그 내에서 정의될 수 있습니다.

 

transform="matrix(0.3474,0,0,0.3474,0,0)"는 도형에 적용되는 변환을 지정합니다.

이 경우, matrix 변환을 사용하여 도형을 확대/축소, 회전, 이동시키는 등의 변환을 적용하고 있습니다.

 

마지막으로, style 속성은 도형에 인라인 스타일을 적용합니다.

이 경우, -webkit-tap-highlight-color: rgba(0, 0, 0, 0);는 웹킷 브라우저에서

탭 시 하이라이트 색상을 투명하게 만들고, cursor: pointer;는

마우스 커서가 도형 위에 있을 때 포인터 모양으로 바뀌게 합니다.