한국어

WebAssembly 튜토리얼

웹어셈블리教程: 초보자 가이드

안녕하세요, 미래의 웹어셈블리 마법사 여러분! 여러분이 웹어셈블리의 세상으로 떠나는 흥미로운 여정의 안내자로서 기쁜 마음입니다. (floppy disk가 실제로 유연했던 시절을 기억하는 만큼 컴퓨터 과학을 가르친 지 오래되었습니다.) 이 여정을 가능한 한 재미있고 접근하기 쉽게 만들기 위해 여러분을 도와드리겠습니다. 좋아하는 음료를 골라, 편안하게 자리 잡고, 시작해보겠습니다!

WebAssembly - Home

웹어셈블리는 무엇인가요?

sandcastle을 짓는 것을 생각해보세요. 자바스크립트는 손을 사용하는 것처럼 유연하고 시작하기 쉬우지만, 거대한 요새를 짓는 데는 가장 빠른 방법은 아닐 수 있습니다. 반면에 웹어셈블리는 특화된 도구를 사용하는 것처럼, 조금 더 복잡할 수 있지만 빠르게 짓는 데 유용합니다!

웹어셈블리(WebAssembly), 흔히 Wasm으로 줄여서 부르는 것은, 웹 브라우저에서 효율적으로 실행되도록 설계된 이진 지시 형식입니다. 브라우저가 이해하는 비밀 코드처럼, 프로그램이 거의 네이티브 속도에 가깝게 실행할 수 있습니다.

왜 중요한가요?

  1. 속도: 웹어셈블리는 빠릿니다. 웹 애플리케이션에서 자전거에서 스포츠카로 업그레이드하는 것과 같습니다.
  2. 언어 다양성: 자바스크립트에 국한되지 않습니다. C, C++, Rust 등 다양한 언어를 사용할 수 있습니다.
  3. 보안: 웹어셈블리는 샌드박스 환경에서 실행되므로 안전하게 유지됩니다.

웹어셈블리 시작하기

개발 환경 설정

코딩을 시작하기 전에 우리의 작업 공간을 설정해야 합니다. 요리를하기 전에 부엌을 준비하는 것과 같습니다. 다음이 필요합니다:

  1. 최신 웹 브라우저 (Chrome, Firefox, Safari, Edge)
  2. 텍스트 에디터 (Visual Studio Code를 추천하지만, 사용하는 것에 편안한 에디터를 사용하세요)
  3. Emscripten 도구킷 (함께 설치할 것입니다)

Emscripten을 설치해보겠습니다:

# Emscripten 저장소 클론
git clone https://github.com/emscripten-core/emsdk.git

# 클론된 디렉토리로 이동
cd emsdk

# 최신 SDK 도구 다운로드 및 설치
./emsdk install latest

# 최신 SDK 도구 활성화
./emsdk activate latest

# 환경 변수 설정
source ./emsdk_env.sh

이제 이 코드가 무엇인지 이해하기 어려울 수 있습니다. 그냥 캔버스와 도료를 준비하는 것처럼 생각하세요!

첫 번째 웹어셈블리 프로그램

simple "Hello, World!" 프로그램으로 시작해보겠습니다. C에서 작성하고 웹어셈블리로 컴파일할 것입니다.

단계 1: C 코드 작성

hello.c 파일을 생성하고 다음 코드를 추가합니다:

#include <stdio.h>

int main() {
printf("Hello, WebAssembly World!\n");
return 0;
}

이는 브라우저가 이해하는 언어로 번역할 편지를 작성하는 것과 같습니다.

단계 2: 웹어셈블리로 컴파일

이제 C 코드를 웹어셈블리로 변환합니다. 터미널에서 다음 명령어를 실행합니다:

emcc hello.c -s WASM=1 -o hello.html

이 명령어는 편지를 마법의 변환기에 넣는 것과 같습니다. 다음 파일이 생성됩니다:

  • hello.wasm: 웹어셈블리 이진 파일
  • hello.js: 자바스크립트 glue 코드
  • hello.html: 프로그램을 실행하는 HTML 파일

단계 3: 웹어셈블리 프로그램 실행

hello.html 파일을 웹 브라우저에서 엽니다. 페이지에 "Hello, WebAssembly World!"가 출력되어야 합니다. 축하합니다! 첫 번째 웹어셈블리 프로그램을 실행했습니다!

