피드로 돌아가기
Dev.toFrontend
원문 읽기
R3F와 Zustand 기반의 State-driven 3D 인터랙티브 포트폴리오 설계
I just build a 3D Solar System Portfolio with Antigrafity using Next.js & React Three Fiber
AI 요약
Context
정형화된 2D 포트폴리오의 낮은 사용자 경험과 기억 잔존율 문제를 해결하기 위한 새로운 인터페이스 필요성 제기. 단순한 시각적 효과를 넘어 탐색 가능한 3D 메타포를 시스템적으로 구현하는 설계 지향.
Technical Solution
- config.ts를 Single Source of Truth로 정의하여 행성 데이터와 궤도 반지름, 섹션 매핑을 중앙 집중화한 데이터 주도 설계
- React Three Fiber를 통한 3D 렌더링 레이어와 Next.js App Router 기반의 HUD 레이어를 분리하여 렌더링 효율 최적화
- Zustand의 persist 미들웨어를 활용해 사용자 설정 및 현재 활성 행성 상태를 전역적으로 관리하고 페이지 새로고침 시 상태 유지
- custom GLSL ShaderMaterial을 적용한 BoilingSun 구현으로 정적 메쉬의 한계를 극복한 동적 시각 효과 창출
- Vaul Drawer와 SECTION_MAP 구조를 결합하여 3D 좌표 기반의 탐색이 실제 콘텐츠 렌더링으로 이어지는 동적 라우팅 메커니즘 구축
- Framer Motion의 AnimatePresence를 통한 HUD 전환 애니메이션 처리로 3D 장면과 2D UI 간의 시각적 연속성 확보
실천 포인트
- 3D 환경 구축 전 config 파일에 모든 상수와 데이터 구조를 먼저 정의하여 비즈니스 로직과 렌더링 로직 분리 - 전역 상태 관리 도구(Zustand 등)를 사용하여 3D 캔버스와 외부 UI 레이어 간의 상태 동기화 구현 - 복잡한 3D 모델링 대신 ShaderMaterial을 활용한 최적화된 시각 효과 검토 - 3D 인터랙션과 상세 콘텐츠 제공을 위한 Drawer/Modal 기반의 레이어드 아키텍처 적용