히어로콘텐츠를 통해 讀者들에게 새로운 經驗을 주기 위해 여러 試圖를 했다. 特히 이番 히어로콘텐츠팀 4期 ‘ 共存 ’은 京畿道 安山을 中心으로 이야기가 展開됐기 때문에 처음부터 地圖를 活用한 그래픽을 쓰자는 論議가 나왔다. 앞서 ‘ 同行 ’에서 地圖 그래픽을 製作한 經驗이 있었고, 데이터 視覺化에 關心이 있었기 때문에 指導 製作을 맡게 됐다.

地圖를 記事 어느 部分에 揷入할 지 論議한 끝에 인트로 페이지 에 活用하기로 決定했다. 인트로 페이지의 役割은 記事에 對한 讀者들의 好奇心을 最大로 끌어내는 것이었다. 그렇게 하기 위해 ‘視覺的인 刺戟’을 주기로 했다.

데이터를 時刻化하면 抽象的이고, 잘 體感할 수 없는 內容을 한 눈에, 直觀的으로 傳達할 수 있다는 長點이 있다. 그래서 指導를 통해 우리나라의 現實이자 未來를 直觀的으로 보여주고자 했다.

韓國에서 外國人이 가장 많이 사는 都市인 安山에서, 全國 地圖로 줌아웃되며 外國人 比率 5% 以上인 都市가 標示되는 그래픽을 製作하기로 했다. 이 그래픽을 통해 安山과 같은 地域이 앞으로 더 많아질 것이라는 걸 한 눈에 보여주고자 했다. 多文化 社會를 體感하지 못하는 사람도 移住民과의 共存에 對해 생각해보도록 만들고 싶었다.

처음에는 Mapbox GL JS 로 地圖를 製作했다. Mapbox는 웹에 地圖를 나타내는 자바스크립트 라이브러리인데 여러 機能을 事前에 提供해 開發者들이 쉽게 인터랙티브 그래픽을 製作할 수 있게 돕는다. 例를 들어 地圖에 地域名이 自動으로 表記되고, 利用者가 스크롤이나 드래그를 하면 指導가 特定 地域을 비추도록 움직이게 만들 수 있는 機能이 있다. 하지만 여러 機能을 包含하고 있기 때문에 容量이 클 수밖에 없다. 그렇게 되면 라이브러리를 불러오는 時間이 길어져 페이지 로딩 速度에 影響을 미칠 수 있다. 인트로 페이지는 讀者들에게 記事의 첫印象을 심어주는 重要한 役割을 하고, 實際 讀者들에게 가장 많이 露出됐다. 그렇기 때문에 性能 部分을 더 神經 써야 했다.

D3.js 를 使用해서 다시 開發을 始作했다. D3는 地圖, 차트 等 다양한 데이터 視覺化를 具現할 수 있는 자바스크립트 라이브러리다. Mapbox처럼 그래픽 製作을 돕는 機能이 基本으로 包含돼 있진 않지만, 그런 點 때문에 오히려 웹페이지 性能에는 도움이 된다. 願하는 機能만 골라서 코드로 追加할 수 있어 더 깔끔하게 구동되고 훨씬 자유롭게 커스터마이징할 수 있기 때문이다. 以前에 D3로 開發해 본 經驗이 있었기 때문에 全體的인 틀을 만드는 데에는 그렇게 긴 時間이 걸리지 않았다. 하지만 디테일한 部分을 修正하는 데 時間을 많이 들였다.

D3로 地圖를 나타내기 위해서는 두 가지 파일이 必要하다. 地圖의 情報를 담고 있는 JSON 파일과 統計 情報를 담은 CSV 파일이다. JSON은 屬性과 값의 雙으로 이루어진 데이터 形式이다. 例를 들어 {”이름”:”철수”, “나이”:20}에서 이름과 나이는 屬性이고 哲秀와 20은 各 屬性에 對한 값이다. 이런 JSON 形式 中에서도 geoJSON은 位置 情報에 對한 屬性과 값을 담고 있는 데이터 파일이다. geoJSON은 다시 topoJSON이라는 파일 形式으로 變換할 수 있다. topoJSON은 geoJSON과 같은 情報를 담고 있지만 훨씬 壓縮할 수 있어 容量을 줄일 수 있다. 웹페이지 性能 向上을 爲해 topoJSON 파일을 使用했다.

왼쪽의 寫眞이 統計廳에서 提供하는 大韓民國의 市郡區를 나타내는 topoJSON 파일로 그린 地圖이다. 보이는 것처럼 매우 詳細한 地形까지 모두 그려진다. 하지만 ‘共存’ 記事에서는 이렇게까지 詳細한 地形 情報가 必要하지는 않았다. mapshaper를 通해서 오른쪽처럼 地圖를 單純化시켰다. 파일 容量도 5分의 1로 줄었고, 境界線들이 整理돼 보기에 더 깔끔해졌다.

이제 D3를 利用해 topoJSON 파일로 웹페이지에 地圖를 나타내는 것은 簡單하다. 地圖의 크기를 決定하고, 얼마나 擴大할 것이며 指導의 位置를 어디에 둘 것인지를 코드로 作成하면 地圖가 그려진다.

빈 指導가 完成됐다. 地圖의 背景色과 테두리 色은 直接 코드로 變更했다. 다음은 이 地圖에 願하는 情報를 標示해야 될 次例였다. 여기에서는 各 地域 위에 이름을 標示하고, 安山 地域만 粉紅色으로 標示하고자 했다.

製作 過程을 더 쉽게 理解하기 위해 topoJSON 파일의 一部를 가져왔다.

