웹 고속화 기술과 킬러웹앱 컨퍼런스

1. 네이버의 웹/HTML5 환경 대응 현황
박종목
Naver LABS
2015-11-26

2. I. 웹 환경의 핵심 이슈들

3. 네이티브(Native) 대비 웹의 경쟁력
 HTML5 mobile web browser에서 Native App (Android) 수준의 기능 구현 가능성

4. 웹의 파편화 (Fragmentation) 문제
Device Fragmentation OS Fragmentation Web Browser Fragmentation
비표준 대체 기술
extension TBD

5. 웹/HTML5 대응 실패 사례
Our Biggest Mistake Was Betting Too Much On HTML5

6. II. 네이버의 웹 환경 대응 현황

7. 네이버의 웹 환경 대응 현황
 네이버 서비스의 HTML5 활용 사례
 File Upload 기능(ActiveX)의 HTML5 전환 사례
 Flash의 HTML5 Canvas 전환 사례
 네이버 게임의 인터넷 표준 환경 지원 노력
 네이버 BGM의 웹 환경 지원 현황
 네이버의 웹엔진 개발 사례

8. 네이버 서비스의 HTML5 활용 사례

9. HTML5 Semantic Tag 적용사례
• 네이버의 다양한 서비스에서는 HTML5의 semantic 태그들을 활용해 의미에 맞는
문서구조로 페이지를 개발하고 있다.
- 지식백과 서비스에서는 페이지 구조와 컨텐츠 구성에 <header>, <article>, <figure> 등의 태그를 사용
- 데모 : http://m.terms.naver.com/entry.nhn?docId=974744&cid=46720&categoryId=46846

10. HTML5 멀티미디어 적용사례 - <audio>
• 배경 음악 재생과 간단한 외국어 발음 재생 등에 <audio> 태그를 적극 활용
배경 음악 재생 사례 - 네이버 포스트 :
http://m.post.naver.com/viewer/postView.nhn?volume
No=2281636&memberNo=16429939
발음 듣기 사례 - 네이버 통합검색
결과 :
https://m.search.naver.com/sear
ch.naver?sm=mtb_hty.top&whe
re=m&query=HELLO+%EB%B0
%9C%EC%9D%8C

11. CSS 애니메이션 적용사례 – CSS3 애니메이션 속성
• 네이버의 모바일 페이지들에서는 다양한 UI/UX 구성(플리킹을 통한 화면 이동,
네비게이션 메뉴의 노출/숨김 등)에 CSS3 애니메이션을 적극적으로 적용
- 플리킹 애니메이션 사례 – 네이버 메인 : http://m.naver.com

12. CSS 애니메이션 적용사례 – CSS3 애니메이션 속성
• 네이버 웹툰 (효과툰)
- 웹툰 저작자들이 효과를 주어 저작할 수 있도록 별도의 에디터를 제공하며, 대다수의 효과는 CSS3 애니메이션을 사용
- 네이버 효과툰 어떻게 만들어졌나? - http://www.slideshare.net/deview/111-52720751
- 데모 : ’고고고’ 1화 - http://m.comic.naver.com/webtoon/detail.nhn?titleId=655277&no=1

13. CSS 애니메이션 적용사례 – CSS3 애니메이션 속성
쥬니어 네이버 (몬스터 퀴즈)
퀴즈 페이지 구성 요소들 곳곳에 애니메이션을 주어 역동적인
화면을 구성
http://m.jr.naver.com/quiz/play/ready.nhn?quizCategoryId=riddle
네이버 통합 검색결과 페이지
특정 키워드에 대한 검색결과 출력시 별도 UI를
구성하고, 각 요소에 에니메이션을 적용
' 탄생석' 검색 - http://me2.do/FYDJVmNc
'오늘의 명언' 검색 - http://me2.do/FZFqbDNA

