제로에서 AI까지: Google Antigravity와 Gemini로 인터랙티브 포트폴리오를 만든 방법 (제로 투자 챌린지)

Source: Dev.to

이 포트폴리오는 New Year, New You Portfolio Challenge를 위해 ₹0 투자 제약 조건으로 제작되었습니다—신용카드 없이, 유료 구독 없이, 오직 무료 도구와 많은 창의성만을 사용했습니다. 그 결과는 전적으로 무료 서비스만으로 구동되는 인터랙티브하고 AI‑기반의 웹 포트폴리오입니다.

Live Portfolio →

Tech Stack (100 % Free)

Google Antigravity – 포트폴리오 뒤의 마법

Google Antigravity는 무료 AI 지원 웹앱 빌더입니다. 이를 사용해 나는 다음을 할 수 있었습니다:

1. 빠른 프로토타이핑 – 포트폴리오 개념을 설명하고 AI가 레이아웃을 제안하도록 했습니다.
2. 즉시 반복 – 색상을 변경하고 섹션을 재구성하며 코드를 작성하지 않고 디자인을 테스트했습니다.
3. 깨끗한 코드 내보내기 – 바로 사용할 수 있는 React/HTML을 받아 추가로 다듬을 수 있었습니다.
4. 구축하면서 학습 – 생성된 코드는 내가 채택할 수 있는 모범 사례를 보여주었습니다.

보통 주니어 개발자가 CSS를 다듬고 레이아웃을 시도‑오류하면서 2~3일이 걸리는 작업을 몇 시간 안에 완료했으며, 아이디어를 하루 만에 배포 가능한 프로토타입으로 만들 수 있었습니다.

기능

실시간 AI 플레이그라운드 통합

• Google Gemini API로 구동되는 실제 작동 AI 어시스턴트.
• 방문자는 내 기술, 프로젝트 또는 기타 사항에 대해 질문하고 즉각적이고 지능적인 답변을 받을 수 있습니다.
• API 통합, async/await, 오류 처리, 실시간 사용자 상호작용에 대한 역량을 보여줍니다.

Antigravity로 구축 – 현대 개발 연구

• Antigravity를 활용해 디자인 결정을 검증하고 프로토타이핑을 가속화했습니다.
• 실용성(올바른 도구 사용), 효율성(품질을 희생하지 않고 빠르게 배포), 적응력(새 플랫폼 학습)을 보여줍니다.

무투자, 최대 효과

• 모든 코드는 무료 서비스에서 실행되며, 신용카드가 필요 없습니다.
• 제약이 창의성을 촉발하고 VC 자금이 없어도 전문 작업이 가능함을 강조합니다.

개인적인 감각이 더해진 전문 디자인

• 맞춤형 그라디언트 배경, 부드러운 애니메이션, 반응형 모바일 레이아웃, 일반 템플릿과 차별화되는 현대적 미학.

전체 개발 워크플로우

1. Day 1 – Ideation & Prototyping

   • Google Antigravity와 그 기능을 탐색했습니다.
   • 몇 시간 안에 여러 디자인 변형을 생성했습니다.

2. Day 2 – Development & Integration

   • Antigravity 코드를 내보내 VS Code에서 다듬었습니다.
   • AI 플레이그라운드를 위해 Gemini API를 통합했습니다.
   • 프로젝트, 기술, 연락처 섹션을 위한 맞춤형 컴포넌트를 구축했습니다.
   • 다양한 기기에서 반응성을 테스트했습니다.

3. Day 3 – Deployment & Optimization

   • 저장소를 GitHub에 푸시했습니다.
   • 자동 CI/CD가 설정된 Vercel에 배포했습니다.
   • 실시간 테스트와 성능 튜닝을 수행했습니다.

포트폴리오가 이제 라이브로 완전하게 작동합니다.

Future Plans

• 더 많은 Gemini API 기능 추가 (예: 코드 리뷰 어시스턴트, AI 기반 이력서 생성기).
• 실시간 데모와 함께 프로젝트 섹션 확장.
• Dev.to, Hashnode, Medium에 기술 블로그 게시물을 공개하여 인사이트를 수익화.
• 포트폴리오를 다른 학생들이 재사용할 수 있는 템플릿으로 패키징.
• 디자인 배경이 없는 개발자를 위한 UI/UX 접근성 도구로 Google Antigravity 홍보.

행동 촉구

진지하게—실제 사이트에서 AI Playground 버튼을 클릭하고, 뭔가 물어보세요. 그러면 AI가 실시간으로 응답하는 모습을 볼 수 있습니다. 이것이 바로 브라우저에서 직접 실행되는 제 작업입니다.

질문이나 제안이 있거나, 비용을 크게 들이지 않고 함께 만들고 싶다면 언제든지 댓글을 남겨 주세요.

#googleai #gemini #portfolio #webdev #react #antigravity #zero‑budget #ai #learning #buildinginpublic