싱가포르의 모든 지하철 노선을 3D로 바이브코딩해봤음 (three.js)

작년에 싱가포르 지하철 시스템의 승객 흐름을 3주 만에 바이브코딩으로 뚝딱 만들어봤거든.

올해는 이걸 Opus 5.5로 3D 시뮬레이션으로 만들어보면 어떨까 싶더라고. 😃

과정 / 워크플로우

솔직히 말해서 뭐 거창한 워크플로우 같은 건 없었어. 그냥 Opus한테 고강도 작업으로 거의 다 맡겨버렸거든. 그나마 다행이었던 건, 예전에 지하철 노선도랑 역 위치 데이터를 이미 디지털화해 둔 게 있어서 그걸 기반으로 만드는 건 일사천리였어. 내가 수정한 부분들은 대부분 직접 시뮬레이션 돌려보면서 조금씩 손본 게 전부야. Claude Code의 아티팩트 기능을 써서 만들기 전에 시각적인 결정을 미리 내릴 수 있었던 게 꽤 도움 됐어.

도구 / 데이터

three.js로 만들었어. 데이터는 싱가포르 육상교통청(LTA)이나 OpenStreetMap 같은 공개된 소스나 온라인 사진들을 참고했지. 안내 방송은 ElevenLabs로 현지화했고, 테마곡은 전부 파이썬으로 합성했어. 트레일러는 게임 내에서 카메라 스크립트 짜서 직접 촬영한 거야.

개발 후기

이번에 만들면서 제일 크게 느낀 건 HUD(이것도 이번에 처음 알게 된 약어임 😆) 디자인하는 게 진짜 일이라는 거였어. 액션 버튼을 어디에 둘지, 현재 위치 정보는 어디에 띄울지 같은 거 정하는 게 생각보다 빡세더라고. 직관적으로 만들거나, 왜 이렇게 배치해야 하는지 설명하는 과정에서 몇 번이나 갈아엎었는지 몰라.

https://metrograf.xyz에서 직접 열차를 운전해 보거나 탑승해 볼 수 있어. 무료고 모바일이랑 데스크톱에서 똑같이 잘 돌아가.

피드백이나 궁금한 거 있으면 언제든 물어봐!