14. JavaScript API – WebStorage
• 사용자의 스토리지 공간을 활용해 보다 빠른 로딩 경험 제공
- 페이지 로딩속도 및 사용자의 네트워크 비용을 줄일 수 있도록 일부 라이브러리의 소스를 LocalStorage를 활용해 캐싱
- ‘좋아요’ 버튼에 사용되는 라이브러리의 로컬 캐싱 사례 :
http://me2.do/xaKFoSOX
- 검색 결과 페이지 내에서 사용되는 라이브러리의 로컬 캐싱 사례 :
http://me2.do/I5PyJa4D

15. File Upload 기능(ActiveX)의 HTML5 전환 사례

16. JavaScript API - HTML5 Drag&Drop / File API
• 파일탐색기에서 직접 브라우저로 파일을 drag & drop해 업로드지원
- HTML5 Native Drag & Drop과 File API를 활용

17. 직관적인 UI를 위한 trick
• Input[type=file] 요소의 style 을 변경하는 spec 은 제공하지 않음
• 사용자의 클릭 대상 요소와 input[type=file] 의 “폴더/파일 찾기” 버튼을 overlay

18. 브라우저별 기능 차이
• HTML5 업로더는 Chrome, Opera 브라우저만 폴더를 지원
• 그 외 HTML5 를 지원하는 IE 10 이상, Firefox, Safari 등 기타 브라우저에서는
폴더 업로드를 제공하지 않는다.
HTML5 Flash ActiveX Air
버튼으로 파일 추가 ● ● ● ●
버튼으로 폴더 추가 ▲ × ● ●
Drag & Drop 파일 추가 ● × ● ●
Drag & Drop 폴더 추가 ▲ × ● ●

19. 브라우저별 기능 차이
• 기존 업로더의 주요 기능을 구현
HTML5 Flash ActiveX Air
단일 업로드 ● ● ● ●
멀티 업로드 ● × ● ×
이어 올리기 ● × ● ●
대용량 (4GB 이상) ● × ● ●

20. 이슈
 예외 처리
• File 을 읽을 때 브라우저, 에러 타입, 발생 시점 상이. (File 에러에 대한
정규화 필요.)
 대용량 파일 제한
• IE, Firefox 브라우저의 업로드 가능 크기는 4GB.
• 분할 처리 필요
 OS에 따른 Unicode 인코딩 차이
• Mac 의 유니코드 인코딩 방식은 NFD, 그 외 환경은 NFC

21. Flash에서 HTML5 Canvas로의 전환 사례

22. Flash의 Canvas 전환배경
 모바일에서 Flash 미 지원
• 다수의 Flash 컨텐츠가 모바일에서는 작동이 안 됨
• 애니메이션, Flash 게임을 HTML DOM 기반으로 개발하기는 어려움
• HTML5 Canvas는 자유로운 드로잉이 가능하여 Flash와 비슷한 효과 제공 가능

23. Canvas 전환사례1 (쥬니버)
• 쥬니버에서 서비스 중인 PC용 Flash 뽀로로 게임
을 Canvas로 전환하여 모바일에서 서비스 함
• 기존의 Flash 게임에서 사용했던 디자인 소스와
Animation을 재사용하기 위해 CreateJS Canvas
라이브러리를 사용 함
*createJS : 오픈소스라이브러리로 Flash에 사용된 디자인, Animation을 손쉽게
Canvas로 전환해주는 기능이 있음. Adobe Flash CC 버전에서 이 기
능을 탐재함
• 어려운 점)
Graphic 처리는 Flash 수준으로 처리 되나
오래된 브라우저(Android 4.1 이하)에서
HTML5 Sound 기능은 완벽하지 않음

