제약: 작은 화면, 키보드, reduced motion, 9개 언어, 외부 통합의 안전 경계를 동시에 충족해야 했습니다.
이 사이트는 명확성과 기술적 깊이를 모두 원하는 채용 담당자, 엔지니어링 관리자, 개발자, 잠재 고객을 위한 것입니다. 독특한 상호작용을 만들면서도 가독성, 반응형 사용, 모션 감소, 9개 언어 유지보수, AI와 통합의 안전한 경계를 지켜야 했습니다.
9개 언어 콘텐츠와 라우팅:next-intl이 locale route와 messages를 담당하고, 프로젝트마다 현지화 MDX와 문서화된 영어 fallback을 둡니다.
Canvas와 3D 상호작용: Perlin-style distortion이 있는 custom Canvas waves, Framer Motion, 집중형 Three.js/React Three Fiber hero가 전체 제품을 3D scene으로 만들지 않으면서 expressive motion을 제공합니다.
FUI 진단 터미널: CRT 질감, scanlines, terminal status readout, glitch typography가 읽기 쉬운 hierarchy를 지키며 미래형 정체성을 만듭니다.
선택적 음성 및 더빙: local browser feedback, dubbing popup, audio sequencing은 user settings와 browser support를 따릅니다.
오버레이 조정: boot screen, navigation, cursor, scanlines, chat, dubbing popup, 3D hero는 fixed layer count가 아니라 의도적인 stacking coordination을 사용합니다.
Oz 어시스턴트 설계:/api/chat은 중립적인 주 서비스와 fallback 서비스 라우팅, 정적 포트폴리오 데이터와 심층 MDX 문맥, 명시적인 UI 도구를 사용합니다.
클라이언트, 서버, 상태 경계: theme, 국제화, music provider는 분리하고 chat preference는 브라우저 로컬 상태에 두며 filter store는 좁은 역할만 맡습니다.
트레이드오프: 전체 3D 경험 대신 목적 있는 Canvas와 선택적 3D를 택했고 브라우저 음성은 서버 음성 파이프라인이 아닌 선택적 피드백입니다.
데이터 흐름: 방문자 입력은 /api/chat으로 가고 정적 포트폴리오 데이터와 심층 MDX 문맥을 받습니다. 스트리밍 응답은 텍스트와 UI action을 반환하며 지원 브라우저는 선택적으로 로컬 음성을 사용할 수 있습니다.
진단형 디지털 글리치와 HUD 시각 시스템은 시스템, 라이트, 다크 테마에서 작동합니다. 맞춤형 Canvas 파도는 물리감과 Perlin 스타일 왜곡을 제공하며, React Three Fiber와 Three.js 히어로는 집중된 3D 레이어를 제공합니다. 서버 구조는 대화형 클라이언트 셸과 분리되어 있습니다. next-intl 라우트는 현지화된 MDX를 로드하고 영어를 콘텐츠 폴백으로 사용합니다.
결과와 증거
결과: 빠른 방향 안내와 시스템의 깊은 설명을 모두 제공하는 포트폴리오가 되었습니다.
품질과 검증: ESLint, TypeScript 검사, production build가 재현 가능한 검증 기준입니다.
보안 제어: chat은 signed temporary lockdown과 rate boundary를, MCP는 read-only scope와 one-time authorization code를 사용합니다.
비교와 진화: 이전 Portfolio: Glass에서 현지화된 편집형 설명과 agent access를 담는 더 모듈화된 제품으로 발전했습니다.
영향: 창의적인 frontend와 유지보수 가능한 콘텐츠, integration, security, deployment 판단을 함께 보여 줍니다.
현재 증거
검증 방식
품질 관문
ESLint, TypeScript, production build
현지화
9개 next-intl locale과 MDX
모션
reduced-motion, coarse-pointer 분기
AI 경계
중립적인 primary/fallback 서비스 라우팅
MCP 경계
OAuth 2.1, PKCE S256, portfolio.read
Canvas 파도와 glitch 텍스트에는 모션 감소 분기가 있으며, 맞춤 커서는 coarse pointer에서 숨겨집니다. 의미 있는 레이아웃과 레이블이 있는 컨트롤 및 내비게이션은 반응형 상호작용을 지원합니다. Vercel Fluid Compute가 배포 대상이고 Node.js 24 LTS가 의도한 런타임입니다. ESLint, TypeScript 검사, 프로덕션 빌드가 품질 관문입니다.
기술 심층 분석
주요 세부 사항: CRT 질감, glitch typography, Canvas, 집중된 3D hero, music controls, locale-aware content가 과도한 전역 state 없이 역할을 나눕니다.
검증: lint, typecheck, production build를 반복 가능한 quality gate로 실행하고 responsive, reduced-motion, coarse-pointer 분기를 UI 변경 시 검토합니다.
최적화: client-only shell은 browser feature를 분리하고 MDX, data module, modular component는 필요 없는 상호작용을 줄입니다.
코드 품질: TypeScript type, 정돈된 handler, focused provider, 좁은 store, service/security module로 ownership을 명확히 합니다.
Oz는 중립적인 다중 서비스 라우팅과 제어된 폴백을 사용해 /api/chat에서 스트리밍합니다. 정적 포트폴리오 데이터와 심층 MDX 콘텐츠를 기반으로 답합니다. 로케일 인식 작업은 탐색, 프로젝트 검색, 연락, 음악, 테마, 언어 변경을 돕습니다. 선택적인 브라우저 음성 또는 더빙 피드백, 로컬 환경설정, 선택적 추론 또는 하위 에이전트 실행, 탈옥 또는 반복 악용을 위한 서명된 임시 잠금은 명확한 클라이언트와 서버 경계 안에 있습니다.
MCP 및 에이전트 접근
MCP 접근은 읽기 전용이며 OAuth 2.1 Authorization Code 흐름, PKCE S256, portfolio.read 범위로 보호됩니다. Streamable HTTP가 기본 전송입니다. OpenAPI, .well-known 검색, 에이전트 카드와 스킬 문서로 검색할 수 있습니다. Upstash Redis는 Vercel에서 원자적인 일회성 코드 교환을 제공하며, 로컬 폴백과 필요한 호환 엔드포인트가 있습니다.
지원 제품 시스템
Spotify 로그인, 콜백, 현재 재생 엔드포인트가 음악 경험을 지원합니다. SMTP 연락처 라우트는 통합 경계에서 보호를 적용합니다. Vercel Analytics와 Speed Insights, 분석 거부 기능이 포함됩니다. PWA manifest, JSON-LD, robots, sitemap, humans.txt, llms.txt, llms-full.txt, 현지화된 개인정보 및 법적 페이지도 제공합니다.
회고
다르게 할 점: 가장 무거운 visual path를 계속 단순화하면서 editorial personality를 유지합니다.
성공: interface, localized narrative, assistant, music, discovery가 하나의 제품처럼 작동합니다.
교훈: server integration, browser-only behavior, localized content의 경계가 명확할수록 rich interaction을 유지하기 쉽습니다.
클라이언트 애니메이션, 서버 통합, 현지화 콘텐츠를 분리하는 것이 가장 중요한 배움이었습니다. 이 포트폴리오는 상호작용, 콘텐츠 정확성, 통합 경계를 계속 다듬는 실용적인 공간입니다.
상호작용과 애니메이션: motion, scroll, reduced-motion, responsive interaction을 조정했습니다.
제품과 디자인 시스템, 프론트엔드 상호작용, Canvas와 3D, 현지화 콘텐츠, Oz와 AI, MCP와 보안, 음악, 연락처, 분석, 검색 통합을 처음부터 끝까지 설계하고 구현했습니다.
아키텍처
계층 구조: server component는 locale과 문서 구조를, client component는 browser-only interaction을 담당하며 API route는 chat, contact, media, MCP를 분리합니다.
/api/mcp, OpenAPI, .well-known은 read-only agent discovery를 제공하고 /api/chat은 Oz stream surface입니다.
Oz 운영:/api/chat, /api/chat/health, /api/gallery/[slug]는 어시스턴트의 스트리밍, 상태 확인, rate-limited project-media surface를 제공하며, 승인된 UI 도구는 탐색, 프로젝트 필터링, enabled gallery, 연락처 검토, 음악, 테마, 언어 작업을 처리합니다.
llms.txt, llms-full.txt, auth.md와 discovery documents는 LLM과 사람이 읽을 context를 제공합니다.
authorization scope는 portfolio.read에 한정되어 MCP가 write surface가 되지 않습니다.