🚀 느린 Rive 애니메이션? WebAssembly Preload로 렌더링 속도 최적화한 후기

 

Toaster Booth에서 Rive 애니메이션을 도입하던 중,

로컬에서와 다르게 배포된 화면에서 첫 로딩 시 30초 이상 아무것도 안 보이는 화면을 마주하게 되었다.

 

알고 보니 원인은 .wasm 파일의 지연 로딩 때문이었다.

 

공식 문서와 Alex Barashkov의 글을 참고해,

WebAssembly Preload 전략을 도입했고, 그 결과 렌더링 속도가 눈에 띄게 개선되었다.

 

---

🎯 문제 상황: Rive 애니메이션이 느리게 뜬다

Rive는 .riv 애니메이션 파일과 함께 .wasm 파일(WebAssembly)을 사용한다.

기본적으로 아래 주소처럼 unpkg CDN에서 로드된다:

<https://unpkg.com/@rive-app/canvas@x.x.x/rive.wasm>

 

하지만 이 방식에는 다음과 같은 단점이 있다:

• unpkg CDN 응답 속도 지연
• 브라우저 초기 요청 수 증가
• 캐시가 없을 경우 모바일에서 로딩 지연

---

✅ 해결 방법: .wasm을 직접 preload 하고, 명시적으로 설정

import riveWasmUrl from '@rive-app/canvas/rive.wasm';
import { RuntimeLoader } from '@rive-app/react-canvas';

RuntimeLoader.setWasmUrl(riveWasmUrl);

 

이렇게 하면 Rive 애니메이션이 실행되기 전에 .wasm 파일이 미리 로딩되어,

렌더링 속도가 현저히 빨라진다.

---

⚙️ Vite 기준 적용 방법

1. .wasm?url 쿼리를 붙여서 import (정적 URL로 처리)

import riveWasmUrl from '@rive-app/canvas/rive.wasm?url';
import { RuntimeLoader } from '@rive-app/react-canvas';

RuntimeLoader.setWasmUrl(riveWasmUrl);

 

- 타입스크립트 설정 (선택)

// types/wasm.d.ts
declare module '*.wasm?url' {
  const src: string;
  export default src;
}

---

📈 최적화 전후 비교

항목 최적화 전 최적화 후

.wasm 로딩 위치	CDN (unpkg)	프로젝트 내 직접 호스트
로딩 시점	애니메이션 실행 시	진입 전 preload
렌더링 속도	약 10~20초 지연	즉시 렌더링
사용자 경험	초기에 빈 화면	자연스러운 애니메이션

 

---

🧠 느낀 점

진짜 너무 아쉬운 것은 가장 느렸던 시점은 스크린샷을 찍지 못해서 그 당시 환경을 기록하기 어려운 점이다.

(( 진짜 사진 캡쳐의 중요성을 또다시...)) 

하지만 Rive 애니메이션 하나 로딩하는 데 30초 가까이 걸렸던 적도 있었습니다. 

 

지금은 캐싱 및 preload가 적용되어 빠르게 로딩되지만, 당시의 느린 경험은 preload 전략의 필요성을 절실히 느끼게 해 준 계기였습니다! 

---

📎 참고 자료

• Rive 공식 문서: preloading wasm
• Alex Barashkov 블로그: Rive 최적화 팁
• Vite - WASM 가이드

Preloading WASM - Rive