[132]웨일 브라우저 1년 그리고 미래

웨일 브라우저
1년
그리고 미래
김효
Naver

CONTENTS
1. 웨일의 공개부터 정식 출시를 향한 1년
2. 웨일의 옴니테스킹은 어떻게 만들어졌나
3. 네이버 웨일 1.0
4. 모바일 웨일
5. 웨일의 미래

1.
웨일 공개부터 정식 출시를 향한 1년

시련: 매주 업데이트
14

도전: 12.01~ 03.13
단축키, 슬림모드/상단자동숨김, 사이드바 파파고/메모/북마크, 플러그인 호환모드, 음성인
식API, 스페이스 창분할, 비밀번호동기화, 스마트다운로드, 웨일 연구소, ...
lab.whale.naver.com

시련: 보안 프로그램
S모 프로그램은 웨일의 렌더러를 죽이고
D모 프로그램은 웨일을 지워버리고
B모 프로그램은 웨일을 block한다.
보안 프로그램은 웨일을 모른다.

기회: 움짤 배경 화면
but, 엄청난 메모리 사용양
Motion image 메모리 튜닝
배경 화면에서 움짤이 돌다니...

시련: Chromium Rebase
Chromium 52 : 12/01
Chromium 58 : 06/28
Chromium 60 : 08/31
15:00 : 오픈소스 쓰려는 자,
리베이스의 무게를 견뎌라
Whale(7,904) Chromium(152,896)

도전: 개인 VS 공용 사용
개인PC와 공용PC에 따라 보안을 위해 다른 동작이 필요
마치 OS를 쓰듯이 개인 계정이 동작했으면...

시련: 웨일 스토어
• 버전 관리
• 다국어 지원
• 보안/정책 검수
시작은... 우리만은 멋진 사이드바 앱을 제공하자!

시련: 다국어지원
모든 곳이 다 문제구나~
우리도 LPM?
일단 영어만 이라도..

도전+시련: 새로운 것들
참 좋은 건데 어떻게 명확하게...
스페이스
꿈은 크고, 정말 편한건데...
벨리

2.
웨일 옴니테스킹 어떻게 만들어졌나?

분할창을 통한 새로운 인터페이스 웨일 스페이스
팝업차단의 새로운 접근 스마트팝업
더 빠른 웹페이지 번역
확장앱 영역의 새로운 정의 사이드바 확장앱
사이드바 뮤직플레이어
파워세이버
JS엔진 성능 최적화 (Ahead of time JavaScript compiler)

웨일 스페이스
색인페이지와 컨텐츠페이지를 어떻게 구별할까?
실제 페이지 전환이 아닌 JS로 컨트롤하는 케이스는?

웨일 스페이스
Parent
page
Child
page
Link click
Ignore JS
event
listeners ?
pagination
link ?
Navigate to new page
Disable JS event
listeners
Load on parent
page
Load on child
page
Yes
No
Yes
No
• Heuristic-based 규칙에 의한 제어
• URL string patterns 감지
• JS Ajax를 통한 dynamic page rendering
이벤트 처리

스마트팝업
• 백그라운로 모든 팝업을 로딩
• 리소스를 유지하고 preview 형태의 최적화된 스크린샷 노출
• 클릭시 리소스를 바로 렌더링
팝업이 이렇게 다양하다니... 어떻게 preview 형태로 보여줄까?

번역
[기존 방식]
뉴스/아티클 번역은 잘하는 방법이 있다
“taobao 같은 하나도 모르는 막막한 사이트에서 자유롭게 쇼핑하고 싶다”

번역
[Whale 번역]
텍스트 번역은 이 녀석에서 맡기고
빠른 속도 : Native 처리 + 캐쉬
높은 커버리지 : Native element 처리

사이드바 : 확장앱
Chrome
Extensions
whale.sidebarAction
chrome.runtime
chrome.browserAction
chrome.bookmarks
chrome.windows
chrome.tabs
…
…
Whale
Extensions
Extension spec

사이드바 : 확장앱
사이드바 표준화

사이드바 : 뮤직플레이어
사이드바용 view control

