포트폴리오: 글래스

Next.js 15 App Router, TypeScript, Tailwind CSS, MDX로 구축된 미니멀리스트 글래스모피즘 포트폴리오 사이트

라이브 데모 (V1) • [GITHUB: 비공개 소스]

Overview

• 역할: 1인 제작자, UI/UX 디자이너 & 프론트엔드 개발자
• 스택: Next.js 15 (App Router), React 18, TypeScript, Tailwind CSS 4, Framer Motion, Radix UI, MDX, next-intl
• 주요 성과: 완벽한 100/100/100/100 PageSpeed 스코어 및 SEO 최적화 달성
• 요약: 하이엔드 미니멀리즘 미학을 보여주는 정적 생성 개발자 포트폴리오로, 프론트엔드 엔지니어링 인턴십을 구하던 시기(그 과정에서 Trend Micro에 최종 입사하게 됨)에 구축되었습니다. 모듈식 UI 프리미티브, 현지화된 콘텐츠 및 완전 반응형 글래스모피즘 인터페이스를 제공합니다.

The Problem

• 도전 과제: 핵심 도전 과제는 디자인 여정의 초기 단계에 있는 개발자로서 처음부터 응집력 있는 시각 언어를 구현하는 것이었습니다. 포트폴리오 웹사이트를 처음부터 디자인한 것이 두 번째에 불과했기 때문에 적절한 출발점을 찾고, 균형 잡힌 레이아웃을 구축하며, 기존 템플릿을 사용하지 않고 높은 미적 품질을 확보하는 것이 어려웠습니다.
• 대상: 당시 인턴십 기회를 지원하고 있던 기업(Trend Micro 등)의 기술 리크루터, 엔지니어링 리드 및 팀.
• 제약 조건: 초기 클라이언트 번들 크기를 작게 유지하고 페이지 응답성을 보장하며 웹 접근성 표준을 충족하면서, 다양한 모바일 및 데스크톱 브라우저에서 일관된 반투명 글래스모피즘 UI를 구현하는 것.

Approach & Decisions

• 아키텍처: 다국어 페이지를 위한 Next.js App Router. 정적 마크다운(MDX) 페이지를 렌더링하기 위해 React Server Components(RSC)에 의존하며, 대화형 요소(애니메이션, 독, 명령 메뉴)가 필요한 곳에만 Client Components를 결합합니다.
• 주요 결정:
  • Tailwind CSS 4로 시작: 초기 Tailwind 4 빌드를 활용하여 매끄러운 CSS 글래스모피즘 변수, 커스텀 backdrop-filter 및 테두리 그라데이션을 구현했습니다.
  • 모듈식 UI 프리미티브: 기술 부채를 쌓지 않고 다양한 뷰를 쉽게 구성할 수 있도록 재사용 가능한 레이아웃 블록(ui/, motion-primitives/, dock/)을 구축했습니다.
  • next-intl을 통한 다국어 지원: 영어 및 기타 대상 언어의 국제화를 기본으로 지원하도록 코드베이스를 구성했습니다.
• 트레이드오프: 로드 시간을 최적화하기 위해 동적 서버 렌더링 대신 클라이언트 측 구성 요소 하이드레이션이 있는 정적 생성(SSG)을 선택했습니다. 이로 인해 실시간 동적 데이터베이스 상호작용은 제한되었습니다.
• 데이터 흐름: 페이지 요청은 레이아웃 템플릿에 래핑된 정적 MDX 컴파일에 직접 매핑됩니다. 클라이언트 상태는 메뉴, 테마 토글 및 모달을 위해 React 훅을 통해 관리됩니다.

Key Results & Impact

• 결과: 매우 빠르게 로드되고 검색 엔진에서 높은 순위를 차지하는洗練된 현대적인 글래스모피즘 인터페이스입니다.
• Lighthouse 성능: 모바일 및 데스크톱용 PageSpeed Insights에서 성능, 접근성, 권장 사항 및 SEO 전반에 걸쳐 완벽한 100 / 100 / 100 / 100 점을 기록했습니다.
• 콘텍스트: 인턴십을 적극적으로 구하는 기간 동안 구축되었으며, 결과적으로 Trend Micro에 합류하는 성과를 거두었습니다.
• 최적화 한계: 이 V1 프로젝트에서 최적화는 표준 검색 엔진 최적화(SEO)로 엄격하게 제한되었습니다. 이후 V2 레이아웃에서 다루어진 AI 최적화(AIO), 답변 엔진 최적화(AEO), 생성형 엔진 최적화(GEO)와 같은 현대적 최적화 패러다임은 완전히 결여되어 있었습니다.
• 비교: 이것은 V1 레이아웃이었습니다. 성능은 뛰어났지만 V2(포트폴리오: 사이버펑크) 레이아웃에 탑재된 맞춤형 터미널 대화형 기능, 3D Canvas 물리학 및 음성 활성화 AI 챗봇은 포함되어 있지 않았습니다.
• 임팩트: 고정밀 사용자 인터페이스 디자인을 실행하고 검색에 최적화된 React 코드베이스를 구축할 수 있는 검증된 능력을 보여주었습니다.

