지도 API 작업 회고

최근 2달 간 다양한 지도 옵션을 사용해 보았습니다.

구축사업에서 지도를 다양하게 사용하다 보니 10여개의 크고 작은 케이스를 접했습니다.

그 중 인상적인 작업 몇 개를 회고해 보려고 합니다.

 

1. 객체 저장 방식의 지도 데이터 사용법 교육, 기술지원
2. 첫번째 데이터에만 적용되는 오버레이 설정
   (다른 오버레이와는 다르게 어떤 function이 일어나도 지우지 않기)
3. 한 화면에서 2개의 맵 API를 노출시키기
4. 지도의 오버레이를 사용하지 않고, 지도 위에 div를 얹어서 클릭 이벤트 시 해당 데이터로 변경하는 기능 + 트리거 리스트 동적 생성 + 지도 위의 div가 열리고 닫히는 순간의 포커싱 이동(접근성 작업)
5. 다각형 오버레이에 링크, 이벤트 발생시키기 + 탭으로 데이터 분리하기
6. 하나의 데이터 객체를 이용해서 20개 이상의 페이지에 각자 다른 오버레이 노출시키기

 

1. 객체 저장 방식의 지도 데이터 사용법 교육, 기술지원

지도 작업을 해보지 않았던 2명의 조원에게 교육할 기회가 있었습니다. 지도 작업 방식이 바뀌었다는 것을 프로젝트 시작 전에 사전 공지하고, 먼저 작업한 샘플 페이지를 조 내에서 공유했습니다. 또, 프로젝트를 작업하면서 카카오지도 API가 사용되는 부분을 사전에 파악했습니다. 해당 작업이 처음 작업하는 사람에게 어려운 부분이라는 것을 인지하고, 작업 시점과 작업 기한을 설정했으며, 작업 방향성을 PM, 디자이너와 미리 협의해 놓았습니다. 디자인이 완료된 시점에 작업자가 작업을 시작하기 전, 지도 작업 방식을 다시 설명했습니다. 이후에 이해가 어려운 부분은 지속적으로 기술 지원 했으며, 샘플 코드와 기획 간 추가, 삭제, 변경 부분을 작업자와 상의하며 커스텀했습니다. 작업자가 처음 접하는 코드인데도, 큰 어려움 없이 부드럽게 기술 전수가 이루어져 즐거운 작업이었습니다.

 

 

2. 첫번째 데이터에만 적용되는 오버레이 설정

해당 프로젝트에서 까다로웠던 부분은 기준 데이터가 계속적으로 화면에 노출되어야 한다는 것이었습니다. 사용자가 선택한 데이터를 객체의 첫번째 인덱스에 넣어 주고, 지도에 노출된 해당 데이터 주변에는 안쪽에서 바깥으로 퍼지는 효과의 원 오버레이를 넣어야 했습니다. 이 데이터는 모든 데이터가 지워져도 그 자리에 남아있어야 했는데, 예외처리를 하고, 효과에 사용될 오버레이를 따로 만들어서 객체에 추가해주는 작업이 생각보다 오래 걸렸습니다.첫번째에 들어갈 오버레이를 특정한 function으로 빼고 별도의 조건으로 객체에 삽입했습니다. setMap(null)에서도 예외처리를 했습니다. 그러자 코드는 인정사정없이 길어지기 시작했습니다. 이 작업 외의 여러 작업을 진행하면서 약간의 리펙토링 노하우를 갖게 되었는데, 해당 작업이 홈페이지 오픈 전 리펙토링을 거쳐 세상에 나갈 수 있기를 희망해 봅니다. 제가 갖고 있던 프로젝트인데, 일정이 밀리는 다른 프로젝트로 인해 담당자 변경이 되었고, 또한 이러저러한 일정의 문제로 지도 쪽에 작업시간을 할애하기가 어려워졌습니다. 여러 지나간 프로젝트들이 그렇듯, 레거시가 차곡차곡 쌓이고 있습니다.

 

 

3. 한 화면에서 2개의 맵 API를 노출시키기

같이 관리하겠다고 열심히 코드를 합쳤습니다. 그러다가 짧은 시간동안 위는 나오고 아래는 안나온다던가, 아래는 나오고 위는 안나온다던가 하는 사소한 문제들과 여러가지의 시행착오를 거쳤습니다. 별도의 id로 별도의 <script>로 묶어서 관리하는 방법으로 작업하는 것이 최선이라고 생각해서 그 방식을 적용하게 되었습니다.

 

 

4. 지도의 오버레이를 사용하지 않고......

