단연코 가장 멋진 3D 웹사이트 중 하나
(bruno-simon.com)- 웹 개발자 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 기반 렌더링의 실제 구현 예시로, 차세대 웹 그래픽의 방향을 보여주는 작품
회사 핵심 프로젝트에 tjs쓰자는 의견 무시하고 babylon.js 쓰자고 했던 개발이사님.. 본인의 결정에 책임 지기는 커녕 회사와 인력을 빼내고 새 회사 차린 개발이사님.. 잘 살고 계시죠?
Hacker News 의견
- 로딩 원이 다 찼는데도 실제로는 몇 초 더 걸림
새로고침 1~2번 하면 잘 뜨고, 전체적으로 멋진 작업임
다만 더 멀리 줌아웃할 수 있으면 좋겠음. Bruno에게 찬사를 보냄 - 로딩이 느린 사람들을 위해 설명하자면, 이건 포트폴리오 사이트인데, 아늑한 게임 스타일의 AWSD 조작으로 지프 같은 차량을 몰며 돌아다니는 구조임
각 소셜 미디어를 상징하는 작은 신전 오브젝트들이 있고, 차로 들이받으면 넘어가지만 링크는 여전히 클릭 가능함
포털에 돌진하면 ‘혼돈의 신에게 제물 바치기’ 카운터가 올라가는 등 전역 상태도 존재함
전체적으로 아트 스타일이 일관되고, 5분 정도 탐험해본 결과 꽤 완성도 높게 느껴졌음
다만 HN 제목처럼 “가장 멋진 3D 웹사이트”라기보단, 아주 잘 만든 포트폴리오 사이트 정도로 보는 게 맞을 듯함- 아이폰 터치로 조작했는데 Genshin Impact를 하는 느낌이었음
- iOS의 ddg 브라우저에서도 놀랍게 잘 작동했음. 꽤 인상적이었음
- AWSD가 WASD의 오타냐고 묻고 싶었음
- 25년 전으로 돌아간다면 15살의 나는 이런 “게임”에 수십 시간을 쏟았을 것 같음
예전에 시리얼 상자에 들어있던 무료 게임 Chex Quest에도 그랬음
그런데 지금은 사이트를 30초 정도 둘러보고 “멋지네” 하고는 바로 닫았음
아마 (A) 시간 가치의 변화, (B) 게임 몰입 기준의 상승, (C) 이미 너무 많은 시간을 게임에 쓴 탓인 듯함- 나도 ChexQuest를 정말 좋아했음. 최근에도 다시 해봤고, 시애틀의 RE-PC에서 1달러에 CD를 발견해 바로 샀음
- 예전엔 게임 접근성이 지금보다 훨씬 낮았던 것 같음. 지금은 Lonely Mountain: Downhill 같은 더 풍부한 게임이 많음
- 나는 요즘 뭔가를 하지 않는다는 죄책감이 커서, 결국 아무것도 잘 못 하게 됨
- 결국 나이를 먹은 것이 이유일지도 모름
- 이 사이트는 예전에 HN에 올라왔던 The Messenger를 떠올리게 함. 그걸 더 좋아할 수도 있을 듯함
- 사이트는 멋지지만 혁신적이진 않음
지난 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 지원이 비활성화되어 있음. 구현 상태 문서 참고
- Edge에서는 잠깐 멈췄다가 다시 돌아와 3D 장면이 표시됨
- Windows의 Chrome 버전 142.0.7444.177에서는 문제없이 작동했음
- 모바일에서도 잘 작동해서 놀라웠음
다만 손가락으로 운전할 때 iOS의 롱프레스 메뉴가 자주 떠서 몰입이 깨짐 - 정말 믿기 힘들 정도로 재미있고 기발한 사이트였음
세밀한 디테일과 즐거움이 느껴졌고, 아들과 함께 레이싱 미니게임을 하며 놀았음
20초 기록을 낸 사람들이 어떻게 한 건지 궁금했음. 혹시 속도 부스트가 있는지?- Shift 키가 부스트임. 시작 지점 근처의 키보드에서 조작법을 볼 수 있음
- 강의는 훌륭하지만, 이 사이트는 그만큼 감흥이 크지 않음
기술의 진짜 가치는 “이걸로 이전에 못 하던 걸 할 수 있느냐”에 있다고 생각함
예를 들어, 석기시대 사람이 강철 도끼를 발견했을 때 중요한 건 도끼 자체가 아니라 금속공학임
마찬가지로 bitcoin보다 중요한 건 암호 기술, threejs보다 중요한 건 그걸로 무엇을 새롭게 만들 수 있느냐임
개인적으로는 threejs, react-three-fiber, shader 등을 활용해 훨씬 더 많은 걸 할 수 있다고 느낌
내가 생각하는 “멋짐”은 세상을 다르게 보게 만드는 것임
예시로 이 CodePen 데모를 들 수 있음 - 멋지긴 하지만 웹사이트로서의 UX는 별로임
3D를 쓴 이유를 정당화할 만큼의 탐색 경험 혁신을 기대했는데, 그 부분은 아쉬움