Technical Deep Dive

• 주목할 만한 세부 사항: 대화형 애니메이션 독 네비게이션, 백드롭 유틸리티를 사용한 맞춤형 반투명 유리 효과, CMD+K 명령 검색 메뉴.
• 검증: next build를 사용하여 로컬에서 빌드 및 테스트했으며, Lighthouse, Vercel Analytics를 사용한 런타임 프로파일링 및 Safari, Chrome, Firefox에서의 수동 레이아웃 검사를 실행했습니다.
• 최적화: 모든 MDX 페이지의 정적 페이지 생성(SSG), 무거운 대화형 클라이언트 구성 요소의 지연 로드, 표준 Next.js 이미지 구성을 사용한 이미지 최적화.
• 코드 품질: 엄격한 TypeScript 검사, 코드 포맷팅 및 linter 규칙을 적용했습니다.
• 링크: package.json 및 components/ 폴더 구조를 확인해 보세요.

Reflections

• 개선점: 사전에 Figma에서 디자인 시스템이나 시각적 가이드라인을 수립했어야 했습니다. 디자인 경험이 부족한 상태에서 코드에서 직접 디자인을 진행하다 보니 최종적인 글래스모피즘 미학에 도달하기까지 레이아웃의 여러 반복 주기 단계를 거쳐야 했습니다.
• 성공 요인: 완벽한 100/100 PageSpeed 점수를 달성하고 우아하고 깔끔한 반투명 유리 미학을 제공한 점.
• 교훈: 미니멀리스트 디자인은 단순해 보이지만 전문적으로 보이기 위해서는 정밀한 간격, 타이포그래피 계층 구조 및 패딩이 필요합니다. 또한 글래스모피즘 표면을 구현하려면 브라우저 호환성을 위한 신중한 backdrop-filter 폴백이 필요합니다.

---

My Contributions

• 완전한 소유권: UI 디자인, 레이아웃 시스템, 구성 요소 구조, 애니메이션 및 다국어 설정을 포함하여 프로젝트의 100%를 처음부터 독자적으로 설계, 설계 구축 및 구현했습니다.

---

Project Architecture

이 애플리케이션은 정적 클라이언트 측 생성을 위해 구성된 구조화된 Next.js App Router 패턴을 활용합니다.

• 계층 구조: 글로벌 구성 및 코어 레이아웃 래퍼가 테마 공급자와 기본 스타일을 관리하고, MDX 로더가 원시 마크다운 파일을 파싱합니다.
• 기능 모듈:
  • components/ui/ - 레이아웃 모듈 및 코어 시각적 구성 요소.
  • components/motion-primitives/ - 부드러운 전환을 위한 애니메이션 래퍼.
  • components/dock/ - 맞춤형 플로팅 네비게이션 유틸리티.
• 상태 관리: 클라이언트 측 상태를 개별 래퍼 내에 로컬로 유지합니다(예: 활성 항목 인덱스, 오버레이 표시 여부).

경로 및 리소스 매핑

V2(사이버펑크) 아키텍처와 달리 V1은 가벼운 클라이언트 전용 빌드입니다.

• 포함된 것:
  • 정적 루트 및 앵커: 프래그먼트 라우팅(#home, #about, #featured-projects, #experience-education-certificates, #blog, #connect)을 사용하는 단일 페이지 구조.
  • 메타데이터 및 디스커버리: 현지화된 매니페스트 파일(/site.webmanifest, /browserconfig.xml).
  • 하이드레이션된 하이드레이션 번들: 레이아웃, 페이지 요소 및 지연 로드 상태를 위한 정적 next-chunks.
• 결여된 것:
  • 백엔드 API 없음: 스트림 엔드포인트, 음악 루트 또는 챗봇 핸들러(/api/chat, /api/music)가 없습니다.
  • AI / 에이전트 통합 없음: 모델 컨텍스트 프로토콜(MCP) 엔드포인트(/api/mcp) 및 LLM 탐색 텍스트 스키마(/llms.txt, /llms-full.txt)가 완전히 결여되어 있습니다.

---

Demo Preview

• 글래스모피즘 랜딩 페이지: 반투명 패널, 섬세한 컬러 백드롭 및 정밀한 타이포그래피 정렬.
• 애니메이션 독 네비게이션: 마우스 추적에 따른 부드러운 독 아이콘 확장 및 섹션 타겟팅.
• 명령 메뉴(CMD+K): 직접적인 페이지 네비게이션 및 바로 가기를 위한 즉각적인 오버레이 메뉴.
• 라이브 데모 링크: 라이브 프로젝트는 franzdomingov1.vercel.app에서 확인할 수 있습니다.

호스팅 참고 사항:
V1 글래스 포트폴리오는 Vercel에 배포되어 있으며 위의 라이브 데모 링크를 통해 액세스할 수 있습니다. 메인 포트폴리오는 이후 사이버펑크(V2) 레이아웃으로 업그레이드되었습니다.