정확히 한달만에 포스트를 올리게 됐습니다.
이 블로그는 업데이트가 없어 조용했지만, 저에겐 상당히 다사다난 했던 한 달 이었습니다.
몰아치는 회사업무, 편도선염, 개인문제 기타등등~
그런 골치아픈 와중에 기분전환 겸 컨퍼런스있다는 소식에 다녀왔습니다.
바로 전날에는 Naver DEVIEW 2016도 있었다는데.. 소식을 못 접해서 깜짝놀랐네요. 작은 행사도 아닌데! 허허
어찌됐든 컨퍼런스 주제 별로 정리해 보았습니다.
발표내용을 제가 다 받아 적거나 할 수 없었기 때문에 보시는 분이 이해하기 쉽게 제가 찾아서 원래 내용을 첨삭한 부분이 더 많습니다.
위 같은 점을 생각하시고 봐주시면 좋을 것 같아요.
입구 모습입니다. 컨퍼런스는 코엑스 그랜드볼룸에서 진행됐습니다.
너무 빨리왔는지 아무도 없었습니다. 노트북 충전할 겸 콘센트가 있는 벽 쪽 자리로!
점심은 코엑스 내부 돈까스집에서 해결했습니다. 사이즈 때문인지 작게 나왔는데 보기보다 커요. 치즈 소름
사진은 왜 커다란 치즈스틱처럼 보이지..
음 컨퍼런스 참여는 여러번 해봤지만 리뷰를 쓰는건 처음이라.. 찍은 사진의 상태가..?
발표자분들이랑 사진이라도 찍을껄 그랬네요! 에고
자 각설하고! 이제 실제 컨퍼런스 내용에 대해서 알아보도록 하겠습니다.
0. 진행 프로그램 순서
1. 크로노스 그룹의 Vulkan 그리고 웹
첫번째 세션은 크로노스 그룹 의장 닐 트레빗이 발표했습니다.
크로노스 그룹이 밀고있는 Vulkan과 웹에 대해서 소개하였습니다.
크로노스 그룹?
크로노스 그룹(Khronos Group)은 OpenGL등의 API를 책정하는 곳입니다.
3D 그래픽 & 모델링 라이브러리에는 우선 OpenGL이 있고, 임베디드용 OpenGL ES 그리고 웹 용으로 WebGL이 있습니다.
여기에 2015년에 추가로 발표한 Vulkan이 있습니다.
위에 설명한 버전들은 후속 버전이라는 개념이라기 보다는 각기 다른 방향으로 뻗어나간 네가지 갈래의 차기작으로 보시면됩니다.
WebGL API를 사용한 엔진들
WebGL은 Low Level의 API지만 툴이나 엔진들이 많이 나와있습니다.
- three.js
- playcanvas
- cesium
- scenejs
- unity5
- bqbylon.js 등
이들은 현재 공개 된 애플리케이션에도 많이 사용되고 있습니다.
수많은 WebGL 샘플들을 아래주소에서 볼 수 있습니다.
https://sketchfab.com/
그외 사용 중인 곳?
Google Maps도 WebGL로 되어있습니다.
현재도 이 기술은 많은 곳에서 사용 되고 있으며, 즉 지금도 널리 Deploy 될 수 있는 플랫폼이라고 입증하고 있습니다.
VR과 WebGL
닐 트레빗은 이번 컨퍼런스에서 추후 가상현실 (Virtual Reality) 구현 시에도 사용자들이 어플리케이션을 다운로드 하지 않고자 하는 욕구가 많기 떄문에 WebGL이 활용될 여지가 많다고 생각 한다고 합니다.
WebVR에 대해서 자세히 알고 싶으시면 아래 깃헙에서 확인 하실 수 있습니다.
https://w3c.github.io/webvr/
모질라에서는 손쉬운 VR제작을 위한 기술 A-Frame을 발표 했습니다.
복잡한 가상현실을 브라우저 내에 구현 할 수 있습니다.
https://aframe.io/
glTF? 3D 관련 포맷
glTF는 크로노스 그룹이 발표한 3D 그래픽 파일 포맷입니다.
glTF는 호환성이 좋고 똑같은 포맷을 모두 사용할 수 있으며, 여러 엔진들에 Import가 가능하다고 합니다.
자세한 설명에 대해서는 이후 세션에 다루고 있기 때문에 glTF에 대한 설명은 이정도로 그쳤습니다.
닐 트레빗은 이날 glTF가 3D웹 생태계의 중요한 자리를 차지하길 바라며 표준이 되길 바라는 포부를 내비쳤습니다.
오디오는 MP3, 비디오는 h.264 이미지는 jpeg 이런식으로 확실한 파일 포맷이 있으나 3D 그래픽스 분야에는 아직 표준이 존재하지 않기 때문입니다.
2. 네이버의 HTML5 전환 전략과 실전
웹의 파편화문제(fragmentation)
웹페이지를 개발 시 가장 문제되는 부분이 웹의 파편화 문제입니다.
웹의 파편화는 간단하게 아래와 같이 정리할 수 있습니다.
- 디바이스
- OS
- 웹 브라우저
- 비표준 대체기술
웹의 상태 변화
현재 웹은 아래와 같은 상태 변화가 진행됐거나 되고 있습니다.
- ActiveX 플러그인이 사라지고 플래시에 대한 서포트도 점차 줄어드는 중
- IE의 10이전 버전 지원 중단
- Edge ActiveX 지원 X
- 크롬의 NPAPI, 플래시 지원 축소
- 크롬의 Flash 관련 정책 변경 (Plug-in Power Saver등)
이번세션에서는 이런 문제에 대한 네이버 서비스의 Flash -> HTML5로의 기술전환에 대한 내용이 주를 이루었습니다.
Flash의 HTML5 전환및 변경사례
뮤직 스트리밍, 네이버 스포츠 등의 수정하며 기술선택 과정에 대해서 설명이 이어졌습니다.
시간 문제로 몇일 전에 동일한 내용으로 블로그에 올려주신 것 보다 적은 내용의 발표가 이어지더군요..!
발표자가 직접 작성해주신 동일한 주제의 포스트를 보시는게 더 도움이 되실 것 같아서 주소 첨부합니다.
http://d2.naver.com/helloworld/7122
- 인사말
첫 두 섹션이 끝나고 신상열 미래 창조과학부 소프트웨어 진흥과장, 한동원 ETRI SW 콘텐츠 연구 소장의 축사가 이어졌습니다.
3. 게임엔진 Web 플랫폼
유니티 소개
2016년 기준 150만명이 사용중인 유니티(Unity)는 3D 비디오 게임이나 건축 시각화, 실시간 3D 애니메이션 같은 기타 인터랙티브 콘텐츠를 제작하기 위한 통합 저작 도구입니다.
C#으로 만들어진 에디터 프로그램으로 개발 하면 여러 플랫폼에서 동작 할 수 있습니다. JVM처럼 말이죠.
그런데 유니티는 게임엔진입니다. 그런 유니티에서 이 컨퍼런스에 참여한 이유는 무엇일까요?
작년에 나온 5.3 버전부터 지원하는 플랫폼에 브라우저(WebGL)를 지원하기 때문입니다.
유니티 컴파일
기존 유니티는 엔진에 C++, .Net API로 되어있고 유저가 사용하는 에디터는 C#으로 개발할 수 있게 되어있습니다.
C#을 빌드하면 IL코드(중간코드, dll파일)가 생성되는데 이를 il2cpp를 이용하여 C++로 컨버팅 하게 됩니다.
C++로 컨버팅 할 때 플랫폼에 따라서 컨버팅 되게 됩니다.
VR
유니티도 VR시장에 안 뛰어들 수 없겠죠
VR사용 시 사용자에 따른 문제발생 관련한 문제(멀미, 적응성, 장기간 사용 관련, 사용 시 가속도느끼지 않게) 및 추후 지원방향에 대한 설명이 이어졌습니다.
유니티에서는 대부분의 VR 플랫폼 지원 하며 나중에 플랫폼이 많이 보급된다면 유니티로 만든 VR 게임들이 매우 기대됩니다.
VR 플랫폼은 오큘러스, 플레이스테이션 VR등이 있습니다. 게임이나 이런거에 관심이 없더라도 한번쯤은 들어보셨을거라 믿습니다.
문제점
물론 유니티 기능이 브라우저(WebGL)에서 전체가 지원되는건 아니라고 합니다.
특정 고급기능, 디버깅 지원도 아직 미흡하며, 브라우저에서는 WebGL을 사용하므로 코드가 자바스크립트로 변환되면서 완전 최적화 되지 않아 메모리가 부족할 수 있다하니 어느정도 사양이 필요한 것 같습니다.
또한 자바스크립트로 변환되면서 콘텐츠도 커지는 문제도 존재하며 이외에도 아직 개선해야할 부분은 있다며 세션이 종료되었습니다.
유니티
마지막에는 뜬금없는 유니티 실제 리얼타임 구동영상을 보여줬습니다.
위에서 설명한 VR이나 WebGL관련 되진 않지만, 현재 유니티로 표현할 수 있는 성능을 보여주는거 같습니다.
유니티는 간단하게 사용 가능 하지만 그래픽은 하이엔드로 뽑을수 없다는 편견이 있었는데 리얼타임으로 이 정도 퍼포먼스를 보여줄 수 있는 걸 보니 기술발전이 많이 됐다는 생각이 듭니다.
4. WebGL과 glTF
glTF란? 3D 그래픽 파일포맷 입니다.
Vulkan, OpenGL 등과 데이터 구조가 비슷하며, 파싱 하는데도 오류가 적어서 빠른속도로 실행할 수 있게 되어있다고 합니다.
관련 앱으로 marmoset viewer, nasa curiosity rover, lred bull x-apls 등의 어플이 이 파일 포맷을 사용하고 있습니다.
http://www.marmoset.co/viewer
WebGL은 OpenGL이 아닌 OpenGL/ES를 기반으로 하였다. 모바일 쪽에 힘을 실어주기 위해서 ES버전을 이용하여 개발되었으며 후속버전이라기 보다는 갈래가 다른 버전으로 보시면됩니다.
아래 위키에서 OpenGL/ES가 어느 플랫폼에 사용된지 보시면 느낌이 오실겁니다.
Wiki 바로가기
일반적인 표준
오디오 -> mp3
비디오 -> h.264
이미지 -> jpeg
3D -> ?
발표자는 3D 분야 포맷이 glTF가 되길 원하며 glTF의 장점에 대해서 발표했습니다.
glTF는 모든 메타데이터를 추가하고 확장 가능합니다.
메타데이터는 JSON 구조이며 노드에 위치, 애니메이션, 스킨, 셰이더, 텍스쳐등의 정보를 가지고 있습니다.
이런 메타데이터 정보는 다른 3D형식 포맷과의 파싱 시 오류없이 가능하게 지원 합니다.
Three.js
가장 핫한 WebGL 라이브러리라고 소개하고 있습니다.
원하는 개발을 쉽게쉽게 할 수 있게 되어있다.
설명이 진짜 짧네요. 진짜로 이정도 설명하고 말았습니다. 핫하니깐 알아서 찾아보란 말이었나 봅니다.
Three.js 외 Cesium.js 주소도 첨부합니다.
https://threejs.org/
https://cesiumjs.org/demos.html
5. 구글의 모바일 고속화 실험 AMP(Accelerated mobile pages)
AMP란?
구글에서 지원하는 웹페이지를 더 빠르게 렌더링 하기위한 방법입니다
퍼포먼스를 위한 많은 구글의 경험과 베스트 프랙티스의 구현체입니다.
AMP 방식으로 보장되는 점은 아래와 같습니다.
- HTML
- JavaScript로딩
- 컴포넌트 사용시 웹페이지의 빠른 렌더링을 보장
- 구글 검색결과에서 즉시 로딩
APM 주요특징
html
사용 속성 제약 되어있음
커스텀 태그 AMP 컴포넌트 사용
AMP Validaor 통과해야함js
amp.js파일만 허용
사용자 자바스크립트는 Sandbox Iframe에서만 가능
자바스크립트 기능필요시 직접 AMP 컴포넌트 개발css3
문서에 삽입하는 인라인형태만 가능
50kb까지 가능caching
페이지 구성 단순화
대역폭 최적화
페이지 캐싱
APM Components
이미지 동영상 등 amp에서 지원하는 components목록은 아래 주소에서 확인 가능합니다.
AMP Project Docs
기본 지원하는 컴포넌트 외에도 확장 컴퍼넌트도 존재하며 계속 늘어나고 있습니다.
AMP는 어떻게 빠른 성능을 내나?
- 비동기 스크립트만 허용
- 모든 리소스의 사이즈 지정
- 확장 컴포넌트들을 렌더링 차단없이 실행
- 써드파티 자바스크립트를 크리티컬 패스에서 제거
- CSS는 HTML 내부 스타일 시트만 허용하고 크기 제한(50KB)
- 웹폰트를 효율적으로 다운로드
- 폰트를 미리 받아 css적용 시 폰트로 인한 딜레이 없앰
- 스타일 재계산 최소
- GPU 가속 애니메이션만 실행
- 리소스 로딩 순서 제어
- 리소스 우선순위 계산 ,중요한거 먼저 다운로드
- 페이지 즉시 로드
- PreConnect API로 웹페이지 이동 전에 미리 렌더링
결론
아직 비교적 규모가 작고 정적인 콘텐츠 요소가 있는 페이지에 적합합니다.(커스텀 js가 동작하지 않기 떄문에)
PWA 앱 처럼 동작하는 웹을 구현하기 위한 기술요소로 떠오를 가능성이 있다.
(PWA는 다음 세션에서 다룹니다!)
6. 프로그레시브 웹앱(PWA)
프로그레시브 웹앱이란?
웹사이트와 모바일앱의 장점을 취하는 형태의 새로운 앱 생명주기 모델을 가진 Web Application입니다.
기존에 앱은 개발하여 스토어에 올리고 사용자가 리소스를 다운하여 사용 했다면, PWA의 경우 웹기반이기 때문에 컨텐츠 배포에 대한 고민이 크게 없다는 장점이 존재합니다.
본질은 모바일 웹이지만 마치 앱을 사용하는듯한 유저 경험을 전달하는 방식입니다.
Mobile Website의 장/단점
장점
- URL이 변경되지 않는 이상 빠른 배포 및 연결성
- 보유 컨텐츠 서비스를 모바일 기기에 빠르게 배포
- 표준 기반 다양한 폭넓은 기기지원
단점
- Native 대비 떨어지는 UX
- 성능
- 기능
일반적인 모바일 웹사이트의 단점이 위와 같다면 PWA는 위의 단점들을 개선하기 위한 노력이 계속 되는 중입니다.
실 적용 PWA앱
- Flipkart
- Washington Post
세션에서 시연한 영상을 구하고 싶었으나 아쉬운데로 유튜브에서 찾아서 주소 첨부 했습니다.
https://www.youtube.com/watch?v=MxTaDhwJDLg
웹페이지를 마치 앱처럼 보이게 눈속임을 하는게 전부가 아닙니다.
기존 모바일 웹에서 FWA로 변경하고 나서 발견된 긍정적인 현상이 있습니다.
PWA로 인해 사이트의 성능 개선 및 UI가 빨라짐으로 써 사용자가 머무는 시간이 늘어 났다고 합니다.
Web App Manifest
Native와 동일한 앱 접근성을 구현하기 위한 설정 목록을 가진 파일 입니다.
앱의 아이콘, 배경색, 앱이름 등 웹앱이 가져야 할 설정들을 가지고 있으며,
html페이지에 아래와 같이 link 태그를 추가하여 적용 할 수 있습니다.
<link rel="manifest" href="/manifest.webmanifest">
Manifest참고 URL
https://developer.mozilla.org/ko/docs/Web/Manifest
Service Workers
모바일앱이 바탕 아이콘과 UI만 변경된다고 앱의 느낌을 전달 하기엔 부족합니다.
대표적으로 푸시나 백그라운드 관련기능이 이에 해당하는데 백그라운드에서 브라우저에의해 동작되는 스크립트를 서비스 워커라 합니다.
https://developers.google.com/web/fundamentals/getting-started/primers/service-workers
구글 코드랩도 존재하니 관심있으시면 한번 보시길 권합니다.
https://codelabs.developers.google.com/codelabs/your-first-pwapp/#0
7. 웹브라우저 렌더링 구조와 컨텐츠 최적화
세션시간에 비해서 내용이 많아서 급하게 설명을 하신건지 제가 이해를 잘 못하겠더군요
네 제가 많이 부족합니다 ㅜㅜ.
vSync설명도 잘 이해 안 되고 해서 해당 세션 주제와 최대한 동일한 가이드를 찾아서 주소를 아래 적었습니다.
https://developers.google.com/web/fundamentals/performance/rendering/
위와 같이 렌더링에 대해서 설명 해 주시고 그외에도 Viewport를 쓰면 브라우저에서 GPU를 쓰게되서 Paint 성능이 빨라진다.. 정도 있겠습니다. 사실 잘 기억이 안나요 이 부분.. 당이 부족했는지 집중이 잘 안됐습니다!
8. High Web고속화 프레임워크와 킬러 서비스
웹 고속화 기술 배경 : 모바일 HW의 발전
모바일 하드웨어는 아래와 같은 순서로 발전했습니다.
- 멀티 코어가 발전
- CPU와 GPU의 발전으로 인해서 HW패러다임의 변화 발생
- 크로노스의 OpenGL OpenCL 두 표준을 이용하여 GPU와 CPU 기능을 효율적으로 활용하여 성능을 높임
위와 같은 하드웨어의 발전에 더불어 그래픽 가속을 위한 WebGL, 병렬계산을 위한 WebCL규격이 존재합니다.
OpenGL뿐 아니라 Vulkan도 일반적으로 그래픽도 지원하지만 CPU 컴퓨팅도 보완이 되어있는 API입니다.
웹고속화 활용 분야
- 3D 게임
- 빅데이터 시각화
- 증강/가상 현실
WebCL개요
WebCL(웹 컴퓨팅 언어)은 플러그인 없이 웹 브라우저만을 이용하여 이질 병렬 컴퓨팅을 수행하기 위한 OpenCL 이용 자바스크립트 바인딩 입니다.
WebCL은 OpenCL을 바인딩했기때문에 같은 Excution을 따르며 비슷하게 사용가능 합니다.
그런이유로 OpenCL에 대한 사전지식이 필요합니다.
WebCL 사용 예
- 모바일 단말 가상 웹 쇼핑몰
- 모바일 웹 브라우저용 이미지 처리
- 렌더링 가속 : WebGL
- 계산 가속 : WebCL
HW를 이용하여 렌더링 및 계산에 속도 향상을 꾀하고 있습니다.
위에서도 계속 언급했지만 Vulkan을 이용해서 테스트 할 경우 동일한 개념으로 사용 가능하기도 하며 성능도 비슷합니다.
9. HTML5 기반의 자바스크립트를 이용한 고속화 기술과 튜닝방법
튜닝대상
- 초기 로딩속도 (.html, .css, .js .png)
- 노드 생성속도 (html head body title div 등)
- 화면렌더속도
- 자바스크립트 코드 속도
많은 개발자들이 개발자모드의 TimeLine 탭 활용을 놓치고 있습니다.
크롬 개발자 모드의 timeline기능을 사용하여 페이지의 렌더링, js실행, 함수 속도 등을 파악 가능합니다.
10. 소셜웹 기술동향
소셜 네트워크 시장 동향
2007~2014
2004년 등장한 페이스북에 대항하기 위해 구글과 IBM에서 오픈소셜 파운데이션 만들어서 스펙을 제정합니다.
이 스펙은 구글 플러스등에 반영 되었습니다.
2012~2015
오픈소셜 파운데이션의 등장 후로 크게 확장되진 않고 페러럴하게 oma라는 표준화 기구가 등장 했습니다.
피쳐폰들에 들어가는 sms mms등의 표준을 개발하였으며, iOS는 아직 oma표준을 따릅니다.
이통사 중심으로 모인 표준화 기구입니다.
sNeW 등의 표준으로 서비스가 됐으나 경쟁이 안되서 얼마 안 가서 접게 되었습니다.
2014~현재
페러럴하게 진행하던 관련 표준 재정이 IBM, Mozila, Google, 보잉 등의 멤버가 W3C로 넘어와서 W3C에서만 진행중입니다.
2014년 10월 결성되고 9개의 소셜 서비스 관련 표준 진행중이며 4개는 이미 Candidate Recommendation 되었습니다.
데이터들이 대기업(구글, 페북, 네이버, 다음카카오)에 통제되는 생태계가 구성되고 있어서 이 서비스 저 서비스 상관없이 상호연동 가능, 데이터의 주권은 데이터 생산자에게 있어야 한다는 점을 중요하게 보고있습니다.
W3C 소셜 표준 현황
https://www.w3.org/TR/activitystreams-vocabulary/
Decentralization
Servient <-> Servient (Server + Client 합성어)
클라이언트가 서버역할을 하기도하고 클라이언트 역할을 하기도 하는 개념.
이 기술들은 생소하지만 사실 상당히 많이 나와있습니다.
WebTorrent, Freenet, Hypothes, Mediachain등이 있는데 가장 대표적인건 비트코인입니다.
쉽게 설명하면 데이터는 내가 가지고 사이트에서는 인터페이스만 제공 하는 형태입니다.
http://www.mediachain.io/
그리고 경품추첨 및 폐회식
이렇게 오늘의 컨퍼런스 발표가 모두 끝났습니다.
그리고.. 아 기다리고 기다리던 경품추첨! 이 순간은 항상 긴장되는거 같습니다.
뭐! 결과는 아쉽게! 안됐네요. 후후..
이런데서 뽑기같은거 한번도 되본적이 없어서 혹시나 했는데 역시나..! 경품 추첨종료와 함께 모두 짜기라도 한 듯이 우르르 나가면 자연스레 컨퍼런스가 종료되었습니다.
마치며
각 30분이라는 짧은 세션타임에 비해 많은 세션들, 그로인해 쉬는시간없이 진행됩니다.. 각 세션에 내용은 좋았지만 물병이라도 하나씩만 쥐어 줬으면 어떨런지 하는 마음도 있었습니다.
발표자들도 적은 시간에 속사포 처럼 진행 하다보니 살짝~ 정신사나운 부분도 있었구요! 뭔가~ 아쉽긴 합니다.
음! 불만을 주절주절 이야기 했지만 사실 발표 주제나 내용은 정말 마음에 들었습니다!
작년에 주최했을 때는 참가하지 못했지만 참가하신 분으로부터 전해들은 얘기로는 작년보다 컨퍼런스 규모가 엄청 커졌다고 하더라구요. 내년에도 할지 모르겠지만 한다면 내년 컨퍼런스도 기대해 볼만 한 것 같습니다.
참고
크로노스 그룹의 vulkan 그리고 웹
http://blog.naver.com/PostView.nhn?blogId=raveneer&logNo=220703248714
http://kr.khronos.org/news/press/vulkan-1-0-launch
http://www.tta.or.kr/data/weekly_view.jsp?news_id=4801
https://www.khronos.org/gltf
https://developer.mozilla.org/en-US/docs/Web/Demos_of_open_web_technologies네이버의 HTML5 전환 전략과 실전
http://d2.naver.com/helloworld/7122게임엔진 Web 플랫폼
https://blogs.unity3d.com/kr/2015/09/22/kr-csharp-compile-il2cpp/WebGL과 glTF
https://threejs.org/
https://cesiumjs.org/demos.html
http://github.com/KhronosGroup/glTF구글의 모바일 고속화 실험 AMP(Accelerated mobile pages)
https://www.ampproject.org/ko/docs/get_started/create
http://www.usefulparadigm.com/2016/02/24/adding-the-google-amp-to-mobile-website/프로그레시브 웹앱(PWA)
https://www.youtube.com/watch?v=MxTaDhwJDLg
flipkart
washingtonpost웹브라우저 렌더링 구조와 컨텐츠 최적화
https://developers.google.com/web/fundamentals/performance/rendering/High Web고속화 프레임워크와 킬러 서비스
http://github.com/highweb-project
https://ko.wikipedia.org/wiki/WebCLHTML5 기반의 자바스크립트를 이용한 고속화 기술과 튜닝방법
소셜웹 기술동향
- AMP vs PWA
http://byline.network/2016/05/1-169/