📌 Aura & Echo: 몰입형 인터랙티브 비주얼 웹

🔹 프로젝트 개요

• 작업 기간: 2026.01 ~ 2026.02
• 작업 범위: 인터랙티브 웹 디자인 및 개발, WebGL 기반 비주얼 이펙트 구현, 아카이브 시스템 구축, 사운드 인터랙션 연동
• 사용 도구:
• 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

🔹 프로젝트 목적

"Exploring the boundary of digital perception (디지털 지각의 경계를 탐하다)."Aura & Echo는 단순한 정보 전달을 넘어, 시각적 왜곡(Distortion)과 잔향(Echo)을 통해 사용자의 감각을 자극하는 실험적인 웹 프로젝트입니다. 정적인 웹 환경에 유체 역학(Fluid Dynamics)과 글리치(Glitch) 아트를 결합하여, 브라우저 상에서 실시간으로 반응하는 디지털 예술 경험을 제공하고 개발자의 기술적 한계(WebGL, Shader)를 확장하는 데 목적을 두었습니다.

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

• Real-time WebGL Engine (실시간 웹GL 렌더링 엔진)
  • Custom Shader Implementation: GLSL을 활용해 스크롤 속도와 마우스 움직임에 따라 이미지가 액체처럼 흐르거나 찢어지는(Distortion) 효과를 구현했습니다. (스크린샷의 물결 효과 반영)
  • Post-processing Pipeline: 화면 전체에 노이즈, RGB 분리(Chromatic Aberration), 스캔라인 효과를 후처리기법으로 적용하여 아날로그 신호가 왜곡되는 듯한 독창적인 무드를 조성했습니다.
• Immersive Interaction System (몰입형 인터랙션)
  • Velocity-based Animations: Lenis 스크롤의 속도 값을 훅(Hook)으로 받아와, 스크롤을 빠르게 할수록 텍스트가 기울거나(Skew) 이미지가 가로로 늘어나는 물리 기반 인터랙션을 적용했습니다.
  • Loading Sequence: "Initializing Visual Interface"라는 컨셉에 맞춰, 리소스가 로딩되는 과정을 데이터가 복호화되는 듯한 타이포그래피 애니메이션으로 연출해 이탈률을 낮추고 기대감을 조성했습니다.
• Dynamic Archive Structure (동적 아카이브 시스템)
  • Supabase Integration: 'Data Archive' 섹션의 방대한 작업물 데이터를 Supabase DB에 적재하고, Grid 형태의 UI로 시각화했습니다. 각 항목은 'Audio', 'Visual' 태그에 따라 필터링되며, 비동기 방식으로 끊김 없이 데이터를 불러옵니다.
  • Contact Uplink: 터미널(Terminal) 스타일의 문의 양식을 구현하여, 폼 제출 시 실제 데이터 전송 과정을 시각화(Secure Transmission UI)하여 사용자 경험(UX)의 일관성을 유지했습니다.
• Performance Optimization (고성능 그래픽 최적화)
  • GPU Acceleration: 무거운 3D 연산과 캔버스 렌더링이 메인 스레드를 차단하지 않도록 최적화하고, useFrame 루프 내 연산을 최소화하여 60fps의 부드러운 프레임을 유지했습니다.
  • Asset Management: 고해상도 이미지와 텍스처를 WebP/AVIF로 서빙하고, 화면에 보이지 않는 텍스처는 렌더링에서 제외하는 Frustum Culling 기법을 적용했습니다.