WebAssembly, 왜 필요할까요? 🤔
여러분, 웹이 언제부터 이렇게 진화했죠? 이제 그냥 정보만 띄우는 화면이 아니잖아요. 복잡한 프로그램이 돌아가는 플랫폼이 됐단 말이죠.
근데 웹의 메인 언어인 JavaScript가 말입니다, 좀 한계가 있었어요. 특히 막 3D 게임 돌리고, 영상 편집하고, 사진 보정 같은 고성능 작업에선 속도가 발목을 잡았단 말이죠? 답답해 죽는 줄 알았어요.
그래서 **WebAssembly(Wasm)**가 짠! 하고 등장한 겁니다. 얘가 뭐냐면, 웹 브라우저에서 돌아가는 새로운 형태의 코드예요. 자바스크립트랑 같이 손잡고 일하면서, 고성능 작업은 얘가 처리하는 거죠. 덕분에 웹 앱 성능이 그냥 날아다니게 된 겁니다!
WebAssembly, 어떤 점이 매력적일까요? ✨
1. 엄청난 속도! 🚀
Wasm은 말이죠, 브라우저에서 거의 네이티브 앱 수준으로 쌩쌩 달려요. 이미 컴파일된 바이너리 파일이라 읽고 실행하는 데 시간이 적게 들고, 컴퓨터 자원도 효율적으로 쓴단 말이죠. 복잡한 계산이나 막 그래픽 처리 같은 거 할 때 얘가 핵심입니다!
2. 다양한 언어 지원! 🌐
이게 진짜 대박인데, C, C++, Rust, Go 같은 여러 프로그래밍 언어로 짠 코드를 Wasm으로 바꿔버릴 수 있어요. 그러니까 기존에 만들어진 고성능 라이브러리나 프로그램들을 웹에서 그대로 쓸 수 있게 된 거죠. 웹 개발의 문이 활짝 열리는 순간입니다!
3. 보안성! 🔒
Wasm은 샌드박스라는 안전한 울타리 안에서만 돌아가요. 외부에서 이상한 공격 들어와도 시스템을 딱! 보호해주는 거죠. 웹의 개방성이랑 보안이라는 두 마리 토끼를 동시에 잡는 겁니다! 기가 막히죠?
4. 경량화! 📦
Wasm 파일은 바이너리 형태라서 텍스트로 된 자바스크립트 파일보다 크기가 훨씬 작아요. 이게 뭐냐면, 웹 앱이 더 빨리 로딩된다는 뜻입니다. 기다리는 시간 줄어드니 사용자들도 행복해지겠죠?
WebAssembly, 어디에 활용될까요? 💡
- 고성능 게임: 웹에서 3D 게임 엔진 돌리고 막 복잡한 물리 시뮬레이션까지 가능해요. 게임이 훨씬 생동감 있어지는 거죠.
- 그래픽 및 멀티미디어 처리: 웹에서 이미지 편집, 비디오 인코딩/디코딩 같은 무거운 작업도 이제 척척 해낼 수 있습니다.
- CAD/CAM 및 과학 시뮬레이션: 막 복잡한 계산 필요한 전문 소프트웨어도 웹에서 돌릴 수 있게 됐단 말이죠. 가능성이 무궁무진합니다.
- 블록체인: 분산 앱(dApp)의 성능을 팍팍 올려주는 데도 기여할 수 있어요.
WebAssembly 간단 실습: C에서 Wasm으로! 🧑💻
자자, 이제 말로만 듣던 WebAssembly를 직접 손으로 만져볼 시간입니다! 가장 쉬운 예제로 C 언어로 짠 함수를 WebAssembly로 바꿔서 웹에서 실행해볼 거예요.
급한분들은 위한 실습 레파지스토리: 실습 레퍼지스토리
준비물:
- 손
- 이상적이 환경은 리눅스라고 합니다. 윈도우에서 하실 분들은 오류좀 겪을지도 모르겠네요
- Node.js (npm 포함)
- Emscripten (C/C++ 코드를 WebAssembly로 바꿔주는 마법 도구)
1단계: Emscripten 설치
Emscripten은 Wasm 개발의 치트키 같은 겁니다. 아래 명령어로 설치할 수 있어요.
설치하는 데 시간이 좀 걸릴 수도 있으니, 뭐 맛있는 거라도 하나 물고 기다리세요.
git clone https://github.com/emscripten-core/emsdk.git # gitHub 레파지스토리 클론
cd emsdk # emsdk 디렉토리로 이동
emsdk install latest # emsdk 설치 1
emsdk activate latest # emsdk 설치 2
.\emsdk_env.bat # 설치한 emsdk 컴파일러 실행2단계: C 코드 작성 (add.c)
아주 간단한 덧셈 함수를 C 언어로 짜볼 겁니다. add.c 파일을 만들고 아래 코드를 복붙하세요.
파일 경로는 emsdk 디렉토리의 동위 디렉토리 입니다.
그래도 말귀를 못 알아듣는 우리 코딩 새싹이이들을 위해서 굳이 설명을 더 해주자면
C://A/B/emsdk 자 이렇게 여러분들의 emsdk 디렉토리가 있다고 칩시다.
C://A/B/add.c 그럼 이렇게 emsdk 디렉토리와 같은위치에 있어야합니다.
굳이 상관없긴한데 파일 구조 관리가 이게 더 편하니 그냥 따라하세요. 반박시 님말이 최고. 너 튜링상.
그리고 아까 생성했던 add.c에 뭐 이런 함수 두개를 적어봅니다.
// add.c
#include <stdio.h>
int add(int a, int b) {
return a + b;
}
int multiply(int a, int b) {
return a * b;
}이 코드는 두 숫자를 더하거나 곱하는, 뭐 아주 평범한 함수 두 개예요.
이것도 이해못하시면 이 글을 왜 읽는거죠?
빠져나가서 유튜브에 C언어 기초 강의라도 듣고 오세요.
3단계: C 코드를 WebAssembly로 컴파일
이제 Emscripten을 써서 add.c 파일을 WebAssembly 모듈이랑 자바스크립트 래퍼 파일로 바꿔줄 거예요.
자 자세한 원리는 생각하지 마시고.
emcc add.c -o add.js -s EXPORTED_FUNCTIONS="['_add', '_multiply']" -s EXPORT_ES6=1 -s WASM=1emcc add.c: add.c 파일을 컴파일합니다.
-o add.js: 출력 파일 이름을 add.js로 정해주는 거예요. 이 파일이 나중에 WebAssembly 모듈을 불러오고 써먹을 수 있게 해줍니다.
-s EXPORTED_FUNCTIONS="['_add', '_multiply']": C 코드에 있는 add랑 multiply 함수를 자바스크립트에서 호출할 수 있게 내보내는 겁니다. 함수 이름 앞에 언더바(_) 붙이는 거 잊지 마세요!
-s EXPORT_ES6=1: ES6 모듈 형식으로 내보내는 옵션입니다.
-s WASM=1: 이걸 붙여줘야 WebAssembly로 컴파일하라고 명령하는 거예요.
이 명령어 뙇 실행하면 add.js랑 add.wasm 파일 두 개가 생길 겁니다.
정상 적용된 모습이고요.
참고하실 분들은 해주세요.
(LICENSE 파일이랑 README.md파일을 없어도 무관합니다)
4단계: 웹 페이지에서 WebAssembly 사용 (index.html)
이제 이 WebAssembly 모듈을 웹 페이지에서 불러와서 돌려봐야겠죠? index.html 파일을 만들고 아래 내용을 복붙하세요.
최종 파일 구조
<!DOCTYPE html>
<html>
<head>
<title>WebAssembly Test</title>
</head>
<body>
<h1>WebAssembly Add Example</h1>
<p>Result of add(5, 3): <span id="addResult"></span></p>
<p>Result of multiply(5, 3): <span id="multiplyResult"></span></p>
<script type="module">
// add.js 파일이 WebAssembly 모듈을 로드하고 초기화하는 역할을 해요.
// Module 객체는 Emscripten이 만들어주는 전역 객체고요.
// 우리는 Module._add랑 Module._multiply를 통해 C 함수에 접근하는 겁니다.
import Module from './add.js';
Module.onRuntimeInitialized = () => {
const addResult = Module._add(5, 3);
document.getElementById('addResult').textContent = addResult;
console.log("5 + 3 =", addResult);
const multiplyResult = Module._multiply(5, 3);
document.getElementById('multiplyResult').textContent = multiplyResult;
console.log("5 * 3 =", multiplyResult);
};
</script>
</body>
</html>이 HTML 파일은 add.js를 모듈로 가져와 쓰는 거예요. Module.onRuntimeInitialized는 Wasm 모듈이 준비되면 실행되는 부분입니다. 여기에서 C 함수인 _add와 _multiply를 호출해서 그 결과를 웹 페이지에 띄워줄 겁니다.
5단계: 웹 서버 실행 및 확인
웹 페이지를 열려면 우리 컴퓨터에 웹 서버가 돌아가고 있어야 해요. 간단하게 Node.js의 http-server를 쓸 수 있습니다.
npm install -g http-server
http-server명령어 실행하고 브라우저에서 http://localhost:8080 (아니면 화면에 뜨는 다른 주소)으로 들어가 보세요. add(5, 3)이랑 multiply(5, 3) 결과가 페이지에 뙇! 하고 나타나는 걸 확인할 수 있을 겁니다! 개발자 도구(F12) 콘솔에서도 결과 확인 가능해요.
마치며... 🌟
지금까지 한 모든 뻘짓들을 저의 깃허브에 올려놨으니 알아서 참고하실 분들은 하세요.
WebAssembly는 웹의 가능성을 한 단계 더 업그레이드 시키는 엄청난 기술입니다. 단순히 속도만 빨라지는 게 아니라, 웹 앱의 복잡한 기능들을 구현하게 해주는 핵심 중의 핵심 기술이 될 거예요.
이번 간단한 실습으로 WebAssembly가 어떻게 돌아가는지 조금이나마 감을 잡으셨기를 바랍니다. 개발자 여러분들도 Wasm에 관심 가지고 새로운 웹 개발 세상을 한번 탐험해 보시는 건 어떨까요? 진짜 후회 안 할 겁니다!
혹시 WebAssembly에 대해 더 궁금한 점이 있다면, 뭐든지 물어보세요!
대답은... 나도 모르면 안 해줄거임 ㅅㄱ
