From cfd241b96e812320ab63dc5d835640ce83278cee Mon Sep 17 00:00:00 2001 From: IMHOJEONG <39ghwjd@naver.com> Date: Sat, 7 Oct 2023 23:42:19 +0900 Subject: [PATCH] [add]: add index.md for webassembly/concepts --- files/ko/webassembly/concepts/index.md | 132 +++++++++++++------------ 1 file changed, 69 insertions(+), 63 deletions(-) diff --git a/files/ko/webassembly/concepts/index.md b/files/ko/webassembly/concepts/index.md index 91fb060402554e..263b99300cdaf6 100644 --- a/files/ko/webassembly/concepts/index.md +++ b/files/ko/webassembly/concepts/index.md @@ -1,132 +1,138 @@ --- -title: 웹어셈블리의 컨셉 +title: WebAssembly의 개념 slug: WebAssembly/Concepts +l10n: + sourceCommit: e7dead4a3906bb4289acfee5c13fcea6bd682fa2 --- {{WebAssemblySidebar}} -본 글에서는 웹어셈블리의 작동원리 뒤에 숨어있는 컨셉을 설명함과 동시에 웹어셈블리의 목표, 웹어셈블리가 해결할 수 있는 문제, 그리고 웹브라우저 렌더링 엔진 안에서 웹어셈블리가 작동하는 원리에 관해 설명하려고 합니다. +이번 글에서는 WebAssembly의 작동원리 뒤에 숨어있는 컨셉을 설명함과 동시에 WebAssembly의 목표, WebAssembly가 해결할 수 있는 문제, 그리고 웹브라우저 렌더링 엔진 안에서 WebAssembly가 작동하는 원리에 관해 설명하려고 합니다. -## 웹어셈블리가 뭔가요? +## WebAssembly가 뭔가요? -WebAssembly는 최신 웹 브라우저에서 실행할 수 있는 새로운 유형의 코드이며 새로운 기능과 성능 면에서 큰 이점을 제공합니다. 직접 코드를 작성하는 것이 아니라 C, C ++, RUST 등의 저급 소스 언어를 효과적으로 컴파일하도록 고안되었습니다. +WebAssembly는 최신 웹 브라우저에서 실행할 수 있는 새로운 유형의 코드이며, 새로운 기능과 성능 면에서 큰 이점을 제공합니다. 직접 코드를 작성하는 것이 아니라 C, C++, RUST 등의 소스 언어를 효과적으로 컴파일하도록 고안되었습니다. -이는 웹 플랫폼에 큰 영향을 미칩니다. 이전에 불가능했던 웹에서 실행되는 클라이언트 응용 프로그램을 사용하여 웹에서 여러 언어로 작성된 코드를 네이티브에 가까운 속도로 실행하는 길을 제공합니다. +WebAssembly는 웹 플랫폼에 큰 영향을 미칩니다. 이전에 불가능했던 웹에서 실행되는 클라이언트 응용 프로그램을 사용하여 웹에서 여러 언어로 작성된 코드를 네이티브에 가까운 속도로 실행하는 방법을 제공합니다. -게다가 WebAssembly 코드를 사용하여 이를 활용하는 방법을 알 필요조차 없습니다. WebAssembly 모듈을 웹 (또는 Node.js) 앱으로 가져와 JavaScript를 통해 사용할 수 있도록 할 수 있습니다. JavaScript 프레임 워크는 WebAssembly를 사용하여 대규모 성능 이점과 새로운 기능을 제공하면서도 웹 개발자가 쉽게 기능을 사용할 수 있도록 할 수 있습니다. +게다가 WebAssembly 코드를 생성하는 방법을 알 필요조차 없습니다. WebAssembly 모듈을 웹(또는 Node.js) 애플리케이션으로 가져와 JavaScript를 통해 사용할 수 있도록 할 수 있습니다. JavaScript 프레임워크는 WebAssembly를 사용하여 대규모 성능 이점과 새로운 기능을 제공하면서도, 웹 개발자가 쉽게 기능을 사용할 수 있도록 할 수 있습니다. -## 웹어셈블리의 목표 +## WebAssembly의 목표 -웹어셈블리는 [W3C 웹어셈블리 커뮤니티 그룹](https://www.w3.org/community/webassembly/)에서 다음과 같은 목표들로 만들어지고 있는 열린 표준입니다: +WebAssembly는 [W3C WebAssembly 커뮤니티 그룹](https://www.w3.org/community/webassembly/)에서 아래와 같은 목표로 만들어지고 있는 열린 표준입니다. -- 빠르고, 효과적이고, 이식성이 좋을 것 — 웹어셈블리 코드는 [일반적인 하드웨어들이 제공하는 기능](http://webassembly.org/docs/portability/#assumptions-for-efficient-execution)을 활용하여 여러종류의 플랫폼 위에서 거의 네이티브에 가까운 속도로 실행될 수 있습니다. -- 읽기 쉽고 디버깅이 가능할 것 — 웹어셈블리는 저수준 어셈블리 언어지만, 손으로 작성하고, 보고, 디버깅할 수는 있도록, 사람이 충분히 읽을 수 있는 수준의 텍스트 포맷을 갖고있습니다 (아직 스펙이 다듬어지는 중이긴 합니다). -- 안전함을 유지할 것 — 웹어셈블리는 샌드박싱된 실행환경에서 안전하게 돌아갈 수 있도록 설계되었습니다. 웹상의 다른 코드와 마찬가지로, 웹어셈블리 코드도 브라우저의 동일한 출처(same-origin)와 권한정책을 강제할 것입니다. -- 웹을 망가뜨리지 않을 것 — 웹어셈블리는 다른 웹 기술과 마찰없이 사용되면서 하위호환성을 관리할 수 있도록 설계되었습니다. +- 빠르고, 효과적이고, 이식성이 좋을 것 + : WebAssembly 코드는 [일반적인 하드웨어들이 제공하는 기능](http://webassembly.org/docs/portability/#assumptions-for-efficient-execution)을 활용하여 여러 종류의 플랫폼 위에서 거의 네이티브에 가까운 속도로 실행될 수 있습니다. +- 읽기 쉽고 디버깅이 가능할 것 + : WebAssembly는 저수준 어셈블리 언어지만, 직접 작성하고, 보고, 디버깅할 수 있으며 사람이 충분히 읽을 수 있는 수준의 텍스트 형식을 갖고있습니다(명세는 아직 검토중입니다). +- 안전함을 유지할 것 + : WebAssembly는 샌드박싱된 실행환경에서 안전하게 돌아갈 수 있도록 설계되었습니다. 웹상의 다른 코드와 마찬가지로, WebAssembly 코드도 브라우저의 동일한 출처(same-origin)와 권한정책을 지켜야합니다. +- 웹을 망가뜨리지 않을 것 + : WebAssembly는 다른 웹 기술과 마찰없이 사용되면서 하위호환성을 관리할 수 있도록 설계되었습니다. -> **참고:** 웹어셈블리는 웹과 자바스크립트 환경 밖에서도 사용될 것입니다. ([Non-web embeddings](http://webassembly.org/docs/non-web/) 참고). +> **참고:** WebAssembly는 웹과 JavaScript 환경 밖에서도 사용될 것입니다([Non-web embeddings](http://webassembly.org/docs/non-web/) 참고해주세요). ## WebAssembly는 웹 플랫폼에 어떻게 적용될까요? -웹 플랫폼을 다음과 같이 두 부분으로 나눠서 생각해볼 수 있습니다: +웹 플랫폼을 다음과 같이 두 부분으로 나눠서 생각해볼 수 있습니다. -- 자바스크립트같이 우리가 만든 앱을 구성하는 코드를 돌리는 가상머신(VM). -- 웹브라우저나 하드웨어의 기능을 호출해서 웹앱이 뭔가를 하도록 만들 수 있는 [Web API](/ko/docs/Web/API)의 집합 ([DOM](/ko/docs/Web/API/Document_Object_Model), [CSSOM](/ko/docs/Web/API/CSS_Object_Model), [WebGL](/ko/docs/Web/API/WebGL_API), [IndexedDB](/ko/docs/Web/API/IndexedDB_API), [Web Audio API](/ko/docs/Web/API/Web_Audio_API) 등등). +- JavaScript같이 우리가 만든 앱을 구성하는 코드를 돌리는 가상머신(VM). +- 웹브라우저나 하드웨어의 기능을 호출해서 웹앱이 뭔가를 하도록 만들 수 있는 [Web API](/ko/docs/Web/API)의 집합 ([DOM](/ko/docs/Web/API/Document_Object_Model), [CSSOM](/ko/docs/Web/API/CSS_Object_Model), [WebGL](/ko/docs/Web/API/WebGL_API), [IndexedDB](/ko/docs/Web/API/IndexedDB_API), [Web Audio API](/ko/docs/Web/API/Web_Audio_API) 등). -이전까지 웹브라우저의 VM은 오직 자바스크립트만 불러올 수 있었습니다. 오늘날의 웹에서 사람들이 겪는 대부분의 문제를 해결하기에 자바스크립트가 충분히 잘 작동했다고 볼 수 있기는 합니다. 하지만 3D 게임이나, 가상/증강현실, 영상처리, 이미지/비디오 편집, 그 외 네이티브 성능을 필요로하는 여러 분야의 사례([웹어셈블리 사용례](http://webassembly.org/docs/use-cases/) 참고)에서는 성능상의 문제에 부딪혀왔죠. +지금까지 VM은 오직 JavaScript만 불러올 수 있었습니다. 오늘날의 웹에서 사람들이 겪고 있는 대부분의 문제를 해결하기에 JavaScript가 충분히 잘 작동했다고 볼 수 있기는 합니다. 하지만 3D 게임이나, 가상/증강현실, 컴퓨터 비전, 이미지/비디오 편집, 그 외 네이티브 성능을 필요로하는 여러 분야의 사례([WebAssembly 사용 예제](http://webassembly.org/docs/use-cases/) 참고)에서는 성능 문제에 직면하게 됩니다. -거기에 더해서 아주 큰 자바스크립트 애플리케이션을 다운받고 파싱하고 컴파일하는 비용은 감당하기 힘들 수가 있습니다. 모바일이라거나 다른 리소스가 많이 제한된 환경에서는 이런 성능병목현상이 더 두드러지게 나타나기도 합니다. +거기에 더해서, 아주 큰 JavaScript 애플리케이션을 다운받고 구문 분석 및 컴파일하는 비용은 감당하기 힘들 수가 있습니다. 모바일 및 기타 리소스가 많이 제한된 환경에서는 이런 성능병목현상이 더 두드러지게 나타나기도 합니다. -WebAssembly는 자바스크립트와는 다른 언어이지만, 자바스크립트를 대체하기 위해서 만들어지지는 않았습니다. 대신 자바스크립트와 나란히 돌아가면서 서로의 부족한 점을 보완하여 웹개발자가 두 언어의 강점을 동시에 취할 수 있도록 설계되었죠: +WebAssembly는 JavaScript와는 다른 언어이지만, JavaScript를 대체하기 위해서 만들어지지는 않았습니다. 대신 JavaScript와 나란히 돌아가면서 서로의 부족한 점을 보완하여 웹개발자가 두 언어의 강점을 동시에 취할 수 있도록 설계되었죠. -- 자바스크립트는 웹 애플리케이션을 작성하기에 좋은 유연하고 표현력 있는 고수준 언어입니다. 게다가 동적타입 언어라 컴파일 과정이 필요 없고, 강력한 프레임웍, 라이브러리, 여타 도구들을 제공하는 거대한 생태계 또한 갖고 있습니다. -- 웹어셈블리는 어셈블리같이 컴팩트한 바이너리 포맷을 갖고있는 저수준 언어로써 네이티브에 가까운 성능을 제공하기도 하고, C++이나 Rust같이 저수준의 메모리 모델을 가진 언어의 컴파일 타겟으로써 그런 언어로 작성된 프로그램을 웹에서 돌릴 수 있게 해줍니다. (참고로 웹어셈블리는 미래에 가비지콜렉션 메모리 모델을 가진 언어들을 지원할 [고수준 목표](http://webassembly.org/docs/high-level-goals/)도 갖고 있습니다.) +- JavaScript는 웹 애플리케이션을 작성하기에 좋은 유연하고 표현력 있는 고수준 언어입니다. 여기에는 많은 장점이 있습니다. 동적 타입 언어라 컴파일 과정이 필요 없고, 강력한 프레임워크, 라이브러리 및 기타 도구를 제공하는 거대한 생태계가 있습니다. +- WebAssembly는 네이티브에 가까운 성능으로 실행되고 C++ 및 Rust와 같이 저수준의 메모리 모델을 가진 언어의 컴파일 대상을 제공합니다. 또한, 웹에서 실행할 수 있는 컴팩트한 바이너리 형식을 갖고있는 저수준 어셈블리형 언어입니다(WebAssembly는 미래에 가비지콜렉션 메모리 모델을 가진 언어를 지원한다는 [고수준 목표](http://webassembly.org/docs/high-level-goals/)도 갖고 있습니다). -브라우저에 WebAssembly 가 등장하면서 앞에서 이야기했던 VM은 이제 JavaScript와 WebAssembly 두 가지 유형의 코드를 불러오고 실행합니다. +브라우저에 WebAssembly가 등장하면서 앞에서 이야기했던 가상머신(VM)은 이제 JavaScript와 WebAssembly 두 가지 유형의 코드를 불러오고 실행합니다. -필요하면 다른 형식의 코드끼리 서로를 호출할 수도 있습니다 — [웹어셈블리 자바스크립트 API](/ko/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly)가 익스포트된 웹어셈블리 코드를 일반적으로 부를 수 있는 자바스크립트 함수로 감싸고, 웹어셈블리 코드에서도 동기적으로 일반 자바스크립트 함수를 호출할 수 있습니다. 사실 웹어셈블리의 기본 단위는 모듈이라고 불리고, 웹어셈블리 모듈은 여러모로 ES6 모듈과 대칭적입니다. +필요하면 다른 형식의 코드끼리 서로를 호출할 수도 있습니다. [WebAssembly JavaScript API](/ko/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly)가 내보된 WebAssembly 코드를 일반적으로 부를 수 있는 JavaScript 함수로 감싸고, WebAssembly 코드에서도 동기적으로 일반 JavaScript 함수를 호출할 수 있습니다. 사실 WebAssembly의 기본 단위는 모듈이라고 불리고, WebAssembly 모듈은 여러모로 ES6 모듈과 대칭적입니다. -### 웹어셈블리의 핵심 컨셉 +### WebAssembly의 핵심 컨셉 -어떻게 웹어셈블리가 브라우저에서 돌아가는지 이해하기 위해서 필요한 몇가지 핵심 컨셉들이 있습니다. 이 모든 컨셉은 [웹어셈블리 자바스크립트 API](/ko/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly)에 반영돼있습니다. +WebAssembly가 브라우저에서 실행되는 방식을 이해하려면 필요한 몇가지 핵심 개념이 있습니다. 모든 개념은 [WebAssembly JavaScript API](/ko/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly)에 1대1로 반영되어 있습니다. -- **모듈**: 실행 가능한 컴퓨터 코드로 브라우저에서 컴파일된 WebAssembly 바이너리입니다. 모듈은 stateless이며 [Blob](/ko/docs/Web/API/Blob)처럼 Windows와 [worker](/ko/docs/MDN/Doc_status/API/WebWorkers) 간에 [`postMessage()`](/ko/docs/Web/API/MessagePort/postMessage)를 통해 명시적으로 공유 할 수 있습니다. 모듈은 ES2015 모듈과 마찬가지로 가져오기 및 내보내기를 선언합니다. -- **메모리**: 웹어셈블리의 저수준 메모리 접근 명령어에 의해 읽고 쓰여지는 바이트들의 선형 배열인, 사이즈 조절이 가능한 어레이버퍼(ArrayBuffer)입니다. -- **테이블**: (안전성이나 이식성 등을 위해서) 날(raw) 바이트로 메모리에 저장될 수 없는 (예를 들면 함수를 가리키는) 레퍼런스의, 사이즈 조절 가능한 형식 지정된 배열입니다. -- **인스턴스**: 모듈과 그 모듈이 사용하는 모든 상태의 쌍입니다. 모듈의 상태로는 메모리, 테이블, 임포트된 값의 집합 등이 있습니다. 인스턴스는 ES6 모듈처럼 특정한 전역에 특정한 임포트의 집합과 함께 로드됩니다. +- **모듈**: 브라우저에서 실행 가능한 기계어 코드로 컴파일된 WebAssembly 바이너리를 나타냅니다. 모듈은 stateless이며 [Blob](/ko/docs/Web/API/Blob)처럼 Windows와 [worker](/ko/docs/MDN/Doc_status/API/WebWorkers) 간에 [`postMessage()`](/ko/docs/Web/API/MessagePort/postMessage)를 통해 명시적으로 공유 할 수 있습니다. 모듈은 ES 모듈과 마찬가지로 가져오기 및 내보내기를 선언합니다. +- **메모리**: WebAssembly의 저수준 메모리 접근 명령어에 의해 읽고 쓰여지는 바이트들의 선형 배열인, 크기 조절이 가능한 ArrayBuffer입니다. +- **테이블**: 안전성이나 이식성 이유로 원시(raw) 바이트로 메모리에 저장될 수 없는, 크기 조절 가능한 형식 지정된 배열(예, 함수)입니다. +- **인스턴스**: 모듈과 그 모듈이 사용하는 모든 상태의 쌍입니다. 모듈의 상태로는 메모리, 테이블, 가져온 값의 집합 등이 있습니다. 인스턴스는 ES 모듈처럼 특정한 전역에 특정한 가져오기의 모듈 집합과 함께 로드됩니다. -자바스크립트 API는 모듈, 메모리, 테이블, 인스턴스를 생성하는 방법을 제공합니다. 자바스크립트 코드에서는, 웹어셈블리 인스턴스에서 일반 자바스크립트 함수의 형태로 노출한 익스포트를 동기적으로 호출할 수 있습니다. 웹어셈블리 코드 또한, 웹어셈블리 인스턴스의 임포트 형식으로 넘겨받은 임의의 자바스크립트 함수를 동기적으로 호출할 수 있습니다. +JavaScript API는 개발자에게 모듈, 메모리, 테이블 및 인스턴스를 생성하는 방법을 제공합니다. JavaScript 코드에서는, WebAssembly 인스턴스에서 일반 JavaScript 함수의 형태로 노출한 내보내기를 동기적으로 호출할 수 있습니다. WebAssembly 코드 또한, WebAssembly 인스턴스의 가져오기 형식으로 넘겨받은 임의의 JavaScript 함수를 동기적으로 호출할 수 있습니다. -웹어셈블리 코드를 다운로드하고, 컴파일하고, 돌리는 일련의 과정을 온전히 자바스크립트로 제어할 수 있기 때문에, 자바스크립트 개발자는 웹어셈블리를 그저 효율적으로 고성능 함수를 생성하기 위한 자바스크립트의 기능이라고 생각해도 무방합니다. +WebAssembly 코드를 다운로드하고, 컴파일하고, 돌리는 일련의 과정을 온전히 JavaScript로 제어할 수 있습니다. JavaScript 개발자는 WebAssembly를 그저 효율적으로 고성능 함수를 생성하기 위한 JavaScript의 기능이라고 생각할 수도 있습니다. -미래에는 웹어셈블리 모듈이 (`