[과제] 웹 트랙 1주차) 개발환경 설정 후 빌드 이주연

트랙을 웹으로 전환하게 되어 환경설정 겸 웹 과제를 수행하려고 합니다.

1. 작업 환경

이 글의 작업 환경은 다음과 같습니다.

운영체제 : macOS Sequoia 15.7.7 CPU 아키텍처 : x86_64 컴파일러 : Apple Clang 17.0.0 패키지 관리자 : Homebrew

2. 의존성 설치

기존 컴퓨터의 작업 환경을 확인하고, thorvg를 설치한 다음 thorvg.web 실행을 위한 의존성을 추가로 설치해야 합니다. 기본적으로 필요한 의존성은 Meson, Ninja, node, pnpm입니다. Meson과 Ninja는 thorvg 세팅 과정에서 이미 설치했기 때문에 pnpm과 node만 추가로 설치했습니다.

brew install node pnpm

3. thorvg.web 저장소 준비

우선 개인 계정으로 fork한 후, fork한 레포를 세팅합니다. 여기서 thorvg.web 레포는 thorvg 렌더링 엔진이 git 서브모듈로 연결되어 있기 때문에 해당 조건을 고려해서 clone해야 합니다.

git clone --recursive https://github.com/<본인-GitHub-ID>/thorvg.web.git

4. Emscripten SDK 설치

ThorVG를 WebAssembly로 빌드하기 위해 Emscripten을 설치합니다.

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

위 작업을 수행한 후, 이 게시물을 작성한 시간 기준으로 출력되는 Emscripten 버전이 6.0.0이어야 합니다.

5. 빌드

thorvg.web에서 WebCanvas와 Lottie를 빌드합니다.

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

두 빌드가 모두 성공하면 로컬 웹 서버를 실행해 표시되는 주소로 접속합니다.

npx http-server . -p 3000

라이브 에디터와 로티 웹페이지를 구동하면 다음과 같습니다.

6. 발생한 문제와 해결 방법

6.1. 패키지 설치 과정에서 보안 이슈

레포에서 pnpm을 설치하는 과정에서 다음과 같은 로그가 뜨면서 문제가 발생했습니다.

[ERR_PNPM_IGNORED_BUILDS] Ignored build scripts: @swc/core@1.15.46, esbuild@0.28.1

pnpm이 @swc/core과 esbuild의 설치 스크립트를 차단해서 발생한 일입니다. 아래 명령어를 입력한 이후, 빌드를 원하는 두 패키지들을 전부 선택하면 정상적으로 설치됩니다.

pnpm approve-builds

6.2. Lottie Player 빌드 실패

Lottie Player를 빌드하는 과정에서 빌드를 실패해서 빌드 과정에서 로그를 저장한 후 해당 로그를 확인해보았습니다. 로그를 확인한 결과, 컴퓨터의 Java 버전과 Closure Compiler의 Java 버전이 달라서 그렇다는 사실을 알았습니다. 그래서 Java 21을 재설치하고 Emscripten 환경에 다시 적용하여 해결하였습니다.