크리에이티브 코딩 밋업 인사이트 - 1. MAP 🗺️

크리에이티브 코더 정효님이 진행하는 커뮤니티 '둥지'에서 운영하는 모임 '크리에이티브 코딩 밋업'에 참여했다.

'프로그래밍 또는 프로그래밍적인 방법을 활용한 창의적이고 예술적인 활동에 관심 갖고 있는 사람들의 네트워킹 모임'으로 소개하고 있다.

이번 봄에 살짝 새롭게 개편되어 정효님이 하나의 주제에 대해 한시간 가량 인사이트를 공유해준 후 한시간 동안은 참여자들이 주제와 관련된, 또는 가지고 있던 인사이트를 공유하는 방식이다.

 

개편 후 밋업의 첫 주제인 <지도>에 대해 받은 인사이트와 이후에 더 조사한 내용을 내 나름의 관점대로 정리해본다.

 

1. 초기의 디지털 지도

언제 처음으로 디지털 지도가 만들어졌냐고 구글에 물어보면 이렇게 답해준다. "디지털 지도는 1960년대 인구조사국의 DIME 지도와 함께 등장했습니다. 이러한 최초의 디지털 지도는 인구 조사 지역이나 도시 내의 인구와 같은 장소별 데이터를 분석하는 데 사용되었습니다. 디지털 지도는 공간 분석을 위한 지리정보시스템(GIS)으로 이어졌습니다."

 

 

지역을 분할하여 만든 인구조사 지도

 

위 인구 조사 참여 홍보 영상을 보면 인구 조사 시 인구 수를 중복해서 세지 않는 것이 중요했으며 이를 위한 방법으로 큰 영역을 작은 영역으로 쪼개어 각 인구조사원에게 배분하고 조사한 정보를 컴퓨터가 읽게해 결과를 프린터했다고 나온다. 

 

네이버 지도 확대/축소 시 볼 수 있는 로딩 화면

 

현대의 디지털 지도(구글맵, 네이버 지도 등)는 격자로 이미지를 잘라 확대, 축소 시에 해당 이미지를 로딩하는 형식을 띄는데 아마 위 인구조사 지도가 이런 격자 형태의 데이터 시초이지 않을까 싶다.

 

+ 임의로 인터넷 속도를 조절할 수 있는 TIP!

요즘엔 환경이 잘 갖춰져 있어 그리드 형태로 로딩이 되는 경험을 사용자가 인지하기 어려운데, 크롬의 개발자 도구에 인터넷 속도를 임의로 설정할 수 있는 기능이 있어 확인해볼 수 있다. 만든 서비스나 사이트가 느린 인터넷 환경의 사용자에게 어떤 경험을 제공하는지 시뮬레이션 해보는데 도움이 되는 기능이다.

 

크롬 환경에서 인터넷 속도 조절하는 법

 

화면에서 마우스 우클릭 ➡ 개발자 도구 클릭 ➡ 네트워크 탭 클릭 ➡ 쓰로틀링' 드롭다운 메뉴 클릭 ➡ 원하는 네트워크 환경 선택

 

2. 일상 속의 지도 UI

게임 속에서 재미있는 지도 UI를 많이 찾아볼 수 있었다. 각각 어떤 역할을 하기 위해 만들었는지 분석해보면 게임 외의 서비스나 사이트에도 충분히 적용할 수 있는 아이디어가 많이 있었다.

 

1) 미니맵

미니맵은 주로 게임 중 내가 위치한 곳이 전체 맵 중 어디인지 알려주는 네비게이터 역할을 하지만 기능을 더해 ¹ 진척도, ² 게임 진행을 예상할 수 있게 하거나 ³ 앞으로 갈 맵을 선택하는 등의 도움을 주기도 한다. 지도가 단순히 위치를 보여주는 수단이 아닌 어떤 행동을 위한 정보를 제공하고 다음 스텝을 유도할 수 있음을 알게 해준 사례다.

1. 슈퍼메트로이드(Super Metroid) - 우측 상단, 진행한 맵은 분홍색으로 표시된다.

2. 디펜더(Defender) - 중앙 상단, 진행 전후의 맵을 보여준다.

3. 디아블로2(DIABLO II) - 맵을 보며 다음 경로를 선택할 수 있다.

2) 말판으로써의 지도 - 비례의 역전

