[ThorVG Web] 2주차) 테스트 프로그램 구동 이효진

perf-test 구동

Performance Testing 글을 참고해서 perf-test를 구동한다. 이전에 package/webacanvas, package/lottie-player 빌드에 성공했다면 이부분은 간단하다. perf-test 폴더에 가서 yarn으로 필요한 패키지들을 설치한 뒤 yarn dev를 하고 localhost:3000에 접속하면 perf-test 페이지를 볼 수 있다.

perf-test 코드 분석

구동만 먼저 해봤다가 코드 분석 과제를 조금 나중에 봐서 소스코드를 뒤늦게 뜯어보았다. 우선 package.json에 bench라는 스크립트가 있었다. yarn bench를 실행하면 아래와 같이 벤치마크 결과가 터미널에 나온다.

이 벤치마크는 script 폴더 안의 bench.mjs를 실행한 결과이고 seed에 들어있는 애니메이션 목록을 사용한다. 옵션이 여러가지가 있어서 yarn bench -r gl 을 하면 gl 렌더러를 사용한 벤치마크 결과를 볼 수 있다.

그 외에도 애니메이션 개수, 크기 등을 지정하여 벤치마크를 돌려볼 수 있다.

그리고 컴포넌트 폴더에서 BenchmarkModal, VersionSelector가 있는데 어디에 사용되는건지 몰라서 claude를 통해 분석시켜봤다. 알고보니 개발자 콘솔창에 __tvg.internal() 를 입력하면 internal mode가 실행되면서 웹 내에서 benchmark를 돌려볼 수 있었다.

이 기능은 개발자 콘솔창에 __tvg.internal(false) 를 입력하면 끌 수 있다.

Playground 구동 및 코드 분석

playground 폴더에서 yarn으로 필요한 패키지를 설치한 뒤 yarn dev를 하고 localhost:3001에 접속하면 example 페이지를 볼 수 있다.

playground의 특징은 monaco를 사용한 에디터 사용과 code-transformer를 이용해 코드를 실행하는 부분이다. monaco는 example에서 사용자가 코드를 입력할 수 있도록 도와주고 code-transformer는 입력된 코드를 받아서 변환해준다.

example 만들기

playground 폴더에서 yarn으로 필요한 패키지를 설치한 뒤 yarn dev를 하고 localhost:3001에 접속하면 example 페이지를 볼 수 있다. 예제로는 THORVG 글자가 비처럼 내리는 애니메이션 효과를 구현했다.

구현 과정에서는 글자들이 어떻게 각각의 랜덤한 위치와 랜덤한 속도를 가지면서 떨어질 수 있을 지 고민을 좀 했는데 claude의 도움을 (많이) 받아 text들을 화면에 추가하고 아래로 내려갈수록 가속되는 텍스트 비를 만들어볼 수 있었다.

commit