C/C++ 프로젝트를 WebAssembly로 빌드하기

 
 in kr-dev •  작년

안녕하세요 @heejin입니다.

최근에 WebAssembly에 대한 소개글을 올린적이 있는데요.
오늘은 제가 WebAssembly를 사용한 과정에 대해서 올려보려고 합니다.

저는 보통 완전한 학습 목적의 코딩보다는 실용적인 목적으로 코딩을 할 때가 많은데요.
이번에 WebAssembly를 사용해보려고 한 것도 그런 의도가 있었습니다.

인터넷에는 이미지를 압축해주는 사이트가 많은데요. 특히 저는 GIF를 압축해주는 사이트를 자주 이용합니다.
그런데 기존의 GIF 압축 사이트는 단점이 하나 있어요.
바로 내 GIF 파일을 업로드하고, 서버에서 압축한 다음, 내가 다시 내려받아야 한다는 점이죠.
서버가 내 GIF 이미지를 몰래 빼돌릴 가능성도 있고, 업로드/다운로드 과정이 필요하기 때문에 시간이 많이 걸립니다.

저는 WebAssembly를 이용해서 이런 문제들을 해결할 수 있을거라 생각했습니다.
WebAssembly를 이용하면 서버에 업로드하지 않고, 사용자의 브라우저 단에서 네이티브의 속도로 GIF를 압축할 수 있기 때문에 서버에 올리는 방식에 비해 다음과 같은 이점이 생깁니다:

  • 업로드/다운로드 트래픽이 없기 때문에 서버 유지비가 굉장히 많이 줄어든다.
  • 업로드/다운로드가 없기 때문에 사용자 입장에서도 빠른 속도로 서비스를 이용할 수 있고, 보안 이슈도 거의 없다.

WebAssembly를 이용하는게 업로드/다운로드 방식보다 거의 모든 면에서 이득인 방식으로 보였습니다.
그래서 바로 만들어보기로 결정했습니다.

원래 GIF 압축 서비스를 WebAssembly를 이용해서 어떻게 만들었는지, 그 과정을 다 설명해드리려고 했는데, 엄청나게 길어질 것 같아서 이번에는 간단하게 WebAssembly 사용법에 대해서만 알려드리겠습니다.

WebAssembly 사용하기

저는 C로 구성된 GIF 라이브러리를 WebAssembly로 빌드해보기로 했습니다.
giflossy(fork of gifsicle)라는 라이브러리를 이용했습니다.

아래 과정은 모두 macOS에서 진행했습니다.

Emscripten 설치

 



기존 C/C++ 프로젝트를 WebAssembly로 빌드하기 위해서는 Emscripten을 사용하면 됩니다.
저는 http://kripken.github.io/emscripten-site/docs/getting_started/downloads.html 문서의 사용법을 정확하게 따라서 emsdk를 통해서 Emscripten을 설치했습니다.

 

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com

giflossy 프로젝트 받기

먼저 Git을 이용해서 giflossy 프로젝트를 다운받습니다.

git clone https://github.com/pornel/giflossy.git

giflossy 프로젝트 컴파일

다운받은 giflossy의 폴더에서 아래 명령어를 통해서 giflossy 프로젝트를 .bc파일로 아주 간단하게 빌드할 수 있습니다.
오류가 굉장히 많이 발생할 것으로 예상했으나, 의외로 하나의 오류도 없이 진행할 수 있었습니다.

emconfigure ./configure
emmake make

 
이렇게 하면 giflossy의 src 폴더에 gifsicle 파일이 생깁니다. 이게 원래 확장자가 .bc가 되어야 하는데, 아무 확장자가 붙지 않은채로 컴파일되었기 때문에 아래 명령어를 통해서 확장자를 .bc로 바꿔줍니다.

mv src/gifsicle src/gifsicle.bc

.bc 확장자가 아닌 경우 emcc에 의해서 빌드되지 않습니다.

그리고 마지막으로 emcc를 통해서 gifsicle.bc 파일을 gifsicle.wasm 형태의 WebAssembly 파일로 빌드할 수 있습니다.

emcc src/gifsicle.bc -s WASM=1 -s "MODULARIZE=1" -s "EXPORT_NAME='Gifsicle'" -o src/gifsicle.js

