PJun Portfolio는 제가 만든 게임 컨셉의 포트폴리오 웹사이트입니다.
홈 화면은 조작 가능한 자동차 시뮬레이션으로 하여, 그냥 보는 사이트가 아니라 재미있고 경험할 수 있는 첫 화면을 만들고 싶었습니다.
이후에는 게임 대시보드 느낌의 레이아웃을 통해 About/Skills/Projects를 확인할 수 있도록 구현했습니다.
자동차 시뮬레이션은 Three.js로 구현했고, UI는 Tailwind를 사용하여 일관된 디자인을 유지했습니다.

• 홈에서 직접 조작할 수 있는 3D 자동차 시뮬레이션을 만들었습니다.
• 방향키로 이동/회전, Shift로 부스터가 동작합니다.
• 정지/주행/부스터 상태에 따라 애니메이션이 자연스럽게 바뀝니다.
• 입력창을 타이핑할 때는 조작이 먹지 않도록 막고, 방향키로 페이지가 스크롤되는 것도 방지했습니다.
• 카메라는 차를 따라가면서도 흔들리지 않게 부드럽게 보간했고, 화면 구도는 약간 치우치게 잡았습니다.
• 나무와 바위 같은 오브젝트는 한 번만 로드한 뒤 복제하여 재사용성이 좋게 구현했습니다.
• 화면을 떠날 때는 렌더링/이벤트/리소스를 정리해서 누수가 없도록 했습니다.

• 초기 진입/페이지 전환 때 로딩 화면을 보여줘서, 자동차 시뮬레이션이 준비되기 전에 화면이 비어있지 않게 했습니다.
• 배경으로 자동차 시뮬레이션을 유지하여 대시보드 패널(좌측 네비 + 우측 컨텐츠) 구조로 “게임 메뉴” 느낌을 유지했습니다.
• 프로젝트 목록은 퀘스트 창으로 보여주고, 키워드(프로젝트명/스택/역할 등)로 바로 검색되게 했습니다.
• 기본 스크롤바를 컨셉에 맞게 수정하였습니다.

PJun Portfolio 프로젝트를 진행하며 Three.js를 활용한 3D 홈 화면을 고민하는 과정에서 자동차 시뮬레이션 뿐만 아니라
우주를 배경으로 프로젝트를 행성처럼 표현도 해보고 1인칭 시점으로 플레이 하는 홈 화면도 구현해보며 새로운 경험을 할 수 있었습니다.
이러한 시도들을 통해 3D 인터렉션 설계에 대한 이해를 넓혀갈 수 있었습니다.
향후에는 Three.js에 게임 엔진을 추가하여 보다 정교하고 기술적인 3D 인터렉션 구현해보고 싶습니다.