📌 LUCY // EDGERUNNER (Interactive Character Tribute)

🔹 프로젝트 개요

• 작업 기간: 2025.08 ~ 2025.09
• 작업 범위: 브랜드 인터랙티브 웹 디자인, 프론트엔드 개발, 모션 그래픽 구현
• 사용 도구:
• Frontend: Next.js, TypeScript, Tailwind CSS
• Animation: Framer Motion, GSAP, WebGL (Three.js)
• Audio: Howler.js (BGM & SFX Control)
• Deployment: Vercel

🔹 프로젝트 목적

"To the Moon: A Digital Requiem for a Netrunner." 애니메이션 '사이버펑크: 엣지러너(Cyberpunk: Edgerunners)'의 등장인물 루시(Lucy)가 가진 서사와 감정을 웹 공간에 시각적으로 구현했습니다. 단순히 정보를 전달하는 위키(Wiki) 형식을 탈피하고, 사용자가 마치 '브레인 댄스(Brain Dance)'를 체험하듯 넷러너의 디지털 심상 세계에 접속한 듯한 몰입감을 주는 것을 목표로 했습니다.

• Immersive Atmosphere: 네온 사인과 글리치(Glitch) 효과가 지배하는 나이트 시티의 분위기를 UI 전반에 녹여냈습니다.
• Narrative Scrolling: 스크롤에 따라 캐릭터의 감정선이 변화하는 스토리텔링 기법을 도입하여, 시각적 즐거움과 서사적 여운을 동시에 전달합니다.
• Cybernetic Interaction: 마우스 커서, 버튼 클릭 등 기본적인 상호작용에도 기계적인 피드백(Haptic/Sound)을 심어 사이버네틱한 사용자 경험을 완성했습니다.

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

• Cinematic Motion & Glitch Effects (시네마틱 모션 및 글리치 연출)
  • Advanced Glitch Shaders: 캔버스(Canvas) 기반의 커스텀 쉐이더를 활용하여, 화면 전환이나 인터랙션 시 이미지가 일그러지거나 노이즈가 끼는 '디지털 왜곡' 효과를 리얼타임으로 렌더링했습니다.
  • Parallax Depth: 배경의 도시 야경과 전경의 캐릭터 레이어 간의 이동 속도를 다르게 설정하여, 2D 화면 안에서도 입체적인 공간감을 느낄 수 있는 시차(Parallax) 스크롤을 구현했습니다.
• Audio-Visual Synchronization (오디오 비주얼라이제이션)
  • Interactive BGM Player: 대표 OST인 "I Really Want to Stay at Your House"를 배경음악으로 삽입하고, 사용자가 재생/일시정지할 때마다 오디오 파형이 시각적으로 반응(Visualizer)하도록 구현했습니다.
  • SFX Triggers: 메뉴 호버(Hover)나 클릭 시 기계적인 UI 사운드 이펙트를 재생하여, 청각적으로도 몰입감을 극대화했습니다.
• High-Fidelity Optimization (고품질 리소스 최적화)
  • Next.js Image Optimization: 4K 해상도의 고화질 일러스트를 디바이스 크기에 맞춰 최적화된 포맷(AVIF/WebP)으로 서빙하여, 로딩 지연 없이 선명한 비주얼을 제공했습니다.
  • Component-Level Lazy Loading: 무거운 미디어 리소스는 뷰포트에 진입할 때 로딩되도록 처리하여 초기 페이지 진입 속도(FCP)를 확보했습니다.