새해, 새로운 바이오: AI Career Coach를 구축해 당신의 포트폴리오를 업그레이드했습니다 kk
Source: Dev.to
이것은 Google AI가 제시한 새해, 새로운 당신 포트폴리오 챌린지 제출물입니다.
나에 대해
안녕하세요! 저는 원시적인 재능과 전문적인 프레젠테이션 사이의 격차를 메우는 일에 열정을 가진 빌더, 디자이너, 마케터 Nansel입니다.
새해, 새로운 나 포트폴리오 챌린지를 위해 단순히 정적인 페이지를 만들고 싶지는 않았습니다. 포트폴리오를 업데이트하는 가장 어려운 부분은 코드가 아니라 자신에 대해 쓰는 것이라는 것을 깨달았습니다.
대부분의 개발자는 자신감 있는 바이오를 쓰거나 프로젝트의 영향을 명확히 설명하는 데 어려움을 겪고, 코딩을 하지 않는 재능 있는 전문가들은 소셜 미디어를 넘어 자신의 작업을 보여주기 힘들어합니다. 이는 더 좋은 직업이나 프리랜스 기회를 얻는 데 장애가 됩니다.
그래서 저는 Workfolio를 만들었습니다: 단순히 작업을 호스팅하는 것이 아니라 Google Gemini AI를 활용해 개인 커리어 코치 역할을 수행하며, 여러분의 콘텐츠를 몇 초 만에 리크루터가 바로 읽을 수 있는 형태로 재작성해 주는 풀스택 SaaS 플랫폼입니다.
Portfolio
Below is my live system, fully Dockerized and deployed on Google Cloud Run.
How to use it (step‑by‑step)
- On the landing page, click Get Started or Create Your Portfolio.
- Sign up.
- Verify your email (check spam if you don’t see it; you may be redirected to a 404 page—just close it and return to the site).
- Sign in and start using the product.
Note: 로그인하고 포트폴리오를 만들고 AI 도구를 사용하며 Stripe 테스트 모드를 통해 “Pro” 업그레이드를 시뮬레이션할 수도 있습니다!
How I Built It
나는 이 프로젝트를 프로토타입이 아닌 실제 제품으로 접근했다. 사용자가 코드를 건드리지 않고도 회원가입하고, 복잡한 데이터를 관리하며, 전문적인 존재감을 배포할 수 있는 시스템을 원했다.
The Tech Stack
- Framework: Next.js 15 (App Router)
- AI Engine: Google Gemini API (
gemini-1.5-flash) - Database: Supabase (PostgreSQL) + Prisma ORM
- Payments: Stripe (Webhooks & Checkout)
- Styling: TailwindCSS + shadcn/ui
- Infrastructure: Docker & Google Cloud Run
🤖 The “Secret Sauce”: Google AI Integration
Bio Rewriter
- Problem: 개발자들은 종종 겸손하거나 모호한 자기소개를 작성한다.
- Solution: “Magic Fix” 버튼을 누르면 초안을 Gemini에 전송하고, 시스템 프롬프트를 통해 Technical Recruiter 역할을 수행하도록 하여 자신감 있고 영향력을 강조한 1인칭 버전을 반환한다.
Project Description Polish
- Problem: 사용자는 프로젝트에 대한 대략적인 bullet point를 붙여넣는다.
- Solution: AI 에이전트가 원시 메모를 구조화된 “Problem‑Solution‑Impact” 서술형으로 변환해 이력서에 적합하게 만든다. 특히 비기술 직군에게 유용하다.
Smart Experience Sorting
- Gemini가 비구조화된 경력 정보를 분석해 논리적인 카테고리(예: “Engineering” 역할과 “Design” 역할을 구분)로 정리하도록 제안한다.
gemini-1.5-flash 모델은 거의 즉각적인 지연 시간을 제공해 UI가 빠르게 반응한다.
☁️ Cloud & DevOps Journey
- Docker를 사용해 애플리케이션을 컨테이너화하고, 멀티‑스테이지 Dockerfile로 이미지 용량을 최소화했다.
- Cloud Run 리비전 설정을 통해 Supabase와 Stripe 비밀 키를 환경 변수로 관리했다.
- Next.js의 standalone 출력 모드를 활성화해 서버리스 컨테이너 환경에서도 원활히 동작하도록 했다.
내가 가장 자랑스러워하는 것
- 툴, 템플릿이 아니라 – 대부분의 포트폴리오는 정적 HTML입니다. Workfolio는 CMS입니다: 대시보드에서 작업을 추가하고 저장하면 공개 사이트가 즉시 업데이트됩니다.
- 실용적인 AI – AI가 글쓰기 워크플로에 내장되어 사용자가 막혔을 때 정확히 도와주며, 단순한 챗봇이 아닙니다.
- 실제 SaaS 아키텍처 – 사용자 계정, 보안 데이터베이스 관계, 계층형 접근(Free vs. Pro)을 지원합니다. Stripe 웹훅이 결제 시 자동으로 데이터베이스 상태를 업데이트합니다.
- 탄력성 – AI SDK 버전 충돌과 엄격한 Docker 빌드 린팅을 극복하여 Cloud Run에서 깨끗한 프로덕션 빌드를 달성했습니다.
로드맵
이는 v1에 불과합니다. 향후 계획은 다음과 같습니다:
- AI 기능 향상: 맞춤형 콘텐츠 및 이미지 생성.
- 맞춤 도메인: 사용자가 자신의
.com을 매핑할 수 있도록 지원. - 테마: 사용자가 자신에게 맞는 테마를 선택하거나 만들 수 있도록 맞춤형 레이아웃 및 디자인 제공.
Google AI 팀에게 도구와 도전에 감사드립니다! Workfolio를 구축하면서 더 나은 풀스택 엔지니어가 되었습니다.