마법 이해하기

어떻게 이 일이 일어났는지 분석해보겠습니다:

  1. 우리는 간단한 C 프로그램을 작성했습니다.
  2. 우리는 Emscripten을 사용하여 C 코드를 웹어셈블리로 컴파일했습니다.
  3. Emscripten은 JavaScript를 생성하여 웹어셈블리를 로드하고 실행했습니다.
  4. 브라우저는 우리의 웹어셈블리 코드를 실행하여 메시지를 출력했습니다.

이는 우리가 영어로 쓴 편지를 대중적인 언어(웹어셈블리)로 번역하고, 그 번역을 모두 이해할 수 있는 해석자(자바스크립트)가 크롬에서 읽어주는 것과 같습니다.

간단한 계산기로 더 나아가기

이제 우리는 발을 담그고, 간단한 계산기를 만들어보겠습니다. 두 숫자를 더하는 간단한 계산기입니다.

단계 1: C 코드 작성

calculator.c 파일을 생성하고 다음 코드를 추가합니다:

#include <emscripten.h>

EMSCRIPTEN_KEEPALIVE
int add(int a, int b) {
return a + b;
}

여기서 EMSCRIPTEN_KEEPALIVE는 우리의 함수가 중요하다는 것을 알립니다. 이를 통해 Emscripten이 이 함수를 유지하게 됩니다.

단계 2: 웹어셈블리로 컴파일

우리의 계산기를 컴파일합니다:

emcc calculator.c -s WASM=1 -s EXPORTED_FUNCTIONS='["_add"]' -s EXPORTED_RUNTIME_METHODS='["ccall", "cwrap"]' -o calculator.js

이 명령어는 번역기에 특정 지시를 주는 것과 같습니다.

단계 3: HTML 인터페이스 생성

calculator.html 파일을 생성하고 다음 코드를 추가합니다:

<!DOCTYPE html>
<html>
<head>
<title>WebAssembly Calculator</title>
</head>
<body>
<h1>WebAssembly Calculator</h1>
<input type="number" id="num1" placeholder="Enter first number">
<input type="number" id="num2" placeholder="Enter second number">
<button onclick="calculateSum()">Add</button>
<p>Result: <span id="result"></span></p>

<script src="calculator.js"></script>
<script>
Module.onRuntimeInitialized = function() {
window.add = Module.cwrap('add', 'number', ['number', 'number']);
}

function calculateSum() {
var num1 = parseInt(document.getElementById('num1').value);
var num2 = parseInt(document.getElementById('num2').value);
var sum = add(num1, num2);
document.getElementById('result').textContent = sum;
}
</script>
</body>
</html>

이 HTML 파일은 우리의 계산기에 사용자 친화적인 인터페이스를 만드는 것과 같습니다. 두 개의 입력 상자와 "Add" 버튼이 있습니다.

단계 4: 웹어셈블리 계산기 실행

calculator.html 파일을 브라우저에서 엽니다. 두 개의 입력 상자와 "Add" 버튼이 보입니다. 두 숫자를 입력하고 "Add"를 클릭하면, 웹어셈블리 계산기가 작동하는 것을 확인할 수 있습니다!

결론

이제 여러분은 흥미로운 웹어셈블리 세상으로 첫 걸음을 내디뎠습니다. 우리는 환경을 설정하고, "Hello, World!" 프로그램을 만들었고, 심지어 간단한 계산기를도 만들었습니다.

웹어셈블리를 배우는 것은 자전거 타는 것과 같습니다. 처음에는 흔들릴 수 있지만, 연습을 거듭하면 웹 개발 세계에서 빠르게 이동할 수 있게 됩니다. 계속 실험하고 배우며, 가장 중요한 것은 즐기세요!

다음 강의에서는 웹어셈블리의 기능을 더 깊이 탐구하고 성능 최적화 방법을 배울 것입니다. 그때까지, 행복한 코딩 되세요!

메서드 설명
emcc Emscripten 컴파일러 명령어
EMSCRIPTEN_KEEPALIVE 함수가 최적화되지 않도록 막는 매크로
Module.cwrap 컴파일된 C 함수를 호출하는 워apper 생성
Module.ccall 컴파일된 C 함수 직접 호출

Credits: Image by storyset

 
다음 튜토리얼:
WebAssembly - 개요