이 글은 Dan Callahan 이 쓴 Experimenting with WebAssembly and Computer Vision의 한국어 번역본입니다.

지난 여름, 이전에 웹어셈블리 경험이 없는 4명의 엔지니어가 실험을 시작했습니다. 6개월간 실험의 결과는 WebSight: OpenCV를 이용한 실시간 안면 인식 데모에서 확인할 수 있습니다. OpenCV를 웹어셈블리로 컴파일하여 우리 팀은 브라우저에서 검증된 C/C++ 라이브러리를 재사용할 수 있었고, 동일한 데이터를 수행하는데 유사한 자바스크립트보다 훨씬 빠르게 결과를 얻을 수 있었습니다.

나는 팀원들—Brian Feldman, Debra Do, Yervant Bastikian, and Mark Romano—에게 그들의 겸험을 글로 남기자고 제안했습니다.

덧붙임: 다음의 보고서는 위에서 언급한 팀원이 작성하였습니다.

웹어셈블리 (이하 “wasm”)는 MVP(역자주: Minimum Viable Product, 최소 실행 제품)를 내놓음으로써 올해 큰 반향을 불러왔고, 작업에 박차를 가하고 있었습니다. 우리는 이 새로운 기술을 사용하여 애플리케이션을 만들었습니다.

우리는 역사적으로 몇몇 알고리즘을 계산하기 위해 뒤죽박죽인 자바스크립트를 사용해왔던 영역에서 WebDSP와 같은 프로젝트들이 C++ 비디오 필터를 웹어셈블리로 컴파일하는 것을 보았습니다. 또한 이것은 우리가 wasm의 한계에 관심을 가지게 했습니다. 우리는 현존하고 우수하며, 오랜 테스트를 거친 C++ 라이브러리를 사용하길 원했습니다. 그리고 많은 논의를 거쳐서 인기있는 오픈소스 컴퓨터 비전 라이브러리인 OpenCV를 선택했습니다.

컴퓨터 비전은 CPU의 요구사항이 높아서 wasm에 잘 어울리는 분야입니다. UC Irvine SysArch 그룹과 njor가 제시한 놀라운 작업을 기반으로 우리는 Emscripten의 최신 버전을 가지고 컴파일하여 OpenCV에 포함된 오래된 asm.js를 OpenCV의 코어 함수를 자바스크립트 callable 포맷으로 호출할 수 있도록 향상시킬 수 있었습니다.

이러한 Emscripten 빌드를 가지고 작업하는 것은 우리가 기대했던 것과 다른 방향으로 나아갔습니다. 웹개발자로써, 우리는 빨리 코드를 작성하고 반복하고 테스트하는데 익숙합니다. 특히, 우리의 보통 작업환경이 Webapck, Nodemon(역자주:node.js 소스 수정시 자동으로 서버를 재시작해주는 도구), 그리고 어디서나 빠르게 재로딩되어야 하는 경우 10-15분동안 빌딩되는 거대한 C++ 라이브러리는 도입하는 것은 색다른 경험이었습니다. 한번 컴파일하면 wasm 빌드는 블랙박스처럼 보였습니다:그 모듈은 불변하는 오브젝트처럼 시작되었고, 우리는 이것을 점점 더 이해하게 되어도 결코 ‘투명’하게 되진 않았습니다.

wasm 파일을 컴파일하고, 우리의 자바스크립트 안으로 통합하려고 노력했습니다.:이것은 자바스크립를 쉽게 뛰어넘고, 웹어셈블리의 이전 프로세스인 asm.js보다 현저히 빨랐습니다.

우리는 안면 인식 알고리듬을 사용하여 이 세가지 방식을 비교하였습니다. 알고리듬을 수행하는 함수들의 구조는 동일하고, 단지 각 알고리듬의 수행언어만 달랐습니다. web worker(역자주:스크립트 실행을 백그라운드 쓰레드로 실행할 수 있도록 해주는 기술)를 사용하여 우리는 비디오 스트림 데이터를 이미지에서 각 프레임의 사각형 좌표를 반환하고 FPS(역자주:사진 토막들이 1초에 보이는 수치, 프레임속도)측정치를 계산하는 알고리듬에 보냈습니다. FPS의 범위가 사용자의 장비와 브라우저(Firefox 최고!)에 의존적이긴 하지만, 우리는 wasm으로 작성된 알고리듬의 FPS가 일관되게 asm.js로 작성된 알고리듬보다 두 배 빨랐고, JS로 작성된 알고리듬보다 20배이상 빨랐으며, 웹 어셈블리의 이점을 확실히 확인했습니다.

최신기술을 적용한 빌딩(역자주:컴퓨터에서 실행가능한 상태로 만들어주는 작업)은 어려운 작업이자만, 잠깐의 불편함을 받아들일 가치가 있었다. 브라우저에서 네이티브, 포터블 C/C++ 코드를 서드파티 플러그인을 사용하지 않고 구현이 가능하다는 것은 획기적인 일입니다. 우리의 프로젝트, WebSight는 성공적으로 얼굴과 눈 인식을 위해 웹어셈블리 모듈로써 OpenCV를 사용하여 성공적으로 결과를 보여줬습니다. 우리는 정말 웹어셈블리의 미래, 특히 브라우저에서 다른 상위 레벨 언어를 효과적으로 실행할 수 있게 해주는 가비지 콜렉션의 추가에 대해 매우 기대가 높습니다.

여러분은 github.com/Web-Sight/WebSight에서 데모를 보실 수 있습니다.