Aura & Echo
설명
몰입형 인터랙티브 비주얼 웹
기간
Jan 2026 - Feb 2026
역할
- 크리에이티브 개발자: React Three Fiber 3D 씬 구성; 커스텀 프래그먼트 셰이더; 스크롤 기반 인터랙션 로직과 GSAP 애니메이션 총괄.
- 풀스택 개발자: Next.js 아키텍처와 Supabase 연동(아카이브, 문의 폼). SEO 메타 및 Open Graph 이미지 동적 생성.
- UI/UX 디자인: 전체 비주얼 컨셉 및 인터랙션 프로토타이핑.
기술
Next.js (App Router) · TypeScript · Tailwind CSS
Three.js · React Three Fiber · GLSL (Shaders)
GSAP · Lenis · Framer Motion
Supabase
Vercel
프로젝트 목적
"디지털 지각의 경계를 탐구한다." Aura & Echo는 단순한 정보 전달을 넘어, 시각적 왜곡과 에코를 통해 사용자의 감각을 자극하는 실험적 웹 프로젝트입니다. 정적인 웹 환경에서 유체 역학과 글리치 아트를 결합해 브라우저에서 실시간으로 반응하는 디지털 아트 경험을 제공하고, 개발자의 기술적 한계(WebGL, Shader)를 확장하는 것을 목표로 합니다.
범위
- · 인터랙티브 웹 디자인 & 개발
- · WebGL 기반 비주얼 이펙트
- · 아카이브 시스템 구축
- · 사운드 인터랙션 연동
주요 기술 특징
실시간 WebGL 엔진
- · GLSL 커스텀 셰이더가 스크롤 속도와 마우스 움직임에 반응하는 왜곡 — 액체의 흐름과 찢김 — 을 만들어냅니다.
- · 노이즈·색수차·스캔라인을 얹은 포스트 프로세싱 파이프라인이 화면 전체에 신호가 망가지는 듯한 인상을 입힙니다.
몰입형 인터랙션 시스템
- · Lenis의 스크롤 속도를 skew와 stretch에 연결해, 빠르게 내릴수록 화면이 더 크게 일그러집니다.
- · 'Initializing Visual Interface' 로딩 시퀀스가 터미널의 톤을 먼저 세우고, 그사이 첫 렌더링 시간을 벌어줍니다.
다이나믹 아카이브 구조
- · 아카이브는 Supabase 위에서 돌아가며, 'Audio'/'Visual' 태그로 걸러 그리드에 비동기로 채워집니다.
- · 문의 폼은 터미널 업링크 형태로 두고, 제출하면 보안 전송 상태를 보여줍니다.
성능 최적화
- · 3D·캔버스 연산을 GPU로 넘기고 useFrame의 프레임당 작업량을 최소로 유지했습니다. 60fps는 여기서 나옵니다.
- · 에셋은 WebP·AVIF로 내보내고, 화면 밖으로 나간 텍스처는 Frustum Culling으로 걷어냅니다.
디자인 포인트
사이버네틱 타이포그래피
가독성 높은 산세리프를 강렬한 빨강·검정 대비 위에 올렸습니다. 포트폴리오의 어휘가 아니라 경고 표지와 시스템 로그의 어휘입니다.
글리치 & 신호 미학
'Signal One', 'Frequency', 'Modulation' 같은 신호 처리 용어를 UI 라벨로 쓰고, 의도적인 이미지 분열과 노이즈를 결함이 아니라 디자인으로 다뤘습니다.
키네틱 UI
모든 텍스트와 이미지가 사용자 행동에 반응해, 정적 페이지가 아닌 살아 있는 유기체와 상호작용하는 느낌을 줍니다.
갤러리
클릭하여 확대자주 묻는 질문
3D 인터랙티브 웹사이트는 일반 홈페이지와 무엇이 다른가요?
Three.js와 WebGL을 사용해 브라우저에서 3D 오브젝트가 움직이고 마우스와 스크롤에 반응하는 웹사이트입니다. 일반 홈페이지가 정보를 정리해 보여준다면, 3D 인터랙티브 웹은 브랜드의 인상을 체험으로 전달합니다. 패션, 뷰티, 건축, 전시처럼 브랜드 경험이 중요한 분야에서 효과가 큽니다.
웹사이트 제작 기간은 얼마나 걸리나요?
랜딩페이지는 7일, 5페이지 기업 웹사이트는 15일, 10페이지 3D 인터랙티브 웹은 30일을 기준으로 합니다. 자료를 전달받은 시점부터 기산하며 디자인 시안 확인과 피드백 일정에 따라 조정됩니다. 급한 일정이 있으시면 상담 시 말씀해 주시면 가능 여부를 먼저 확인해 드립니다.
호스팅, 도메인, 서버 비용은 따로 드나요?
SSL 보안 인증서 설치, 호스팅 세팅, 데이터베이스 구축은 무상으로 제공해 드립니다. 도메인 구입 비용만 의뢰인이 부담하시며 연 2~3만원 수준입니다. 계정은 처음부터 의뢰인 명의로 생성하므로 이후 담당자가 바뀌어도 서비스가 끊기지 않습니다.
완성 후 제가 직접 내용을 수정할 수 있나요?
관리자 페이지를 함께 구축해 드리므로 개발 지식 없이도 텍스트, 이미지, 게시물을 직접 수정하실 수 있습니다. 납품 시 관리자 사용 매뉴얼을 함께 전달해 드립니다. 화면 구조를 바꾸거나 새로운 기능을 추가하는 작업만 별도 개발이 필요합니다.