This Is A Custom Widget

This Sliding Bar can be switched on or off in theme options, and can take any widget you throw at it or even fill it with your custom HTML Code. Its perfect for grabbing the attention of your viewers. Choose between 1, 2, 3 or 4 columns, set the background color, widget divider color, activate transparency, a top border or fully disable it on desktop and mobile.

WebAssembly Demo: Zen Garden (Epic)

WebAssembly Demo: Zen Garden (Epic)

 

.

WebAssembly: Tomorrow Is Now

 

 

EpicZenGarden, WebAssembly and WebGL 2 in Firefox 52

 

 ..

웹어셈블리가 뭔가요?

출처_https://developer.mozilla.org/ko/docs/WebAssembly/Concepts

.

.

웹어셈블리는 현대 웹브라우저에서 돌릴 수 있는 새로운 형식의 코드입니다. 새로운 기능들을 제공하고, 성능면에서 상당한 이점을 갖죠. 이 언어는 기본적으로 손으로 작성될 것을 가정하지 않는 대신, C, C++, Rust 등등과 같은 저수준 소스 언어를 위한 효과적인 컴파일 타겟이 되도록 설계되었습니다.

이는 웹 플랫폼에서 상당히 큰 의의를 갖습니다 — 여러 언어로 작성된 코드들을 네이티브에 가까운 속도로 웹에서 돌릴 수 있는 길을 제공하며, 이전까지는 웹에서 돌려볼 수 없었던 클라이언트 앱들을 웹에서 돌릴 수 있도록 만들어주기 때문입니다.

그리고 심지어, 여러분은 이러한 장점들을 얻기 위해서 딱히 웹어셈블리 코드를 작성하는 법을 알 필요조차 없습니다. 웹어셈블리 모듈은 웹이나 Node.js 앱으로 임포트될 수 있게, 웹어셈블리 함수를 자바스크립트에서 불릴 수 있도록 노출할 수 있습니다. 자바스크립트 프레임웍들이 웹어셈블리를 사용함으로써, 웹 개발자들이 여전히 편하게 프레임웍을 사용하도록 하면서, 상당한 성능과 새로운 기능을 제공할 수 있는 겁니다.

.

.

웹어셈블리의 목표

.

.

웹어셈블리는 W3C 웹어셈블리 커뮤니티 그룹에서 다음과 같은 목표들을 가지고 만들어지고 있는 열린 표준입니다:

  • 빠르고, 효과적이고, 이식성이 좋을 것 — 웹어셈블리 코드는 일반적인 하드웨어들이 제공하는 기능을 활용하여 여러종류의 플랫폼 위에서 거의 네이티브에 가까운 속도로 실행될 수 있습니다.
  • 읽기 쉽고 디버깅이 가능할 것 — 웹어셈블리는 저수준 어셈블리 언어지만, 손으로 작성하고, 보고, 디버깅할 수는 있도록, 사람이 충분히 읽을 수 있는 수준의 텍스트 포맷을 갖고있습니다 (아직 스펙이 다듬어지는 중이긴 합니다).
  • 안전함을 유지할 것 — 웹어셈블리는 샌드박싱된 실행환경에서 안전하게 돌아갈 수 있도록 설계되었습니다. 웹상의 다른 코드와 마찬가지로, 웹어셈블리 코드도 브라우저의 동일한 출처(same-origin)와 권한정책을 강제할 것입니다.
  • 웹을 망가뜨리지 않을 것 — 웹어셈블리는 다른 웹 기술과 마찰없이 사용되면서 하위호환성을 관리할 수 있도록 설계되었습니다.

참고: 웹어셈블리는 웹과 자바스크립트 환경 밖에서도 사용될 것입니다. (Non-web embeddings 참고).

.

.

웹어셈블리를 어떤 느낌으로 웹 플랫폼에 들여왔나요?

 

웹 플랫폼을 다음과 같이 두 부분으로 나눠서 생각해볼 수 있습니다:

  • 자바스크립트 같이 우리가 만든 앱을 구성하는 코드를 돌리는 가상머신(VM).
  • 웹브라우저나 하드웨어의 기능을 호출해서 웹앱이 뭔가를 하도록 만들 수 있는 웹 API의 집합 (DOMCSSOMWebGLIndexedDBWeb Audio API 등등).

이전까지 웹브라우저의 VM은 오직 자바스크립트만 불러올 수 있었습니다. 오늘날의 웹에서 사람들이 겪는 대부분의 문제를 해결하기에 자바스크립트가 충분히 잘 작동했다고 볼 수 있기는 합니다. 하지만 3D 게임이나, 가상/증강현실, 영상처리, 이미지/비디오 편집, 그 외 네이티브 성능을 필요로하는 여러 분야의 사례(웹어셈블리 사용례 참고)에서는 성능상의 문제에 부딪혀왔죠.

거기에 더해서 아주 큰 자바스크립트 애플리케이션을 다운받고 파싱하고 컴파일하는 비용은 감당하기 힘들 수가 있습니다. 모바일이라거나 다른 리소스가 많이 제한된 환경에서는 이런 성능병목현상이 더 두드러지게 나타나기도 합니다.

