- 웹 개발자 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 기반 렌더링의 실제 구현 예시로, 차세대 웹 그래픽의 방향을 보여주는 작품