포트폴리오: 사이버펑크

Next.js 16, React 19, 그리고 커스텀 GSAP/Canvas 물리 엔진을 사용하여 구축된, 디지털 글리치와 FUI(Futuristic User Interface) 터미널 미학을 결합한 인터랙티브 개발자 포트폴리오

라이브 데모 • GITHUB 저장소 (비공개 액세스)

개요

• 역할: 제작자, 솔로 풀스택 및 크리에이티브 엔지니어
• 기술 스택: Next.js 16 (App Router), React 19, TypeScript, Tailwind CSS 4, GSAP, WebGL (Three.js), Web Audio API (Text-to-Speech), Google Generative AI SDK, next-intl (영어, 타갈로그어, 독일어, 스페인어, 프랑스어, 아랍어, 한국어, 일본어, 중국어로 콘텐츠 완전 현지화)
• 핵심 결과: 동적 음성 기반 챗봇 내비게이션 및 1초 미만의 페이지 로드를 갖춘 100% 인터랙티브 포트폴리오 커버리지
• 요약: 디지털 글리치 미학으로 설계된 프리미엄 디지털 포트폴리오이자 크리에이티브 엔지니어링 쇼케이스입니다. 대화형 AI 음성 대화, 캔버스 기반 파동 물리 전환 효과 및 부드러운 스크롤 환경을 통해 고도의 디자인 감각과 프론트엔드 숙련도를 증명합니다.

문제

• 과제: 일반적인 포트폴리오는 정적이고 지루하며 실제 풀스택 및 AI 통합 기능을 입증하지 못합니다. 성능이나 접근성을 손상시키지 않으면서 복잡한 애니메이션, 레이아웃, 상태 관리 및 실시간 AI 도구의 실행 가능한 개념 실증(PoC) 역할을 하는 몰입형 대화형 개인 웹사이트를 만드는 것이 목표였습니다.
• 대상: 기술적 깊이, 프리미엄 디자인 감각 및 견고한 소프트웨어 아키텍처를 추구하는 채용 담당자, 엔지니어링 관리자, 잠재적 클라이언트 및 개발자.
• 제약 사항: 웹 기반 캔버스 시뮬레이션, 3D 모델 뷰어, 커스텀 스트리밍 AI 챗봇을 실행하는 동안 모바일 기기에서 부드러운 60fps 애니메이션과 높은 성능(1초 미만의 로딩 시간)을 유지하는 것.

접근 방식 및 결정

• 아키텍처: Edge 렌더링 다국어 라우트를 위한 Next.js App Router와 테마, 음악 및 챗봇 상태를 위한 글로벌 React 컨텍스트의 결합.
• 주요 결정 사항:
  • 다국어 아키텍처: next-intl을 사용해 라우팅, 페이지 메타데이터, 챗 프롬프트 및 프로젝트 문서 구조를 현지화하는 견고한 i18n 프레임워크 구축 (9개 언어의 완전한 현지화 페이지 제공).
  • 캔버스 기반 전환: 간단한 CSS 전환 대신 커스텀 Perlin 노이즈 파동 왜곡을 통합하여 페이지 전환 시 촉각적인 디지털 파동 효과 생성.
  • 음성 합성 및 AI 챗봇: 신속한 스트림 응답을 위해 Edge 라우팅을 활용하고, 커스텀 음성 합성 대기열을 사용하도록 Google Generative AI SDK 구성.
  • Z-Index 레이어링: 오버레이, 커스텀 커서 및 3D 씬 간의 레이아웃 및 상호작용 충돌을 방지하기 위해 엄격한 15단계 z-index 스태킹 컨텍스트 설정.
• 절충점: 초기 페이지 번들을 최소화하고 로드 속도를 100ms 미만으로 유지하기 위해 무거운 3D 에셋 대신 CSS 오버레이와 경량 2D 캔버스 효과를 사용하기로 결정.
• 데이터 흐름: 사용자 입력 -> Next.js 라우트 핸들러 -> Google Generative AI -> 텍스트 스트림 -> 음성 합성 대기열 -> 커스텀 Web Audio 플레이어.

주요 결과 및 영향

• 성과: 모든 장치에서 부드러운 60fps 애니메이션, 100ms 미만의 TTFB(Time-to-First-Byte) 및 완전한 대화형 이중 언어 음성 비서 구현.
• Lighthouse 성능: Lighthouse의 모든 핵심 카테고리(성능, 접근성, 권장사항, SEO)에서 100/100/100/100 완벽한 점수 획득.
• 보안 규정 준수: Cloudflare의 isagentready 평가를 통해 보안 검증 감사에서 100/100 만점 획득.
• 비교: 제작자의 이전 하위 포트폴리오인 Portfolio: Glass에서 커스텀 대화형 터미널로 업그레이드하여 사용자 머무는 시간 증가 및 직접적인 기술 문의 유도.
• 영향: 현대적이고 복잡한 사용자 인터페이스와 프로덕션급 풀스택 아키텍처 구축 역량 입증.

기술적 깊이 분석

