共存 시리즈 2話 < 京畿 安山도, 移住民의 섬 > 인터랙티브 페이지 中盤에는 多文化 反對 團體의 抗議 피켓이 떨어지는 效果가 具現되어 있다. 스크롤에 따라 피켓이 떨어지게 해 繼續해서 文字 爆彈을 맞는 느낌을 經驗하도록 했고, 피켓들이 차곡차곡 쌓이며 마치 移住民들과 우리 사이에 壁이 쌓이는 느낌도 傳達하고자 했다. 使用者 인터랙션과 核心 主題를 同時에 傳達하게 된 이 部分을 어떻게 만들게 되었는지 開發者의 觀點에서 한番 共有해 보고자 한다.

처음 始作은 내가 찾은 레퍼런스였다. < Trump Got His Wall, After All >이라는 記事였는데 스크롤을 하면 블럭들이 쌓이며 美國 國旗가 만들어지는 效果가 登場한다. 效果가 재미있기도 하고 그림으로 3D 效果를 낸 거라 크게 어렵지 않을 것 같다는 單純한 생각으로 會議 때 레퍼런스를 보여주었다. 그랬더니 생각보다 더 좋은 反應이 나왔다. 取材記者들로부터 障壁이 쌓이는 느낌이 共存 시리즈에도 適用될 수 있을 것 같다는 意見이 나왔다. 레퍼런스는 나중에 實際로 企劃案에 反映이 됐는데 생각지 못하게 文字 爆彈을 받는 部分에서 使用됐다. 둘 다 내가 全혀 생각지도 못했던 部分이었다. 나 혼자였다면 그저 開發하기 재밌고 수월하겠다는 생각에 그쳤을텐데, 協業을 통해 생각의 틀이 넓혀진 것 같았다. 모두의 苦悶과 생각이 합쳐져 만들어졌기 때문에 더 適切하고 자연스러운 效果가 만들어지지 않았을까 생각한다.

‘스크롤에 따라 피켓이 떨어면서 차곡차곡 立體的으로 쌓이는 效果’는 當然히 旣存에 없는 것이기에, (레퍼런스는 있지만 正確한) 參考 모델 없이 모두 直接 開發하며 수많은 計算과 施行錯誤를 만나게 되었다. 그中에서도 피켓을 어떻게 ‘立體的으로 쌓이게’ 할지 苦悶했던 部分을 통해 開發者로서 겪었던 苦悶을 조금이나마 共有해 보고자 한다.

于先 始作은 畵面에 나타낼 適當한 피켓 個數를 苦悶하는 것이었다. 畵面 크기를 考慮해서 웹에서는 5個씩 3줄, 모바일에서는 3個씩 4줄로 配置하는 것이 適切하게 느껴졌다. 웹/모바일 안에서도 畵面 크기가 다르기 때문에 畵面에 다 들어오도록 配置하려면 基準이 必要했다. 웹은 가로보다 세로가 좁기에 세로 높이에 맞게, 모바일에서는 反對로 가로 너비에 맞춰 配置했다.

順序대로 番號가 매겨져 있는 피켓 이미지들을 實際로 차곡차곡 配置하기 위해서는 2次元 配列을 使用했다. 내가 願하는 것은 왼쪽 → 오른쪽, 아래쪽 → 위쪽으로 피켓이 順序대로 쌓이는 것이었다. 그래서 피켓의 番號를 가지고 行과 열 番壕를 求해 보았다. 萬若 피켓 番號가 5番이라면 웹의 境遇 맨 밑줄의 맨 오른쪽에 位置할 것이다. 이는 番號를 나누어 보면 알 수 있다. 한 줄에 5個가 들어가기에 피켓 番號를 5로 나는 몫이 밑에서 몇番째 줄에 들어갈지를 나타낸다. 왼쪽에서 몇番째인지는 5로 나눈 나머지를 보면 되는데, 5로 나눴을 때 나머지가 3이라면, 該當 피켓이 왼쪽에서 3番째 피켓이라는 뜻이 된다.

順序대로 피켓을 配置했으니, 이제는 正確한 位置에 正確한 크기의 피켓을 놓아 피켓이 ‘立體的으로 쌓이는’ 느낌을 주어야 했다.

