지도 위에 좌표와 SVG 도형 정보를 MySQL에 저장하기
네이버 지도 API 위에 SVG 형태로 도형을 그리고, 이걸 DB로 저장해보자
Summary
지도 데이터에서 좌표는 decimal로 저장하는 경우가 일반적이지만, 우리 팀 프로젝트에서는 좌표 정보가 범위를 지정하는 것이라 아주 정밀할 필요가 없고, decimal은 기본적으로 16바이트형 자료이기 때문에 그 보다 적은 바이트형인 double을 사용했다.
그런데 사실 좌표는 MySQL의 데이터 타입 중 point를 사용하면 된다고 한다.
어떤 도형을 그려도, 몇 개의 도형을 그려도 이에 대응하기 위해 figure라는 column을 만들고, 그 column에 JSON.stringify 형태로 도형을 그릴 때 필요한 정보를 넣어주고, client는 이것을 parse하여 바로 그림을 그릴 수 있도록 하였다.
부트캠프에서 진행했던 마지막 4주 프로젝트는 네이버지도 API를 기반으로 유저가 부동산(쉽게 얘기해서 집값이라고 하는 게 더 직관적인 표현일 것 같다) 가격이 상승할 수 있는 요소들을 SVG 형태의 도형으로 그릴 수 있도록 하고, 요소별로 필터링이 가능할 수 있도록 만드는 프로젝트였다.
DB를 구성할 때 가장 고민해야했던 요소는 두 가지였다. 좌표를 어떤 타입으로 저장할지, 도형을 그리면 그 도형을 어떻게 저장할 것인지.
어떤 고민을 거쳐서 완성했는지 그 과정을 기록으로 남겨보고자 한다.
좌표 정보 저장하기
좌표는 도형을 저장하고, 나중에 유저가 보고 있는 지도 영역(Viewport)안에 해당하는 도형을 로드(load)할 때 필요했다. 우리는 load하는 로직을 도형의 시작점과 끝점을 좌표로 저장하고, Viewport 영역 내에 시작점 또는 끝점 하나가 해당하는 도형을 load하는 방식으로 구현했다.
이 때의 DataType은 일반적으로 decimal로 할 수도 있겠지만, 우리는 범위를 지정하기 때문에 세밀하게 좌표를 저장할 필요가 없을 것이라고 판단하여 조금 더 데이터를 적게 쓸 수 있는 double 형태로 저장했다.
그런데 나중에 알고보니 mySQL에서는 공간정보를 저장할 수 있는 POINT라는 data type이 있었다…(두둥) 다른 분이 프로젝트를 하다가 이 글을 읽게 되시면 POINT를 활용해보시라고 말씀드리고 싶다.
도형 정보 저장하기
유저가 지도 위에 그릴 수 있는 도형은 화살표, 직선, 사각형, 원형(타원형태), 폴리곤(다각형) 이렇게 5가지였다. 폴리곤을 제외하면 모두 도형이 시작하는 지점과 끝나는 지점을 저장할 수 있으면 어느 정도 DB에 저장하고 Client단에서 그리는데 문제가 되지 않았다.
그런데 문제는 폴리곤(다각형)이었다.
도형을 그릴 때는 꼭지점 정보(좌표)를 저장해야 다음에 그 도형정보를 불러와서 Client에서 그림을 그릴 때 이 좌표들을 연결해서 도형을 그려달라고 명령을 내릴 수 있을텐데.. (이를 어쩐담 싶었다)
우리는 figure라는 column을 만들어서 그 column안에 그린 도형의 정보를 JSON.stringify 형태로 넣기로 했다. dataType은 varChar로 했다가 length가 255로 제한되어서 도형을 여러개 그리는 경우에는 이를 저장하기가 어렵다는 한계를 만났고, dataType은 무제한으로 string을 담을 수 있는 text 타입으로 진행했다.
figure 안에는 대략 아래와 같은 내용이 stringify로 저장되었다.
{
"shape": "Polygon",
"lineData": [ // 도형을 2개 그려서 array 안에 2개의 object가 있다.
{
"coord": {
"y": 37.5757777,
"_lat": 37.5757777,
"x": 126.9847115,
"_lng": 126.9847115
},
"offset": {
"x": 1242,
"y": -8
}
},
{
"coord": {
"y": 37.5750762,
"_lat": 37.5750762,
"x": 126.985056,
"_lng": 126.985056
},
"offset": {
"x": 1257,
"y": 31
}
}
],
"zoomLevel": 11 //네이버 지도의 Zoom level에 따라 도형의 크기가 다르게 그려져야하므로 도형정보를 저장할 때 그 도형이 그려질 때의 지도 zoom level을 함께 저장했다.
}우리가 해결했던 방법이 정답은 아니겠지만.. 주니어들이 팀프로젝트를 하며 어떻게 해결할 수 있을까?를 고민하다가 나온 대안이기 때문에 이런 방법도 있구나~하고 읽는 이들도 이해해주셨으면 한다. 좋은 방법이 있다면 언제든 댓글로 말씀해주시면 정말 감사합니다아..(ㅠ_ㅠ)
