AI로 구축한 마리오 스타일 개발자 사이트, Cloud Run에 배포

Source: Dev.to

새해, 새로운 당신 포트폴리오 챌린지 제출

이것은 Google AI가 주최한 새해, 새로운 당신 포트폴리오 챌린지에 대한 제출물입니다.

About Me

프론트‑엔드 개발에 7년 이상 전문 경력을 보유한 고숙련 시니어 소프트웨어 엔지니어입니다. TypeScript와 Angular를 포함한 최신 기술 스택에 대한 포괄적인 이해를 갖추고 있습니다. 사용자 친화적인 인터페이스 구축, 웹 애플리케이션 최적화, 시스템 업그레이드에 입증된 전문성을 보유하고 있습니다. 멘토링 역할과 기술 면접 참여를 통해 강력한 리더십을 발휘합니다. 선도적인 기술 기업을 위한 고품질 소프트웨어 솔루션 제공에 전념하고 있으며, 역동적이고 혁신적인 팀에 제 역량과 경험을 기여하고자 합니다.

Portfolio

(포트폴리오 쇼케이스는 간결함을 위해 생략되었습니다.)

How I Built It

이 프로젝트는 빠른 정적 React 앱으로 구현된 마리오 스타일의 인터랙티브 포트폴리오이며, 장난스러운 “게임 UI” 모습을 제공합니다.

Tech stack

• React + TypeScript – UI 및 앱 구조.
• Vite – 로컬 개발 및 프로덕션 빌드.
• Tailwind CSS (CDN) – 유틸리티‑퍼스트 스타일링.
• Framer Motion – 작은 인터랙션 및 페이지 애니메이션.
• Recharts – “POWER LEVELS” 스킬 시각화.
• Docker (multi‑stage) + Nginx – 정적 SPA를 제공하는 프로덕션 빌드.

AI tools used

• 대부분 Google AI Studio를 사용해 구축.
• 디버깅은 GitHub Copilot 활용.

Deployment process

CI/CD는 GitHub Actions로 자동화됩니다: GCP에 인증하고, 컨테이너를 Artifact Registry에 빌드/푸시한 뒤, Google Cloud Run에 배포합니다.

What I’m Most Proud Of

• 최신 AI 도구를 활용한 거의 무노력 빌드.
• 실제 프로덕션 배포 경로: 컨테이너화된 정적 호스팅(Vite 빌드 → Nginx) + Google Cloud Run에 원클릭 배포.