3D-First 포트폴리오, Antigravity로 구축

Source: Dev.to

Introduction

이것은 Google AI가 제시한 New Year, New You Portfolio Challenge에 대한 제출물입니다.

저는 인터랙티브하고 시각적으로 풍부한 웹 경험을 구축하는 데 중점을 두는 MERN‑stack 개발자 Aayush Bisht입니다. 견고한 엔지니어링과 사려 깊은 디자인을 결합하는 작업을 즐기며, 프론트엔드 성능, 애니메이션, 시스템 아키텍처가 교차하는 지점에서 작은 디테일—예를 들어 움직임, 타이밍, 인터랙션—이 제품의 느낌을 완전히 바꿀 수 있다고 생각합니다.

이번 프로젝트에서는 전통적인 포트폴리오를 넘어 Gemini 3와 Google Antigravity와 같은 최신 도구가 개발 과정 전반에 걸쳐 창의적·기술적 의사결정을 지원하는 방식을 탐구하고자 했습니다. AI를 단순히 코드 생성에만 사용하는 것이 아니라 구조, 애니메이션 흐름, 인터랙션 디자인에 대한 논리적 사고에 활용했습니다.

포트폴리오는 스크롤 기반 애니메이션, 3D 인터랙션, 뷰포트 인식 전환에 크게 의존합니다. 최상의 경험을 위해 전체 브라우저 창에서 보시길 권장합니다.

Live Portfolio:

---

Tech Stack

• Next.js 14 (앱 라우터)
• React 18 + TypeScript
• Tailwind CSS
• GSAP + ScrollTrigger
• Framer Motion
• Spline (3D 디자인 및 런타임)
• Lenis (부드러운 스크롤링)
• Radix UI + 커스텀 UI 컴포넌트
• Google Cloud Run에 배포

Source: …

Gemini 3의 역할

Gemini 3은 개발 전반에 걸쳐 사용되었습니다—완성된 코드를 생성하기 위해서가 아니라 복잡한 시스템에 대해 사고를 돕기 위해서였습니다. 주요 기여 내용은 다음과 같습니다:

• 스크롤 위치를 3D 변환에 매핑하는 방법 탐색.
• 하나의 3D 객체가 여러 포트폴리오 섹션을 나타낼 수 있는 방안에 대한 논리 전개.
• 섹션 간 애니메이션 속도와 전환 효과 평가.
• React 상태, GSAP 타임라인, Spline 객체 간 상호작용 패턴 고찰.
• 구현에 들어가기 전에 아이디어를 스트레스 테스트.

특히 애니메이션 시퀀싱 및 상태 기반 변환과 관련된 많은 아키텍처 결정이 Gemini와의 반복적인 대화를 통해 다듬어졌습니다.

Antigravity의 역할

Antigravity는 Gemini에서 영감을 받은 아이디어의 실행을 가속화했습니다:

• 대규모 애니메이션 오케스트레이터 리팩토링.
• 기존 동작을 깨뜨리지 않으면서 스크롤 트리거 로직을 반복 개발.
• 다수의 인터랙티브 컴포넌트 간 일관성 유지.
• 대체 애니메이션 흐름을 안전하게 실험.

이를 통해 프로젝트는 구조를 잃지 않고 유기적으로 발전할 수 있었습니다.

키보드 메타포

포트폴리오의 핵심에는 Spline‑디자인 기계식 키보드가 있으며, 이는 동적인 시각 메타포로 사용됩니다. 사용자가 스크롤할 때 키보드는 여러 상태로 변형됩니다:

각 키캡은 실제 스킬에 매핑되어 있으며, 호버 및 클릭 이벤트에 반응해 3D 씬 내부의 텍스트를 실시간으로 업데이트합니다. 모든 변형은 스크롤 위치에 직접 연결된 GSAP 타임라인을 통해 조정됩니다.

모델‑우선 접근 방식

3D 모델을 배경 시각 요소로 취급하는 대신, 전체 웹사이트를 모델을 중심으로 설계했습니다. 레이아웃, 섹션 흐름, 스크롤 동작 및 인터랙션은 키보드가 시간에 따라 변형되고 반응하는 방식을 지원하도록 구성되었습니다.

Gemini는 다음과 같은 질문에 답하는 데 도움을 주었습니다:

• 단일 3D 객체가 포트폴리오의 여러 섹션을 어떻게 표현할 수 있을까?
• 스킬, 프로젝트, 연락처 사이를 전환할 때 어떤 변형이 자연스럽게 느껴질까?
• 공간적 변화(스케일, 회전, 위치)를 스크롤 진행에 어떻게 매핑할까?
• 인터랙션은 UI에 두어야 할까, 3D 씬에 두어야 할까, 아니면 둘 다에 두어야 할까?

이 논의를 통해 각 섹션이 고유한 키보드 상태에 대응하고, 각각의 변형 로직과 인터랙션 규칙을 갖는 시스템이 정의되었습니다.

도구 할당

• GSAP – 스크롤 기반 애니메이션의 정밀한 안무를 담당합니다.
• Framer Motion – UI 수준의 상호작용을 관리합니다 (예: 버튼 호버, 모달 전환).
• Spline – 공간 깊이와 인터랙티브 3D 요소를 제공합니다.

각 도구는 그 강점을 살릴 수 있는 곳에 사용되어 UI에 눈에 보이는 “AI 기능” 없이도 일관된 경험을 제공합니다. 그러나 AI는 애니메이션 흐름, 상호작용 감각, 전반적인 복잡성 관리 등 거의 모든 결정에 영향을 미쳤습니다.

Conclusion

이 프로젝트는 Gemini 3와 Antigravity와 같은 AI 도구가 창의성을 대체하기보다 증폭시킬 수 있음을 보여줍니다. AI를 사용해 건축 및 애니메이션 과제를 논리적으로 해결함으로써 최종 포트폴리오는 의도적이고 일관되며 기술적으로 견고하게 느껴집니다—장식 요소였던 3D 모델을 경험의 구조적 핵심으로 전환합니다.