내 포트폴리오가 스스로 설명한다: Gemini와 함께 AI 기반 건축 시각화 도구 구축
Source: Dev.to
Google AI가 제시한 새해, 새로운 당신 포트폴리오 챌린지에 대한 제출
나에 대해
저는 클라우드와 AI에 집중하는 개발자로, 기능적인 것뿐만 아니라 설명 가능한 시스템을 구축하는 것을 즐깁니다.
수년간 클라우드 네이티브 아키텍처, DevOps 워크플로, AI 기반 애플리케이션을 다루면서 반복되는 문제를 발견했습니다. 훌륭한 시스템이라도 한눈에 이해하기 어려운 경우가 많습니다.
이 포트폴리오에서는 단순히 프로젝트를 정적으로 보여주는 것을 넘어하고자 했습니다. 제 목표는 제가 개발자로서 생각하는 방식을 반영한 인터랙티브한 경험을 만드는 것이었습니다 — 명확성, 확장성, 실질적인 영향을 중시하면서, AI가 복잡한 아키텍처를 엔지니어뿐만 아니라 모든 사람이 더 쉽게 이해하도록 도울 수 있음을 보여주고자 했습니다.
포트폴리오
내 포트폴리오는 실시간으로 배포된 애플리케이션으로, 내 앱 아키텍처를 시각화하고 Gemini를 사용해 트래픽이 시스템을 통해 흐르는 방식을 실시간으로 설명합니다. 방문자는 다음을 단계별로 살펴볼 수 있습니다:
- 진입점 (사용자 → Cloud Run)
- API 상호작용
- 데이터 영속성 계층
- AI 모델 상호작용
- 엔드‑투‑엔드 요청 흐름
🚀 Live Demo
The demo lets recruiters, engineers, and even non‑technical visitors understand what’s happening under the hood without needing to read architecture diagrams or documentation.
Source: …
How I Built It
Tech Stack
- Frontend: 아키텍처 시각화를 위한 가벼운 웹 UI
- Backend: Google Cloud Run에 배포된 컨테이너화 서비스
- AI: 자연어 기반 아키텍처 설명을 위한 Gemini (Google AI 도구 활용)
- Infrastructure: Google Cloud (Cloud Run, APIs, IAM)
- Deployment: 컨테이너 기반 CI‑친화적 설정
- Source Code: GitHub에서 확인 가능
Google AI Tools Used
- Gemini 모델을 사용하여:
- 아키텍처 구성 요소 해석
- 단계별 트래픽 흐름 설명 생성
- 사용자가 선택한 구성 요소에 따라 설명 맞춤화
- AI Studio를 활용한 빠른 프로토타이핑 및 배포
- Gemini API로 프롬프트를 다듬고 지능형 설명을 통합
Design Decisions
- UI를 의도적으로 최소화하여 아키텍처와 설명이 중심에 놓이도록 함.
- 화려한 시각 효과보다 설명 가능성을 우선시.
- 동일한 아키텍처를 다양한 깊이 수준으로 설명하도록 프롬프트 설계, 보는 사람에 따라 차별화.
- 프로젝트 전체를 오픈 소스로 공개하여 다른 개발자들이 학습하고 확장할 수 있게 함.
이 앱은 무상태이며 빠르게 시작할 수 있고, Google Cloud Free Tier 내에서 원활히 실행되어 실용적이면서도 프로덕션에 적합합니다.
Development Process
- AI Studio에서 프로토타입 – Gemini 프롬프트를 실험해 아키텍처 개념을 설명하는 최적의 방법 찾기.
- 시각화 레이어 구축 – 사용자 클릭에 반응하는 인터랙티브 컴포넌트 제작.
- Gemini API 통합 – 프론트엔드와 Gemini를 연결해 실시간 설명 제공.
- 컨테이너화 및 배포 – 모든 것을 패키징해 Cloud Run에 배포.
- 오픈 소스 공개 – 전체 소스 코드를 GitHub에 공개해 커뮤니티와 공유.
What I’m Most Proud Of
- 🧠 AI‑기반 설명 가능성 – Gemini는 단순히 구성 요소를 설명하는 것이 아니라 왜 트래픽이 흐르는지까지 설명합니다.
- ☁️ 클라우드‑네이티브 설계 – 완전 컨테이너화되어 Cloud Run에 배포되며 실제 현업 베스트 프랙티스를 따릅니다.
- 🎯 청중 맞춤형 설명 – 동일한 아키텍처를 주니어 개발자, 제품 매니저, 시니어 엔지니어 모두가 이해할 수 있도록 제공합니다.
- 🚀 실제 동작하는 포트폴리오 – 클라우드 아키텍처를 이해한다는 말을 보여줍니다.
- 💻 오픈 소스 기여 – 전체 소스 코드는 GitHub에서 확인 가능하며, 개발자 커뮤니티에 학습 자료를 제공합니다.
- 🎨 Google AI Studio 활용 – AI Studio의 빠른 프로토타이핑 기능을 이용해 신속히 반복하고 원활히 배포했습니다.
🔗 빠른 링크
- Live Demo: AI Studio App
- Source Code: GitHub Repository
- Architecture Docs: GitHub 저장소의 README를 확인하세요
- Try it yourself: 라이브 데모에서 원하는 컴포넌트를 클릭하면 Gemini가 요청이 시스템을 통해 어떻게 전달되는지 설명합니다! 🎯