Google AI와 함께 현대적인 디지털 가든 만들기: 나의 새해, 새 나를 위한 포트폴리오

발행: 3일 전 (2026년 1월 4일 오전 07:55 GMT+9)

11 min read

Source: Dev.to

👋 About Me

Hi, I’m Emmanuel Uchenna – a software engineer, technical writer, and digital‑health advocate. I’m passionate about building technology that empowers people.

Tech background: 5+ years of experience turning lines of code into meaningful human experiences.
Specialties: Clean, scalable UI development with React, Next.js, and the modern web ecosystem.
Writing: Translating complex technical ideas into clear, engaging articles, documentation, and white‑papers.
Health focus: Exploring how software can improve patient outcomes and make health information more accessible.

My goal with this portfolio was simple yet ambitious: create a fast, accessible platform that reflects my current skill set and style. I wanted more than a list of projects—I wanted to demonstrate my philosophy of “premium simplicity”, the belief that the most effective digital experiences get out of the user’s way while delighting them with subtle interactions and solid performance.

Note: The embed below links to my portfolio deployed on Google Cloud Run. You can also visit the live site at .

🚀 프로젝트 개요 (2025)

2025년에 포트폴리오를 구축하는 것은 흥미로운 도전입니다. 현재 우리가 가지고 있는 도구들은 크게 발전했기 때문에 Google AI 생태계를 적극 활용하여 품질을 손상시키지 않으면서 작업 흐름을 가속화했습니다. 결과는 정말 놀라웠습니다—일주일이 걸릴 수도 있었던 작업이 영감 넘치는 스프린트로 변했습니다.

스택 요약

레이어	기술	선택한 이유
핵심 프레임워크	Next.js (App Router)	견고하고 서버‑사이드 렌더링 기반; 파일 기반 라우팅과 React Server Components 덕분에 앱이 빠르고 SEO‑친화적입니다.
스타일링	Tailwind CSS	유틸리티‑퍼스트 접근 방식으로 엄격한 디자인 시스템을 적용하고, 반응형 레이아웃을 손쉽게 다루며, 다크 모드도 자연스럽게 채택할 수 있습니다.
데이터베이스	PostgreSQL	동적 콘텐츠(예: 블로그 포스트 조회 추적, 뉴스레터 구독)를 위한 신뢰성 높은 관계형 DB입니다.
배포	Google Cloud Run	서버리스이며 컨테이너화된 배포 방식으로, 사용하지 않을 때는 0으로 스케일 다운하지만 게시물이 바이럴하게 퍼질 경우 트래픽 급증을 처리할 수 있습니다.

📦 Google Cloud Run에 배포하기

도전 과제 중 하나는 Cloud Run에 배포하는 것이었으며, 이는 과정 중 가장 순조롭게 진행된 부분 중 하나였습니다. 저는 재현 가능하고 컨테이너화된 파이프라인을 원했으며, “코드를 벽에 던져버리는” 방식은 원하지 않았습니다.

Dockerfile (멀티‑스테이지 빌드)

# ---- Build stage ----
FROM node:20-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build   # Next.js build

# ---- Production stage ----
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 --omit=dev   # Install only production deps
EXPOSE 8080
CMD ["node", "server.js"]

결과: 최종 이미지 ≈ 80 MB (개발 의존성 제거됨).

CI/CD 워크플로우

Gemini CLI가 컨테이너를 Google Artifact Registry에 푸시합니다.
Cloud Run 서비스가 자동으로 생성(또는 업데이트)됩니다.
main 브랜치에 푸시될 때마다 파이프라인이 트리거되어 새로운 컨테이너를 빌드하고 리비전을 업데이트합니다.

이 “git‑push‑to‑deploy” 워크플로우 덕분에 작은, 반복적인 업데이트를 자주 배포할 자신감을 얻었습니다.

🤖 AI‑지원 개발

전체 프로젝트는 AI‑보강되었습니다. 아래는 제가 Google 도구들을 어떻게 사용했는지 자세히 살펴봅니다.

Antigravity – 나의 페어 프로그래머

Antigravity는 전체 과정 내내 루프에 머물며, 편집기, 브라우저, 문서 사이의 지속적인 컨텍스트 전환을 없앴습니다.