보드게임에서 종종 볼 수 있는 말판도 하나의 지도다. 이 파트에선 비례에 대한 내용을 다뤘는데, 실제 비례와 다르게 표현함으로써 강조되는 부분이 달라지는 것을 알 수 있었다. 한 판으로 표현된 지형에 큼직한 말을 놓음으로써 ¹ 진행 파악을 더 쉽게 한다거나, 실제 지역보다 집이나 아이템을 크게 보여주어 ² 중요한 부분의 표현에 집중한다던가 등이다.

Inscryption - 말의 비례를 크게 설정해 진행중인 경로를 한눈에 볼 수 있다.

2. 삼국지 - 실제 비례보다 크게 표현한 성과 깃발을 통해 성을 공략하는 게임의 특성을 잘 드러냈다.

 

3) 감추기/채우기

지도의 일부분을 가리거나 채워나가는 지도 UI 사례들도 있었다.

¹ 감춰진 지도 UI는 주로 탐구를 목적으로 사용되었다. 지도에서 탐구할 정보가 정해져 있고 사용자가 모든 정보를 탐색하는 것이 좋은 경우에는 감춰진 지도 UI를 활용할 수 있을 것 같다.

1. 스타크래프트 - 좌측 하단, 유저가 접근한 지역만 미니맵에 표시된다.

 

² 채우는 지도 UI는 주로 창작에 사용됐다. 이 경우엔 육각형, 사각형 등의 타일 구조를 많이 썼는데, 실제 지형이나 맵이 정해져 있지 않지만 지도처럼 지형화 시킬 수 있는 개념에 활용하면 어떨까 싶었다. 마인드맵과 같이 머릿속의 개념을 화면에 구조화 하는 경우를 예로 들 수 있을 것 같다.

2. Dorfromantik - 육각형 모양의 블록을 연결해 전체 맵을 완성하는 게임

 

3. 지도의 요소 분석과 자동 생성

여러 지도의 사례와 함께 실제 지도의 요소와 제작에 대한 이야기도 나누었다.

1) 점, 선, 면

디자인적인 구성요소마다의 역할을 정리해봤다. 위도, 경도를 통해 웹상에서 내 위치를 나타내거나 지도를 확대/축소 하며 렌더링 하는 방식(1. 초기의 디지털 지도에서 언급한) 등 웹에서 구현해볼 수 있는 방식을 함께 보여주셨다.

• 점 - 나, 위치
• 선 - 경로
• 면 - 더 안으로, 더 밖으로

 

2) 절차적 생성 (Procedural generation)

이렇게 지도의 요소에 대해 파악을 하고나면 지형, 공간에 대한 정의를 내리고 자동적으로 생성할 수 있는 프로그래밍이 가능해진다. 여러 게임 개발자들이 지도의 요소를 설계하여 자동화하는 시도를 하고 있었다. 게임 외에 어떤 사례에 지도 자동화를 적용할 수 있을까? 정효님은 업스케일링 AI를 이용해 무한으로 확대되는 지도를 만들었다. 확대한 지형에 맞춰 AI가 업스케일링한 이미지가 노출되고 그 이미지가 확대 되면서 그 이미지가 다시 업스케일되는 방식이다.

 

 

 

4. 마치며

미니맵, 보드게임, AI 모두 알고 있던 개념이지만 이 개념들을 지도와 UI에 연관지어 생각해본적은 없었다. 정효님은 어떻게 이런 인사이트를 가지고 있을까 감탄했다. 내가 여태 생각하고 있었던 지도의 개념을 확장시키는 계기가 되었다. 이전엔 그저 만들어진 지도 서비스를 임베드하거나 특정 지역과 포인트를 표현하는데 그쳤다면 지도를 통해 사용자에게 어떤 경험을 줄 수 있을지 고민하고 적절한 UI를 고민해볼 수 있을 것 같다. 함께 참여한 분들도 많은 사례를 공유해주셔서 마무리와 함께 남겨본다.

 

1) 팩맨해튼

packmanhattan

 

오프라인 팩맨게임을 맨해튼 지도에 생중계 해줬던 2004년 프로젝트. 오프라인과 연결된다는 점에서 포켓몬고의 전신이라고 할 수 있지 않을까..

- pacmanhattan.com

 

2) 후드맵스

hoodmaps

집단지성으로 만들어지는 핫플 지도. 표시되는 키워드가 귀엽고 재밌다😊 (우리 동네는 재미없음..) 이렇게 사람들이 참여해서 완성되는 지도의 개념을 <커뮤니티 맵핑>이라 한다.
- hoodmaps.com

 

3) 라디오가든

전세계에 송출되는 라디오방송을 실시간으로 들을 수 있는 3D지도. 평양 라디오도 있다.
- radio.garden

 

둥지 인스타그램 @nest.cc