software

아이디어에서 몇 분 안에 프로토타입까지: Antigravity로 내 포트폴리오 만들기

발행: (2026년 2월 2일 오후 04:20 GMT+9)
7 분 소요
원문: Dev.to

I’m happy to translate the article for you, but I’ll need the full text you’d like translated. Could you please paste the content (excluding the source line you already provided) here? Once I have it, I’ll translate it into Korean while preserving the original formatting, markdown, and any code blocks or URLs.

Introduction

이 포트폴리오는 Google AI가 제시한 New Year, New You Portfolio Challenge를 위해 제작되었습니다. 저는 남아프리카 공화국 요하네스버그에 거주하는 클라우드 엔지니어이자 웹 개발자인 Ntombizakhona Mabaso입니다. 제 목표는 기술 여정, 인증, 콘텐츠 제작, 그리고 24시간 내내 제 작업에 대한 질문에 답변할 수 있는 AI‑기반 디지털 트윈을 선보이는 것이었습니다.

기술 스택

  • 프론트엔드: Next.js 14 + TypeScript 및 CSS Modules
  • AI 통합: Google Gemini AI (@google/generative-ai SDK 사용)
  • 아이콘: 일관된 아이콘을 위한 Lucide React
  • 배포: Google Cloud Run + Cloud Build CI/CD
  • 버전 관리: 자동 배포가 설정된 GitHub

프로젝트 개요

포트폴리오는 제 인증서들(Google Cloud Professional Architect, AWS 인증, Microsoft AI Fundamentals), Medium 및 Dev.to에 게재한 기사들, 그리고 Spotify의 Cloud Glossary Podcast를 한데 모읍니다. 핵심 기능은 저의 디지털 트윈 역할을 하는 AI 채팅 위젯으로, “What certifications does Ntombizakhona have?” 혹은 “Tell me about your cloud experience.”와 같은 질문에 답변합니다.

개발 여정

1. 아이디어에서 시작

핵심 섹션을 다음과 같이 구상했습니다:

  • 애니메이션 타이핑 효과가 있는 히어로 섹션
  • 애니메이션 진행 바가 있는 스킬 섹션
  • 인증서 전시
  • 외부 콘텐츠로 연결되는 “블로그 & 기사” 섹션
  • 접근성을 위한 라이트/다크 테마 토글
  • 프리미엄 느낌을 주는 플로팅 파티클 애니메이션

2. 경험 디자인

Antigravity, Google의 AI 코딩 어시스턴트를 사용해 UI 컴포넌트, 애니메이션, 반응형 레이아웃을 반복적으로 개선했습니다. 디자인은 로즈‑그라디언트 색상 스킴, 부드러운 전환, 현대적이고 프리미엄한 미학을 강조합니다.

3. AI 디지털 트윈 구축

  • 도구: Google Gemini
  • 접근법: 나의 성격, 스킬, 커뮤니케이션 스타일을 포착하는 시스템 프롬프트를 제작했습니다.
  • 결과: 방문자는 채팅 위젯을 통해 내 작업, 인증서, 프로젝트, 블로그 포스트에 대한 정확하고 개인화된 답변을 받을 수 있습니다.

4. 디자인 여성화

색상 팔레트, 타이포그래피, 마이크로 인터랙션을 조정해 보다 포용적이고 친근한 시각 언어를 만들었습니다.

5. Cloud Run에 배포

  1. Dockerfile – Next.js 애플리케이션을 최적화하는 멀티‑스테이지 빌드.
  2. cloudbuild.yaml – Cloud Build용 CI/CD 파이프라인 정의.
  3. GitHub 연동 – main 브랜치에 푸시하면 자동으로 빌드와 배포가 트리거됩니다.
# Dockerfile (multi‑stage)
FROM node:20-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM node:20-alpine AS runner
WORKDIR /app
ENV NODE_ENV=production
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/public ./public
COPY --from=builder /app/package*.json ./
RUN npm ci --only=production
EXPOSE 3000
CMD ["npm", "start"]
# cloudbuild.yaml
steps:
  - name: 'gcr.io/cloud-builders/docker'
    args: ['build', '-t', 'gcr.io/$PROJECT_ID/portfolio:$SHORT_SHA', '.']
  - name: 'gcr.io/cloud-builders/docker'
    args: ['push', 'gcr.io/$PROJECT_ID/portfolio:$SHORT_SHA']
  - name: 'gcr.io/cloud-builders/gcloud'
    args:
      - 'run'
      - 'deploy'
      - 'portfolio'
      - '--image'
      - 'gcr.io/$PROJECT_ID/portfolio:$SHORT_SHA'
      - '--region'
      - 'us-central1'
      - '--platform'
      - 'managed'
      - '--allow-unauthenticated'
images:
  - 'gcr.io/$PROJECT_ID/portfolio:$SHORT_SHA'

Key Services

  • Google Gemini API: AI 디지털 트윈 채팅 기능을 구동합니다.
  • Google Cloud Run: 컨테이너화된 Next.js 애플리케이션을 호스팅합니다.
  • Google Cloud Build: CI/CD 파이프라인을 자동화합니다.
  • Antigravity: 개념부터 프로토타입까지 모든 것을 구축하는 데 도움을 준 AI 코딩 어시스턴트입니다.

성찰

채팅 위젯은 단순한 장난이 아니라, 내가 자리에 없을 때도 내 인증서, 프로젝트, 성격에 대한 지식을 공유함으로써 실질적인 가치를 제공합니다. Antigravity를 사용해 이 포트폴리오를 구축하면서 수 주에 걸리던 작업이 몇 차례의 AI‑assisted 세션으로 단축되었습니다—컴포넌트 작성, 디버깅, Docker 설정, CI/CD 구축 모두가 가속화되었습니다.

최종 사이트는 프리미엄 비주얼(로즈‑그라디언트 색상, 떠다니는 파티클, 부드러운 애니메이션)과 견고한 프로덕션‑급 인프라를 결합하여 Git 푸시마다 자동으로 배포됩니다. 이는 내가 클라우드 엔지니어로서 실천하는 전문 표준을 보여줍니다.

Takeaway: AI 코딩 어시스턴트는 개발자를 대체하는 것이 아니라, 우리를 한층 더 강력하게 만들어 줍니다. Antigravity는 지칠 줄 모르는 시니어 엔지니어 파트너와 같았으며, 앞으로도 협업형 AI‑강화 애플리케이션을 계속 구축해 나갈 생각에 기대가 큽니다.

Back to Blog

관련 글

더 보기 »