삼성전자, 웹어셈블리용 개발툴 만들었다

SOSCON2017 현장에서 WATT 오픈소스 프로젝트 소개

삼성전자 소프트웨어(SW) 엔지니어들이 웹 환경에 고성능 네이티브 코드를 재사용할 수 있는 웹어셈블리(WebAssembly)용 개발툴을 만들고 오픈소스로 내놨다.

지난 25일부터 서울 서초구의 삼성전자 R&D캠퍼스에서 '삼성오픈소스컨퍼런스(SOSCON)2017'이란 이름으로, 오픈소스SW를 주제로 한 삼성전자의 개발자 컨퍼런스가 진행됐다.

삼성전자 SW센터 웹플랫폼랩 소속 개발자 김현덕, 정진우 씨는 이날 오후 'WebAssembly & Developer Toolkit'이라는 주제강연을 통해 웹어셈블리 기술과 그걸 활용한 개발시 편의 기능을 구현한 개발툴을 소개했다.

삼성전자는 2017년 10월 25일 SOSCON2017 1일차 오후세션을 통해 웹어셈블리 개발툴 WATT를 소개했다.

우선 김현덕 씨가 웹어셈블리 기술 등장 배경과 현황을 설명했다.

웹에서 프로그래밍을 하기 위한 표준 언어로 자바스크립트가 널리 쓰인다. 자바스크립트를 사용시 웹 프로그래밍 결과물의 성능에 제약이 생긴다. 그래서 같은 기능을 수행하는 네이티브 애플리케이션 프로그래밍 언어 코드를 재사용하려는 시도가 전부터 있었다.

구글이 네이티브 언어로 고성능 웹 프로그래밍 결과물을 얻으려는 시도에서 네이티브클라이언트(NaCl)를 만들었다. C와 C++ 언어 코드를 웹에서 실행되는 형태로 바꿔주는 기술이었다. 하지만 크로미엄 계열 브라우저에서만 돌아가고, x86 및 ARM 아키텍처에 의존성이 있었다. 이후 아키텍처 의존성을 없앤 포터블NaCl(PNaCl)이 나왔지만 여전히 파이어폭스와 사파리 등 타사 브라우저에선 지원되지 않았다.

삼성전자 SW개발자 김현덕 씨. 웹어셈블리 기술의 동작 방식을 설명하고 있다.

모질라는 같은 목적에서 다른 접근을 시도했다. asm.js라는 자바스크립트 서브셋 언어를 표준화했다. 사람이 작성한 코드보다 브라우저의 자바스크립트 엔진에서 더 빠르게 실행될 수 있는 규격을 만든 것이다. 그리고 C와 C++ 언어로 짠 네이티브 코드를 asm.js 형태로 변환할 수 있게 했다. 이를 위해 '엠스크립튼(emscripten)'이라는 기술을 만들었다. 하지만 여전히 네이티브 코드 대비 성능 격차를 보이고 있다.

김 씨는 "asm.js와 PNaCl은 모질라와 구글이 각각 자바스크립트 한계를 극복하고 웹에서 고성능 실행환경을 얻고자, 기존 네이티브 코드 앱을 웹에 재사용하고자 등장했다는 공통점이 있다"며 "웹어셈블리는 둘의 문제점을 해결하기 위해 나온 것"이라고 말했다.

■웹어셈블리, 네이티브 성능을 웹으로

웹어셈블리는 asm.js와 PNaCl 대비 유사하거나 더 나은 성능을 내는 웹애플리케이션을 개발하기 위해 필요한 'wasm'이라는 바이너리포맷과 브라우저가 이를 처리하는 방식을 주요 브라우저 개발업체들이 모여 만든 표준 웹 기술이다. 이를 위해 마이크로소프트(MS), 애플, 구글, 모질라가 월드와이드웹컨소시엄(W3C) 워킹그룹(WG)을 결성했고 엣지(Edge), 사파리, 크롬, 파이어폭스 최신버전에서 지원된다.

삼성전자 SW개발자 김현덕 씨. 웹어셈블리와 자바스크립트 서브셋 언어 asm.js로 동일한 기능을 구현한 3D게임 데모의 성능 대조 영상을 보여주고 있다.

현재 웹어셈블리는 최소기능제품(MVP) 수준으로 구현돼 C와 C++ 네이티브 코드 지원을 구현하는 부분에 개발이 집중돼 있다. 모질라의 차세대 시스템프로그래밍언어 러스트(Rust)도 일부 지원된다. 웹어셈블리를 사용하려는 개발자는 이런 언어로 한 번 작성한 코드의 형태를 wasm으로 변환해 여러 브라우저에서 실행할 수 있다. 현재 모질라가 asm.js 변환툴로 만들었던 엠스크립튼이 wasm 변환에도 주로 쓰인다.

김 씨 설명에 따르면 wasm 자체는 머신코드가 아니라 프로그램의 로직과 데이터를 담은 바이너리코드를 저장하는 포맷이다. 하드웨어 의존성은 없다. 하지만 아직 wasm을 브라우저에서 독립적으로 구동할 방법은 없다. 브라우저는 파일을 로딩해 실행해야 한다. 내용을 디코딩해서 브라우저가 처리할 수 있는 형태의 머신코드로 바꿔야 한다는 뜻이다.

김 씨는 "어셈블리(assembly)하면 직접 작성 어렵다, 실행 빠르다, 하드웨어 의존성 있다, 이런 게 떠오를 수 있는데 '웹어셈블리'엔 하드웨어 의존성은 없고, 직접 작성하기보다는 주로 기존의 네이티브코드를 재사용하는 용도로 쓰게 될 것"이라며 "완성된 C 및 C++앱이나 라이브러리를 변환해 개발시간을 절약할 수 있고, 단순반복 계산이나 게임같은 고성능이 필요한 영역에서 성능 이득을 줄 것"이라고 말했다.

