• date: 2016-12-08
• tool: mapbox, Sketch 3
• project URL: https://slideshow.redgoose.me/watch/9aadd16172d75d1b/

우연히 mapiful 사이트를 보고 디자인에 엄청 혹해서 다른 지역들을 보고싶어지는 욕구가 생겨 이렇게 프로젝트로 만들어보게 되었다.

보통 구글맵 같은 형태로 지도를 봐봤는데 이렇게 스타일리쉬한 지도는 본적이 없어서 대단히 신선했다.

선을 그린 모습으로만 봐왔지만 프로그램화 되어있는 형태는 대단히 신선했다. 그리고 선 퀄리티도 대단히 좋아보여서 많은곳에 활용할 수 있을거라고 기대되었다.
하지만 벡터로 뽑아낼 수 없다는것이 가장 아쉬웠고, 지도 서비스이다보니 결과물을 원하는대로 얻을 수 없다는것이 작업에 상당한 제약을 느꼈다.

Research

처음 mapiful 서비스를 접하고 좀 찾아보니 이미지 결과물을 얻을수가 없었고, 지도 스타일을 고치는 코드를 찾아보려 했지만 소스코드가 AngularJS로 만들어져 있고, 컴파일되어있는 형태라서 무리하게 소스를 뒤지는것보다 다른 방법을 찾는게 좋을거라는 결론에 이르렀다.

mapiful에서 사용되는 지도는 OpenStreetMap이어서 서비스에 들어가봤더니 오픈데이터 형태의 지도 서비스인데 한편으로는 신세계를 맛보았다.
구글지도는 한국에서는 스타일 적용이 되지 않는데 여기에서는 가능하고, 북한의 지도가 디테일하게 표시된다. (…)

하지만 스타일을 고칠수가 없어서 좀더 다른 지도 서비스를 찾아보게 되었다.
여러군데 찾아본 결과 OpenStreetMap을 사용하면서 스타일을 편집할 수 있는 mapbox라는 서비스를 찾게 되었다.

Make map style

Mapbox 서비스에서 맵 스타일을 편집할 수 있다는것을 알게되어 편집을 시작했다.

역시 지도답게 엄청나게 많은 요소가 옵션들이 존재한다.

지형의 색은 화이트로 변경하고, 바다나 강은 옅은 회색으로 변경하고, 위치나 요소를 설명하는 레이블 요소는 전부 삭제하는것으로 시작했다.
본격적으로 건물과 구조물, 공원들은 선을빼거나 가장얇은 선으로 표현했고, 인도나 작은 도로는 얇은 선으로 수정했다. 고속도로나 국도는 좀더 좀더 굵은 선으로 변경했고, 기차역 라인을 좀더 굵게 수정하고, 그외에 다른 부분들은 어떻게 바뀌나 한 부분씩 확인해보면서 수정해나갔다.
라인의 규모에 따라 단계적으로 사이즈를 키우는 방향으로 설정해나갔지만 어색하다 싶으면 따로 수정했다.

당연한건지도 모르겠지만 지도 확대 배율에 따라 옵션을 다르게 설정할 수 있었다.(주로 선 굵기) 그리고 어느정도 축소함에 따라 안보여지는 요소가 생겨서 시간이 더 걸리게 되었다.

Select location

Mapbox 서비스는 output 기능을 가지고 있다.

아쉬운점은 pdf나 eps같은 벡터로 결과물을 뽑아낼 수 없었고, 이미지로 저장할 수 있었다. 하지만 저장 가능한 이미지 사이즈가 턱없이 부족하여 화면캡쳐를 하여 결과물을 만들어내는걸로 결정했다.
화면캡쳐는 마침 레티나모드로 고해상도 화면으로 설정하면 높은 사이즈로 캡쳐받을 수 있다는것을 알았다.(지도는 벡터이기 때문에 보이는 화면의 화질저하는 없었다.)

스타일을 편집했으니 전세계의 도시나 마을들을 찾아보면서 화면캡쳐를 하기 시작했다.

어느 지역이며 어떤 도시인지 알수가 없어서 구글지도에서 검색을하고 화면을 대조해보며 위치가 어딘지 파악을 해갔다.
무엇보다 선택의 기준은 도시의 규모나 인지도에 상관없이 지도의 모습이 괜찮으면 바로 캡쳐를 하면서 사용할 지도 결과물들을 저장해갔다.

Publish

지도들을 캡쳐를 하고 추렸더니 그림의 양이 상당히 많았다.

여기에서 어떻게 올릴까 고민이 들었다.
한번에 넣기가 너무 많고, 포스팅을 대륙별로 나누어 넣기가 양이 불균형하고, 시리즈를 여러가지로 넣기가 부담스러웠다.
마지막으로 할 수 있는 전용 뷰어를 만드는 것인데 작업시간이 많이가서 고민을 하다가 다른 좋은방법이 떠오르지가 않아서 뷰어를 따로 만들게 되었다. (일이 거창하게 돌아가게 되었다.)

뷰어를 위한 간단한 디자인을 하고 Goose와 연동을 하여 프로그램작업을 시작하였다.

목록의 벤더들은 썸네일 이미지 목록의 정렬을 위한 Masonry와 썸네일 이미지를 선택하면 원본 이미지로 확대되는 Fluidbox를 사용했다.
최대한 간단하고 빠르게 뷰어를 만드는 방향으로 제작하고 지도 이미지를 업로드할 준비를 마쳤다.

이제 업로드할 지도를 올리기위한 마무리 작업을 할 단계인데 그대로 올릴은 없었고, 타이포 작업을 하여 완성도를 올릴 생각이었다.
영역을 잡고 기록을 해둔 국가와 도시들가 적힌 타이포를 집어넣어 한장씩 완성시킨다.
처음에는 포토샵에서 작업을 시작했지만 양이 늘어남에 따라 타이포 관리가 답이 없어지고(타이포 조금 수정하면 전부 다시 열어서 수정해야한다.), 용량이 너무 켜져서 포토샵을 끄고 프로토타이핑 툴인 Sketch에서 한번에 작업을 끝낼 수 있었다.

작업한 지도들을 저장하고 관리 프로그램에 업로드하여 뷰어로 출력시킴으로써 마무리 지었다.

End

원래 지도몇장만 만들고 올려서 끝낼 생각이었지만 멋진 모습을 가진 도시의 모습이 많아서 포기하고 싶지가 않아서 이렇게 거창한 프로젝트가 만들어지게 되었다.
이 작업을 하면서 나라나 도시의 모습들을 알게된 좋은 기회가 되었고, 오히려 많이 배우게된 좋은 시간이 되었다고 생각한다.

비록 지도 데이터로 만들어진 지형의 모습들의 한 부분을 즐겁게 봐주셨으면 좋겠다.