Google Maps + S2 개발

이번 22년 하반기에는 Google Maps에 S2(지리 정보 시스템) 을 이용하여 프로젝트를 진행하였습니다.

왜 S2를 사용하였냐면 Cell 기반의 유니크한 ID를 통해 백엔드에서는 해당 ID와 토큰값을 DB에 저장해서 프론트쪽에 해당 값을 주면 해당 위도 경도에 해당하는 좌표값을 시각화 할수 있습니다.

사내 다른 부서에서 먼저 사용하여 검증 되어 었기에 도입을 결정하는데 어려움은 없었던거 같습니다.

간단하게 S2는 아래의 개념을 가지고있습니다.

S2?

S2는 구글에서 개발한 지리 정보 시스템으로서 지구를 사각형 형태의 ‘Cell’로 쪼개어 넘버링한 시스템입니다.

각각의 Cell은 유니크한 id를 갖게 됩니다.

S2 지구본
S2 큐브

출처

S2의 기본적인 원리는 다음과 같습니다.

  1. 위 그림과 같이 지구를 정육면체로 보고 전개도로 나눕니다. (전개도를 역으로 조립하면 지구같아요!)
    이때 0~5, 총 6개의 면이 생기며, 각 면을 face cell이라 합니다.
  2. face cell을 하나 선택해 다시 4개의 사각형(Cell)로 나눕니다.
    이때 0~3, 총 4개의 사각형이 생깁니다.
  3. 2 과정을 원하는 크기의 Cell을 선택할 때까지 재귀적으로 반복합니다. (이때 Cell을 선택하기까지의 depth를 level이라고 합니다. 따라서 level이 높을수록 크기는 작아집니다. 중요.)
  4. S2의 모든 셀은 64개의 bit (최대 30 level)로 표현할 수 있습니다.S2 64비트 표현법

어려웠던점과 아쉬움….

google maps + S2
google maps + S2

위의 그리기로 지도에 cell을 그리면 로봇이 배달을 할 수 있는 구역을 나타내 주며, 이를 통해 배달 어플에서 로봇배달이 가능한 구역에서 로봇 주문을 할 수 있게 됩니다.

사실 지도 개발은 이번 프로젝트처럼 복잡한 작업을 해본적이 없어서 약 2주라는 시간안에 다양한 기능들을 구현하기 위해 많은 어려움이 있었습니다. 또한 S2에 대한 자료 또한 많이 있지는 않았습니다.


하지만 구현할 것들을 작은 단위로 쪼개서 google maps에서 제공하는 api 문서들을 보면서 기본적인 지도 기능을 구현하였고, 각 기능들을 우선순위로 나누어 2주라는 시간내에 먼저 구현가능한 것들을 다 구현하고 S2개발에 집중하는 시간을 최대한 늘려서 집중 할수 있었습니다. 다행히 S2관련하여 s2-geometry와 s2-cell-draw를 npm에서 제공하여 개발하는데 많은 도움이 되었으며, 아쉽게도 시간관계상 구글에서 제공하는 polygon 객체를 통해 지도에 그리게 되었는데 나중에 프로젝트 기간 막바지에 deck.gl에서 S2Layers를 제공하는것을 알게되어 고도화 작업이 있을때 리팩토링을 적용해볼 예정입니다.

Leave a Comment