portfolio3d

이력서를 스크롤하는 대신 작은 차량을 움직여 경력과 작업물을 발견하게 하면 어떤 경험이 되는지 실험했습니다.

What I explored

portfolio3d는 경력과 프로젝트를 물리 법칙이 있는 3D 공간에 배치한 인터랙티브 포트폴리오입니다. 사용자가 차량을 직접 조작해 공간을 이동하고, 경력 구역에 들어가면 상세 정보가 열리는 탐색 방식을 만들었습니다.

텍스트와 이미지가 놓인 장면을 보는 데 그치지 않고, 이동·충돌·발견이라는 행동이 정보 탐색 자체가 될 수 있는지가 핵심 질문이었습니다.

What I built

Three.js로 장면, 조명, 안개, 그림자와 후처리를 구성하고 Cannon.js의 RaycastVehicle로 차체, 네 개의 바퀴, 조향·가속·제동과 서스펜션을 구현했습니다. 카메라와 조명은 차량을 따라 이동하고, 키보드와 마우스 입력은 렌더링·물리 업데이트와 분리된 시스템으로 처리했습니다.

경력 데이터는 바닥에 배치한 2D·3D 텍스트와 이미지 빌보드로 변환했습니다. 3D 텍스트에도 물리 바디를 연결해 차량과 충돌하게 만들고, 특정 공간에 차량이 들어오면 HTML 상세 모달을 여는 트리거 구역을 추가했습니다. 장면, 물리 세계, 엔티티와 입력·카메라·조명 시스템을 모듈로 분리해 실험 중 렌더링과 상호작용을 독립적으로 조정할 수 있게 했습니다.

Where it stopped

차량으로 한 개의 경력 구역을 탐색하고 상세 정보를 여는 핵심 상호작용까지 구현했습니다. 여러 프로젝트를 공간에 배치하는 구조도 만들었지만 실제 실행 경로에서는 비활성화돼 있고, 예시 데이터와 임시 이미지가 남아 있습니다. 모바일 조작, 접근성, 로딩 최적화와 전체 콘텐츠 구성까지 이어지기 전에 실험을 멈췄습니다.

결과적으로 완성된 포트폴리오보다 경력 정보와 게임형 탐색을 결합했을 때 생기는 가능성과 한계를 확인한 인터랙션 프로토타입으로 남았습니다.

What I learned

공간형 인터페이스는 강한 첫인상을 만들지만, 사용자가 원하는 정보를 빠르게 찾는 데는 추가 비용을 요구했습니다. 조작법을 익히고 목적지까지 이동해야 하는 구조는 포트폴리오의 기본 과업인 훑어보기와 비교하기를 어렵게 만들 수 있었습니다.

반면 물리, 카메라와 콘텐츠를 각각의 모듈로 나눈 구조는 실험을 빠르게 바꾸는 데 효과적이었습니다. 이 작업을 통해 시각적 아이디어의 새로움과 정보 전달의 명료함을 별도의 기준으로 검토해야 한다는 결론을 얻었습니다.