웹어셈블리는 자바스크립트와는 다른 언어이지만, 자바스크립트를 대체하기 위해서 만들어지지는 않았습니다. 대신 자바스크립트와 나란히 돌아가면서 서로의 부족한 점을 보완하여 웹개발자가 두 언어의 강점을 동시에 취할 수 있도록 설계되었죠:

  • 자바스크립트는 웹 어플리케이션을 작성하기에 충분히 유연하고 표현력있는 고수준 언어입니다. 게다가 동적타입 언어라 컴파일 과정이 필요없고, 강력한 프레임웍, 라이브러리, 여타 도구들을 제공하는 거대한 생태계 또한 갖고있죠.
  • 웹어셈블리는 어셈블리같이 컴팩트한 바이너리 포맷을 갖고있는 저수준 언어로써 네이티브에 가까운 성능을 제공하기도 하고, C++이나 Rust같이 저수준의 메모리 모델을 갖고있는 언어의 컴파일 타겟으로써 그런 언어로 작성된 프로그램을 웹에서 돌릴 수 있게 해줍니다. (참고로 웹어셈블리는 미래에 가비지콜렉션 메모리 모델을 갖고있는 언어들을 지원할 고수준 목표도 갖고있습니다.)

웹어셈블리께서 브라우저들 사이에 강림하시매, 앞서 언급하였던 가상머신은 앞으로 자바스크립트와 웹어셈블리, 그 두가지 방식의 코드를 불러와 돌리게 될 것입니다.

필요하면 다른 형식의 코드끼리 서로를 호출할 수도 있습니다 — 웹어셈블리 자바스크립트 API가 익스포트된 웹어셈블리 코드를 일반적으로 부를 수 있는 자바스크립트 함수로 감싸고, 웹어셈블리 코드에서도 동기적으로 일반 자바스크립트 함수를 호출할 수 있습니다. 사실 웹어셈블리의 기본 단위는 모듈이라고 불리고, 웹어셈블리 모듈은 여러모로 ES6 모듈과 대칭적입니다.

.

.

웹어셈블리의 핵심 컨셉

.

어떻게 웹어셈블리가 브라우저에서 돌아가는지 이해하기 위해서 필요한 몇가지 핵심 컨셉들이 있습니다. 이 모든 컨셉들은 웹어셈블리 자바스크립트 API에 반영돼있습니다.

  • 모듈: 브라우저에서 실행가능한 머신 코드로 컴파일된 웹어셈블리 바이너리를 대표합니다. 모듈은 상태가 없습니다. 그래서 Blob처럼, 명시적으로 IndexedDB에 캐시될 수 있고, postMessage()를 통해서 창(windows)이나 워커 사이에서 공유될 수 있습니다. 모듈은 ES6 모듈처럼 임포트와 익스포트를 선언합니다.
  • 메모리: 웹어셈블리의 저수준 메모리 접근 명령어에 의해 읽고 쓰여지는 바이트들의 선형 배열인, 사이즈 조절이 가능한 어레이버퍼(ArrayBuffer)입니다.
  • 테이블: (안전성이나 이식성등을 위해서) 날(raw) 바이트로 메모리에 저장될 수 없는 (예를 들면 함수를 가르키는) 레퍼런스들의, 사이즈 조절 가능한 형식 지정된 배열입니다.
  • 인스턴스: 모듈과 그 모듈이 사용하는 모든 상태의 쌍입니다. 모듈의 상태로는 메모리, 테이블, 임포트된 값의 집합 등이 있습니다. 인스턴스는 ES6 모듈처럼 특정한 전역에 특정한 임포트의 집합과 함께 로드됩니다.

자바스크립트 API는 모듈, 메모리, 테이블, 인스턴스를 생성할 수 있는 방법을 제공합니다. 자바스크립트 코드에서는, 웹어셈블리 인스턴스에서 일반 자바스크립트 함수의 형태로 노출시킨 익스포트를 동기적으로 호출할 수 있습니다. 웹어셈블리 코드 또한, 웹어셈블리 인스턴스의 임포트 형식으로 넘겨받은 임의의 자바스크립트 함수를 동기적으로 호출할 수 있습니다.

웹어셈블리 코드를 다운로드하고, 컴파일하고, 돌리는 일련의 과정을 온전히 자바스크립트로 제어할 수 있기 때문에, 자바스크립트 개발자는 웹어셈블리를 그저 효율적으로 고성능 함수를 생성하기 위한 자바스크립트의 기능이라고 생각해도 무방합니다.

미래에는 웹어셈블리 모듈이 (<script type='module'>을 사용해서) ES6 모듈마냥 로드 가능하게 될 것입니다. 이러면 웹어셈블리 모듈을 다운받고, 컴파일하고, 임포트하는 과정이 ES6 모듈처럼 쉬워지게 되겠죠.

… READ MORE

.

 

 

 

 

 

 

 

 

 

 

카카오TV

By | 2017-08-26T02:19:40+00:00 8월 25th, 2017|Categories: Game|0 Comments

About the Author:

Leave A Comment