프레임워크 없이 Canvas와 SVG로 구현한 고몰입형 인터랙티브 애니메이션

Context

정적인 텍스트 입력 환경의 단조로움 해결 필요. 사용자의 감정 변화를 시각적으로 전달하는 고도의 인터랙션 설계 요구. 클라이언트 사이드 전용의 가벼운 런타임 환경 구성 필요.

Technical Solution

• anime.js 기반의 애니메이션 타임라인 오케스트레이션으로 일련의 시각적 흐름 제어
• Canvas API와 Additive Blending 기법을 활용한 불꽃 파티클 시스템 구축
• SVG stroke-dashoffset 속성을 이용한 식물 성장 과정의 경로 애니메이션 구현
• CSS mix-blend-mode 및 blur 필터 조합을 통한 연기와 재의 입체적 효과 생성
• Backend 및 DB 없이 브라우저 메모리 내에서만 동작하는 서버리스 클라이언트 구조
• Ambient floating particles 및 반딧불이 효과를 통한 공간감 형성 및 분위기 전환

Key Takeaway

복잡한 프레임워크 없이도 웹 표준 API의 적절한 조합과 타임라인 제어를 통해 수준 높은 사용자 경험(UX)과 시각적 스토리텔링 구현 가능.