웹을 통해 새로운 창조를 꿈꾸는 인간 - kimdirector
www.kimdirector.co.kr Photo by unsplash.com
kimdirector
Creative Web & Mobile UI/UX Planner and Designer
Humans dreaming of new creation through the UI/UX





GUESTROOM
IT Information & News
HOME GUESTROOM IT Information & News
“웹과 앱의 경계 없어진다” 웹어셈블리가 약속하는 차세대 앱 환경
Posted by kimdirector | 2017.03.22 | Hit : 2527
웹어셈블리      환경  브라우저  파이어폭스 
목록보기이전보기
모질라 파이어폭스 팀이 최근 파이어폭스 52를 출시했다. 이번 버전에는 일반적인 버그 수정과 최적화도 포함되어 있지만 가장 눈에 띄는 점은 웹어셈블리(WebAssembly) 지원 추가다. 웹어셈블리는 사람들이 이바이스와 웹을 사용하는 방법을 아예 바꿔놓을 잠재력을 가지고 있는 기술이다.
 
이렇게 말하니 뭔가 대단해 보이긴 하는데, 대체 뭘까? 현재 웹어셈블리에 관한 문서는 대부분 개발자를 대상으로 하기 때문에 최종 사용자는 읽어봐도 무슨 내용인지 이해하기 어렵다.

에픽의 웹섬블리 데모. 파이어폭스 52로 체험할 수 있다.

 
웹어셈블리는 도대체 무엇인가?
 
웹어셈블리는 브라우저 또는 브라우저 외부에서 실행 가능한 애플리케이션을 위한 사전 컴파일된 이진 어셈블리 형식이다. 플래시(진작에 사라졌어야 함)와 달리 웹어셈블리는 브라우저 내에 구축되므로 플러그인이 필요 없다. 현재 자바스크립트가 기본적으로 지원되는 경우와 비슷하다고 보면 된다.
 
컴파일이라는 말의 의미를 모르는 사람을 위해 설명을 하자면, 예를 들어 파이어폭스와 같은 일반적인 데스크톱 프로그램은 소스 코드를 컴파일해서 얻은 수많은 0과 1의 모음이다. 소스 코드는 C 또는 C++와 같은 언어로 작성된다. 그러나 PC는 (일반적으로) C/C++ 코드를 직접 실행하지 않으므로 위에서 말한 0과 1로 이루어진 언어로 컴파일해야 한다.
 
웹어셈블리는 모든 컴퓨터에 통용되는 이진 어셈블리 언어(0과 1로 된 언어가 되기 전의 중간 형태 언어)다. 웹어셈블리 코드가 다운로드되면 PC는 이것이 프로그램임을 바로 인지한다. 이후 PC는 아키텍처와 운영 체제에 맞추어 최적화해서 코드를 어셈블링(어셈블러는 일종의 컴파일러)한다.

 
자바스크립트가 아니다
 
현재 대부분의 웹 애플리케이션은 자바스크립트를 사용해서 브라우저 내에서 실행된다. 자바스크립트는 오랜 시간 동안 사용됐고 그 사이 브라우저 최적화와 하드웨어 개선 덕분에 속도도 상당히 빨라졌다. 그러나 자바스크립트는 어디까지나 인터프리트(Interprete) 언어다. 즉, 컴퓨터(또는 스마트폰)가 코드 구문을 한 줄씩 해석해서 실행해야 한다. 이는 특히 모바일 기기에서 심각한 오버헤드를 유발할 수 있다.
 
어느 웹페이지가 PC에서는 문제 없이 로드되고 작동하는데 똑 같은 와이파이 네트워크를 사용하는 스마트폰에서는 느리다면 바로 이 오버헤드로 인한 지연 때문이다. 앱 생태계가 존재하는 중요한 이유도 여기에 있다. 즉, 웹이 아닌 디바이스에 최적화된 코드를 실행함으로써 실행 속도를 높이고 쾌적한 경험을 실현한다.
 
디바이스 관점에서 컴파일된 이진 코드는 모국어, 인터프리트된 코드는 외국어라고 할 수 있다. 인터프리트 코드를 이해하려면 CPU가 더 많은 일을 해야 한다.
 
다른 예를 들어 뉴스 기사에 나온 “Lastkraftwagen”이라는 독일어 단어가 소스 코드라면 이 단어의 영어 번역인 “truck”은 웹어셈블리 어셈블리 코드다. truck은 모든 영어 사용자가 이해할 수 있는 충분히 보편적인 용어다. 같은 영어라도 지역별로 차이가 있는데, 그 차이는 각 디바이스의 특정 아키텍처 및 그에 따른 최적화라고 생각하면 된다. 이 기사에 나오는 truck은 픽업 트럭이 아니라 상용 중형 차량을 의미하므로 영국에서 이 기사를 보는 사람이 해석한다면 “truck” 대신 “lorry”라는 단어를 사용할 가능성이 높다. 기기 자체에서 여전히 다소간의 어셈블리가 필요할 수 있지만 웹어셈블리는 PC가 모든 단어를 하나하나 번역할 필요를 없애준다.

 
사용자에게 중요한 이유