複雜해보이지만 여러 個의 屬性과 값의 雙들로 이루어진 集合이다. 이 中에서 地圖에 나타낼 情報는 一部分이다. 그 例示로 하나의 地域을 가져왔다.

하나의 地域은 다음과 같은 屬性을 갖고 있다. 위의 例示에서 地域의 이름(name)은 “安山市 檀園區”이고, 基準年度(base_year)는 2018年, 英語 表記法(name_eng)은 “Ansansidanwongu”, 지역코드(code)는 31092다.

D3에는 地圖 위에 텍스트, 圖形, 이미지 等을 追加할 수 있는 機能이 있다. 위의 코드를 통해 地圖에 텍스트를 追加하고, 그 텍스트를 各 地域의 가운데(centroid)에 位置하도록 했다.

하지만 몇 地域은 이름이 地域의 中央이 아닌 곳에 標示됐다. 아무래도 地域의 模樣이 일정하지 않다 보니 中央에 位置해도 地域 境界線 바깥으로 넘어가는 境遇가 있었다. 그런 地域들은 直接 텍스트의 x座標, y座標 位置를 調整했다.

條件文을 통해 地域의 “name”이 “安山市 檀園區”, 或은 “안산시 常綠區”라면, 該當 地域의 七(fill)을 粉紅色으로 變更하도록 해 안산시를 地圖 上에 標示했다.

只今까지는 topoJSON 파일 內部에 存在하는 情報들을 指導에 標示했다. 이제는 外國人 比率이 5% 以上인 地域을 나타내기 위해 CSV 파일을 이 地圖에 連結할 次例다.

CSV 파일은 構造가 더 簡單하다. 왼쪽의 Excel 파일에서 各 熱을 쉼標로 分離한 파일이다. 맨 위의 英單語들이 各 熱을 代表하는 이름이 된다.

topoJSON과 CSV 파일에서 唯一한 共通 要素는 ‘地域名’이다. topoJSON 파일에서는 “name”이 “安山市 檀園區”라는 값을 갖고 있고, CSV 파일에서는 city의 값으로 “安山市 檀園區”가 있다.

D3에는 topoJSON 파일의 properties에 屬性을 追加할 수 있는 機能이 있다. topoJSON 파일의 name 값과 CSV 파일의 city 값이 같다면, 該當하는 地域에 rate라는 새로운 屬性을 追加했다.

그렇게 해서 “安山市 檀園區” 地域에 “rate”라는 새로운 屬性이 追加됐다. 外國人 比率이 5% 以上인 地域에만 “rate” 屬性이 追加된 것이다. 그리고 앞서 地域의 이름을 텍스트로 追加한 것처럼, 該當 地域들에 원을 追加했다.

하지만 一部 地域에는 원이 標示되지 않았다. 원의 個數를 一一이 세어보지 않아도 CSV 파일 속의 地域 數보다 顯著히 적은 數의 원이 指導에 標示됐다. 처음에는 코드에 誤謬가 있다고 생각해 코드를 繼續 修正했다. 하지만 코드를 修正해도 誤謬는 解決되지 않았다. 코드 內部의 誤謬가 아니라면 코드 파일에 連結되어 있는 外部 파일의 問題일 確率이 높다. 그래서 標示가 되지 않은 地域을 中心으로 topoJSON 파일과 CSV 파일을 천천히 살펴보았다.

問題는 亦是 外部 파일에 있었다. topoJSON 파일과 CSV 파일에서 各各 地域을 表記하는 方式이 달라 誤謬가 發生했다. 例를 들면 中區는 서울에도 있고 仁川, 釜山에도 있다. 그리고 세 中區는 모두 外國人 比率이 5% 以上인 地域이다. topoJSON 파일에는 “中區”가 重複된 이름으로 여러 個 存在했고, CSV 파일에서는 서울 中區, 釜山 中區, 仁川 中區로 各各 表記되어 있었다. 모든 中區에 원을 標示하기 위해서는 topoJSON 파일에서 이름이 重複되지 않도록 修正해야 했다. 따라서 屬性값 中 하나인 지역코드를 檢索해서 各 中區에 서울, 仁川, 釜山을 앞에 追加했다. 이런 式으로 서로 다른 地域 이름들을 全部 統一해 誤謬를 解決할 수 있었다.

위의 過程만으로도 그래픽은 完成할 수 있었다. 하지만 開發은 끊임없이 修正할 部分이 생기고, 欲心이 생기기 마련이다. 于先 全國 地圖로 줌아웃되었을 때, 모든 地域에 이름이 뜨는 것은 너무 지저분해 보이고 情報를 過多하게 提供하는 것 같아 果敢하게 削除했다. 또 PC에서 웹페이지를 볼 때, 원에 마우스를 올리면 該當 地域에 對한 情報가 뜨도록 했다. 情報를 담은 말風船에도 單純히 市郡區名이 아닌, 度의 이름까지 뜨는 것이 더 親切할 것이라고 생각했다. 그래서 CSV 파일에 city_full이라는 값을 追加해서, OO도 OO市/郡/九老 標示되게 만들었다.

이렇게 單純해보이는 하나의 그래픽度 많은 것들을 考慮하고 修正한 끝에 誕生하게 된다. 結果物이 웹페이지에서 잘 驅動될 때, 그리고 다른 要素들과 잘 어우러지면서 讀者들에게 興味를 줄 수 있을 때 가장 뿌듯함을 느낀다. 이 指導를 통해 讀者들에게 記事에 對한 好奇心을 이끌 수 있었다면, 成功했다고 생각한다. 앞으로도 더 다양하고 斬新한 試圖들을 많이 해보고 싶다.