2026Interactive
Aura & Echo
설명
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
프로젝트 목적
"디지털 지각의 경계를 탐구한다." Aura & Echo는 단순한 정보 전달을 넘어, 시각적 왜곡과 에코를 통해 사용자의 감각을 자극하는 실험적 웹 프로젝트입니다. 정적인 웹 환경에서 유체 역학과 글리치 아트를 결합해 브라우저에서 실시간으로 반응하는 디지털 아트 경험을 제공하고, 개발자의 기술적 한계(WebGL, Shader)를 확장하는 것을 목표로 합니다.
범위
- · 인터랙티브 웹 디자인 & 개발
- · WebGL 기반 비주얼 이펙트
- · 아카이브 시스템 구축
- · 사운드 인터랙션 연동
주요 기술 특징
실시간 WebGL 엔진
- · GLSL 커스텀 셰이더로 스크롤 속도와 마우스 움직임에 반응하는 왜곡 효과(액체 흐름, 찢김) 구현.
- · 노이즈, 색수차, 스캔라인을 적용한 포스트 프로세싱 파이프라인으로 아날로그 신호 왜곡 분위기 연출.
몰입형 인터랙션 시스템
- · Lenis 스크롤 속도 기반 속도 애니메이션(skew, stretch).
- · 'Initializing Visual Interface' 타이포그래피 애니메이션 로딩 시퀀스로 이탈을 줄이고 기대감을 형성.
다이나믹 아카이브 구조
- · Supabase 데이터 아카이브; 'Audio'/'Visual' 태그 필터링과 비동기 로딩이 적용된 그리드 UI.
- · 터미널 스타일 폼과 제출 시 보안 전송 UI가 있는 Contact Uplink.
성능 최적화
- · 무거운 3D/캔버스가 메인 스레드를 차단하지 않도록 GPU 가속 적용; 60fps를 위한 최소한의 useFrame 작업.
- · WebP/AVIF 에셋과 화면 밖 텍스처에 대한 Frustum Culling.
디자인 포인트
사이버네틱 타이포그래피
경고 신호와 시스템 로그를 연상시키는 '테크니컬 브루탈리즘' 스타일의 고가독성 산세리프와 강렬한 빨강 & 검정 대비.
글리치 & 신호 미학
'Signal One', 'Frequency', 'Modulation' 같은 UI 용어; 의도적인 이미지 분열과 노이즈가 디자인 언어로 작동.
키네틱 UI
모든 텍스트와 이미지가 사용자 행동에 반응해, 정적 페이지가 아닌 살아 있는 유기체와 상호작용하는 느낌을 줍니다.
갤러리
클릭하여 확대프로젝트 보기웹사이트 방문 →