⚡ 3시간 만에 3D 포트폴리오를 만들었습니다
🔗 포트폴리오 링크
3D 를 사용해보고 싶은데 나는 잘 몰라...
저도 그랬습니다! 그래서 Antigravity + Claude와 함께 바이브코딩으로 도전해봤습니다.
=> 결과? 3시간 만에 우주 테마의 3D 인터랙티브 포트폴리오 완성.
🎮 직접 탐험하는 포트폴리오
- 아바타를 조작해 각 섹션의 집을 방문
- 키보드 & 조이스틱 컨트롤
- 미니맵으로 빠른 이동
- 우주 공간을 떠다니는 별들과 함께
- 로켓 구출 장면
- 포탈 진입 → 전체 보기 모드
- 미니맵 클릭 → 텔레포트
- 모바일 조이스틱 조작
- 초기 카메라 줌인 애니메이션
💡 바이브코딩으로 느낀 점
AI와 협업하니 "이렇게 만들어줘"라는 아이디어만 있으면 구현 속도가 비약적으로 빨라졌습니다. 물론 코드 리뷰와 디버깅은 직접 해야 하지만, 반복적인 작업에서 해방되니 창의적인 부분에 더 집중할 수 있었어요.
AI 시대, 개발자의 역할은 "코드를 짜는 사람"에서 "방향을 설계하는 사람"으로 변하고 있다고 느낍니다.
📊 숫자로 보는 3시간의 결과물
- 3D 컴포넌트: 10개 (Scene, Avatar, World, House, Rocket, Portal 등)
- 커스텀 훅: 5개 (이동, 애니메이션, 카메라, 키보드, 근처 감지)
- 별 입자 수: 48,000개 (3단계 레이어)
- 스파클 입자: 16,500개 (6단계 레이어)
- 포탈 입자: 40개 (피보나치 구면 배치)
- 애니메이션 FPS: 60fps 유지
🛠 기술 스택
| 영역 | 기술 | 용도 |
|---|---|---|
| 3D 렌더링 | Three.js + R3F | WebGL 기반 3D 씬 |
| 3D 헬퍼 | @react-three/drei | Stars, Sparkles, Text, OrbitControls |
| 프레임워크 | Next.js 16 | App Router, SSR |
| 상태관리 | Zustand | 게임 상태 동기화 |
| 애니메이션 | Framer Motion | 모달/UI 트랜지션 |
| 스타일 | Tailwind CSS 4 | 반응형 디자인 |
| 백엔드 | Supabase | 방명록 데이터 |
| 배포 | Vercel |
🔧 기술적으로 재미있었던 구현들
1️⃣ 낙하 → 로켓 구출 시스템
맵 밖으로 떨어지면 끝? NO! 로켓이 구출하러 옵니다.
경계 이탈 → 가속 낙하(12m/s²) → 회전하며 추락
→ y=-25에서 로켓 포착 → 부드러운 상승 → 호버링 → 착륙
카메라도 낙하에 맞춰 플립되면서 극적인 연출을 만들어냅니다.
2️⃣ 다층 우주 배경
단순히 별 하나 띄운 게 아닙니다:
-
Stars 3단계 (원근감)
-
Sparkles 6단계 (다양한 색상과 속도)
-
각 레이어가 다른 속도로 움직여 깊이감 표현
3️⃣ 거리 기반 자동 인터랙션
게임처럼 자연스러운 탐험 경험을 만들었습니다.
💭 개발 과정에서 있었던 일들
"로켓 구출은 어떻게 나온 아이디어예요?"
처음엔 맵 밖으로 떨어지는 것도 없었고 이 부분에서 아쉬움을 느낀 게 시작이었어요.
뭔가 심심한데? 현실성이 떨어져 떨어지게끔 만들어보자 => 떨어지다가 다시 리스폰 되면 좋겠다 => 구출해주면 더 재밌지 않을까?
로 시작되었습니다.
포탈의 입자 배치
40개 입자가 구 형태로 균등하게 퍼져있는 게 보이시나요?
이거 피보나치 수열 기반 구면 배치 알고리즘입니다.
수학적으로 가장 균등한 분포를 만드는 방법이에요.
화염 애니메이션의 비밀
로켓 화염이 자연스럽게 깜빡이는 이유:
// 3개 화염에 각각 다른 주파수 적용
sin(time * 50) // 50Hz
sin(time * 45 + 1) // 45Hz, 위상 차이
sin(time * 55 + 2) // 55Hz, 위상 차이
위상 차이가 있어서 동시에 깜빡이지 않고 자연스러워집니다.4. 아키텍처 설명
🏗️ 프로젝트 구조
components/
├── 3d/ # Three.js 세계
│ ├── Scene # Canvas + 조명 + 별
│ ├── Avatar # 캐릭터 + 물리엔진
│ ├── World # 지면 + 하우스들
│ ├── Rocket # 구출 시스템
│ └── Portal # 중앙 포탈
├── ui/ # 2D 인터페이스
│ ├── Interface # 모달 시스템
│ ├── MiniMap # SVG 미니맵
│ └── Joystick # 모바일 조작
└── [sections]/ # 포트폴리오 콘텐츠상태 관리 (Zustand)
-
activeSection: 현재 열린 섹션 -
targetPosition: 클릭한 목적지 -
isFalling: 낙하 상태 -
rocketRescue: 로켓 구출 상태모든 3D 상태가 하나의 store에서 관리되어 동기화 문제가 없습니다.
🤖 AI와의 협업, 실제로 어땠나?
잘 됐던 것들
- 반복 작업 자동화: 6개 하우스 배치, 색상 시스템 구축
- 알고리즘 구현: 피보나치 구면 배치, ease-out 곡선
- 버그 추적: "카메라가 이상해요" → 정확한 원인 파악
직접 해야 했던 것들
- 디자인 결정: "우주 테마로 갈까, 숲 테마로 갈까"
- UX 판단: "이 거리에서 자동으로 열리는 게 자연스러운가"
- 코드 리뷰: 최종 코드가 내 의도와 맞는지 확인
프롬프트 팁
❌ "포트폴리오 만들어줘"
✅ "맵 밖으로 떨어질 때 로켓이 구출하는 시스템 만들어줘.
가속 낙하하다가 y=-25에서 로켓이 나타나고,
부드럽게 상승한 뒤 착륙하는 애니메이션으로"
구체적일수록 결과물의 퀄리티가 올라갑니다.
글을 마무리하며..🤖
기존에도 중요했지만 프로덕트의 정체성과 방향성 의도가 더욱 중요해지는 시기가 왔다고 생각합니다. 매일 AI 를 사용하며 생각이 바뀌지만 요즘 드는 생각은 새로운 아이디어를 제공하고 다양한 시각과 관점에서 프로덕트를 바라보며 AI의 기술에 센스를 추가하는 개발자가 좋은 개발자가 아닐까? 하는 생각이 드네요.
여러분의 생각은 어떠신가요??
긴 글 읽어주셔서 감사합니다 🙇♀️
