AI 에이전트에게 내 포트폴리오를 재구축하게 했습니다: Antigravity + Gemini가 어떻게 했는지
Source: Dev.to
이것은 Google AI가 주관하는 New Year, New You Portfolio Challenge Presented by Google AI 제출물입니다.
나에 대해
안녕하세요, 저는 프랑스 툴루즈에서 소프트웨어 엔지니어 인턴을 했던 CS 전공 학생 Nhi Nguyen입니다. 전통적인 포트폴리오는 저에게 항상 다소 정적인 느낌을 주었고, 바로 이전 포트폴리오가 그런 모습이었습니다. Google AI 포트폴리오 챌린지에서는 제 작업을 단순히 보여주는 것을 넘어, 개발의 미래를 암시하는 무언가를 만들고 싶었습니다.
베트남 소프트웨어 엔지니어의 음식과 팝 음악에 대한 사랑을 Gemini와 Antigravity의 힘과 결합하면 어떻게 될까요? 바로 미래지향적인 macOS‑스타일 디지털 작업 공간이 탄생합니다.
Portfolio
디지털 사무실에 들어오세요 🚀: 미래형 포트폴리오 시작
(‘Get To Know Me’ 섹션을 확인하는 것을 잊지 마세요—예상과 다를 거예요!)
어떻게 만들었나요: 100 % AI‑아키텍처 워크플로
기술 스택
- 프론트엔드: React + Vite (초고속 HMR)
- 스타일링: Tailwind CSS + Framer Motion (macOS‑스타일 애니메이션)
- 백엔드 / 데이터베이스: Google Firebase & Firestore
- 배포: Google Cloud Run (신뢰성을 위한 컨테이너화)
- AI 오케스트레이션: Gemini 3 Pro (High) via Antigravity AI Agent
Antigravity는 디자인부터 콘텐츠 번역, 백엔드 설정, Cloud Run 배포까지 프로젝트를 전반적으로 만들어 주었으며, 이 AI‑구동 IDE가 얼마나 강력한지 보여줍니다.
디자인 여정: 비전에서 “Voilà!”까지
사이트를 만드는 것은 단순히 코딩이 아니라, 개성을 디지털 경험으로 옮기는 작업이었습니다. 저는 Gemini를 크리에이티브 디렉터로 삼아 Planning Mode를 사용해 “북극성”을 설정했습니다.
처음 프롬프트는 정체성과 기술 목표를 결합했습니다:
“나는 현대적이고 미래지향적인 디자인에 작은 음식과 팝 음악 요소를 섞은 포트폴리오 웹사이트를 만들고 싶어요. 저는 베트남 출신의 여성 소프트웨어 엔지니어이며, 가능한 한 창의적으로 만들고 싶습니다. 섹션에는 블로그, 프로젝트, 경력, 그리고 ‘About Me’ 섹션이 포함되어야 합니다.”
Gemini는 레이아웃뿐 아니라 전체 전략을 제시했습니다. 계획을 다듬고 초기 구조를 다듬은 뒤, 프로젝트에 “와우” 요소가 필요하다는 것을 깨달았습니다.
진화: “Finder” UI
macOS Finder 스타일 인터페이스는 재귀적인 AI 워크플로에서 탄생했습니다:
- 정제 – Gemini가 저에게 인터뷰를 진행해 정확한 기술 요구사항과 Finder‑스타일 UI를 위한 폴더 논리를 구체화했습니다.
- 실행 – 초구체적인 프롬프트가 Antigravity의 AI Agent에 전달되어, Finder의 논리를 모방하면서도 제 “미래지향적인 푸디” 미학을 유지하는 픽셀‑완벽하고 오류 없는 UI를 만들어냈습니다.
내가 가장 자랑스러워하는 것
1. “Finder” UI 경험
중심은 “Get To Know Me” 섹션이며, 완전한 macOS Finder 클론으로 구축되었습니다:
- 인터랙티브 폴더 – 실제 내 노트북을 보는 듯이 내 교육 및 관심사를 탐색할 수 있습니다.
- 미학 – 미래지향적인 글래스모피즘과 팝 문화 분위기의 조화.
- 로직 – Framer Motion을 사용해 부드럽고 Apple 같은 애니메이션을 구현했습니다.
2. DevOps 및 클라우드 역량 강화
이 도전 이전에는 이 도구들이 흔히 쓰이는 용어에 불과했지만, 이제는 내 툴킷의 핵심 요소가 되었습니다:
- Docker – 일관된 환경을 위해 React 앱을 컨테이너화했습니다.
- Nginx – 프론트엔드 자산을 위한 고성능 웹 서버를 설정했습니다.
- Google Cloud Run – 컨테이너화된 서비스를 배포하고 수명 주기를 관리했습니다.
- Firebase – 프로젝트 데이터와 블로그 콘텐츠를 위한 NoSQL 백엔드를 통합했습니다.
직접 체험해 보기!
제 포트폴리오를 살펴봐 주셔서 감사합니다—AI IDE가 할 수 있는 한계를 뛰어넘으며 정말 즐거운 시간을 보냈습니다.
도전: Finder UI의 “Interests” 폴더에 몇 가지 재미있는 디테일을 숨겨두었습니다. 제 노트북을 탐색하고, 찾은 내용을 댓글로 알려주세요!