실무·
Figma to Map Plugin
Figma에서 그린 도형을 지도 위에 올려놓고 위경도를 뽑아내는 플러그인
좌표 변환이 자꾸 어긋나길래 EPSG:3857과 4326의 차이를 공부해 직접 풀었습니다
이렇게 만들었습니다
인턴으로서 참여한 첫 프로젝트입니다. 프로젝트의 목표는 Figma의 특정 레이어를 지도상의 원하는 위치에 배치하고, 해당 위치의 위경도 좌표를 저장할 수 있는 Figma 플러그인을 개발하는 것이었습니다.
다만 Figma 플러그인 환경에서 React와 TypeScript를 함께 쓰려면 Webpack 번들러의 복잡한 설정이 필요했습니다. 그래서 Figma + Webpack + TypeScript + React 조합이 미리 구성된 보일러플레이트를 가져다 써서 환경 설정 없이 개발에 집중하였습니다.
UI는 구글의 Material Design 가이드라인을 따르는 MUI(Material UI)로 React 컴포넌트와 일관된 스타일로 구성하였습니다.
지도를 직접 드래그하며 원하는 지역을 찾는 방식은 비효율적이라고 판단해, OpenStreetMap 기반의 지오코딩 API인 Nominatim을 연동해 주소 검색 기능을 추가하였습니다.
지도 라이브러리와 좌표계라는 생소한 개념을 실무에서 직접 부딪히며 익힌 프로젝트였습니다.
React와 TypeScript를 얹기까지
Figma 플러그인의 기본 뼈대는 Figma Plugin API의 공식 문서를 참고해 구성하였고, 코드 유지보수성 때문에 React를, 타입 안전성 때문에 TypeScript를 도입하였습니다.다만 Figma 플러그인 환경에서 React와 TypeScript를 함께 쓰려면 Webpack 번들러의 복잡한 설정이 필요했습니다. 그래서 Figma + Webpack + TypeScript + React 조합이 미리 구성된 보일러플레이트를 가져다 써서 환경 설정 없이 개발에 집중하였습니다.
UI는 구글의 Material Design 가이드라인을 따르는 MUI(Material UI)로 React 컴포넌트와 일관된 스타일로 구성하였습니다.
Leaflet에서 OpenLayers로 바꾼 이유
지도 구현에는 초기에 Leaflet을 사용하였으나 Polygon 드래그·회전·리사이즈 등 커스텀 인터랙션에 한계가 있었습니다. 사수와 논의해 커스텀 기능을 더 많이 지원하는 OpenLayers로 교체하였고, 필요한 인터랙션을 모두 구현하였습니다.지도를 직접 드래그하며 원하는 지역을 찾는 방식은 비효율적이라고 판단해, OpenStreetMap 기반의 지오코딩 API인 Nominatim을 연동해 주소 검색 기능을 추가하였습니다.
좌표계에서 막혔던 지점
이 플러그인의 핵심인 위경도 좌표 변환을 구현하면서, OpenLayers가 내부적으로 쓰는 EPSG:3857(Web Mercator) 좌표계와 위경도 표현에 쓰이는 EPSG:4326(WGS84) 좌표계의 차이를 처음에는 몰라 변환 오류를 겪었습니다. 이를 계기로 두 좌표계의 개념과 변환 방식을 직접 공부해 해결하였습니다.지도 라이브러리와 좌표계라는 생소한 개념을 실무에서 직접 부딪히며 익힌 프로젝트였습니다.