• 주요 세부 사항: 자체 제작 CRT 화면 스캔라인 필터, 반응형 커스텀 커서 트래킹, 동적 오디오 비주얼라이저 및 커스텀 다국어 next-intl 라우팅.
• 검증: Lighthouse 감사, 접근성 검사(대비 비율 >= 4.5:1), 저사양 기기 모바일 에뮬레이션을 사용하여 검증.
• 최적화: Next.js 이미지 원격 패턴 구성, Three.js 캔버스 에셋 지연 로드 및 사용되지 않는 CSS 최소화를 위한 Tailwind 스타일 간소화.
• 코드 품질: 엄격한 ESLint 구성, TypeScript 타이핑 및 독립적인 모듈식 컴포넌트 구현.
• 링크: package.json, next.config.ts 및 app/data.ts를 참조하십시오.

반영

• 개선 방향: 모바일 기기의 CPU 부하를 줄이기 위해 3D 모델을 추가 최적화하거나 배경 파동에 커스텀 셰이더 적용.
• 성공 요인: 사운드트랙, 그래픽 및 챗봇 상호작용이 조화롭게 함께 작동하는 단일한 디자인 미학 제공.
• 교훈: 스트리밍 AI API와 함께 복잡한 애니메이션을 관리하려면 React에서 신중한 비동기 상태 격리가 필요합니다.

---

나의 기여

• 프론트엔드 아키텍처: 커스텀 커서, HUD, 벤토 그리드 및 뮤직 프로바이더를 포함한 핵심 UI 쉘 설계 및 구현.
• AI 챗봇 통합: 음성 합성, 시스템 지침 및 로케일 기반 컨텍스트를 제공하는 음성 챗봇 프로그래밍.
• 애니메이션 튜닝: GSAP ScrollTrigger 타임라인 엔트리 연출 및 캔버스 파동 왜곡 전환 효과와의 동기화.

---

프로젝트 아키텍처

이 앱은 현지화된 라우트 폴더를 포함하는 모듈식 기능 기반 Next.js App Router 패턴을 따릅니다.

• 계층 구조: 서버 컴포넌트가 로케일 매개변수 및 구조적 라우팅을 처리하고, 클라이언트 컴포넌트가 대화형 위젯을 렌더링합니다.
• 기능 모듈:
  • components/sections/: 레이아웃 섹션 (Hero, About, Projects, Skills, Contact).
  • components/ui/: 대화형 UI 노드 (ASCIIText, CustomCursor, MusicPlayer, VerticalHUD).
• 상태 관리: React Context API가 글로벌 오디오 재생 상태, 테마 선택 및 언어 상태를 제어합니다.
• 리팩토링 및 개선: 개발 중 거의 즉각적인 HMR(Hot Module Replacement)을 위해 Turbopack을 사용하여 구성을 Next.js 16으로 업그레이드.

컴파일된 라우트 구조 (App Router)

애플리케이션은 개별 포트폴리오 프로젝트 경로를 제외하고 다음과 같은 정적(○) 및 동적(ƒ) 라우트 구조로 컴파일됩니다.

• PWA 및 SEO 인프라 (○ 정적):
  • /_not-found — 정적 글로벌 404 핸들러.
  • /manifest.webmanifest — 웹 앱 매니페스트.
  • /robots.txt 및 /sitemap.xml — 크롤러 디렉터리.
• 이중 언어 라우팅 (ƒ 동적):
  • /[locale] 및 /[locale]/[...rest] — next-intl을 사용한 로케일 기반 레이아웃 래퍼.
• Model Context Protocol (MCP) 및 AI 에이전트 (ƒ 동적):
  • /.well-known/mcp.json 및 /openapi.json — 기계가 읽을 수 있는 서버 기능 스키마.
  • /.well-known/agent-skills/ — AI 통합을 위한 스킬 디렉터리 (예: SKILL.md).
  • /api/mcp 및 /api/mcp/sse — 에이전트 클라이언트를 위한 SSE (Server-Sent Events) 통신 엔드포인트.
• 생성형 AI 챗봇 및 미디어 시스템 (ƒ 동적):
  • /api/chat 및 /api/chat/health — AI 챗봇 음성 프로세서를 지원하는 스트림 라우트 핸들러.
  • /api/music 및 /api/music/health — 오디오 스트림 컨트롤러 라우팅.
• LLM 컨텍스트 내보내기 (ƒ 동적):
  • /llms.txt 및 /llms-full.txt — LLM 읽기에 최적화된 포트폴리오 사실 정보, 컨텍스트 및 자격 증명의 토큰 효율적인 텍스트 내보내기.

---

데모 미리보기

• 디지털 글리치 랜딩 페이지: 표준 준수 타이포그래피, CRT 스캔라인 오버레이 및 실시간 상태 정보를 표시하는 몰입형 홈 뷰.
• 대화형 AI 챗봇: 우측 하단에 위치하여 동적으로 레이아웃 상태를 업데이트하고 음성 피드백을 재생하는 대화형 봇.
• 벤토 그리드 레이아웃: 기술, 타임라인, 자격 증명을 표시하는 깔끔하고 밀도 높은 대시보드 레이아웃.

호스팅 참고 사항:
본 프로젝트는 Vercel의 franzdomingo.dev 에 라이브로 호스팅되어 있습니다. 이 코드베이스 자체가 포트폴리오 프로젝트이며, 현재 귀하가 보고 계시고 실행 중인 바로 그 프로젝트입니다.