의례 그렇듯 넘의 API를 끌고 오면, 아무리 기능이 잘 되어 있다 한들 리스크가 있습니다. 객체나 배열을 끌고와서 화면에 뿌리는 건 상반기 중에 많은 예제를 거치고 이골이 났습니다만, API 오버레이에 데이터를 동적으로 추가시키면 줄바꿈이 안되는 문제는 어떻게 해결해야 할까요? 이 문제는 결국 지도 외부에 div로 레이어 팝업을 하나 만든 후, 트리거 동작 시에 오버레이처럼 노출시키는 방법을 사용했습니다. 지도가 움직이면 따라 움직이는 오버레이가 아니지만 여기까지는 그나마 순조로웠습니다. 그 다음이 조금 문제였는데요. 데이터 객체를 활용해서 트리거 리스트를 만들었는데, 특정 버튼 트리거가 선택되었을 때, 위 아래의 버튼 몇개가 클릭되지 않습니다. 아니, 클릭은 되지만, 클릭이라고 인식하지 않는 상태입니다. (누군가 이 현상의 원인과 해결책을 알고 있다면 저에게 구원의 손길을 내려주세요 ㅠㅠ) 퇴근하고 틈내서 계속 소스를 뒤져보는데, 반복문의 반복문만 찾아내고 성과가 없네요.오버레이를 외부에서 가져왔기 때문에, 해당 오버레이가 사라지면 포커스가 컨텐츠 바깥으로 이동하는 것은 마커에 클래스를 주고, 다시 뺏어오는 방식으로 사용했습니다. (간단한 jQuery 구문인데, 말로 설명하면 더 어려운 영역이라 그러려니 해 주시기 바랍니다.)

 

 

5. 다각형 오버레이에 링크, 이벤트 발생시키기 + 탭으로 데이터 분리하기

다각형 데이터를 받아서 화면에 노출 시키는데 해당 데이터에 링크가 있다면 클릭시 이동하게 해주는.... 간단한 기획이라고 생각하시면 안됩니다! 다각형의 유형이 10개를 넘어서 각각을 정의해주어야 하고, 탭으로 카테고리를 나눠주어야 하며, 데이터는 준비되지 않았습니다!개발이 끼어들 자리가 없어서 데이터를 한땀한땀 JSON 형식으로 변형해야 하는 것도 저의 몫이죠. 게다가 이 데이터는 6번 작업의 근원 데이터이기 때문에 잘 셋팅해야 합니다. 한땀.. 한땀...회사 전체에서도 처음 하는 작업이라 기획, 디자인과 계속 소통하며 형식을 머리 속에 그려야 했습니다. 디자인으로 작업하려다 PM 의견으로 지도 API로 변경된 사항인데, 결정난 이후에도 기술 부분, 범례 등이 계속적으로 변경되어 기술적 검토가 어려웠습니다.다행히 기초 구현이 작업된 상태로 데이터만 입히면 큰 문제없이 완료할 예정입니다.

 

 

6. 하나의 데이터 객체를 이용해서 20개 이상의 페이지에 각자 다른 오버레이 노출시키기

이 작업은 5의 데이터를 가지고 선택된 페이지에 해당되는 객체를 골라내는 작업을 합니다.
PM이 던진 작은 돌맹이 하나에서 시작된 이 작업은 사실 개발자에게 먼저 갔는데요. 이 작업을 위해 무려 즉흥 회의가 소집되었습니다. 지도를 만든 죄로 끌려간 이 회의에서 PM이 개발자에게 각 페이지의 데이터 분기 처리를 요청했고, 일정 문제로 힘들다는 피드백이 나왔습니다. DB에 넣을 데이터도 아니었고, 단순 JSON 파일을 분기처리 하는 것이고, 개발자들 매일 야근하는 것도 보아온지라 결국 제가 하겠다고 했습니다. 각각의 데이터 기본키에 해당하는 id 값을 부여하고 filter로 데이터를 걸러서 하나만 불러오면 될 듯 합니다.

 

 

 

최근에는 css나 html이 아니라 데이터와 더 많이 만나는 듯 합니다.

데이터와 더 친해지라고 그런 과업이 계속 떨어지는 것 같습니다.

조가 분리된 지 얼마 되지 않아서 지도 작업을 할 수 있는 사람이 없다보니, 지도에 대한 과업이 저에게 몰립니다.

당연히 제가 작업하는 시간의 1/4 쯤은 지도 관련이 되었습니다. 

(나머지 1/4은 스크립트, 1/4 검수와 관리와 협의, 나머지는 레이아웃... 이 단순함이란!)

 

그리고 또! 며칠뒤면 엄청난 과업이 떨어질 예정인데요. 협의중인 듯 하네요. 역시 지도랍니다^ㅡ^..

쉬지도 않고 생기는 지도 과업!