미로 같은 역을 3D 지도로 만들었어요
일본 도쿄에 가본 분들은 아실 텐데, 신주쿠역은 정말 악명 높거든요. 하루 이용객이 수백만 명에 출구만 200개가 넘어서 "한 번 들어가면 못 나온다"는 농담이 있을 정도예요. 기네스북에 세계에서 가장 붐비는 역으로 오르기도 했고요. 이 복잡한 역 내부를 웹 브라우저에서 3D로 둘러볼 수 있는 데모가 공개됐어요.
특별한 앱 설치도 필요 없어요. 그냥 브라우저에서 링크만 열면 마우스로 돌리고, 확대하고, 층별로 나눠서 역 내부 구조를 입체적으로 볼 수 있거든요. 평면 지도로는 도저히 감이 안 오던 지하 통로와 환승 구조가 한눈에 들어와요. 길치인 저 같은 사람한테는 이런 게 정말 반갑죠.
three.js로 어떻게 만들까
이 데모의 핵심 기술은 "three.js"라는 자바스크립트 라이브러리예요. 이게 뭐냐면, 원래 브라우저에서 3D 그래픽을 그리려면 "WebGL"이라는 저수준 기술을 써야 하는데 이게 굉장히 복잡하고 코드가 길거든요. three.js는 그 복잡한 걸 쉽게 감싸줘서, 우리가 3D 장면을 좀 더 직관적으로 만들 수 있게 도와주는 도구예요.
three.js로 3D 화면을 만들 때는 보통 세 가지 개념이 등장해요. 첫째는 "장면(Scene)", 3D 물체들이 놓이는 무대예요. 둘째는 "카메라(Camera)", 그 무대를 어느 각도에서 볼지 정하는 눈이죠. 셋째는 "렌더러(Renderer)", 무대와 카메라를 받아서 실제 화면에 픽셀로 그려주는 역할이에요. 여기에 건물 모양 데이터(주로 glTF 같은 3D 모델 포맷)를 얹고, 조명과 재질을 입히면 우리가 보는 입체 지도가 완성돼요.
신주쿠역처럼 층이 여러 개고 구조가 복잡한 공간은 데이터를 어떻게 정리하느냐가 관건이에요. 각 층을 따로 켜고 끌 수 있게 나누고, 너무 많은 폴리곤(3D 물체를 이루는 삼각형 조각)을 한꺼번에 그리면 브라우저가 버벅이니까 성능 최적화도 신경 써야 하죠. 보이지 않는 부분은 안 그리거나, 멀리 있는 물체는 단순하게 표현하는 식의 최적화가 이런 규모에서는 필수예요.
실내 지도 기술의 흐름
사실 "실내 3D 지도(indoor mapping)"는 요즘 꽤 뜨거운 분야예요. 구글 지도도 대형 공항이나 쇼핑몰 실내 지도를 제공하고, 맵박스(Mapbox GL)나 deck.gl, 세슘(CesiumJS) 같은 도구들은 도시 전체를 3D로 렌더링하는 데 쓰이거든요. 이런 걸 크게 보면 "디지털 트윈(digital twin)", 즉 현실 공간을 디지털로 똑같이 복제해서 시뮬레이션하고 분석하는 기술 흐름의 일부예요.
이 신주쿠역 데모가 인상적인 건, 거대한 상용 플랫폼 없이도 오픈소스 three.js만으로 이 정도 퀄리티의 실내 내비게이션 경험을 만들 수 있다는 걸 보여줬다는 점이에요. 개인 개발자도 충분히 도전해볼 만한 영역이라는 거죠.
한국 개발자에게
당장 써먹을 데가 많아요. 지하철 환승 안내, 대형 병원이나 코엑스 같은 전시장 길찾기, 부동산 매물 3D 투어, 실내 주차장 안내 같은 서비스에 three.js 기반 3D 지도를 붙일 수 있거든요. 특히 한국은 지하상가와 복합 환승센터가 발달해 있어서 실내 3D 지도 수요가 은근히 커요.
three.js는 공식 문서와 예제가 정말 풍부해서 입문하기 좋아요. WebGL을 직접 배우기 전에 three.js로 감을 잡고, 나중에 셰이더나 성능 최적화가 필요할 때 저수준으로 내려가는 순서를 추천해요. 처음엔 회전하는 정육면체 하나부터 시작해서 점점 살을 붙여가면 생각보다 금방 익숙해지거든요.
복잡한 현실 공간을 브라우저 안에 그대로 담아내는 시대네요. 여러분이라면 이 3D 실내 지도 기술을 어떤 서비스에 붙여보고 싶으세요?
🔗 출처: Hacker News