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

NAVER의 웹/HTML5환경 대응 현황

Embed Size (px)

Citation preview

네이버의 웹/HTML5 환경 대응 현황

박종목

Naver LABS

2015-11-26

I. 웹 환경의 핵심 이슈들

네이티브(Native) 대비 웹의 경쟁력

HTML5 mobile web browser에서 Native App (Android) 수준의 기능 구현 가능성

웹의 파편화 (Fragmentation) 문제

Device Fragmentation OS Fragmentation Web Browser Fragmentation

비표준 대체 기술

extension TBD

웹/HTML5 대응 실패 사례

Our Biggest Mistake Was Betting Too Much On HTML5

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

네이버의 웹 환경 대응 현황

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

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

Flash의 HTML5 Canvas 전환 사례

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

네이버 BGM의 웹 환경 지원 현황

네이버의 웹엔진 개발 사례

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

HTML5 Semantic Tag 적용사례

• 네이버의 다양한 서비스에서는 HTML5의 semantic 태그들을 활용해 의미에 맞는 문서구조로 페이지를 개발하고 있다.

- 지식백과 서비스에서는 페이지 구조와 컨텐츠 구성에 <header>, <article>, <figure> 등의 태그를 사용

- 데모 : http://m.terms.naver.com/entry.nhn?docId=974744&cid=46720&categoryId=46846

CSS 애니메이션 적용사례 – CSS3 애니메이션 속성

• 네이버의 모바일 페이지들에서는 다양한 UI/UX 구성(플리킹을 통한 화면 이동, 네비게이션 메뉴의 노출/숨김 등)에 CSS3 애니메이션을 적극적으로 적용

- 플리킹 애니메이션 사례 – 네이버 메인 : http://m.naver.com

CSS 애니메이션 적용사례 – CSS3 애니메이션 속성

• 네이버 웹툰 (효과툰) - 웹툰 저작자들이 효과를 주어 저작할 수 있도록 별도의 에디터를 제공하며, 대다수의 효과는 CSS3 애니메이션을 사용

- 네이버 효과툰 어떻게 만들어졌나? - http://www.slideshare.net/deview/111-52720751

- 데모 : ’고고고’ 1화 - http://m.comic.naver.com/webtoon/detail.nhn?titleId=655277&no=1

CSS 애니메이션 적용사례 – CSS3 애니메이션 속성

쥬니어 네이버 (몬스터 퀴즈)

퀴즈 페이지 구성 요소들 곳곳에 애니메이션을 주어 역동적인

화면을 구성

http://m.jr.naver.com/quiz/play/ready.nhn?quizCategoryId=riddle

네이버 통합 검색결과 페이지

특정 키워드에 대한 검색결과 출력시 별도 UI를 구성하고, 각 요소에 에니메이션을 적용 ' 탄생석' 검색 - http://me2.do/FYDJVmNc '오늘의 명언' 검색 - http://me2.do/FZFqbDNA

JavaScript API – WebStorage

• 사용자의 스토리지 공간을 활용해 보다 빠른 로딩 경험 제공 - 페이지 로딩속도 및 사용자의 네트워크 비용을 줄일 수 있도록 일부 라이브러리의 소스를 LocalStorage를 활용해 캐싱

- ‘좋아요’ 버튼에 사용되는 라이브러리의 로컬 캐싱 사례 :

http://me2.do/xaKFoSOX

- 검색 결과 페이지 내에서 사용되는 라이브러리의 로컬 캐싱 사례 :

http://me2.do/I5PyJa4D

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

JavaScript API - HTML5 Drag&Drop / File API

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

직관적인 UI를 위한 trick

• Input[type=file] 요소의 style 을 변경하는 spec 은 제공하지 않음

• 사용자의 클릭 대상 요소와 input[type=file] 의 “폴더/파일 찾기” 버튼을 overlay

브라우저별 기능 차이

• HTML5 업로더는 Chrome, Opera 브라우저만 폴더를 지원

• 그 외 HTML5 를 지원하는 IE 10 이상, Firefox, Safari 등 기타 브라우저에서는 폴더 업로드를 제공하지 않는다.

HTML5 Flash ActiveX Air

버튼으로 파일 추가 ● ● ● ●

버튼으로 폴더 추가 ▲ × ● ●

Drag & Drop 파일 추가 ● × ● ●

Drag & Drop 폴더 추가 ▲ × ● ●

브라우저별 기능 차이

• 기존 업로더의 주요 기능을 구현

HTML5 Flash ActiveX Air

단일 업로드 ● ● ● ●

멀티 업로드 ● × ● ×

이어 올리기 ● × ● ●

대용량 (4GB 이상) ● × ● ●

이슈

예외 처리

• File 을 읽을 때 브라우저, 에러 타입, 발생 시점 상이. (File 에러에 대한 정규화 필요.)

대용량 파일 제한

