PJun Portfolio는 게임 컨셉으로 제작된 인터렉티브 포트폴리오입니다.
홈 화면의 자동차 시뮬레이션으로 단순 관람을 넘어 직접 조작하고 경험하는 재미를 더했습니다.
게임 대시보드 레이아웃과 Three.js, Tailwind CSS를 활용해 디자인과 기술적 완성도를 높였으며,
Metadata API 기반의 SEO 최적화로 검색 노출 및 공유 편의성까지 강화했습니다.
• GLTFLoader를 활용하여 차량, 나무, 바위 등 정교한 3D 모델(.glb)을 로드하고 환경을 구축했습니다.
• SkeletonUtils를 이용해 스켈레톤 및 애니메이션 데이터를 보존하며 모델을 복제하여, 리소스 최적화와 동시에 다량의 오브젝트를 효율적으로 렌더링했습니다.
• 차량의 정지/주행/부스터 상태에 따라 AnimationMixer를 통한 자연스러운 상태 전환 애니메이션을 구현했습니다.
• 카메라는 lerp를 활용한 부드러운 보간으로 차량을 추적하며, setViewOffset으로 감각적인 화면 구도를 연출했습니다.
• 입력창 타이핑 시 조작 방지 및 방향키 스크롤 차단 등 웹 환경에 최적화된 컨트롤 시스템을 구축했습니다.
• 페이지 전환 시 렌더링 루프 중단 및 메모리 dispose 처리를 통해 자원 누수를 철저히 방지했습니다.
• Tailwind CSS를 활용하여 좌측 네비게이션과 우측 컨텐츠 패널로 구성된 "게임 메뉴" 느낌의 일관된 디자인 시스템 구축.
• 초기 진입/페이지 전환 때 로딩 화면을 보여줘서, 자동차 시뮬레이션이 준비되기 전에 화면이 비어있지 않게 했습니다.
• 배경으로 자동차 시뮬레이션을 유지하여 대시보드 패널(좌측 네비 + 우측 컨텐츠) 구조로 “게임 메뉴” 느낌을 유지했습니다.
• 프로젝트 목록은 퀘스트 창으로 보여주고, 키워드(프로젝트명/스택/역할 등)로 바로 검색되게 했습니다.
• 기본 스크롤바를 컨셉에 맞게 수정하였습니다.
• Next.js App Router 기반 아키텍처를 설계하여 SSR과 Metadata API를 활용한 동적 메타데이터 및 검색 엔진 최적화(SEO)를 적용했습니다.
• Server Components 기반 구조로 초기 로딩 성능과 유지보수성을 개선했습니다.
PJun Portfolio 프로젝트를 진행하며 Three.js를 활용한 3D 홈 화면을 고민하는 과정에서 자동차 시뮬레이션 뿐만 아니라
우주를 배경으로 프로젝트를 행성처럼 표현도 해보고 1인칭 시점으로 플레이 하는 홈 화면도 구현해보며 새로운 경험을 할 수 있었습니다.
이러한 시도들을 통해 3D 인터렉션 설계에 대한 이해를 넓혀갈 수 있었습니다.
향후에는 Three.js에 게임 엔진을 추가하여 보다 정교하고 기술적인 3D 인터렉션 구현해보고 싶습니다.