스크랩
설치 없이 브라우저에서 바로 만나는 벡터 애니메이션, ThorVG 1.1 데모 써봤습니다
ThorVG가 뭔가요?
혹시 SVG랑 Lottie 애니메이션을 각각 다른 라이브러리로 처리하고 계신가요? ThorVG는 이 둘을 하나의 렌더링 엔진으로 통합해서 다루는 크로스 플랫폼 벡터 그래픽 엔진입니다. 최근 v1.1 버전을 기반으로 한 브라우저 데모가 공개되었는데, 별도 설치 없이 브라우저에서 바로 실행해볼 수 있어서 가볍게 살펴봤습니다.
주요 특징
- SVG + Lottie 통합 렌더링: 두 포맷을 별도 엔진 없이 하나로 처리
- 실시간 벡터 애니메이션: 브라우저에서 바로 애니메이션이 돌아가는 걸 확인 가능
- GPU 가속: WebGL 기반이며 WebGPU도 지원해 성능이 준수함
- 다양한 벡터 효과: Drop Shadow, Blur 등 실무에서 자주 쓰이는 효과 지원
- JavaScript API: 코드로 애니메이션을 인터랙티브하게 제어 가능
1.1 버전에서 달라진 점
이번 업데이트는 화려한 신기능보다는 실제 서비스에 적용할 때 아쉬웠던 부분들을 채워 넣은 느낌입니다.
- GPU 렌더링 성능 개선
- SVG/Lottie 호환성 강화
- OpenType(OTF) 폰트 지원 추가
- 렌더링 품질 개선
특히 OTF 폰트 지원은 텍스트가 포함된 Lottie 애니메이션을 다루는 분들에게는 반가운 소식일 것 같습니다. 그동안 폰트 렌더링 때문에 우회 작업을 해야 했던 경험이 있다면 이번 업데이트로 조금은 편해질 수 있겠네요.
이런 분들에게 추천
웹 서비스에 로딩 애니메이션이나 아이콘 모션을 넣고 싶은데 Lottie와 SVG를 각각 다른 라이브러리로 처리하느라 번들 크기나 유지보수가 부담스러웠던 개발자라면, ThorVG 같은 통합 엔진을 한번 검토해볼 만합니다. 브라우저 데모가 공개되어 있는 만큼, 실제 성능과 렌더링 품질을 직접 눈으로 확인해보는 것을 추천드립니다.