• IE, Firefox 브라우저의 업로드 가능 크기는 4GB.

• 분할 처리 필요

OS에 따른 Unicode 인코딩 차이

• Mac 의 유니코드 인코딩 방식은 NFD, 그 외 환경은 NFC

Flash에서 HTML5 Canvas로의 전환 사례

Flash의 Canvas 전환배경

모바일에서 Flash 미 지원

• 다수의 Flash 컨텐츠가 모바일에서는 작동이 안 됨

• 애니메이션, Flash 게임을 HTML DOM 기반으로 개발하기는 어려움

• HTML5 Canvas는 자유로운 드로잉이 가능하여 Flash와 비슷한 효과 제공 가능

Canvas 전환사례1 (쥬니버)

• 쥬니버에서 서비스 중인 PC용 Flash 뽀로로 게임 을 Canvas로 전환하여 모바일에서 서비스 함

• 기존의 Flash 게임에서 사용했던 디자인 소스와 Animation을 재사용하기 위해 CreateJS Canvas 라이브러리를 사용 함

*createJS : 오픈소스라이브러리로 Flash에 사용된 디자인, Animation을 손쉽게

Canvas로 전환해주는 기능이 있음. Adobe Flash CC 버전에서 이 기

능을 탐재함

• 어려운 점)

Graphic 처리는 Flash 수준으로 처리 되나

오래된 브라우저(Android 4.1 이하)에서

HTML5 Sound 기능은 완벽하지 않음

Canvas 전환사례2 (네이버 스포츠)

• 네이버 스포츠에서 서비스 중인 프로야구 문자 중계 서비스로 Flash를 Canvas로 전환 함

• 9월에 변경된 크롬 플러그인 정책변경으로 크롬에서 Flash 자동실행이 안되 Canvas로 변경 함

• 크롬 및 Canvas 지원 PC 웹 브라우저에 적용함

• PC의 경우 IE8 이하 에서는 Canvas가 지원이 안 됨. Canvas를 미지원하거나 IE호환성보기 설정 시 Flash가 노출 되도록 분기함.

(국내 IE8 이하 브라우저 점유율은 11.54% / 출처: statcounter.com )

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

한국의 온라인 게임 서비스 형태 (As-Is)

게임 런처 (ActiveX 기반) 게임 (클라이언트)

게임 웹

NAVER Game

게임 서비스 방식: 채널링 (게임개발사가 웹페이지/게임/운영 모두 담당)

• 전체 게임의 60%가 클라이언트 게임(설치형), 40%가 웹게임

• 클라이언트 게임은 대부분 ActiveX 활용 -> 전환 중

• 웹게임 중에서도 Unity Game Player(ActiveX) 활용 사례 존재

최근 웹 환경 변화에 따른 대응

Win10 + IE11 호환성 이슈

• ActiveX 커널 구조 변경에 따른 문제(외부 모듈인 Hackshield에서 발생) 해결

Win10 + Edge에서의 ActiveX 미지원 이슈

• 60개 게임사에서 기존에 ActiveX 사용함. (웹게임의 경우도 Unity Web Player

사용 시 ActiveX 설치 필요)

Chrome의 NPAPI 미지원 이슈

Win10 + IE11

NAVER Game의 온라인 게임 서비스 형태 (진행 중)

게임 런처 (Custom URL Scheme 기반) 게임 (클라이언트)

게임 웹

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은 지원되지 않음)

최초 실행 시의 사용자 동의 요청

• 예제(던전앤파이터)

[Win10 + Edge] [Win7 + Chrome]

Browser상에서의 실행 정보 노출 이슈

보안 이슈 • 실행 인자(argument)가 노출되어 게임 실행시의 사용자 중요정보가 직접적으로 노출됨

(* browser 종속적)

보안 가이드 • 실행 인자에 대한 암호화를 통해 불필요한 정보 노출로 인한 exploit 예방

상세 가이드

• 최소한의 대칭키 암호화 방식을 적용하여 중요정보 exploit을 예방하도록 함

• Base64 encoding과 같은 보편적인 암호화 방식은 공격자가 취득하기 쉬운 방식이므로 지양

• RSA와 같은 공개키 암호화 방식이 가장 이상적이나 게임사별로 적용 ROI 판단 필요

파일 무결성 - 실행파일 바꿔치기 이슈

보안 이슈 • 악성코드 감염 등으로 registry가 변조되거나 파일이 변경되었을 경우 전혀 다른 프로그램이 실행

파일 무결성 - 실행파일 바꿔치기 이슈

보안 가이드

• 게임의 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에 전자서명을 추가하는 방식으로 추가 안정성 확보 가능

해외 사례

Facebook

• 고성능 웹게임 지원을 위해 Unity Web Player (ActiveX, NPAPI 기반) 적극 지원 (Unity와 협력)

