요청은 "전 세계 국가를 보여 주고, 다녀온 나라를 체크하면 색칠되는 사이트"였다. 이런 지도는 이미 많다. 그래서 만드는 쪽에서 고민할 건 새로움이 아니라 정확도와 손이 가는 정도였다. 곧바로 "도시별로도 되나?"라는 질문이 이어졌고, 나는 세 가지 안을 내놓았다. 점만 찍기, 점과 1단계 행정구역 색칠, 도시 경계 색칠이다. 운영자는 두 번째를 골랐다. ghmun.com/travel 에 있다.
나라와 지역은 어디서 왔나
경계는 Natural Earth에서 받았다. 국가와 영토는 257개, 1단계 행정구역(한국의 도, 미국의 주, 일본의 현)은 4,588개다. 도시는 GeoNames에서 인구 1만 5천 명 이상인 34,179곳을 받았다. 국가 이름과 행정구역 이름에는 한국어가 이미 들어 있었다. 도시는 한국어 이름이 6천여 곳에만 있어서 나머지는 영어로 검색해야 한다.
도시마다 어느 행정구역에 속하는지는 좌표로 미리 계산했다. 서울은 서울특별시, 파리는 일드프랑스가 된다. 해안선 단순화 때문에 경계 밖으로 빠진 225곳은 150km 안에서 가장 가까운 구역에 붙였다.
"방문 국가 N / 195"의 분모는 유엔 회원국 193개국에 바티칸과 팔레스타인을 더한 수다. 타이완이나 속령을 칠하면 분모에 넣지 않고 "기타 영토"로 따로 센다. 나라 수를 어느 기준으로 세느냐는 사람마다 다르기 때문에, 기준을 패널에 그대로 적었다.
호주를 누르면 섬이 칠해졌다
처음 테스트에서 호주를 클릭했더니 "애시모어 카르티에 제도"가 칠해졌다. Natural Earth에서 호주 본토, 인도양 속령, 애시모어 카르티에 제도가 모두 같은 국가 코드 AU를 쓰고 있었다. 코드로 칠할 대상을 찾으니 먼저 만난 섬이 걸린 것이다. 본토가 코드를 먼저 가져가고, 같은 코드를 쓰는 속령에는 3글자 코드를 따로 주도록 고쳤다.
화면 전체가 주황색이 된 날
몰디브의 환초 두 곳과 몰타의 마을 한 곳에 마우스를 올리면 지도 전체가 주황색으로 덮였다. 경계를 단순화하면서 아주 작은 도형의 고리 방향이 뒤집혔고, 지도 라이브러리가 "이 도형의 바깥쪽 전체"를 칠하라는 뜻으로 읽은 것이다. 면적이 지구 전체와 같은 구역을 찾아 도형만 지웠다. 그 세 곳의 도시는 그대로 검색되고 기록된다.
점 3만 4천 개를 없앴다
처음에는 확대할수록 도시 점이 나타나게 했다. 인구가 많은 도시부터 보이게 했는데도 동아시아를 확대하면 점이 화면을 덮었다. 운영자는 "점이 너무 지저분하다"고 했고, 칠하는 대상을 나라와 1단계 행정구역으로만 줄이자고 했다.
점을 없애자 다른 문제가 보였다. 지명이 없으면 지역 이름만 보고 위치를 찾아야 한다. 일본의 "도쿄도"는 알아도 "와카야마현"이 어디쯤인지는 모른다. 운영자가 주요 시 이름은 남기자고 했고, 사람들이 많이 가는 곳 위주로 하라고 덧붙였다.
인구순으로 이름을 띄우면 중국 내륙의 대도시가 먼저 나오고 정작 교토나 할슈타트는 안 나온다. 그래서 여행지를 직접 골랐다. 약 1,100곳을 3등급으로 나눴다. 1등급은 처음 확대할 때부터, 3등급은 많이 확대해야 이름이 보인다. 한국 여행자가 많이 가는 곳을 앞에 뒀다. 이름은 점 하나와 함께 띄우고, 겹치면 등급이 낮은 쪽을 숨긴다. 이름은 길잡이일 뿐 칠하는 대상이 아니다. 검색창에서 도시 이름을 고르면 그 도시가 속한 지역이 칠해진다.
GeoNames 도시 목록에는 인구 1만 5천 명 미만의 마을이 없다. 할슈타트, 체르마트, 인터라켄, 우붓, 산토리니 같은 곳이 여기에 걸렸다. 이런 곳 96곳은 좌표를 직접 넣었다. 한국어 이름도 직접 붙였다. 도시 이름 뒤에 "시"가 붙어 "오사카 시"로 나오던 것도 정리했다.
산토리니는 처음에 크레타 지역으로 연결됐다. 섬이 단순화된 경계에서 빠져서 "가장 가까운 지역의 중심"을 찾았고, 중심점이 가장 가까운 곳이 크레타였기 때문이다. 중심 대신 경계의 꼭짓점까지의 거리로 바꿨더니 남에게해 지역이 나왔다.
런던이 자치구로 쪼개져 있었다
운영자가 "런던은 왜 이렇게 상세하게 나뉘어 있지?"라고 물었다. 원본에서 영국의 1단계 행정구역은 지방 자치단체 232곳이었다. 런던만 자치구 33곳이다. 개수를 나라별로 세어 보니 영국 232, 슬로베니아 193, 라트비아 119, 필리핀 118, 우간다 112 순으로 지나치게 잘았다.
영국은 원본에 들어 있는 지방 구분으로 묶었다. 잉글랜드 9개 지방(그레이터런던, 잉글랜드 남동부 등)과 스코틀랜드 4곳, 웨일스 2곳, 북아일랜드로 16곳이 됐다. 슬로베니아, 라트비아, 우간다, 북마케도니아, 아제르바이잔, 몰타도 비슷하게 묶었고, 필리핀은 시를 소속 주에 합쳤다. 전체 구역이 4,588개에서 3,723개로 줄었다. 묶은 구역의 한국어 이름은 내가 붙였다. "스코틀랜드 동부"처럼 원본 이름이 "Eastern" 하나뿐이라 나라 이름을 덧붙인 것도 있다.
지도가 대충 그려져 있다는 말
첫 버전은 용량을 아끼려고 1:50m 국가 경계와 많이 단순화한 행정구역을 썼다. 해안선이 뭉툭했고 작은 섬이 떨어져 나갔다. 운영자는 "지도가 대충 그려져 있다"고 했다. 국가 경계를 1:10m로 바꾸고 단순화 정도를 줄였다. 경계 데이터는 약 1.5MB에서 4.8MB로 늘었다. 접속하고 지도가 뜨기까지 약 2초 걸리고, 확대하고 끌 때 프레임은 그대로였다.
구글 지도처럼 도로와 지형이 보이는 바탕 지도를 까는 방법도 있다. 그러려면 투영법을 메르카토르로 바꿔야 하고, 그러면 세계 전체가 위아래로 늘어나 보인다. 지금은 해상도만 올렸다.
로그인과 기록
기록은 처음에 브라우저에만 저장했다. 운영자가 그림 어디 있어?처럼 구글 로그인으로 저장되게 해 달라고 했다. ghmun.com의 공통 로그인을 그대로 쓰고, 칠한 나라·지역과 지역별 방문 연도·메모를 서버에 한 줄씩 저장한다. 로그인하면 이 브라우저에 있던 기록과 계정의 기록을 합치고 어느 쪽도 지우지 않는다. 로그아웃하면 이 브라우저의 기록은 지운다. 공용 컴퓨터에서 다음 사람의 계정에 섞여 들어가는 일을 막으려는 것이다. 서버에 저장이 안 된 기록이 남아 있으면 먼저 확인을 묻는다.
구글 로그인 자체는 자동 테스트가 안 된다. 가짜 로그인과 메모리 안의 DB로 합치기, 추가, 수정, 삭제, 로그아웃을 확인했다. 진짜 계정으로는 운영자가 배포 뒤에 직접 눌러 보는 수밖에 없었다.
빌드에서 한 번 막힌 곳
화면에 검은 알약 두 개가 떠 있었다. 안내창과 배너에 hidden 속성을 줬는데, 스타일에서 display: flex를 지정해서 속성이 무시된 것이다. 모든 요소에 [hidden]이 항상 이기게 한 줄을 넣었다.
ghmun.com에서는 주소 끝에 슬래시 없이 /travel로 들어와도 열려야 한다. 이때 data/countries.json 같은 상대 경로가 사이트 맨 위의 /data/로 풀려서 깨진다. 배포본에서는 하위 폴더 경로를 /travel/ 아래의 절대 경로로 바꿨다.
한계
- 이름을 띄우는 여행지는 내가 고른 목록이라 빠진 곳이 있다. 한국어 이름이 없는 곳은 영어로 나온다.
- 해안선은 1:10m 데이터를 한 번 더 줄인 것이라 작은 섬은 실제와 다를 수 있다.
- 영토 분쟁 지역의 경계는 Natural Earth 기준이다.
- 1단계 행정구역이 없는 나라는 나라 전체로만 칠할 수 있다.
- 공유 링크에는 나라와 지역만 담기고 연도와 메모는 담기지 않는다.
다음에 할 수 있는 것
- 가고 싶은 곳을 다른 색으로 표시하는 위시리스트.
- 방문 순서를 입력해 여행 경로를 선으로 잇는 화면.
- 도로와 지형이 보이는 바탕 지도.
- 영어판.