플러스프로젝트 배경
1) 문제점 크리에이티브 스튜디오 웹 장르에서 Three.js + GSAP + Lenis + Framer Motion은 사실상 표준 스택입니다. 표현력은 높지만 번들 크기(Three.js 단독 150KB+ gzipped), 빌드 체인, 팀 러닝커브, 주 단위 메이저 릴리스 추적 비용을 동시에 요구합니다. 포트폴리오·스튜디오 런칭 시안·개념 증명 단계에서는 이 비용이 과잉이며, 클라이언트 브랜드 무드
프로젝트 성과
빌드 의존성 0개 달성
npm·Vite·webpack 전무. 저장소 총 용량 약 40KB(index.html 18KB + styles.css 17KB + src 5KB),
CDN 3개 링크만으로 전체 실행. 온보딩 비용 제로.
CDN 3개 링크만으로 전체 실행. 온보딩 비용 제로.
런타임 테마 변형 36종, 리로드 0회
3 mood × 4 accent × 3 shape 조합을 CSS 변수·data 속성 토글만으로 즉시 반영.
클라이언트 프레젠테이션 자리에서 라이브 비교 데모 가능.
클라이언트 프레젠테이션 자리에서 라이브 비교 데모 가능.
Pure CSS 3D 60fps 달성 (Three.js 미사용)
Torus 40-ring·Sphere 504-point·Cube 6-face를 CSS preserve-3d로 구현.
scrollY×0.15 + mouseX×0.02 단일 공식이 모든 형상의 회전을 제어.
scrollY×0.15 + mouseX×0.02 단일 공식이 모든 형상의 회전을 제어.
핵심 기능
Pure CSS 3D 형상 엔진
Three.js 없이 CSS preserve-3d만으로 Torus·Sphere·Cube 세 형상을 60fps로 렌더링.
스크롤과 마우스를 하나의 수식으로 합산해 자연스러운 3D 인터랙션 제공.
스크롤과 마우스를 하나의 수식으로 합산해 자연스러운 3D 인터랙션 제공.
진행 단계
스택 검토 및 설계
2026.04.
Next.js+Three.js / Astro / React CDN 세 옵션을 비교 분석.
Zero-Build + 런타임 테마 요건을 동시에 충족하는 React 18 CDN + Pure CSS 3D 채택 결정
Zero-Build + 런타임 테마 요건을 동시에 충족하는 React 18 CDN + Pure CSS 3D 채택 결정
프로젝트 상세
【1) 포트폴리오 소개】 Three.js·GSAP·Lenis 없이 React CDN과 Pure CSS 3D만으로 편집숍 수준의 크리에이티브 스튜디오 웹을 구현한 실험적 싱글페이지입니다. npm 의존성 0개(저장소 총 40KB), 런타임 테마 변형 36종, 60fps Pure CSS 3D 렌더링을 단일 HTML 파일 하나로 달성했습니다. 【2) 작업 범위】 - 설계 : Zero-Build 스택