• 최신 Chrome에서의 NPAPI 미지원, Windows 10 Edge에서의 ActiveX 미지원 이슈에 대한 대응

사용자들이 Plugin 지원 브라우저 (예: Firefox 등)를 사용하도록 권장

Unity: 장기적 관점에서 Unity Web Player의 WebGL 전환 (현 시점에서는 기능/성능적 한계 존재)

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

뮤직BGM

• 뮤직BGM이란 – 네이버 카페/블로그의 배경음악 스트리밍 서비스

As-Is (ActiveX)

To-Be (flash + js)

뮤직서비스의 웹표준 전환 이슈 - 음원 유출

• 음원 유출 이슈 – 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&order_type=asc

• 웹표준 기술에서의 합의된 보안 수준 부재 – 웹표준 기술 도입시 음원 업계에서의 합의된 보안 수준 논의 필요

– 스트리밍 서비스에 웹표준 기술을 도입하기에는 아직 기술 표준 수준이 미흡

뮤직서비스의 웹표준 전환 이슈 - 국내 정산 방식

• 국내 스트리밍 서비스 정산방식 – 국내 음원 스트리밍 서비스 정산 방식

(BGM 서비스 이슈가 아닌 음원 스트리밍서비스 전반적인 이슈이며, 각 서비스 별로 차이가 있을 수 있음)

– PPM(pay-per-minute) 기반의 정산 방식 관련기사 : http://www.bloter.net/archives/147085

• 웹표준에서의 PPM 구현 이슈 – 코드레벨 보안 이슈 : 클라이언트의 동작을 정확하게 인지하기 위한 js 사용시 코드 노출 위험

– 코드레벨 이슈를 보완하기 위한 server-side의 부담 증가 : 어뷰징 필터링 복잡도 증가 등

• 웹표준에서의 PPM 구현

– 스트리밍 솔루션 제공 업체, 각 연구 기관에서 웹표준으로 ppm을 구현하기 위한 노력 중

– 현재의 비표준(flash) 기술만큼 정확한 ppm 방식을 구현하기 위한 웹표준 기술의 부재

– 기술적인 한계의 경우, 각 음원 권라사와의 정산정책 개선등의 작업을 통해 꾸준이 풀어나가려는 노력 필요

네이버 뮤직 서비스와 웹표준

• 멀티미디어 컨텐츠 웹표준 기술에 대한 동향 파악 – 컨텐츠 보안 : 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 – 방향성 고민 : 웹표준에서의 스트리밍 서비스 구현에 대한 고민 및 현재 스트리밍 서비스 구현상 웹표준 기술의 한계, 차

후 웹표준 기술로의 전환을 위한 대비 등

– 웹표준 준수를 위한 기술 이슈 외의, 음원 시장 이해 당사자와 풀어야할 이슈들

네이버의 웹엔진 개발 사례

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

Web Browser Engine

적용 사례 • Mini-games in LINE PLAY

요약 및 정리

요약 및 정리

• 네이버는 인터넷 이용 환경 개선을 위해 꾸준히 노력해오고 있음

– HTML5 웹 표준의 다양한 기능들을 서비스에 적용 중. 특히, 파일 업로드 기능의 HTML5 전환, Flash의 HTML5 canvas 전환 등의 구체적인 사례 공유.

– 비표준 기술(ActiveX, NPAPI)에 대해서는 대체 기술의 적용을 통해 Chrome 신규 버전, Win10 등 새로운 환경에서도 동작이 가능하도록 전환 중임. 특히, 게임에서 많이 활용 중인 ActiveX나 NPAPI의 대체 기술로서 Custom URL Scheme을 이용하는 방안이 적절한 대응 방안으로 판단됨.

– 자체 웹 엔진 개발을 통하여 Web Fragmentation 문제에 대응 중임.

• HTML5의 제약 사항도 존재

– 모든 서비스를 HTML5로 구현하는 데에는 한계 존재.

– 특히 저작권의 보호가 필요한 컨텐츠(BGM 등)의 경우 기존 HTML5 규격만으로는 사업 측면에서의 요구사항에 부응하는 기술적인 해결책을 찾기 어려움.

– 단, 이러한 경우에도 가능한 범위 내에서 적절한 대응 방안을 수립해서 추진 중임.

• 네이버의 개선 사례들과 노력들이 많은 개발자들에게도 실질적인 도움이 되었으면 함.

바람직한 웹 환경 개선 방향

표준 Web Specification 및 API 강화

단말기 제조사, OS Platform Provider, Browser Vendor가 모두 최신 HTML5 스펙 지원 및 동일 성능 / 안정성 제공

• 단, 현존 웹 환경은 해외 기업에 의존도가 높음 (Microsoft, Google, Apple)

• 단말/OS/Browser 조합별 HTML5 성능/안정성 측정 방식 공용화 필요

사용자들이 최신 단말/OS/브라우저 환경 활용

감사합니다.