📌 Lumina Immersive - WebGL 기반 3D 인터랙티브 웹

🔹 프로젝트 개요

• 작업 기간: 2026.01 ~ 2026.02
• 작업 범위: 인터랙티브 웹 디자인 및 개발, WebGL 기반 3D 빛/재질 이펙트 구현, 동적 갤러리 시스템 구축, 라이팅 인터랙션 연동
• 사용 도구:
• Frontend: Next.js (App Router), TypeScript, Tailwind CSS
• Creative / 3D: Three.js, React Three Fiber (R3F), GLSL (Shaders)
• Animation: GSAP, Lenis (Smooth Scroll), Framer Motion
• Backend: Supabase (Data Archive, Contact Uplink)
• Deployment: Vercel

🔹 프로젝트 목적

"Illuminating the unseen digital spaces (보이지 않는 디지털 공간을 비추다)." Lumina는 단순한 정보 전달을 넘어, 빛의 굴절(Refraction)과 반사(Reflection), 산란(Scattering)을 탐구하는 실험적인 웹 프로젝트입니다. 정적인 웹 환경에 광원 추적(Light Ray) 기술과 프리즘(Prism) 쉐이더 아트를 결합하여, 브라우저 상에서 실시간으로 반응하는 우아한 빛의 예술을 제공하고 WebGL 렌더링 기술의 한계를 확장하는 데 목적을 두었습니다.

🔹 핵심 기술 및 구현 기능 (Key Technical Features)

• Real-time WebGL Engine (실시간 웹GL 렌더링 엔진)
  • Custom Shader Implementation: GLSL을 활용해 마우스 커서를 하나의 동적인 광원(Light Source)으로 인식시켜, 주변의 3D 오브젝트나 텍스트에 실시간으로 빛이 맺히고 부드러운 그림자가 일렁이는 효과를 구현했습니다.
  • Post-processing Pipeline: 화면 전체에 고급 Bloom 효과와 볼류메트릭 라이트(Godrays)를 후처리기법으로 적용하여, 심연 속에서 빛이 화면 밖으로 뿜어져 나오는 듯한 몽환적이고 신비로운 무드를 조성했습니다.
• Immersive Interaction System (몰입형 인터랙션)
  • Depth-based Animations: Lenis 스크롤의 속도 및 위치 값을 훅(Hook)으로 받아와, 스크롤에 따라 공간의 깊이(Z축)를 탐험하듯 빛의 강도와 톤(Color Temperature)이 부드럽게 변하는 물리 기반 인터랙션을 적용했습니다.
  • Loading Sequence: "Awakening the Light"라는 컨셉에 맞춰, 칠흑 같은 어둠 속에서 점진적으로 빛이 스며들어오며(Fade-in illumination) 오브젝트의 실루엣이 드러나는 애니메이션을 연출해 기대감을 극대화했습니다.
• Dynamic Archive Structure (동적 아카이브 시스템)
  • Supabase Integration: 방대한 시각 작업물 데이터를 Supabase DB에 적재하고, 빛의 스펙트럼(색상 테마)에 따라 카테고리를 필터링하는 동적 Grid UI로 시각화했습니다. 비동기 방식으로 끊김 없이 데이터를 불러옵니다.
  • Contact Interface: 빛을 머금은 듯한 글래스모피즘(Glassmorphism) 스타일의 문의 양식을 구현하여, 폼 제출 시 빛의 파동(Light Ripple)이 퍼져나가는 시각적 피드백을 제공해 UX의 몰입감을 유지했습니다.
• Performance Optimization (고성능 그래픽 최적화)
  • GPU Acceleration: 무거운 라이팅 연산과 캔버스 렌더링이 메인 스레드를 차단하지 않도록 최적화하고, 화면 밖의 광원 계산을 배제하는 Frustum Culling 기법을 적용해 60fps의 부드러운 프레임을 방어했습니다.
  • Asset Management: 고해상도 환경 맵(HDRI)과 텍스처를 WebP/AVIF로 서빙하고, 렌더링에 필수적인 텍스처만 우선 로드하는 지연 로딩을 적용했습니다.