output 파일을 .js로 정하면 .wasm 파일과 .js 파일이 동시에 생성됩니다. 브라우저에서는 .wasm 파일을 직접 이용하기보다는 .js를 이용하게 됩니다.

브라우저에서 생성된 WebAssembly 파일을 이용하기

HTML에서 아래와 같은 코드를 사용해서 WebAssembly를 쉽게 브라우저 단에서 사용할 수 있습니다.

<script type="text/javascript" src="./src/gifsicle.js"></script>
<script type="text/javascript">
var gifsicle = new Gifsicle();

setTimeout(function() {
  // Gifsicle 내부적으로 .wasm 파일을 다운로드하기 때문에 약간의 시간을 기다린 후,
  // gifsicle 오브젝트를 사용할 수 있습니다.
}, 1000);
</script>

new Gifsicle()에서 Gifsicle은 WebAssembly로 빌드할 때 지정한 EXPORT_NAME과 같아야 합니다.


이번 글은 조금 많이 어려운 것 같습니다ㅠ 일반인 분들이 보기에는 적합하지 않고, WebAssembly에 관심 있으신 개발자 분들에게만 아주 약간의 도움이 될 것 같네요.
혹시 WebAssembly를 사용하시다가 어려운 점 있으시면 질문 주세요. 제가 아는 선에서 답변 드리도록 하겠습니다 :)

[출처] https://steemit.com/kr-dev/@heejin/c-c-webassembly

 

 

본 웹사이트는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
번호 제목 글쓴이 날짜 조회 수
285 HTML DIV tag: 세 개의 DIV영역을 가로로 나란히 놓는 방법 - 테이블과 비교 졸리운_곰 2019.02.04 105
284 [WP]외부 게시판을 IFRAME으로 넣기 졸리운_곰 2019.01.30 166
283 자바스크립트 기본 예제(마우를 클릭드래그하여 오브젝트 이동 시키기) 졸리운_곰 2019.01.28 20
282 접기기능 html 졸리운_곰 2019.01.28 170
281 좀 예전시절 접었다 폈다 하는 javascript 소스 졸리운_곰 2019.01.28 22
280 접었다 폈다하는 자바스크립트 소스 졸리운_곰 2019.01.28 63
279 node.js 서버 장애시 자동 재시작 설정 [forever 사용] 졸리운_곰 2019.01.24 467
278 JavaScript에서 json을 생성 하는 방식입니다. file 졸리운_곰 2019.01.10 58
277 JQuery로 radio 버튼의 값 가져오기 : How to get the value of selected radio button in a group using jQuery 졸리운_곰 2019.01.10 149
276 html placeholder= attribute 설정 후 text데이터 넣고 focus시 데이터 사라지는 문제 졸리운_곰 2019.01.08 27
275 Ajax replace instead of append 그리고 jquery .append(Html). 에서 class 적용 적용 졸리운_곰 2019.01.07 203
274 html element text value html에선 .text 가 아니라 textContent 다 졸리운_곰 2019.01.03 1975
273 JSON 스트링 <=> JSON 오브젝트 구분 및 상호 변환 file 졸리운_곰 2018.12.18 40
272 emscripten 셋업 file 졸리운_곰 2018.12.01 11
271 Emscripten을 이용한 C/C++ 컴파일 file 졸리운_곰 2018.12.01 47
270 Compiling a New C/C++ Module to WebAssembly 졸리운_곰 2018.12.01 40
» C/C++ 프로젝트를 WebAssembly로 빌드하기 file 졸리운_곰 2018.12.01 24
268 Emscripten으로 WebAssembly와 JavaScript 코드 크기 줄이기 file 졸리운_곰 2018.12.01 20
267 WebAssembly - hello world 어셈블리를 브라우저에 올려보자 file 졸리운_곰 2018.12.01 13
266 .자바스크립트 문자열 다루기 졸리운_곰 2018.11.19 131
대표 김성준 주소 : 경기 용인 분당수지 U타워 등록번호 : 142-07-27414
통신판매업 신고 : 제2012-용인수지-0185호 출판업 신고 : 수지구청 제 123호 개인정보보호최고책임자 : 김성준 sjkim70@stechstar.com
대표전화 : 010-4589-2193 [fax] 02-6280-1294 COPYRIGHT(C) stechstar.com ALL RIGHTS RESERVED