# 단연코 가장 멋진 3D 웹사이트 중 하나 > Clean Markdown view of GeekNews topic #24963. Use the original source for factual precision when an external source URL is present. ## Metadata - GeekNews HTML: [https://news.hada.io/topic?id=24963](https://news.hada.io/topic?id=24963) - GeekNews Markdown: [https://news.hada.io/topic/24963.md](https://news.hada.io/topic/24963.md) - Type: GN+ - Author: [neo](https://news.hada.io/@neo) - Published: 2025-12-10T10:32:57+09:00 - Updated: 2025-12-10T10:32:57+09:00 - Original source: [bruno-simon.com](https://bruno-simon.com/) - Points: 30 - Comments: 4 ## Summary 웹 개발자 **Bruno Simon**의 3D 포트폴리오 웹사이트로 사용자가 작은 자동차를 몰며 가상 세계를 탐험하는 **인터랙티브 웹 경험**을 제공합니다. **Three.js**와 WebGPU를 결합해 실시간 3D 렌더링을 구현했으며, 업적 시스템과 Whisper 메시지 등 게임적 요소로 웹사이트를 하나의 플레이 공간처럼 확장했습니다. 전체 프로젝트는 GitHub에 **MIT 라이선스**로 공개되어, 차세대 3D 웹 인터페이스를 학습하거나 실험하려는 개발자에게 훌륭한 참고 사례가 될 수 있습니다. ## Topic Body - 웹 개발자 **Bruno Simon**이 제작한 3D 포트폴리오 사이트로, 사용자가 **자동차를 운전하며 탐험**하는 인터랙티브 환경을 제공 - **Three.js**를 기반으로 구축되어, WebGL과 WebGPU를 모두 활용한 **실시간 3D 렌더링**을 구현 - 사이트 내에는 **업적 시스템**, **비밀 요소**, **방문자 메시지(Whisper)** 기능 등 게임적 요소가 포함 - **GitHub**에 전체 코드와 Blender 파일이 **MIT 라이선스**로 공개되어 있으며, 음악은 **CC0 라이선스**로 자유 사용 가능 - 웹 기술과 창의적 인터랙션을 결합한 사례로, **3D 웹 경험의 가능성**을 보여주는 대표적 포트폴리오 --- ### Bruno Simon의 3D 포트폴리오 개요 - 웹 기반 3D 세계를 탐험하며 제작자의 프로젝트와 실험을 체험할 수 있는 **인터랙티브 포트폴리오** 형태 - 사용자는 자동차를 조종해 가상 공간을 돌아다니며 다양한 오브젝트와 상호작용 가능 - “Don’t break anything!”이라는 문구로 유쾌한 탐험 분위기 조성 - **WASD, 화살표, 스페이스, 엔터 등 키보드 조작**과 **터치·게임패드 입력**을 모두 지원 - 이동, 점프, 브레이크, 부스터, 혼, 서스펜션 등 다양한 조작 기능 제공 ### 게임적 요소와 업적 시스템 - 사이트에는 **38개의 업적(Achievements)** 이 존재하며, 특정 행동을 통해 달성 가능 - 예: “Traveler”(모든 지역 방문), “Cookie Clicker”(쿠키 1000개 수락), “Flip of faith”(백플립 성공) 등 - 주행 거리, 날씨 체험, 폭발 상자 파괴 등 다양한 조건 포함 - 업적 달성 시간과 진행률이 실시간으로 표시되며, **서버 점수판(Leaderboard)** 기능도 존재 - 단, 서버가 오프라인일 경우 점수 저장 불가 ### Whisper 및 커뮤니티 기능 - 방문자는 **Whisper** 기능을 통해 짧은 메시지를 남길 수 있음 - 최대 30자, 한 사용자당 한 개의 메시지 가능 - 새 메시지가 추가되면 오래된 메시지는 삭제 - 욕설 금지 및 국가별 플래그 선택 가능 - Whisper 서버가 오프라인일 경우 메시지 기능은 비활성화 ### 기술 스택 및 오픈소스 구성 - 3D 렌더링은 **Three.js**로 구현 - Three.js는 **mr.doob**이 만든 라이브러리이며, **Sunag**이 추가한 **TSL(Three.js Shading Language)** 덕분에 WebGL과 WebGPU 모두 지원 - **물리 엔진**은 **Rapier**, **오디오**는 **Howler.js**, **폰트**는 **Amatic SC**와 **Nunito** 사용 - 전체 소스코드는 **GitHub (brunosimon/folio-2025)** 에 공개되어 있으며, **MIT 라이선스** 적용 - Blender 파일도 포함되어 있어 자유롭게 수정 및 학습 가능 - 서버 코드는 보안상 비공개지만, 포트폴리오는 서버 없이도 작동 ### 음악 및 추가 자료 - 배경 음악은 **Kounine**이 포트폴리오를 위해 특별 제작 - **CC0 라이선스**로 배포되어 자유롭게 다운로드 및 재사용 가능 - GitHub 저장소 내 `/static/sounds/musics` 경로에서 제공 - **Three.js Journey**라는 온라인 강좌를 통해 Three.js 학습 자료도 제공 - Three.js를 활용한 3D 웹 제작 전 과정을 다룸 - **YouTube Devlog 시리즈**를 통해 포트폴리오 개발 과정을 기록 - 완성 이후에도 마지막 영상 제작을 계속 진행 중 ### 전체 의의 - Bruno Simon의 포트폴리오는 **웹 기술, 게임 인터랙션, 예술적 표현**이 결합된 사례 - 오픈소스와 자유 라이선스를 통해 **학습·재사용 가능한 3D 웹 프로젝트**로 활용 가능 - **Three.js 생태계**와 **WebGPU 기반 렌더링**의 실제 구현 예시로, 차세대 웹 그래픽의 방향을 보여주는 작품 ## Comments ### Comment 47544 - Author: m00nlygreat - Created: 2025-12-10T21:19:11+09:00 - Points: 1 그냥 게임이잖아 .. ### Comment 47519 - Author: wedding - Created: 2025-12-10T15:12:33+09:00 - Points: 1 회사 핵심 프로젝트에 tjs쓰자는 의견 무시하고 babylon.js 쓰자고 했던 개발이사님.. 본인의 결정에 책임 지기는 커녕 회사와 인력을 빼내고 새 회사 차린 개발이사님.. 잘 살고 계시죠? ### Comment 47507 - Author: xguru - Created: 2025-12-10T12:10:02+09:00 - Points: 1 테스트하느라 잠깐 띄워놓고 있었더니.. 제 M1 맥북에 비행기가 뜨네요. 근데 훌륭하긴 합니다. ### Comment 47496 - Author: neo - Created: 2025-12-10T10:32:57+09:00 - Points: 1 ###### [Hacker News 의견](https://news.ycombinator.com/item?id=46206531) - 로딩 원이 다 찼는데도 실제로는 몇 초 더 걸림 새로고침 1~2번 하면 잘 뜨고, 전체적으로 **멋진 작업**임 다만 더 멀리 **줌아웃**할 수 있으면 좋겠음. Bruno에게 찬사를 보냄 - 로딩이 느린 사람들을 위해 설명하자면, 이건 **포트폴리오 사이트**인데, 아늑한 게임 스타일의 AWSD 조작으로 지프 같은 차량을 몰며 돌아다니는 구조임 각 소셜 미디어를 상징하는 **작은 신전 오브젝트**들이 있고, 차로 들이받으면 넘어가지만 링크는 여전히 클릭 가능함 포털에 돌진하면 ‘혼돈의 신에게 제물 바치기’ 카운터가 올라가는 등 전역 상태도 존재함 전체적으로 **아트 스타일이 일관**되고, 5분 정도 탐험해본 결과 꽤 완성도 높게 느껴졌음 다만 HN 제목처럼 “가장 멋진 3D 웹사이트”라기보단, 아주 잘 만든 포트폴리오 사이트 정도로 보는 게 맞을 듯함 - 아이폰 터치로 조작했는데 **Genshin Impact**를 하는 느낌이었음 - iOS의 ddg 브라우저에서도 놀랍게 잘 작동했음. 꽤 인상적이었음 - AWSD가 **WASD**의 오타냐고 묻고 싶었음 - 25년 전으로 돌아간다면 15살의 나는 이런 “게임”에 **수십 시간**을 쏟았을 것 같음 예전에 시리얼 상자에 들어있던 무료 게임 [Chex Quest](https://en.wikipedia.org/wiki/Chex_Quest)에도 그랬음 그런데 지금은 사이트를 30초 정도 둘러보고 “멋지네” 하고는 바로 닫았음 아마 (A) 시간 가치의 변화, (B) 게임 몰입 기준의 상승, (C) 이미 너무 많은 시간을 게임에 쓴 탓인 듯함 - 나도 **ChexQuest**를 정말 좋아했음. 최근에도 다시 해봤고, 시애틀의 RE-PC에서 1달러에 CD를 발견해 바로 샀음 - 예전엔 게임 접근성이 지금보다 훨씬 낮았던 것 같음. 지금은 **Lonely Mountain: Downhill** 같은 더 풍부한 게임이 많음 - 나는 요즘 뭔가를 하지 않는다는 **죄책감**이 커서, 결국 아무것도 잘 못 하게 됨 - 결국 **나이를 먹은 것**이 이유일지도 모름 - 이 사이트는 예전에 HN에 올라왔던 [The Messenger](https://messenger.abeto.co/)를 떠올리게 함. 그걸 더 좋아할 수도 있을 듯함 - 사이트는 멋지지만 **혁신적**이진 않음 지난 10년간 수많은 three.js/babylon.js 데모가 있었고, 이건 상위 10% 정도 수준임 재미있고 품질도 높지만, 새로운 건 없고 **정보 전달 효율**은 낮음 인디 3D 게임과 비교하면 완성도 면에서도 아직 거리가 있음 - 내 브라우저 탭이 **크래시**났음 - OP는 “가장 혁신적”이 아니라 “가장 멋진” 웹사이트라고 했음. 비슷한 수준의 다른 데모들도 공유해줄 수 있는지 궁금함 - Bruno의 **Threejs 강의**는 훌륭함. 지금 2/3 정도 수강 중인데, 체계적이고 문서화도 잘 되어 있음 threejs 초보의 추천이 의미가 있다면, 적극 추천함 - **Chrome**에서는 작동하지 않고 탭이 멈췄음 - 내 W11과 MacOS 15.7.2에서는 Chrome에서 잘 작동했음 - Linux의 **Firefox**에서도 완벽히 작동했음 - Linux의 Chrome은 **WebGPU 지원**이 비활성화되어 있음. [구현 상태 문서](https://github.com/gpuweb/gpuweb/wiki/Implementation-Status) 참고 - Edge에서는 잠깐 멈췄다가 다시 돌아와 3D 장면이 표시됨 - Windows의 Chrome 버전 142.0.7444.177에서는 문제없이 작동했음 - 모바일에서도 잘 작동해서 놀라웠음 다만 손가락으로 운전할 때 iOS의 **롱프레스 메뉴**가 자주 떠서 몰입이 깨짐 - 정말 믿기 힘들 정도로 **재미있고 기발한** 사이트였음 세밀한 디테일과 즐거움이 느껴졌고, 아들과 함께 **레이싱 미니게임**을 하며 놀았음 20초 기록을 낸 사람들이 어떻게 한 건지 궁금했음. 혹시 **속도 부스트**가 있는지? - Shift 키가 부스트임. 시작 지점 근처의 키보드에서 조작법을 볼 수 있음 - 강의는 훌륭하지만, 이 사이트는 그만큼 감흥이 크지 않음 기술의 진짜 가치는 “이걸로 이전에 못 하던 걸 할 수 있느냐”에 있다고 생각함 예를 들어, 석기시대 사람이 강철 도끼를 발견했을 때 중요한 건 **도끼 자체가 아니라 금속공학**임 마찬가지로 bitcoin보다 중요한 건 **암호 기술**, threejs보다 중요한 건 그걸로 무엇을 새롭게 만들 수 있느냐임 개인적으로는 threejs, react-three-fiber, shader 등을 활용해 훨씬 더 많은 걸 할 수 있다고 느낌 내가 생각하는 “멋짐”은 세상을 다르게 보게 만드는 것임 예시로 [이 CodePen 데모](https://codepen.io/prisoner849/full/wBGQYvy)를 들 수 있음 - 멋지긴 하지만 **웹사이트로서의 UX**는 별로임 3D를 쓴 이유를 정당화할 만큼의 **탐색 경험 혁신**을 기대했는데, 그 부분은 아쉬움