Google Gemini로 내 포트폴리오를 재디자인한 방법 (그리고 AI가 실제로 실망시킨 부분)

Source: Dev.to

번역할 텍스트가 제공되지 않았습니다. 번역이 필요한 본문을 알려주시면 도와드리겠습니다.

배경

몇 달 전, 저는 DEV의 새해, 새로운 나 포트폴리오 챌린지에 참여해 포트폴리오를 처음부터 다시 만들기로 했습니다. 과제: Google AI 도구를 사용하고, Cloud Run에 배포하며, 자신만의 스타일을 적용하라.

그 결과물은 “브루탈리스트/인더스트리얼” 포트폴리오(원본 제출 글)입니다. 이 미학은 대부분의 개발자 포트폴리오가 기본으로 채택하는 깔끔하고 여백이 많은 디자인을 의도적으로 거부합니다. 노출된 그리드, SCHABO 서체를 사용한 굵은 타이포그래피, 커서에 반응하는 배경 셀, 스크롤에 따라 조립·분해되는 수학적으로 생성된 DNA 나선이 특징입니다. 사이트는 Astro와 React islands, 애니메이션을 위한 GSAP, 메타볼 효과를 위한 경량 WebGL 라이브러리 OGL를 사용해 구현되었습니다.

실제 포트폴리오는 여기에서 확인할 수 있습니다.

Gemini 통합

피치 생성기

• 어떤 직무 설명이든 붙여넣기.
• 이 도구는 내 작업에 대한 구조화된 지식 베이스에서 정보를 가져와 내가 적합한 이유를 설명하는 맞춤형 피치를 생성합니다.
• 템플릿 커버 레터가 아니라, 구체적이고 대화형인 피치를 제공합니다.

대화형 어시스턴트

• 터미널 스타일 인터페이스로, 내 스택에 관한 질문에 답하고 방문자가 찾는 것에 기반해 관련 프로젝트를 추천합니다.
• 내 포트폴리오 데이터를 지식 베이스로 활용한 Retrieval‑Augmented Generation (RAG)을 사용하며, Google Genkit을 통해 Zod 검증 흐름과 Astro의 Node 어댑터를 이용한 서버 사이드 렌더링으로 제공됩니다.

두 기능 모두 Gemini 2.5 Flash에서 실행되며, 포트폴리오 내 AI가 일반적인 챗봇이 아니라 유용한 도구가 될 수 있음을 보여줍니다.

개발 워크플로우

빌드 전반에 걸쳐 Google Antigravity를 주요 AI 코딩 파트너로 사용했으며, Nano Banana Pro를 사용해 산업적인 아트 디렉션에 맞는 이미지를 생성하고 반복했습니다.

• 리팩토링: Antigravity는 원래 Codegrid 템플릿(과학‑판타지 테마의 순수 HTML/CSS/JS)을 Astro와 React 컴포넌트로 변환했습니다.
• DNA 헬릭스: 헬릭스 애니메이션을 위한 사인파 수학을 작성하는 데 도움을 주었습니다.
• 성능: WebGL 루프에서 회귀를 감지했습니다.

명확하고 제한된 문제(예: “스크롤‑업 시 이 GSAP ScrollTrigger를 역전시켜라”)를 제시하면 모델은 첫 번째 또는 두 번째 시도에서 작동 가능한 코드를 생성했습니다.

디자인 과제

가장 큰 놀라움은 AI가 실제 창의적 방향성에 거의 도움이 되지 않았다는 점이었습니다. 저는 명확한 콘셉트(산업/브루탈리즘, 거친, 엔지니어링 우선)를 가지고 있었지만, AI가 제안한 내용은 기술적으로는 괜찮지만 미학적으로는 무미건조했습니다:

• SaaS 랜딩 페이지에 적합한 그라디언트 제안.
• “안전한” 색상 팔레트.
• 어떤 템플릿에서도 나올 수 있는 일반적인 레이아웃 아이디어.

AI가 틀린 것은 아니었습니다; 단지 제가 목표로 하는 시각 언어를 이해하지 못했을 뿐이죠. 결국 모든 디자인 결정을 제가 직접 내리고, AI는 그 결정을 실행하는 데만 사용했습니다.

배운 교훈

• 전달할 것을 알라 – 제한되고 명확히 정의된 엔지니어링 문제는 AI 지원에 이상적이다.
• 개방형 창의적 결정을 유지하라 – 감각과 시각적 방향은 여전히 인간의 판단이 필요하다.

Pitch Generator의 초기 출력은 정확했지만 템플릿화된 복사본처럼 읽혔다 (“Ore는 X, Y, Z 경험을 가진 숙련된 풀스택 엔지니어입니다…”). 시스템 프롬프트와 지식베이스 스키마를 다듬은 후, 결과는 대화에서 자신을 소개하는 방식과 더 비슷하게 들리기 시작했다.

Genkit 통합은 원활함을 입증했다: Zod 스키마를 사용한 타입‑안전 흐름 덕분에 프로덕션‑준비 AI 기능을 구축하는 것이 간단했으며, Astro의 Node 어댑터를 통한 서버‑사이드 렌더링으로 API 키를 안전하게 유지하면서 어색한 우회 방법이 필요 없었다.

프롬프트 정밀도

Gemini는 정밀함에 보상을 준다. 모호한 프롬프트는 모호한 결과를 낳는다. 톤, 구조, 강조에 대한 상세한 지시를 제공하면 출력 품질이 크게 향상된다. 그러나 이러한 정밀함은 이미 “좋은” 것이 어떤 모습인지 알고 있다는 전제하에 이루어지며, 모델은 맛을 대체할 수 없고, 맛이 정의된 후에만 실행할 수 있다.

향후 계획

• Pitch Generator – 방문자가 내 배경의 특정 측면에 대한 강조를 요청할 수 있도록 후속 모드를 추가하여 일회성 출력이 아니라 왕복 도구로 전환합니다.
• Interactive Assistant – 정적 JSON 지식 베이스를 적절한 데이터베이스로 옮겨 재배포 없이 업데이트가 가능하도록 합니다.
• Project Search – 키워드 매칭을 임베딩으로 교체하여 사용자가 만들고자 하는 것을 설명하면 관련 포트폴리오 프로젝트를 제공받을 수 있게 합니다.
• AI 지원 기능을 지속적으로 반복 개선하면서 내가 직접 디자인한 산업적 미학을 유지합니다.