24. Canvas 전환사례2 (네이버 스포츠)
• 네이버 스포츠에서 서비스 중인 프로야구 문자 중계
서비스로 Flash를 Canvas로 전환 함
• 9월에 변경된 크롬 플러그인 정책변경으로 크롬에서
Flash 자동실행이 안되 Canvas로 변경 함
• 크롬 및 Canvas 지원 PC 웹 브라우저에 적용함
• PC의 경우 IE8 이하 에서는 Canvas가 지원이 안 됨.
Canvas를 미지원하거나 IE호환성보기 설정 시
Flash가 노출 되도록 분기함.
(국내 IE8 이하 브라우저 점유율은 11.54% / 출처: statcounter.com )

25. 네이버 게임의 인터넷 표준환경 지원 노력

26. 한국의 온라인 게임 서비스 형태 (As-Is)
게임 런처
(ActiveX 기반) 게임 (클라이언트)
게임 웹

27. NAVER Game
 게임 서비스 방식: 채널링 (게임개발사가 웹페이지/게임/운영 모두 담당)
• 전체 게임의 60%가 클라이언트 게임(설치형), 40%가 웹게임
• 클라이언트 게임은 대부분 ActiveX 활용 -> 전환 중
• 웹게임 중에서도 Unity Game Player(ActiveX) 활용 사례 존재

28. 최근 웹 환경 변화에 따른 대응
 Win10 + IE11 호환성 이슈
• ActiveX 커널 구조 변경에 따른 문제(외부 모듈인 Hackshield에서 발생) 해결
 Win10 + Edge에서의 ActiveX 미지원 이슈
• 60개 게임사에서 기존에 ActiveX 사용함. (웹게임의 경우도 Unity Web Player
사용 시 ActiveX 설치 필요)
 Chrome의 NPAPI 미지원 이슈
Win10 + IE11

29. NAVER Game의 온라인 게임 서비스 형태 (진행 중)
게임 런처
(Custom URL Scheme 기반) 게임 (클라이언트)
게임 웹

30. Custom URL Scheme
 Custom URL Scheme
• official: http://, ftp://, mailto:
• custom: kakaolink://, magnet://, fb:// …
 Custom URL Scheme 의 특징
• 개발자에 의해 정의된 고유의 사용자 정의 Protocol
• 해당 Protocol을 처리할 수 있는 특정 Application이나 방법을 지정 가능
• 웹 브라우저 내부의 설정 변경이 없으므로 설치 후 즉시 적용되며, 웹 브라우저 재시작 등이 불필요
• 웹 브라우저에서 해당 Protocol을 처리할 수 있는 방법을 찾을 수 없는 경우 오류(안내) 출력
 지원 플랫폼
• URL Scheme은 웹 표준이므로 대부분의 웹 브라우저에서 지원
• IE, Chrome, Safari, Firefox, Edge, Opera, …
• Mobile, Windows, Linux, OSX, … (Application 레벨의 Cross-Platform은 지원되지 않음)

31. 최초 실행 시의 사용자 동의 요청
• 예제(던전앤파이터)
[Win10 + Edge] [Win7 + Chrome]

32. Browser상에서의 실행 정보 노출 이슈
 보안 이슈
• 실행 인자(argument)가 노출되어 게임 실행시의 사용자 중요정보가 직접적으로 노출됨
(* browser 종속적)
 보안 가이드
• 실행 인자에 대한 암호화를 통해 불필요한 정보 노출로 인한 exploit 예방
 상세 가이드
• 최소한의 대칭키 암호화 방식을 적용하여 중요정보 exploit을 예방하도록 함
• Base64 encoding과 같은 보편적인 암호화 방식은 공격자가 취득하기 쉬운 방식이므로 지양
• RSA와 같은 공개키 암호화 방식이 가장 이상적이나 게임사별로 적용 ROI 판단 필요

33. 파일 무결성 - 실행파일 바꿔치기 이슈
 보안 이슈
• 악성코드 감염 등으로 registry가 변조되거나 파일이 변경되었을 경우 전혀 다른 프로그램이 실행

34. 파일 무결성 - 실행파일 바꿔치기 이슈
 보안 가이드
• 게임의 Registry 변조나 실행파일 경로 이상을 탐지하여 code signing
 상세 가이드 : 개선시나리오1(background 모니터링)