파워세이버
• Frame rate 조절
• 렌더링 오버헤드를 줄이기 위한
DOM timer frequency 조절
• Flash와 같은 일부 컨텐츠의 auto
play 조절
• Mobile : Big/Little core 할당
11% enhancement in power consumption

JS 엔진 최적화 : AoT
• 디스크 캐쉬 활용을 위한 최적화
코드의 Post-processing
• Hybrid JavaScript AOT
compilation pipeline
16:00 : 웨일 브라우저의 성능 및 메모리 최적화
(고래는 느리고 무겁다?)

웨일 스페이스
더욱 편리해진
웨일 스페이스

벨리
무엇이든 담는
살아있는 스크랩북

웹기반 전자서명
전자서명 관련 웹 표준화 현황
• 전자서명은 웹 초기 부터 있었다
• 1998년 Netscape에 처음 crypto.signText 기능 탑재
• W3C Web Cryptography API
• 웹에서 전자서명, 해쉬, 대칭키 / 비대칭키 암호화등을 할 수 있는 웹표준 스팩
• 외부에서 생성한 키를 import해서 사용할 수 없는 제약이 있음
• W3C WebCrypto Key Discovery
• 외부에서 생성한 키를 import해서 사용할 수는 있으나 SOP 제약이 있음.

프로그램 설치가 필요 없는 웹 환경을 위해
• 공인 인증서
• Active X => EXE 그리고 모바일
• 진화하는 웹 기술과 한계
• 웹을 이용한 전자서명 표준 : W3C Web Cryptography API
• 인증서 관련 표준에 관한 시도, SOP 등의 이유로 논의가 중단
• 편리하고 안전한 방법에 대한 고민

Web certificate discovery
Windows OSX
표준 Draft 작성 및 Spec 제안
Whale 1.0 지원 + 더 나은 환경 고민
2017.11

웨일 보안
로컬 데이터 보안
피싱 / 악성 페이지 감지
파일 다운로드 보안
인스톨러 & 업데이트
자체 취약점 평가
버그 바운티
14:00 : 웨일 브라우저 보안 이야기

더욱 편하게 더욱 세련되게
북마크
뮤직플레이어
UI
스킨
패스워드관리

네이버 웨일 1.0 official release

옴니테스킹
모바일/PC 연동으로
더욱 강력한 스크랩
벨리

옴니테스킹
탭 없이 가장 빠른 검색
NO! too many tabs
퀵서치

옴니테스킹
가장 빠르게
원하는 사이트에 접근
NO! too many apps
퀵바

기술
번역
히스토리 제어
성능 최적화 (AOT +)
파워세이버(안드로이드)
모바일을 위한 기술

웨일 인터페이스/감성
웨일 = 감성과 편리함

Move the Web Forward
Browsing Things
Connectivity
Web 기반 전자 서명, 2차 인증
Secure Printer API
WebVR, WebUSB, WebBluetooth
표준화
Ambient Intelligence
기술 중심으로 더 편하고 새로운 Web의 경험을 제공

“모두”가 쉽게 쓰는 브라우저 웨일
한국 -> 글로벌
접근성 강화
다양한 디바이스
참여 플랫폼 : 웨일 스토어
개발자를 위한 확장앱
아티스트를 위한 테마 스토어
연구소를 통한 제품 참여
모두가 진짜 “모두”가 되기 위해

기술/보안
성능
메모리
파워
3대 saving
사고분석
피싱/파밍 원천 차단
Safe browsing
안전한 동기화
취약점 제거
보안 강화
16:00 : 웨일 브라우저의 성능 및 메모리 최적화
(고래는 느리고 무겁다?)

디자인/인터페이스
웨일 디자인언어 정의
모바일, 아이콘, Goods,
사물로 이어지는 웨일의 감성
디자인
다양한 디바이스를 통한
새로운 인터페이스
웹을 사용하는 새로운 경험
인터페이스

웨일 연구소
웨일을 만드는 근원의 힘
연구원
10,000명
연구의견
20,000건
lab.whale.naver.com

[132]웨일 브라우저 1년 그리고 미래

More Related Content

What's hot

Viewers also liked

Similar to [132]웨일 브라우저 1년 그리고 미래

More from NAVER D2

[132]웨일 브라우저 1년 그리고 미래