그는 이어지는 설명을 통해 자바스크립트 엔진 수준에서 이미 작성된 wasm 파일을 빠르게 처리하는 요령, wasm 파일을 만들 때부터 크기를 작게 만드는 방법, 전체화면으로 웹GL 그래픽을 다루는 콘텐츠일 때 유리한 방식 등 성능최적화 방안을 제시하기도 했다.

웹어셈블리는 2015년 4월 W3C 커뮤니티그룹 단계로 표준화 논의 과정을 밟다 그해 6월 처음 공개적으로 소개됐다. 2016년 3월 핵심기능이 정의됐고 10월부터 브라우저 프리뷰 단계에 들어갔다. 올해(2017년) 3월 최소필수기능을 갖춘 MVP 버전이 배포됐다. 인터넷익스플로러(IE)를 제외한 주요 브라우저업체 최신 브라우저 버전이 모두 지원하고 있다.

■웹어셈블리 개발 번거로움, WATT로 덜 수 있다

하지만 아직 대다수 웹개발자, 웹 플랫폼에 대응하려는 개발자가 웹어셈블리의 존재를 모르거나 이를 다룰 수 있는 도구를 갖추지 못한 상태다. 재사용할 네이티브코드를 웹어셈블리로 변환 가능한 상태로 만들기 위한 사전작업이 필요한데, 개발자에게 다소 번거로울 수도 있다.

이어 발표를 진행한 정진우 씨가 그 해법을 소개했다.

삼성전자 SW개발자 정진우 씨. 네이티브코드를 웹어셈블리로 재사용하기 위해 필요한 과정을 도식화하고 그 과정의 어려움을 짚고 있다.

그는 삼성전자가 만든 '웹어셈블리 트랜슬레이션 툴킷(WATT)'이라는 개발툴을 소개했다. 이를 통해 웹어셈블리를 다루려는 개발자들이 네이티브코드 변환의 사전작업과 해당 프로젝트 관리를 간소화할 수 있다고 설명했다.

WATT는 웹서버 기반 통합개발환경(IDE)이다. 서버에 패키지를 설치하면 웹어셈블리 코딩, 컴파일, 패키징할 수 있는 서비스를 제공하는 웹서버로 만들어준다. 노드JS, 브래킷(Brackets), 엠스크립튼, 몽고DB 등 여러 오픈소스 툴을 포함한다. 개발자가 네이티브코드를 wasm으로 변환할 때 수행해야 하는 웹용 인터페이스 추가, 바인딩 등 코드 편집, 프로젝트 및 사용자 계정 관리 등을 돕는다. 아파치2.0 오픈소스다.

WATT는 깃허브의 삼성 계정을 통해 공개돼 있다. [☞바로가기] 일반 개발자들이 웹어셈블리를 사용해 좀 더 쉽게 개발할 수 있는 협업 환경을 제공하기 위해 만들었다는 게 정 씨의 설명이다. 그는 앞서 웹어셈블리를 활용해 만든 예제 프로젝트를 제시하면서 설명을 이었다.

우선 webassembly.org라는 웹사이트에 탱크 게임(tanks!) 데모가 만들어져 있다. 플레이어가 탱크를 조작해 지형지물이 놓인 공간 위에서 다른 탱크에 포탄을 쏴서 터뜨릴 수 있게 만들어진 데모 3D게임이다. 웹어셈블리를 지원하는 데스크톱용 브라우저에서 아무런 부가 프로그램을 설치하지 않고 실행되며 노트북 하드웨어에서도 원활한 구동 속도를 보여 준다.

삼성전자 SW개발자 정진우 씨. 웹어셈블리 개발툴 WATT가 포함한 각 구성요소와 동작 특성을 설명하고 있다.

게임 엔진인 유니티3D와 언리얼엔진은 각자 지원되는 툴로 이런 웹어셈블리 형태의 결과물을 만들어낼 수 있다. 통상적인 개발 방식은 툴이 지원하는 기능을 그대로 쓰면 된다. 최종 결과물 출력 포맷을 선택할 때 웹어셈블리를 선택하기만 하면 된다. 혼자서 게임엔진이 제공하는 애플리케이션을 쓴다면 문제가 없지만, 다른 개발자와 협업이 안 된다고 정 씨는 지적했다. WATT는 협업을 지원한다는 뉘앙스다.

이어 정 씨는 WATT가 개발 편의성을 높여 주는 방식을 구체적으로 설명했다. IDE의 컴파일러는 LLVM기반 웹어셈블리 컴파일러를 사용해 C와 C++코드를 asm.js로 바꾼다. LLVM 컴파일을 위해 네이티브 코드를 수정하는 작업이 필요하다. 엠스크립튼에서 정의한 매크로와 파이썬 기반의 웹IDL바인더(WebIDL-Binder)를 사용해 네이티브코드에서 웹에 바인딩할 함수를 찾아 지정, 바인딩을 처리하도록 만들었다.

그는 WATT 개발과정에서 세부적으로 신경쓴 부분을 추가로 언급했다. 엠스크립튼이 웹IDL 바인딩을 수행할 때 필요한 룰을 모두 찾아내 LLVM 컴파일에 적용했다. 기존 웹IDL바인더 기능을 강화했다. 컴파일시 필요한 Git, CMake, GCC, 파이썬 등 여러가지를 모두 찾아 쓰기 편리한 툴체인으로 만들었다. 웹서버에 CMake없이 작성할 수 있는 기능이, 코드에디터에 JS파일 구문지원 기능이 탑재됐다.