2026Interactive Web

Lumina

설명

Immersive Interactive Visual Web

기간

Jan 2026 - Feb 2026

역할

크리에이티브 개발자: React Three Fiber 3D 빛 반사/굴절 씬; 커스텀 프래그먼트 셰이더; 스크롤 및 마우스 기반 조명 인터랙션과 GSAP 애니메이션 총괄.
풀스택 개발자: Next.js 아키텍처와 Supabase 연동(아카이브, 문의 폼). SEO 메타 및 Open Graph 이미지 동적 생성.
UI/UX 디자인: 전체 '빛' 테마 비주얼 컨셉 및 인터랙션 프로토타이핑.

기술

Frontend

Next.js (App Router) · TypeScript · Tailwind CSS

3D / Creative

Three.js · React Three Fiber · GLSL (Shaders)

Animation

GSAP · Lenis · Framer Motion

Backend

Supabase

Deployment

Vercel

프로젝트 목적

"보이지 않는 디지털 공간을 밝히다." Lumina는 단순한 정보 전달을 넘어, 빛의 굴절, 반사, 산란을 탐구하는 실험적 웹 프로젝트입니다. 정적인 웹 환경에서 광선 추적과 프리즘 셰이더 아트를 결합해 브라우저에서 우아한 실시간 반응형 빛 아트를 제공하고, WebGL 렌더링 기술의 한계를 확장하는 것을 목표로 합니다.

범위

· 인터랙티브 웹 디자인 & 개발
· WebGL 기반 3D 빛/재질 이펙트
· 다이나믹 갤러리 시스템 구축
· 조명 인터랙션 연동

주요 기술 특징

실시간 WebGL 엔진

· 커스텀 셰이더 구현: GLSL로 마우스 커서를 동적 광원으로 활용; 3D 오브젝트와 텍스트에 실시간 빛 반사 및 부드러운 그림자.
· 포스트 프로세싱 파이프라인: 심연에서 빛이 발산하는 듯한 환상적이고 신비로운 분위기를 위한 고급 Bloom과 볼류메트릭 고드레이 적용.

몰입형 인터랙션 시스템

· 깊이 기반 애니메이션: Lenis 스크롤 속도/위치를 훅으로 활용; 스크롤에 따라 빛의 강도와 색온도가 변화하며 깊이(Z축)를 물리 기반으로 탐색.
· 로딩 시퀀스: '빛의 각성' — 어둠에서 점진적으로 페이드인되는 조명, 실루엣 공개로 기대감을 극대화.

다이나믹 아카이브 구조

· Supabase 연동: Supabase DB의 비주얼 아카이브 데이터; 스펙트럼(색상 테마) 필터링 다이나믹 그리드 UI; 매끄러운 데이터 페치를 위한 비동기 로딩.
· 컨택트 인터페이스: 글래스모피즘 스타일 문의 폼; 제출 시 빛 리플 시각 피드백으로 몰입형 UX 유지.