저는 최근 지도 위에 캔버스에서 그림을 그릴 수 있는 기능을 구현하는 프로젝트를 진행했습니다.

이 과정에서 가장 큰 고민은 줌인/줌아웃과 이동(팬)을 했을 때, 지도와 캔버스가 함께 움직이며, 그린 그림이 좌표에 따라 올바르게 유지되도록 만드는 방법이었습니다.

고민 끝에 설계를 구체화하고, 이를 구현하였는데, 이번 포스팅에서는 처음 설계와 고민했던 한계, 설계 변경 과정, 그리고 최종적으로 구현한 방법을 중심으로 소개해보려 합니다.

사실, 이 지도-캔버스 연동 과정은 프로젝트에서 제가 맡았던 부분이 아니었는데 팀원 분께서 2주 동안 구현하지 못하셔서 머리를 싸매시는 것을 보고……

그렇게 어려운지 저도 승부욕이 생겨서 주말에 잠깐 시도해보았다가 해결해버린 태스크였는데요……..

저희 프로젝트의 핵심 기능이기도 했고, 첫 주차 때부터 실제로 구현이 어려울 것이라고 생각했던 부분이었기 때문에 어떻게 해결했는지를 작성해두면 좋을 것 같아 포스팅하게 되었습니다.

🚩 구현 목표

먼저 구현 목표는 간단했지만 도전적이었습니다.

1. 사용자는 지도 위에 캔버스를 통해 그림을 그릴 수 있다.
2. 지도를 줌인/줌아웃하거나 이동했을 때, 캔버스와 지도는 동기화되어 움직인다.
3. 그려진 그림은 지도 좌표와 연관되어야 하며, 지도 이동 후에도 같은 위치에 있어야 한다.

🤔 고민했던 부분

구현을 시작하며 아래와 같은 질문을 던졌습니다:

1. 지도와 캔버스는 서로 다른 두 레이어로 구성될 텐데, 이 두 레이어를 어떻게 동기화할 것인가?