플러스프로젝트 배경
1) 문제점 - Notion 포트폴리오 페이지만으로는 데이터 분석가로서의 기술적 역량을 시각적으로 차별화하기 어려웠습니다. - 프로젝트 업데이트 시 Notion과 웹사이트를 각각 수동 편집해야 하는 이중 관리 비용과 데이터 불일치 리스크가 상존했습니다. 2) 프로젝트 목표 - CSS custom properties 기반 Cinematic Dark Theme으로 일관된 브랜딩 구현 - V
프로젝트 성과
Notion CMS 자동 연동 — 유지보수 비용 제로 달성
Vercel Serverless Function 71줄(의존성 0)으로 Notion DB 자동 동기화. 콘텐츠 추가·수정 시 코드 변경 없이 Notion만 편집하면 즉시 반영.
7개 프로젝트 완전 전시 — 100% 반응형 대응
모바일(768px)·태블릿(1024px)·데스크톱 3단계 브레이크포인트로 전 디바이스 완전 대응. 10개 이상 기술 스택 시각화.
API 무중단 안전망 — Fallback 이중 구조 구현
Notion API 장애·CORS 이슈 발생 시 fallback-data.js(115줄)로 자동 전환, 사용자 경험 무중단 보장. 빈 화면 문제 완전 해소.
Dynamic Stats — 6곳 데이터 불일치 방지
Hero/Terminal/Stats Bar/About/Projects 등 6개 영역의 수치를 API·fallback 데이터에서 자동 계산. 하드코딩 누락으로 인한 불일치 리스크 제거.
핵심 기능
Notion 자동 동기화 (Serverless CMS)
Vercel Serverless Function 71줄(외부 의존성 0)으로 Notion DB와 실시간 연동.
사이트 코드 수정 없이 Notion 업데이트만으로 콘텐츠가 즉시 반영됩니다.
사이트 코드 수정 없이 Notion 업데이트만으로 콘텐츠가 즉시 반영됩니다.
진행 단계
기획 및 아키텍처 설계
2026.02.
Notion CMS 아키텍처 설계, 디자인 시스템 콘셉트 수립, 기술 스택 결정
(빌드 도구 제로 전략, Vercel Serverless, fallback 전략 확정)
(빌드 도구 제로 전략, Vercel Serverless, fallback 전략 확정)
프로젝트 상세
[ 1) 포트폴리오 소개 ] 데이터 분석가 개인 브랜딩을 위한 포트폴리오 웹사이트입니다. Notion DB를 콘텐츠 원장(Single Source of Truth)으로 삼고, Vercel Serverless Function을 통해 실시간 자동 연동함으로써 사이트 코드 수정 없이 Notion 업데이트만으로 콘텐츠가 반영되는 구조를 구현했습니다. 순수 HTML/CSS/JS(빌드 도구 없음)로 7개 프로젝