“컴파일된 프로그램을 아주 오래 전부터 사용해왔는데, 그게 대수인가”라고 생각할 수 있다. 맞다. 그러나 웹 브라우저 내에서 컴파일된 프로그램을 사용하지는 않았을 것이다. 웹어셈블리를 통해 속도가 “네이티브에 필적하는” 더 빠른 애플리케이션 배포 형식을 구현할 수 있다.
 
웹어셈블리는 로컬 시스템에서 실행되는 이진 코드이므로 예를 들어 포토샵 웹 애플리케이션도 데스크톱 포토샵 애플리케이션 못지않게 뛰어난 응답성을 제공할 수 있다. 웹어셈블리 팀은 심지어 대작 게임 타이틀도 브라우저에서 실행 가능할 것으로 기대 중이다. 유니티(Unity)와 언리얼 엔진 4(Unreal Engine 4) 엔진은 이미 웹어셈블리에서 작동한다. 파이어폭스 52를 사용하면 에픽(Epic)의 짤막한 웹어셈블리 데모도 볼 수 있다. 또한 유니티 엔진에서 실행되는 웹어셈블리로 탱크!(Tanks!)라는 게임도 이미 나와 있다.
 

유니티 엔진 게임 탱크!는 웹어셈블리로 웹 브라우저에서 실행한다. (WebAssembly.org)

 
에픽의 젠 가든(Zen Garden)은 게임과 애플리케이션이 어떻게 실행될 것인지 보여주는 흥미로운 데모다. 웹어셈블리 코드 자체보다 애셋(텍스처 등)을 다운로드하는 데 훨씬 더 많은 시간이 걸린다. 따라서 게임의 경우 애셋 파일은 여전히 다운로드해서 로컬에 저장해야 할 가능성이 높다. 다만 실행 파일은 비교적 빠르게 다운로드해서 실행할 수 있다.
 
리눅스 사용자에 이는 아주 좋은 소식이다. 리눅스(또는 같은 맥락에서 크롬 OS)로 전환하는 데 있어 가장 큰 장벽 중 하나는 사용자에게 업무나 게임을 위해 꼭 필요한 애플리케이션이 있다는 점이다(이른바 “미션 크리티컬” 앱). 예를 들어 어도비 라이트룸(Lightroom) 기반의 워크플로우를 구축해 작업하는 전문 사진 작가라면, 리눅스 또는 크롬 OS로의 전환은 생각도 못할 일이다. 어도비의 크리에이티브 프로그램은 리눅스에서 지원되지 않기 때문이다. 웹어셈블리를 사용하면 어도비는 라이트룸과 같은 프로그램을 윈도우나 맥 OS가 아닌 웹어셈블리로 컴파일해서 배포할 수 있다.
 
웹어셈블리는 앱의 보안 측면에서도 유망하다. 각 웹어셈블리 애플리케이션은 자체 샌드박스에서 실행되기 때문이다. 이는 웹어셈블리가 시스템에서 어느 하나라도 변경하려면 무조건 API 또는 다른 의도적 방법을 통해야만 함을 의미한다. 즉, 웹어셈블리 애플리케이션이 악성 애플리케이션이라 해도 시스템에 해를 입힐 수 없다. 다만 사용자가 애플리케이션에 직접 제공하는 정보는 여전히 위험에 노출될 수 있다.
 
우분투의 스냅, 페도라의 플랫팩(Flatpak)과 같은 패키지 형식을 생각해 보자. 웹어셈블리는 이 두 가지 형식을 압도할 잠재력을 지녔다. 물론 그러기 위해서는 개발자들이 그 형식을 채택해서 배포해야 한다는 전제 조건이 있다.
Posted by kimdirector | 2017.03.22 | Hit : 2527
Origin http://www.itworld.co.kr/news/103990#csidx860ab00257a284ca8346bbacaf7a88b
Tags 웹어셈블리      환경  브라우저  파이어폭스 
Trackback http://www.kimdirector.co.kr/bbs/zerotb.php?id=windowstip&no=439

COMMENT
목록보기 이전보기
GUESTROOM
Leaders Story
Download Review
Practical Use Tip
IT Information & News
Insight Story
Popular Contents
Category Cloud
About us Review Portfolio Design Review Leaders Story Mobile Work IT Information Web Identity Work Everyday Mobile Life Webdesign
Web Standard Homepage Work Web Plan Report Practical Use Tip Inspiration Download Recommend Site
Tags
디자인 웹저작도구 디자인 바이널 X 디자이너 소스 N-Screen 웹기획자 스큐어몰픽 대쉬보드 유저빌리티 퍼스널 브랜드 웹사이트 IE6 창작 무료 해외 기획 홈페이지 브라우저 유틸리티 어플리케이션 스티브 잡스 플립보드 비즈니스 사진 UI 머티어리얼 디자인 플랫폼 Website 디자이너 타이포그래피 천안외국어대학 회의 홈페이지 스마트폰 역발상 웹 표준 OS