웹 어셈블리란?
웹어셈블리는 최신 웹 브라우저에서 실행할 수 있는 코드 유형으로, 네이티브에 가까운 성능으로 실행되는 컴팩트한 바이너리 형식의 저수준 어셈블리 유사 언어이며 C/C++, C#, Rust와 같은 언어가 웹에서 실행될 수 있도록 컴파일 타깃을 제공합니다. 또한 JavaScript와 함께 실행되도록 설계되어 두 언어가 함께 작동할 수 있습니다.
이전에는 불가능했던 클라이언트 앱을 웹에서 실행하여 여러 언어로 작성된 코드를 네이티브에 가까운 속도로 웹에서 실행할 수 있는 방법을 제공합니다. - MDN
요약: 웹어셈블리는 최신 웹 브라우저에서 네이티브에 가까운 성능으로 실행되는 바이너리 형식의 저수준 언어로, 다양한 언어를 웹에서 실행할 수 있도록 지원합니다. 클라이언트 앱을 웹에서 빠르게 실행할 수 있는 방법을 제공합니다.
웹 어셈블리 첫인상
웹 어셈블리라는 개념을 처음 접했을때 저는 아래와 같은 생각을 했습니다. 첫인상을 기준으로 웹 어셈블리 블로그글을 작성했습니다.
- 웹 어셈블리가 모든 JavaScript를 대체할 수 있을까?
- 웹 어셈블리는 성능이 중요한 부분을 보완하지만, JavaScript와 함께 사용되어야 한다고 합니다. - 당장 Rust를 배워야하나?
- 웹 어셈블리를 사용하기 위해 꼭 Rust를 배울 필요는 없지만, 프론트엔드 개발자들이 Rust공부를 하는게 유행처럼 번지고 있다고 하네요 - 웹어셈블리가 정말 빠르다하는데 항상 웹 어셈블리가 빠를까?
- 복잡한 계산이나 성능이 중요한 작업에서 큰 성능 향상을 기대할 수 있을것 같습니다.
웹 어셈블리 등장 배경
- 고성능 웹 애플리케이션의 필요성
- 특히 게임, 3D 그래픽, 과학적 계산 및 데이터 시각화와 같은 고성능 작업에서는 JavaScript의 한계가 두드러졌습니다. - JS의 한계
- JS는 동적 타입 언어로서, 고성능 연산을 처리하는 데 한계가 있습니다. 이는 성능 최적화와 실행 속도 면에서 제약을 가져왔습니다.
웹 어셈블리가 JS보다 빠를까?
- 브라우저에서 자바스크립트가 실행되는 과정
- JS 코드 로드: HTML 문서에서 자바스크립트 코드 로드.
- 간단한 파싱 : 자바스크립트 코드를 토큰으로 변환.
- 구문 분석 (Parsing): 토큰을 AST로 변환.
- 바이트코드 생성: AST를 바이트코드(기계 친화적)로 변환.
- 인터프리터 실행: 인터프리터가 바이트코드를 실행.
- JIT 컴파일 및 최적화: 자주 사용되는 코드를 네이티브 머신 코드로 컴파일.
- 최적화된 코드 실행: JIT 컴파일러가 최적화한 네이티브 코드 실행.
이러한 과정을 통해 자바스크립트는 브라우저에서 실행되어 웹 애플리케이션을 구동하게 됩니다.
- 브라우저에서 .wasm(웹어셈블리)가 실행 과정
- .wasm 파일 로드: HTML 문서나 JavaScript 코드에서 .wasm 파일을 서버에서 다운로드합니다.
- 바이트코드 로드: 로드된 .wasm 파일을 바이너리 데이터로 읽어들입니다.
- 컴파일: 브라우저가 바이너리 데이터를 네이티브 코드로 컴파일합니다.
- 최적화: 컴파일 과정에서 네이티브 코드를 최적화합니다.
- 실행: 최적화된 네이티브 코드를 실행합니다.
- 결론적으로
웹 어셈블리는 미리 컴파일된 바이너리 파일을 사용하여 런타임에서 즉시 네이티브 코드로 실행되기 때문에, 자바스크립트보다 빠른 성능을 제공합니다. 자바스크립트는 동적 타입 언어로서 런타임 변환과 JIT 컴파일 과정을 거쳐야 하므로 상대적으로 오버헤드가 큽니다. 따라서 웹 어셈블리는 고성능이 필요한 작업에서 자바스크립트보다 효율적입니다.
하지만, 웹 어셈블리가 항상 자바스크립트보다 빠른 것은 아닙니다. 간단한 로직, 최적화가 잘된 상황 에서는 자바스크립트가 더 빠르고 효율적일 수 있습니다.
웹 어셈블리의 장점과 한계점
장점
- JS이외에 다른 언어로 작성한 프로그램도 브라우저에서 실행가능하다는 확장성⬆️
- 빠른 속도로네이티브 수준의 속도로 자바스크립트보다 빠른 실행, 복잡한 계산이나 대용량 데이터 처리시 성능 향상이 두드러짐
- 플랫폼 독립적으로 동작하여 다양한 브라우저와 운영체제에서 독립적인 성능을 발휘할 수 있음
한계점
- C, C++, C#, Rust등 다른 언어 학습 러닝커브가 존재
- 브라우저의 모든 API에 직접 접근 불가.
- 제한된 브라우저 지원
- 가비지 컬렉션 부재로 메모리 관리를 직접 해야함
- 초기 로드 시간이 길어질 수 있음
웹 어셈블리가 프론트엔드 개발에 미치는 영향
웹 어셈블리는 프론트엔드 개발에 새로운 가능성을 열어주며, 고성능 연산을 필요로 하는 작업에서 성능을 크게 향상시킬 수 있습니다. 다양한 언어를 사용할 수 있는 유연성을 제공하지만, 프론트엔드 개발에서 기존보다 더 높은 러닝커브가 생길것이고, 대신 JavaScript와의 상호작용을 통해 최상의 성능과 기능을 발휘할 수 있습니다. 결론적으로, 웹 어셈블리의 도입으로 인해 웹 애플리케이션은 더 복잡하고 고성능을 요구하는 작업을 처리할 수 있게 되어 사용자 경험이 크게 개선될 것으로 기대합니다.
