테크톡톡 2026 | Frontend Developer - 토스증권 AI 개발로 배운 실전 인터랙션 팁

  • 웹 기반 서비스이며 웹에서도 네이티브 수준의 성능을 위해 모션을 선택
    • Web Animation API (WAAPI) 우선 지원 => 안되면 rAF 폴백
    • js 개입이 없는 컴포지터로만 처리되는 애니메이션을 이용하여 성능향상 (transform, opacity 등)
  • three.js를 화려한 인터렉션 구현이 아니라 단순 모션을 구현하는데도 사용 가능
    • three.js + camera control 조합을 통해 스크롤 애니메이션 구현
  • Cache API를 이용해서 기기에 파일을 저장 가능
  • Media Devtools를 이용하여 영상의 상태를 디버깅
  • animated webp, gif보다 배경이 투명한 영상이 제어 편리