1. 도입 배경 및 과제 (Background & Problem)

기존의 정적이고 밋밋한 템플릿 기반 이력서에서 탈피하여, 직접 학습한 기술 스택(React, Next.js, CSS)을 직관적으로 드러내고 다양한 개발 기술 일지를 우아하게 아카이빙할 수 있는 독자적인 디지털 포트폴리오 아키텍처가 필요했습니다.

2. 기술적 구현 및 적용 (Technical Implementation)

• • Next.js 15 App Router 기반의 고성능 SSR/SSG 스트리밍 구조 설계
• • React 19 Suspense를 연동하여 비동기 데이터 로딩 및 클라이언트 초기 렌더링 성능 최적화
• • Vanilla CSS 미디어 쿼리와 변수를 이용해 성능 저하 없는 전역 테마(다크/라이트) 토글 및 글래스모피즘 UI 구축
• • MDX 컴포넌트 커스터마이징을 통해 코드 하이라이트(rehype-pretty-code) 및 다이어그램(Mermaid) 등을 매끄럽게 통합

3. 성과 및 유용성 (Result & Benefit)

• • 최신 웹 표준 기술을 적극 도입하여 등급 측정 사이트에서 최고 속도 등급을 기록하는 경이로운 로딩 성능 증명
• • 자체 구축한 아카이빙 채널을 통해 기술적인 성장 기록을 안전하고 자유롭게 표현할 수 있는 인적 브랜딩 공간 확보