• 설명 : 게임 설치시 게임사의 background program 설치를 통해 보안 가이드 체크
• 단점
 해당 방식도 공격자가 알게 될 경우, 변조가 가능
 일반 사용자가 background processor에 거부감을 가질 수 있음
 상세 가이드 : 개선시나리오2(client patch 무결성 확인)
• 설명 : 게임 client patch의 무결성 확인 기능을 통해 실행파일의 지속적인 업데이트
• 단점
 hosts설정 변경 공격에 의한 fake game client patch 다운로드로 2차 보안위협(OTP나 보안카드 등) 존재
 PC방 혜택을 받기 위해 PC방 vpn 이용하는 경우 발생 가능성 있음
 URL Protocol Handler 역할을 하는 Application에 전자서명을 추가하는 방식으로 추가 안정성 확보 가능

35. 해외 사례
 Facebook
• 고성능 웹게임 지원을 위해 Unity Web Player (ActiveX, NPAPI 기반) 적극 지원 (Unity와 협력)
• 최신 Chrome에서의 NPAPI 미지원, Windows 10 Edge에서의 ActiveX 미지원 이슈에 대한 대응
 사용자들이 Plugin 지원 브라우저 (예: Firefox 등)를 사용하도록 권장
 Unity: 장기적 관점에서 Unity Web Player의 WebGL 전환 (현 시점에서는 기능/성능적 한계 존재)

36. 네이버 BGM 서비스에서의 웹환경 개선 현황

37. 뮤직BGM
• 뮤직BGM이란
– 네이버 카페/블로그의 배경음악 스트리밍 서비스
As-Is (ActiveX)
To-Be (flash + js)

38. 뮤직서비스의 웹표준 전환 이슈 - 음원 유출
• 음원 유출 이슈
– mp3 불법 다운로드 및 각종 저작권 이슈 방지를 위하 멀티미디어 컨텐츠 보호 기술은 필수
– 국내, 해외에서의 음원 유출 이슈에 대한 민감도 차이
• 웹표준에서의 컨텐츠 보호기술
– EME 스펙 등장 : http://www.w3.org/TR/encrypted-media/
– 초기단계의 기술 상용화 및 보급 중
– 각 브라우저 벤더별 시장 선점을 위한 경쟁 상태(google-widevine, ms-playready 등)
• 웹표준에서의 컨텐츠 보호기술에 대한 논쟁
– 웹이라는 특성상 모든 데이터는 공개, 공유되어야 한다 (Mozilla)
– Mozilla에서도 최근 웹에서의 컨텐츠 보호 기술의 필요성을 인정하고 도입하는 단계
– 관련기사 :
http://www.oss.kr/index.php?mid=oss_news&amp;;document_srl=100049&sort_index=readed_count&ord
er_type=asc
• 웹표준 기술에서의 합의된 보안 수준 부재
– 웹표준 기술 도입시 음원 업계에서의 합의된 보안 수준 논의 필요
– 스트리밍 서비스에 웹표준 기술을 도입하기에는 아직 기술 표준 수준이 미흡

39. 뮤직서비스의 웹표준 전환 이슈 - 국내 정산 방식
• 국내 스트리밍 서비스 정산방식
– 국내 음원 스트리밍 서비스 정산 방식
(BGM 서비스 이슈가 아닌 음원 스트리밍서비스 전반적인 이슈이며, 각 서비스 별로 차이가 있을 수 있음)
– PPM(pay-per-minute) 기반의 정산 방식
관련기사 : http://www.bloter.net/archives/147085
• 웹표준에서의 PPM 구현 이슈
– 코드레벨 보안 이슈 : 클라이언트의 동작을 정확하게 인지하기 위한 js 사용시 코드 노출 위험
– 코드레벨 이슈를 보완하기 위한 server-side의 부담 증가 : 어뷰징 필터링 복잡도 증가 등
• 웹표준에서의 PPM 구현
– 스트리밍 솔루션 제공 업체, 각 연구 기관에서 웹표준으로 ppm을 구현하기 위한 노력 중
– 현재의 비표준(flash) 기술만큼 정확한 ppm 방식을 구현하기 위한 웹표준 기술의 부재
– 기술적인 한계의 경우, 각 음원 권라사와의 정산정책 개선등의 작업을 통해 꾸준이 풀어나가려는 노력 필요

