백만 달러는 실제로 어떻게 생겼을까? 3D 툴을 만들어 확인했습니다.

Source: Dev.to

The question

몇 달 전, 공동 창업자 Moris가 나에게 대답할 수 없는 질문을 던졌습니다: “지금 누군가가 당신에게 백만 달러를 건네준다면, 실제로 그 돈은 얼마나 많은 공간을 차지할까요?”

우리는 인터넷에 있는 대부분의 “돈” 도구가 단순히 숫자 표에 불과하다는 것을 깨달았습니다. 숫자는 스프레드시트에는 좋지만 규모를 보여주기엔 형편없습니다. 실제 부피를 보기 전까지는 $10,000와 $100,000의 차이를 진정으로 느낄 수 없습니다.

Money Visualiser

우리는 지난 몇 달 동안 Money Visualiser라는 WebGL(현재 WebGPU 진행 중) 샌드박스를 만들었습니다. 여기서는 금액을 입력하고 두 가지 통화를 선택하면 3D 지폐 더미가 실제처럼 나타납니다. 중앙은행 사양에서 82가지 서로 다른 지폐의 정확한 치수를 가져와서, 일본 엔 지폐 더미는 미국 달러 지폐 더미보다 더 넓고 높게 보이도록 구현했습니다—실제와 똑같이.

How it works

• Stacking logic – 은행 표준 “스트랩”과 “브릭”을 사용해 돈을 금고에 보관하는 방식과 정확히 동일하게 쌓이도록 했습니다.
• Scale – 환경에는 “항공모함” 씬이 포함되어 있어, 트릴리언 달러가 벽을 뚫지 않고도 충분히 크게 표시됩니다.

Technical details

• Framework – Next.js 16 (App Router)와 Three.js, React‑Three‑Fiber 사용.
• Physics – 실제 지폐 취급 방식을 기반으로 한 맞춤형 스태킹 알고리즘.
• Performance – 300 k+ 개별 지폐를 60 fps로 렌더링.
• Live data – 5단계 폴백 시스템을 이용해 환율을 30 초마다 갱신.

Live demo

moneyvisualiser.com 에서 확인해 보세요. 회원가입도, 함정도 없습니다—추상적인 숫자를 조금 더 실감나게 만들기 위한 프로젝트입니다. 우리가 사용한 Drei/R3F 설정에 대해 다른 개발자들의 의견을 듣고 싶습니다.