내가 實際로 그래픽 記者로부터 받을 피켓 이미지는 立體的인 正六面體 圖形이기에 單純한 가로 세로 以外의 깊이가 存在했다. 그래서 이를 어떻게 反映할지 苦悶이 必要했다.

첫番째로는 깊이에 依해 생기는 追加的인 너비와 높이를 把握하는 게 重要했다. 實際로 쌓이는 듯한 效果를 주기 위해서는 이 깊이 部分이 겹쳐져야 하기 때문이다. 따라서 이 너비와 높이에 따라 피켓들이 얼마나 겹쳐져야 할 지가 決定되었다.

먼저 追加로 생기는 너비와 높이를 extraWidth, extraHeight이라 定義했다. 畵面 크기에 따라 피켓 크기가 變하면서 이 값이 달라질 것이기 때문에 extraWidth_prev, extraHeight_prev라는 固定된 값을 바탕으로 피켓 사이즈가 變함에 따라 extraWidth_after, extraHeight_after라는 以後의 값을 救했다.

두 番째로 이 값을 바탕으로 實際로 피켓을 겹쳐서 配置해야 했는데, 多幸히 피켓의 行과 열 個數가 定해져 있기 때문에 미리 피켓을 얼마나 移動할지 그 變動값을 配列에 넣어놓을 수 있었다. 나는 피켓이 中央으로 整列되도록 하고 싶었기 때문에, 中間 피켓을 基準으로 왼쪽 오른쪽에 있는 피켓들이 얼마나 움직여야 하는지를 調整했다. 높이도 마찬가지로 計算했다.

이렇게 立體的으로 잘 쌓인 피켓을 바탕으로 스크롤 方向에 따라 떨어뜨리고 다시 올려보내는 等의 效果를 具現하게 됐다.

事實 위의 過程 外에도 스크롤에 따라 適切한 2次元 配列 上의 피켓 救하기, 피켓을 건너뛰지 않게 處理하기 等 正말 생각할 것들이 많았다. 實際로 코드를 作成하는 時間보다 驅動 方式을 머릿속으로 整理하고, 正確한 計算을 하기 위해 옆에 空冊을 두고 그림을 그리거나 計算을 하는 時間이 더 많았던 것 같다. 때로는 힘들고 漠漠한 瞬間도 있었지만 旣存에 없었던 새로운 效果를 만들어 내야 했던 만큼 正말 細細한 計算과 苦悶이 過程이 많았던 새로운 經驗을 한 것 같다.

開發이 完了된 以後에도 正말 수많은 테스트를 거쳤다. 피켓의 크기나 떨어지는 타이밍같은 些少한 問題에서부터 훨씬 큰 問題들까지 만났다. 잘못된 位置에 'position: sticky'라는 코드 한 줄을 揷入한 까닭에 페이지가 미친듯이 버벅거렸던 적도 있고, 發刊 當日에 三星인터넷에서만 效果가 乖常하게 보인다는 提報를 받기도 했다.

結果的으로는 모두 解決했다. 하나부터 열까지 直接 짠 코드이기에 誤謬를 만날 때마다 ‘이거 그때 苦悶했던 部分인데’, ‘這番에 熱心히 計算했던 部分인데’ 하며 생각이 났다. 勿論 問題를 만날 때마다 唐慌했고 더 꼼꼼히 보지 못한 내가 怨望스러웠다. 하지만 '남의 코드를 使用했을 때는 絶對 빠르게 誤謬를 解決하지 못했겠지'라는 생각이 드니 뿌듯함과 喜悅感이 느껴졌다.

事實 모두가 이러한 뿌듯함과 喜悅感을 느꼈으면 좋겠다. 이 效果는 모두의 協業, 모두의 苦悶이 합쳐져 만들어진 것이기 때문이다. 그리고 特히 開發者로서 내가 만든 結果物을 본 다른 팀員들이 ‘내가 熱心히 머리 싸매고 했던 苦悶들이 絶對 헛된게 아니었구나’라고 생각했다면 더 없이 좋고 보람찰 것 같다.