사용 사례	Antigravity가 수행한 작업
리팩토링	다양한 모달 파일(`ReviewModal`, `DriverProfileModal`, …)을 분석하고 부드러운 입·출력 애니메이션을 위해 framer‑motion을 활용한 통합 모달 아키텍처를 제안했습니다. 또한 prop drilling 및 ARIA 접근성을 처리하는 방법을 안내했습니다.
지능형 디버깅	다형성 prop과 관련된 TypeScript 오류가 발생했을 때, Antigravity는 컴포넌트 사용을 검사하고 추론 실패를 설명하며 컴파일러를 만족시키는 정확한 수정을 제공했습니다—일반적인 Stack Overflow 탐색이 필요 없었습니다.
선제적 최적화	`next/image` 컴포넌트에 `sizes` prop을 추가하여 레이아웃 이동(CLS)을 방지하고 LCP 점수를 향상시키도록 권장했습니다.

AI Studio – “편집장”

AI Studio는 창의적 방향을 형성하는 데 도움을 주었습니다:

콘텐츠 전략 및 사이트 구조 브레인스토밍.
기사, 프로젝트 설명, 마이크로 인터랙션에 대한 아이디어 생성.

Gemini CLI – 자동화 영웅

반복 작업에 있어 Gemini CLI는 구세주였습니다:

새 페이지와 컴포넌트를 위한 보일러플레이트 코드를 스캐폴딩했습니다.
‘지루한’ 부분을 가속화하여 마이크로 인터랙션과 레이아웃 조정에 집중할 수 있었습니다.

🎨 “프리미엄 심플리시티” 미학

나는 흑백 (B&W) 미학을 받아들였다. 색상을 주요 계층 구조 도구로서 제거함으로써, 여백, 타이포그래피, 그리고 대비에 의존해 사용자의 시선을 유도할 수밖에 없었다. 그 결과는 다음과 같다:

프리미엄하고 현대적임
깔끔하여 기사와 프로젝트가 돋보임
고대비를 통한 가독성으로 접근성이 높음

🧩 Component‑Driven Architecture

이 사이트는 자체 포함형, 재사용 가능한 컴포넌트를 중심으로 구축되었습니다:

ProjectList → BlogCard → … 각 컴포넌트는 자체 파일에 존재합니다.
예를 들어 카드 디자인을 업데이트하는 경우, 단일 변경만으로 충분하며 사이트 전체에 자동으로 전파됩니다.

📚 Final Thoughts

Leveraging the Google AI ecosystem turned what could have been a long, manual build into a rapid, enjoyable sprint. The combination of Next.js, Tailwind, PostgreSQL, and Google Cloud Run, all powered by AI‑assisted tools, allowed me to deliver a portfolio that embodies my “premium simplicity” philosophy while staying fast, accessible, and future‑ready.

Feel free to explore the live site, poke around the code, or reach out if you’d like to chat about AI‑augmented development!

인터페이스로서의 타이포그래피

“Health” 섹션
디지털 헬스를 내 개발자 포트폴리오에 추가한 것은 큰 도전이었습니다. 이는 건강 및 웰빙 주제를 다루는 기사들을 위한 전용 공간으로, 내 기술 역량과 옹호 활동 사이의 격차를 메워줍니다. 오랫동안 나는 이 두 세계를 별도로 유지했습니다; GitHub 프로필은 한 사람을 보여주고, 커뮤니티 활동은 또 다른 사람을 보여주었습니다. 여기서 두 영역을 통합함으로써 포트폴리오가 나만의 독특한 느낌을 갖게 되고, 나에 대한 보다 완전한 이야기를 전달합니다.
성능 및 접근성
높은 Lighthouse 점수를 달성한 것은 중요한 이정표였습니다. 이는 현대적인 미적 감각을 위해 성능을 희생할 필요가 없다는 것을 증명합니다.
원활한 AI 워크플로우
이 도전은 마침내 포트폴리오 v3를 출시할 완벽한 구실이었습니다. 이는 단순히 시각적인 리프레시가 아니라 내 기술과 워크플로우의 “백엔드” 리프레시를 의미합니다. Google 도구를 활용한 AI‑first 개발을 수용함으로써, 나는 2026년 내 작업의 방향성을 제시하는 무언가를 만들었습니다.