40. 네이버 뮤직 서비스와 웹표준
• 멀티미디어 컨텐츠 웹표준 기술에 대한 동향 파악
– 컨텐츠 보안 : EME (http://www.w3.org/TR/encrypted-media/)
– 스트리밍 : MSE (http://w3c.github.io/media-source/), MPEG-DASH
(https://en.wikipedia.org/wiki/Dynamic_Adaptive_Streaming_over_HTTP) 등
• 네이버 뮤직서비스 ToBe
– 방향성 고민 : 웹표준에서의 스트리밍 서비스 구현에 대한 고민 및 현재 스트리밍 서비스 구현상 웹표준 기술의 한계, 차
후 웹표준 기술로의 전환을 위한 대비 등
– 웹표준 준수를 위한 기술 이슈 외의, 음원 시장 이해 당사자와 풀어야할 이슈들

41. 네이버의 웹엔진 개발 사례

42. Web Browser Engine
 개발 배경
• Android fragmentation 대응을 위해 단말/OS에 관계 없이 동일한 성능, 안정성 제공
• 적용 사례: NAVER App, LINE PLAY
• Faster scrolling and flicking
• File upload support
• Multi-process rendering
• HW accelerated canvas
• WebGL support
• Web Audio API support
NAVER
Browser Engine

43. Web Browser Engine
 적용 사례
• Mini-games in LINE PLAY

44. 요약 및 정리

45. 요약 및 정리
• 네이버는 인터넷 이용 환경 개선을 위해 꾸준히 노력해오고 있음
– HTML5 웹 표준의 다양한 기능들을 서비스에 적용 중. 특히, 파일 업로드 기능의
HTML5 전환, Flash의 HTML5 canvas 전환 등의 구체적인 사례 공유.
– 비표준 기술(ActiveX, NPAPI)에 대해서는 대체 기술의 적용을 통해 Chrome 신규
버전, Win10 등 새로운 환경에서도 동작이 가능하도록 전환 중임. 특히, 게임에서
많이 활용 중인 ActiveX나 NPAPI의 대체 기술로서 Custom URL Scheme을
이용하는 방안이 적절한 대응 방안으로 판단됨.
– 자체 웹 엔진 개발을 통하여 Web Fragmentation 문제에 대응 중임.
• HTML5의 제약 사항도 존재
– 모든 서비스를 HTML5로 구현하는 데에는 한계 존재.
– 특히 저작권의 보호가 필요한 컨텐츠(BGM 등)의 경우 기존 HTML5 규격만으로는
사업 측면에서의 요구사항에 부응하는 기술적인 해결책을 찾기 어려움.
– 단, 이러한 경우에도 가능한 범위 내에서 적절한 대응 방안을 수립해서 추진 중임.
• 네이버의 개선 사례들과 노력들이 많은 개발자들에게도 실질적인 도움이 되었으면 함.

46. 바람직한 웹 환경 개선 방향
 표준 Web Specification 및 API 강화
 단말기 제조사, OS Platform Provider, Browser Vendor가 모두 최신 HTML5 스펙 지
원 및 동일 성능 / 안정성 제공
• 단, 현존 웹 환경은 해외 기업에 의존도가 높음 (Microsoft, Google, Apple)
• 단말/OS/Browser 조합별 HTML5 성능/안정성 측정 방식 공용화 필요
 사용자들이 최신 단말/OS/브라우저 환경 활용

47. 감사합니다.