[과제] 웹트랙 1주차) 개발 환경 설정하기 채다희

요구사항

아래 ThorVG Web 레포를 클론하여 작업환경을 개인 로컬에 셋업하고, 두가지 패키지를 빌드하며, 로컬 예제 구동을 통해 이를 검증합니다. (환경)OS: macOS Tahoe 26.5.2

원본 ThorVG Web 레포지토리 thorvg 레포지토리도 그렇고, 오픈소스의 원본 레포지토리에는 기본적으로 직접 push 권한이 없을 수 있으므로, (당연하지만) Fork 한 개인 ThorVG Web 레포지토리를 origin에 연결해서 사용한다.

thorVG Web 설치

🔍 Wiki Development Guide 참고 루트에 pnpm workspace가 있어 루트에서 한 번만 의존성을 설치하면 된다.

➜  thorvg.web git:(main) node --version
pnpm --version
meson --version
ninja --version
v22.13.1
10.34.5
1.11.2
1.13.2

pnpm 만 설치가 안되어있어 설치했다. node 는 v20 이상을 요구하여, 현재 버전을 유지했다.

단순 clone 으로는 서브모듈까지 받아오지 않아서 다시 서브모듈을 받아오는 명령어를 실행했다. git submodule update --init --recursive

thorVG Web 빌드

wiki 문서에서 확인한 바로는

EMSDK 환경 변수, Emscripten 경로 설정
- Emscripten SDK(EMSDK)는 ThorVG의 C/C++ 코어를 웹 브라우저에서 실행할 수 있는 WebAssembly(WASM)로 변환하기 위해 필요하다.
packages/lottie-player 또는 packages/webcanvas에서 pnpm install로 의존성 설치
이후 패키지별 pnpm run build로 빌드하고, 제공된 예제·Playground로 테스트 단계로 이해했다.

1. emsdk 설치

thorvg.web 저장소 내부가 아닌, 같은 상위 디렉터리에 설치하는 것을 권장한다. thorvg.web 내부에 Clone하면 Git의 추적되지 않은 파일로 표시될 수 있으므로 피하는 것이 좋다. 또한 build-player.yml CI 설정에서 6.0.0 버전으로 명시되어있다. (버전 미일치시 빌드 에러 가능성 O)

cd /Users/chaedahee/Desktop/OSSCA
git clone https://github.com/emscripten-core/emsdk.git
cd emsdk

./emsdk install 6.0.0
./emsdk activate 6.0.0
source ./emsdk_env.sh

환경 변수의 절대 경로

export EMSDK="/Users/chaedahee/Desktop/OSSCA/emsdk"
export PATH="$EMSDK/upstream/emscripten:$PATH"

다만 현재 설정은 현재 터미널에서만 유지된다. 새 터미널에서는 빌드 전에 다음 명령을 다시 실행해야 한다. (영구적용은 옵셔널) source “/Users/chaedahee/Desktop/OSSCA/emsdk/emsdk_env.sh”

2. 패키지 의존성 설치 thorvg.web

cd /Users/chaedahee/Desktop/OSSCA/thorvg.web
pnpm install

@thorvg/lottie-player
@thorvg/webcanvas
ThorVG 코어 및 WASM
각 렌더링 백엔드 산출물

3. 패키지 별 빌드

과제 요구사항 패키지만 빌드한다.

3. ThorVG WebCanvas 패키지 빌드에 성공합니다. 4. ThorVG LottiePlayer 패키지 빌드에 성공합니다.

pnpm --filter @thorvg/webcanvas build
pnpm --filter @thorvg/lottie-player build

예제 실행

빌드 후 저장소 루트에서 서버 실행 npx http-server . -p 3000

/examples/live-editor
/examples/lottie