페이지 불러오는 중
개인 포트폴리오 및 기술 블로그 플랫폼 구축 프로젝트
목차
프로젝트 개요 (Overview)
- 프로젝트명: 개인 디지털 포트폴리오 & 기술 블로그 (Resume & Tech Blog)
- 주요 기술 스택: Next.js 15 (App Router), React 19 (Suspense), Vanilla CSS (CSS 변수, 미디어 쿼리), MDX (rehype-pretty-code, Mermaid)
- 핵심 목표: 기존 정적 이력서 템플릿의 한계를 벗어나 학습한 프론트엔드 기술을 직접 증명하고, 기술 성장 일지와 이력서가 유기적으로 연동되는 독자적인 아카이빙 플랫폼 구축 🔗 https://github.com/rlaguswls13/rlaguswls13.github.io
1. 도입 배경 및 과제 (Background & Problem)
기존의 정적이고 밋밋한 템플릿 기반 이력서에서 탈피하여, 직접 학습한 기술 스택(React, Next.js, CSS)을 직관적으로 드러내고 다양한 개발 기술 일지를 우아하게 아카이빙할 수 있는 독자적인 디지털 포트폴리오 아키텍처가 필요했습니다.
- 기존 이력서의 한계: 정형화된 템플릿 구조로는 실제 개발 역량과 차별성을 충분히 전달하기 어려움.
- 체계적 기술 아카이빙 필요: 배운 지식, 개발 일지, 트러블슈팅 경험을 독립된 채널에서 자유롭게 기록할 공간이 필요.
- 이력서와 블로그의 단절 해소: 이력서의 요약 내용과 블로그의 심층적인 기술 기록이 따로 분리되지 않고 연결되어야 함.
2. 기술적 구현 및 적용 (Technical Implementation)
① Next.js 15 App Router 기반의 고성능 스트리밍 구조 설계
- Next.js 15 App Router를 채택하여 고성능 SSR(Server-Side Rendering) 및 SSG(Static Site Generation) 스트리밍 아키텍처 설계
- 서버 컴포넌트(RSC)를 기반으로 클라이언트 JavaScript 번들 사이즈를 최소화
② React 19 Suspense를 연동한 렌더링 성능 최적화
- 비동기 데이터 로딩 구간에 React 19 Suspense를 연동하여 점진적 UI 렌더링 구현
- 초기 로딩 지연(FCP/LCP)을 방지하고 레이아웃 흔들림(CLS)을 최소화
③ Vanilla CSS 기반의 전역 테마 토글 및 글래스모피즘 UI 구축
- 무거운 외부 CSS 프레임워크 없이 Vanilla CSS 변수(Custom Properties)와 미디어 쿼리만으로 스타일링 구현
- 런타임 오버헤드나 깜빡임(FOUC) 없이 매끄러운 전역 테마(다크/라이트) 토글 지원
backdrop-filter와 미디어 쿼리를 조합하여 성능 저하 없는 미려한 글래스모피즘(Glassmorphism) 반응형 UI 구축
④ MDX 컴포넌트 커스터마이징 파이프라인
- MDX 컴포넌트를 커스터마이징하여 마크다운 본문 내에서 다양한 인터랙티브 UI 요소 지원
rehype-pretty-code를 통한 미려한 코드 신택스 하이라이팅 적용Mermaid다이어그램을 매끄럽게 통합하여 기술 아키텍처 및 흐름도를 시각적으로 표현
4. 콘텐츠 관리 아키텍처의 4단계 점진적 진화 과정 (Architecture Evolution)
블로그 콘텐츠의 양적 증가와 인터랙티브 컴포넌트 확장 요구에 따라 데이터 관리 및 렌더링 구조를 4단계에 걸쳐 점진적으로 고도화하였습니다.
text
┌──────────────────┐ ┌───────────────────────┐ ┌──────────────────────┐ ┌──────────────────────┐
│ 1단계: 바닐라 HTML │ ──> │ 2단계: JSON + JS/HTML │ ──> │ 3단계: JSON + TSX │ ──> │ 4단계: MDX + TSX │
│ (단일 정적 파일) │ │ (데이터와 뷰의 분리) │ │ (컴포넌트화/타입안전) │ │ (문서 자체의 컴포넌트│
└──────────────────┘ └───────────────────────┘ └──────────────────────┘ │ 화 및 확장성 극대화)│
└──────────────────────┘
① 1단계: 순수 바닐라 HTML (Pure Vanilla HTML)
- 방식: 단일 HTML 파일 내에 글 본문과 마크업을 직접 작성하여 서빙.
- 배경 및 한계: 초기 작성할 글의 개수가 적을 때는 별도 빌드나 데이터 파싱 없이 가장 직관적이고 편리하게 관리할 수 있었으나, 글이 점차 늘어남에 따라 헤더·푸터·공통 레이아웃이 중복되고 유지보수 비용이 급증함.
② 2단계: json.data + Vanilla JS + HTML
- 방식: 글 내용과 메타데이터를 별도의
json데이터로 분리 저장하고, 바닐라 JavaScript를 통해 HTML 템플릿에 동적으로 데이터를 바인딩하여 렌더링. - 배경 및 한계: 데이터와 화면 뷰(View)가 분리되어 레이아웃 재사용성은 확보했으나, 글이 많아질수록 DOM 조작 코드가 비대해지고 데이터 스키마 변경 시 런타임 에러 추적이 어려워짐.
③ 3단계: json.data + React TSX (Next.js)
- 방식: TypeScript와 React 컴포넌트 기반 아키텍처를 도입하여, JSON 데이터를 받아 TSX 컴포넌트 단위로 화면을 렌더링.
- 배경 및 한계: 정적 타입 안정성과 컴포넌트 모듈화는 성공했으나, 글의 편수가 계속 늘어나고 본문 내에 코드 블록, 다이어그램, 알림창 등 복잡한 서식이 포함되면서 JSON 파일 내에 긴 텍스트와 서식을 이스케이프 문자열 형태로 관리하는 데 구조적 한계 봉착.
④ 4단계: MDX + React TSX (최종 최적화 아키텍처)
- 방식: 마크다운(
.mdx) 파일 자체를 독립된 문서로 관리하고, 필요에 따라 TSX 리액트 컴포넌트를 문서 내에 직접 주입·활용하는 방식으로 전면 개편. - 핵심 장점:
- 작성 편의성: 일반 글 작성은 가볍고 직관적인 마크다운 문법으로 온전히 몰입.
- 컴포넌트 확장성: 코드 하이라이트(
rehype-pretty-code),Mermaid다이어그램, UI 컴포넌트가 필요할 때만 TSX 컴포넌트를 선별 주입하여 렌더링. - 유지보수성 극대화: JSON 데이터 파싱의 복잡성을 완전히 제거하고, 파일 기반 라우팅 및 지식 아카이빙 관리가 압도적으로 편리해짐.
4. 성과 및 유용성 (Result & Benefit)
- 최고 수준의 로딩 성능 증명: 최신 웹 표준 기술을 적극 도입하여 웹 성능 측정 사이트에서 최고 속도 등급을 기록하는 뛰어난 로딩 성능 달성
- 독자적인 퍼스널 브랜딩 공간 확보: 자체 구축한 아카이빙 채널을 통해 기술적인 성장 기록을 안전하고 자유롭게 표현할 수 있는 인적 브랜딩 채널 구축
5. 블로그 글 작성에 포커싱할 수 있는 3대 장점
1) AI를 통한 테마 및 UI/UX 구성 ➔ 블로그 글 작성 몰입
- AI를 통해 자유롭고 신속하게 테마와 화면 UI/UX를 구성할 수 있어 디자인/스타일링 부담 해소
- 퍼블리싱 작업에 시간을 뺏기지 않고 온전히 블로그 글 작성과 지식 정리에만 포커싱 가능
2) 백링크 형성 및 지식 Wiki 자동 생성 ➔ 중복 글 관리와 개념 재검토
- 작성된 글 간의 백링크 형성 및 지식 Wiki 체계 연동
- 이전에 작성한 글과의 중복 작성을 방지하고, 새로운 글을 쓰면서 기존 개념을 한 번 더 검토하고 교차 확인 가능
3) Resume ↔ Blog 간의 유기적 데이터 공유 ➔ 풍부하고 신뢰도 높은 이력서
- 이력서(Resume)와 기술 블로그(Blog) 간에 데이터를 유기적으로 공유
- 이력서의 프로젝트 요약에 실제 블로그의 기술 일지와 상세 분석 링크를 연결하여 깊이 있고 신뢰도 높은 이력서 완성