플러스프로젝트 배경
1) 문제점 포트폴리오 사이트 대부분이 CMS 템플릿 복제품이거나, 감성에만 치중해 반응형·접근성·성능이 무너지는 문제가 있었습니다. 에디토리얼 스튜디오 톤을 유지하면서 WCAG 2.2 AA·모바일~4K 전구간·번들 100KB(gzip) 목표를 동시에 만족하는 단일 페이지 레퍼런스가 필요했습니다. 2) 프로젝트 목표 커스텀 인터랙션(커서·글로우·패럴럭스)이 살아 있는 에디토리얼 감성 유지, W
프로젝트 성과
번들 최적화 — gzip 99KB 달성
Framer Motion 11 포함 JS 312KB 원본을 gzip 99KB로 압축.
Next.js 런타임 대신 Vite 6 선택으로 불필요한 번들 제거. CSS는 gzip 9KB.
Next.js 런타임 대신 Vite 6 선택으로 불필요한 번들 제거. CSS는 gzip 9KB.
접근성 이슈 16건 전부 해소
CRITICAL 3(aria-current, 색상 대비, 터치 타겟) + MAJOR 5 + MINOR 8 전 항목 수정.
Preloader 대비 3.4:1 → 5.2:1, 터치 타겟 40px → 44px
Preloader 대비 3.4:1 → 5.2:1, 터치 타겟 40px → 44px
자동 배포 파이프라인 구축 — master push → 프로덕션 15초 반영
GitHub master 브랜치 push 1회로 Vercel 프로덕션 자동 배포.
PR마다 preview URL 자동 발급. 이후 배포 추가 조작 불필요.
PR마다 preview URL 자동 발급. 이후 배포 추가 조작 불필요.
반응형 5단계 완성 — 모바일~4K 전구간 대응
mobile / sm(640px) / md(768px) / lg / 1920+ cap 5개 단계 구성.
Hero 타이포 clamp 재조정으로 4K 과대 표시 해소.
Hero 타이포 clamp 재조정으로 4K 과대 표시 해소.
핵심 기능
다크 에디토리얼 인터랙션
mix-blend-difference 커서가 hover 시 72px로 확장되고,
900×900 배경 글로우가 spring 물리로 마우스를 0.1s lag 추종.
스튜디오 감성의 몰입형 인터랙션을 구현.
900×900 배경 글로우가 spring 물리로 마우스를 0.1s lag 추종.
스튜디오 감성의 몰입형 인터랙션을 구현.
진행 단계
기획 · 디자인 시스템 설계
2026.04.
에디토리얼 무드 방향 확정. MASTER.md에 OKLCH 팔레트·폰트·모션 토큰을
단일 진실원으로 문서화. 다크 전용, 반응형 5단계, 접근성 목표 사전 설정.
단일 진실원으로 문서화. 다크 전용, 반응형 5단계, 접근성 목표 사전 설정.
프로젝트 상세
1) 포트폴리오 소개 스튜디오 모노그래프 톤의 다크 에디토리얼 포트폴리오 사이트. React + Vite 6 + Tailwind CSS 4 + Framer Motion 11을 조합해 커스텀 커서·배경 글로우·섹션별 패럴럭스가 적용된 키네틱 단일 페이지를 구현했습니다. 디자인 감성과 성능·접근성을 동시에 만족하는 레퍼런스로, JS gzip 99KB 번들 달성, WCAG 2.2 AA 접근성 이슈 16건
