내 새로운 2026 포트폴리오: Google Cloud와 AI 기반

Source: Dev.to

Google AI가 제시한 새해, 새로운 당신 포트폴리오 챌린지 제출 (링크: New Year, New You Portfolio Challenge Presented by Google AI)

소개

Hi, I’m a passionate full‑stack developer who loves exploring the intersection of design and engineering. For 2026, I wanted to express my evolution as a creator—moving beyond static pages to build immersive, interactive web experiences.

My goal with this portfolio was to create a “digital home” that feels alive. I wanted to showcase not just what I build, but how I think about performance, aesthetics, and user experience.

Portfolio

(포트폴리오는 챌린지 설명에 제공된 링크에서 실시간으로 확인할 수 있습니다.)

어떻게 만들었는가

이 포트폴리오는 속도, 인터랙티브성 및 확장성을 위해 구축된 최신 웹 애플리케이션입니다.

기술 스택

• 프레임워크: Next.js 15 (App Router)
• 언어: TypeScript
• 스타일링: Tailwind CSS & custom CSS
• 애니메이션: GSAP (GreenSock) for complex timelines and Framer Motion for UI interactions
• 3D 요소: React Three Fiber (R3F) integration
• 배포: Dockerized and hosted on Google Cloud Run

디자인 결정

저는 최신 UI 트렌드에서 영감을 받아 메인 네비게이션에 “벤토 박스” 그리드 레이아웃을 적용했습니다. 이를 통해 사용자는 제 작업의 다양한 측면(블로그, 프로젝트, 경력)을 모듈식으로 탐색할 수 있습니다.

컬러 팔레트는 깊고 풍부한 배경에 네온 포인트를 사용해 프리미엄하고 하이테크한 느낌을 줍니다. 가능한 한 표준 라이브러리 컴포넌트를 피하고, “플로팅 도크” 네비게이션과 같은 맞춤 UI 요소를 구축하여 독특한 아이덴티티를 확보했습니다.

Google Cloud 및 AI 통합

Google Cloud Run에 배포하는 과정은 매우 간단했습니다. 멀티‑스테이지 Dockerfile을 사용해 애플리케이션을 컨테이너화하여 이미지 크기를 최소화했으며(Next.js standalone 모드 활용).

• Containerization: node:20-alpine 기반의 고도로 최적화된 Docker 이미지를 빌드했습니다.

  # syntax=docker/dockerfile:1
  FROM node:20-alpine AS builder
  WORKDIR /app
  COPY package*.json ./
  RUN npm ci
  COPY . .
  RUN npm run build && npm prune --production
  
  FROM node:20-alpine AS runner
  WORKDIR /app
  COPY --from=builder /app/.next/standalone ./
  COPY --from=builder /app/.next/static ./static
  EXPOSE 8080
  CMD ["node", "server.js"]

• Deployment: Google Artifact Registry에 푸시한 뒤 단일 명령으로 Cloud Run에 배포했습니다.

• AI Assistance: Antigravity를 통해 Google의 Gemini 모델을 활용하여 복잡한 GSAP 애니메이션 로직을 생성하고, Next.js 15로 마이그레이션하는 과정에서 발생한 엄격한 TypeScript 오류를 디버깅했습니다.

내가 가장 자랑스러워하는 것

🚀 우주선 게임

포트폴리오에 직접 삽입된 완전 플레이 가능한 우주선 슈팅 게임입니다. 상태 관리와 캔버스 성능 최적화에 대한 도전 과제로, 모바일 기기에서도 60 FPS로 부드럽게 실행됩니다.

⚛️ 테크 중력 (물리 기반 스택)

• 작동 방식: Matter.js를 사용해 각 기술 아이콘이 물리 본체가 되는 2D 물리 세계를 만들었습니다.
• 상호작용: 사용자는 아이콘을 잡고, 끌고, 던질 수 있습니다.
• 동적 효과: 충돌 이벤트가 SVG 번개와 GSAP을 통한 빛나는 효과를 트리거하여 기술들 간의 에너지와 연결감을 제공합니다. IntersectionObserver는 컴포넌트가 화면에 보이지 않을 때 물리 엔진을 일시 정지시켜 배터리 소모를 줄입니다.

🌳 3D 유기적 스크롤 배경

• 절차적 생성: 재귀 알고리즘이 실시간으로 3D 나무 구조를 생성합니다.
• 맞춤 투영: 가벼운 3D‑to‑2D 원근 투영 함수가 생성된 점들을 SVG 캔버스로 매핑하여 무거운 3D 라이브러리를 피합니다.
• 스크롤 애니메이션: GSAP ScrollTrigger를 사용해 스크롤할 때 가지가 “성장”하고 스스로 그려집니다. 경로는 유기적이고 부드러운 선을 위해 2차 베지어 곡선을 사용하며, 깊이 정렬(페인터 알고리즘)을 통해 Z‑depth에 따라 가지를 올바르게 레이어링합니다.

새해, 새로운 당신 포트폴리오 챌린지를 위해 제작되었습니다.