웹을 통해 새로운 창조를 꿈꾸는 인간 - 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 : 2468
웹어셈블리 환경 브라우저 파이어폭스
목록보기이전보기
모질라 파이어폭스 팀이 최근 파이어폭스 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 : 2468
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 UXD IT Information Web Identity Everyday Story Mobile Life Webdesign
Web Standard Homepage Work Web Plan Report Practical Use Tip Inspiration Download Recommend Site
Tags
HTML5 아웃룩 로고디자인 테스팅 다운로드 디자인 IT 이벤트 서적 온라인광고 웹표준 캐주얼 모바일 홈페이지 아이디어 혁신 웹 2.0 OS BIP 사회적 가치 단축키 테크놀로지 벡터 아이콘 HTML5 애플워치 웹사이트 대쉬보드 배경이미지 무료 광고 솔루션 모바일 앱 아이콘 구글 드라이브 Parallax 소프트웨어 디자이너 기획 로고