SlideShare a Scribd company logo
네이버 효과툰
구현 이야기
김지한, 임대현
NAVER LABS
저작툴
+
뷰어
효과툰 저작툴
구현 이야기
임대현
NAVER LABS
contents
1. 왜 웹 기술로 만들었나?
2. 어떤 Angular.js 구조로 만들어졌을까?
3. 성능과 관련 있는 Angular.js Things
4. 그밖에 알아두면 좋은 Angular.js Things
5. PSD 파싱은 어떻게 했을까?
6. 테스트 자동화는?
7. 마치며

Recommended for you

[231]나는서버를썰터이니너는개발만하여라 양지욱
[231]나는서버를썰터이니너는개발만하여라 양지욱[231]나는서버를썰터이니너는개발만하여라 양지욱
[231]나는서버를썰터이니너는개발만하여라 양지욱

[231]나는서버를썰터이니너는개발만하여라 양지욱

deview2016
Node.js 시작하기
Node.js 시작하기Node.js 시작하기
Node.js 시작하기

Node.js 시작하기

C# Game Server
C# Game ServerC# Game Server
C# Game Server

implements game server using c# features such as async, await, dynamic, linq, reflection, attribute, ienumerable.

game serverc#
[121]네이버 효과툰 구현 이야기
1.
왜 웹 기술로
만들어졌을까?
1.1 왜 웹 기술로 만들어졌을까?
• 기획의 최종 목표는 웹 서비스로 제공.
• 그렇지만 웹툰 작가님들이 Offline 으로 작업 가능 해야함.
• 작가님들 PC는 대부분 Windows 이지만 Mac도 있음.
• 두가지 방법이 있음.
OS별
Native Application
Platform-Neutral
WebApp
Why Platform-Neutral
1.2 어떤 기술들이 사용됐나?

Recommended for you

[133] 브라우저는 vsync를 어떻게 활용하고 있을까
[133] 브라우저는 vsync를 어떻게 활용하고 있을까[133] 브라우저는 vsync를 어떻게 활용하고 있을까
[133] 브라우저는 vsync를 어떻게 활용하고 있을까

DEVIEW 2015 DAY1. 브라우저는 vsync를 어떻게 활용하고 있을까

deviewdeview2015
[233]멀티테넌트하둡클러스터 남경완
[233]멀티테넌트하둡클러스터 남경완[233]멀티테넌트하둡클러스터 남경완
[233]멀티테넌트하둡클러스터 남경완

[233]멀티테넌트하둡클러스터 남경완

deview2016
백억개의 로그를 모아 검색하고 분석하고 학습도 시켜보자 : 로기스
백억개의 로그를 모아 검색하고 분석하고 학습도 시켜보자 : 로기스백억개의 로그를 모아 검색하고 분석하고 학습도 시켜보자 : 로기스
백억개의 로그를 모아 검색하고 분석하고 학습도 시켜보자 : 로기스

-

1.3 왜 Angular.js를 사용 했나?
Why Angular.js
1. 간단 명료한 MVC 패턴
2. 적은 코드량으로 개발
3. PubSub 시스템
4. 다국어 지원
5. 많은 오픈 라이브러리
6. 테스트 작성 용이
7. 지속적인 업데이트
2.
어떤 Angular.js
구조로
만들어졌을까?
2.1 복잡한 Angular.js 구조
Flexible
1. Angular.js는 DOM에 Controller를 자유롭게 연결 할 수 있고,
2. ng-include를 이용하여 View를 짜집기 할 수 있으며,
3. Directive를 이용해 UI 컴포넌트를 만들수도 있고,
4. Helper로 만들 수도 있다.
2.1 복잡한 Angular.js 구조
Complicated

Recommended for you

파이썬 생존 안내서 (자막)
파이썬 생존 안내서 (자막)파이썬 생존 안내서 (자막)
파이썬 생존 안내서 (자막)

넥슨코리아 사내 발표자료로 왓 스튜디오에서 파이썬으로 《야생의 땅: 듀랑고》 서버를 비롯한 여러가지 도구를 만든 경험을 공유합니다. - 게임서버와 각종 툴, 테스트/빌드/배포 시스템을 만들 때 사용한 재료 - 파이썬 코드 품질 개선, 디버깅, 프로파일링, 최적화 - 파이썬 오픈소스 생태계와 왓 스튜디오가 하는 오픈소스 활동

python
[152] 웹브라우저 감옥에서 살아남기
[152] 웹브라우저 감옥에서 살아남기[152] 웹브라우저 감옥에서 살아남기
[152] 웹브라우저 감옥에서 살아남기

DEVIEW2015 DAY1. 웹브라우저 감옥에서 살아남기

deviewdeview2015
Nginx Testing in NAVER
Nginx Testing in NAVERNginx Testing in NAVER
Nginx Testing in NAVER

2013-02-23, 13th JCO Conference

jco
Views
Directives
Controllers OtherCtrl.js
ddd.js
ddd.html
aaa.js
aaa.html
2.2 쉽고 간결한 Angular.js 구조
Simple
Angular.js 는 다행스럽게도 다음의 구조도 가능하다
Views
Directives
Controllers MainCtrl.js
aaa.js
aaa.html
bbb.js
bbb.js
ccc.js
ccc.js
2.2 쉽고 간결한 Angular.js 구조
머리 - Controller
다리 - Directive
팔, 몸통 - Directives
Body Structure Pattern
2.2 쉽고 간결한 Angular.js 구조
Define Directives
effects
pages content layers
applied-effects
2.2 쉽고 간결한 Angular.js 구조
Attention
여기서 주의할 점은,
1. 한 페이지의 Main Controller는 하나이고,
2. ng-include는 Directive 내에서만 꼭 필요할 때만 사용하며,
3. Directive와 View는 1:1 매칭한다.
4. Directive의 역할이 커질수록 Service와 Factory를 이용하고,
5. 필요에 따라 사람의 소뇌 성격의 Controller가 추가 될 수 있다.

Recommended for you

[232] 성능어디까지쥐어짜봤니 송태웅
[232] 성능어디까지쥐어짜봤니 송태웅[232] 성능어디까지쥐어짜봤니 송태웅
[232] 성능어디까지쥐어짜봤니 송태웅

[232] 성능어디까지쥐어짜봤니 송태웅

deview2016
[H3 2012] 내컴에선 잘되던데? - vagrant로 서버와 동일한 개발환경 꾸미기
[H3 2012] 내컴에선 잘되던데? - vagrant로 서버와 동일한 개발환경 꾸미기[H3 2012] 내컴에선 잘되던데? - vagrant로 서버와 동일한 개발환경 꾸미기
[H3 2012] 내컴에선 잘되던데? - vagrant로 서버와 동일한 개발환경 꾸미기

H3 2012 발표자료 내컴에선 잘되던데? - vagrant로 서버와 동일한 개발환경 꾸미기 -KTH 강소리

vagrant
[Play.node] node.js 를 사용한 대규모 글로벌(+중국) 서비스
[Play.node] node.js 를 사용한 대규모 글로벌(+중국) 서비스[Play.node] node.js 를 사용한 대규모 글로벌(+중국) 서비스
[Play.node] node.js 를 사용한 대규모 글로벌(+중국) 서비스

Flitto는 초기부터 Node.js를 사용하여 서비스를 개발 및 운영하고 있습니다. 중국을 포함하여 글로벌 서비스를 운영하면서 여러가지 겪은 문제점과 고민, 그리고 그 해결방법에 대하여 발표합니다.

itservicesjavascript
2.3 외부 패키지 관리 방법
Package Managing Rule
• Bower뿐만 아니라 NPM을 이용해서 모듈을 설치 가능
• 예를 들어 underscore.js 를 설치하려고 했을 때,
Bower를 이용할지, NPM을 이용할지 고민해야 한다.
1. 순위 : Bower 이용
2. 순위 : NPM 이용
• 이유 : 최대한 Front-end모듈로 작성을 해야 추후 웹서비스로 만들때, NPM을
이용한 모듈만 Back-end로 작성하여 AJAX 통신하면 기존 코드에서 큰 수정
없이 작동 가능하기 때문이다.
3.
성능과
관련있는
Angular.js Things
3.1 Two-way binding
전/후 이벤트 처리
전/후 이벤트 처리
전/후 이벤트 처리
$watch
$watch
$watch
너무 느리다.
Dirty Checking 주의
http://goo.gl/0N5YrB
3.1 Two-way binding
Event를 활용하자
$emit(‘content.selectedLayerMoved’)
Controller.$on(‘content.selectedLayerMoved’)
$broadcast(‘layers.syncLayers’)
$broadcast(‘pages.renderSelectedPage’)
$on(‘layers.syncLayers’)$on(‘pages.renderSelectedPage’)

Recommended for you

[야생의 땅: 듀랑고] 지형 관리 완전 자동화 - 생생한 AWS와 Docker 체험기
[야생의 땅: 듀랑고] 지형 관리 완전 자동화 - 생생한 AWS와 Docker 체험기[야생의 땅: 듀랑고] 지형 관리 완전 자동화 - 생생한 AWS와 Docker 체험기
[야생의 땅: 듀랑고] 지형 관리 완전 자동화 - 생생한 AWS와 Docker 체험기

이 발표는 [야생의 땅: 듀랑고]의 지형 배포 시스템과 생태계 시뮬레이션 자동화 시스템에 대한 이야기를 다룹니다. 듀랑고의 각 섬은 크기와 지형, 기후 조건이 다양하고 섬의 개수가 많아서 수동으로 관리하는 것은 사실상 불가능합니다. 몇번의 사내 테스트와 베타 테스트를 거치면서 이러한 문제를 해결해주는 자동화된 도구의 필요성이 절실해졌고, 작년에 NDC에서 발표했던 생태계 시뮬레이터와 Docker, 그리고 아마존 웹서비스(AWS)를 이용하여 수많은 섬들을 자동으로 생성하고 관리하는 자동화 시스템을 구축하게 되었습니다. 그 과정에서 했던 고민들, 기존의 애플리케이션을 "Dockerizing" 했던 경험, AWS의 각 서비스들을 적절히 활용했던 이야기, AWS의 각 지역별 요금이 상이하다는 점을 이용해서 비용을 절감한 사례, 그리고 자동화 시스템의 문제점과 앞으로의 방향에 대해서 이야기 할 계획입니다.

ndc_16ndcnexon
[123] electron 김성훈
[123] electron 김성훈[123] electron 김성훈
[123] electron 김성훈

[123] electron 김성훈

deview2016
Python server-101
Python server-101Python server-101
Python server-101

Python server-101

python
3.2 ng-route 메모리 부족
메모리 부족
/index.html#/preview
3.2 ng-route 메모리 부족
ng-route를 거치지 않고,
직접 html file에 접근하여 해결
/preview.html
3.3 Directives in Directive
Nodes
Listeners
Used JS Heap
Nested Directive는
명시적으로 $destroy 호출 해야함
3.4 SVG 렌더링 이슈

Recommended for you

시간당 수백만 요청을 처리하는 node.js 서버 운영기 - Playnode 2015
시간당 수백만 요청을 처리하는 node.js 서버 운영기 - Playnode 2015시간당 수백만 요청을 처리하는 node.js 서버 운영기 - Playnode 2015
시간당 수백만 요청을 처리하는 node.js 서버 운영기 - Playnode 2015

Dable에서 Node.js를 이용해 시간당 수백만 요청을 다루는 Web Server를 운영한 경험을 공유합니다.

nodejsplaynodedable
[NDC17] 왓 스튜디오 서비스파트
[NDC17] 왓 스튜디오 서비스파트[NDC17] 왓 스튜디오 서비스파트
[NDC17] 왓 스튜디오 서비스파트

NDC17, "왓 스튜디오 서비스파트" 발표자료 입니다.

ndckrndcndc17
Javascript everywhere - Node.js | Devon 2012
Javascript everywhere - Node.js | Devon 2012Javascript everywhere - Node.js | Devon 2012
Javascript everywhere - Node.js | Devon 2012
daumnode.jsfront-end
3.4 SVG 렌더링 이슈
4.
그밖에
알아두면 좋은
Angular.js Things
$scope 의 변수가 반영되는 조건은,
1. DOM 이벤트(ng-click, ng-mousedown, …)가 발생
2. $http와 $resource에서 응답이 돌아왔을 경우
3. $location에서 URL을 변경한 후
4. $timeout이벤트가 발생한 후
5. $scope.$apply()나 $scope.$digest() 호출
4.1 외부 모듈 사용하여 개발할 때,
jQuery나 Node.js 또는 Custom Event 를 이용할 시,
Angular.js의 $scope 내의 값이 변하지 않는다.
in Controller : $scope.$safeApply();
in Directive : scope.$root.$safeApply();
Directive 로 컴포넌트를 만들때 initialize()를 DOM과 같이 할 때가 있다.
하지만, Directive 에는 DOM Ready Event가 없다.
4.2 Directive DOM Ready
DOM 렌더링 완료 Event는 $timeout() 메소드로 대체 할 수 있다.
그렇지만 $timeout() 보단 setTimeout() 을 이용하자.
$timeout() 을 이용하면, 불필요한 Dirty Checking을 수행하여 성능 저하를 초
래 할 수 있다.

Recommended for you

Front end dev 2016 & beyond
Front end dev 2016 & beyondFront end dev 2016 & beyond
Front end dev 2016 & beyond

A perspective on front-end dev trend and environment in 2016

gulpwebpackelectronics
[132]웨일 브라우저 1년 그리고 미래
[132]웨일 브라우저 1년 그리고 미래[132]웨일 브라우저 1년 그리고 미래
[132]웨일 브라우저 1년 그리고 미래

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

deview2017
[DEVIEW 2016] 네이버의 모던 웹 라이브러리 - egjs
[DEVIEW 2016] 네이버의 모던 웹 라이브러리 - egjs[DEVIEW 2016] 네이버의 모던 웹 라이브러리 - egjs
[DEVIEW 2016] 네이버의 모던 웹 라이브러리 - egjs

Introduction of jQuery based library 'egjs'. egjs is a set of UI interactions, effects and utility components library.

flickinginfinitegridegjs
4.3 Undo/Redo
Editor 작업을 총괄하는 하나의 Object(workspace) 이용,
History 추가시 Object Snapshot 을 저장
memento-promise : http://goo.gl/ZQwBY3
5.
PSD 파싱은
어떻게 했을까?
5.1 psd.js
http://meltingice.github.io/psd.js
한글 레이어 이름 깨짐
긴 Height 파싱시 꺼짐
5.2 python psd-tools
pypi.python.org/pypi/psd-tools
한글 레이어 이름 해결
긴 Height PSD도 메모리 문제 없음
너무 긴 PSD는 자동 나누기 기능 개발

Recommended for you

Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유
Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유
Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유

The best practice of Android application development based on Anjularjs, Ionic, Cordva based Android application

hybrid appliocationanjularjshtml5
[124] 하이브리드 앱 개발기 김한솔
[124] 하이브리드 앱 개발기 김한솔[124] 하이브리드 앱 개발기 김한솔
[124] 하이브리드 앱 개발기 김한솔

[124] 하이브리드 앱 개발기 김한솔

웹 Front-End 실무 이야기
웹 Front-End 실무 이야기웹 Front-End 실무 이야기
웹 Front-End 실무 이야기

프론트엔드와 실무 경험담을 위주로 설명한 프레젠테이션입니다.

front-endjavascriptweb
6.
테스트는 자동화는?
6.1 Unit Test
6.2 End to End Test
http://angular.github.io/protractor
6.2 End to End Test
https://github.com/nwjs/nw.js/wiki/chromedriver
1. 셀레니움 다운로드
2. http://dl.nwjs.io/ chromedriver 다운로드
3. nw or nw.exe(win),
or node-webkit.app(osx) 다운로드
4. 모두 같은 디렉토리에 넣음
5. java -jar selenium-server-standalone-VE
R.jar
-Dwebdriver.chrome.driver=./chromedri
ver
6. npm install wd (프로젝트 폴더)

Recommended for you

HTML5/JSON 을 이용해 범용 2D 맵에디터 제작하기
HTML5/JSON 을 이용해 범용 2D 맵에디터 제작하기HTML5/JSON 을 이용해 범용 2D 맵에디터 제작하기
HTML5/JSON 을 이용해 범용 2D 맵에디터 제작하기

NDC 14 - HTML5/JSON 을 이용해 범용 2D 맵에디터 제작하기

mapeditor.webapplicationjsongame
[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...
[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...
[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...

Implementing Web Based Online MultiPlyaer Tetris with OpenSource

Hybrid App Platform - HyWAI 3.5
Hybrid App Platform - HyWAI 3.5Hybrid App Platform - HyWAI 3.5
Hybrid App Platform - HyWAI 3.5

HyWAI is an HTML5 based Hybrid Web Application platform that allows you to author native applications with web technologies and get access to APIs and app stores. HyWAI leverages web technologies developers already know best... HTML and JavaScript.

3.5hybrid webhybrid app
6.2 End to End Test
테스트 코드 작성
어려움
6.2 End to End Test
UI 개발할 때처럼 화면을
보면서 테스트 코드를
작성 할 수는 없을까?
6.2 End to End Test
[121]네이버 효과툰 구현 이야기

Recommended for you

웹 소프트웨어 시대의 새로운 롤(role) 모델, 자바스크립트
웹 소프트웨어 시대의 새로운 롤(role) 모델, 자바스크립트웹 소프트웨어 시대의 새로운 롤(role) 모델, 자바스크립트
웹 소프트웨어 시대의 새로운 롤(role) 모델, 자바스크립트

KTH H3 컨퍼런스 2011 웹 소프트웨어 시장의 새로운 롤, 자바스크립트 발표 자료입니다.

commonjsnode.jshistory
우리가 몰랐던 크롬 개발자 도구
우리가 몰랐던 크롬 개발자 도구우리가 몰랐던 크롬 개발자 도구
우리가 몰랐던 크롬 개발자 도구

크롬 개발자 도구들의 다양한 기능들을 살펴봅니다.

chrome devtools
NAVER TECH CONCERT_FE2019_빠르게 훑어보는 웹 개발 트렌드
NAVER TECH CONCERT_FE2019_빠르게 훑어보는 웹 개발 트렌드NAVER TECH CONCERT_FE2019_빠르게 훑어보는 웹 개발 트렌드
NAVER TECH CONCERT_FE2019_빠르게 훑어보는 웹 개발 트렌드

웹 개발 방식은 빠르게 변하고 있습니다. 웹이 등장했을 때부터 현재까지 웹 개발 방식이 어떻게 바뀌어 왔는지 빠르게 훑어보고, 지금부터 웹 개발을 시작한다면 어떤 내용을 공부하면 좋을지 알아봅니다.

naver tech concertfront-end웹개발트렌드
7.
저작툴
개발 이야기를
마치며
7.1 목표를 향해
http://goo.gl/onlI8
iamdenny.com
효과툰 뷰어
구현 이야기
김지한
NAVER LABS
이전에 있었던 효과툰 비슷한 것들
Adobe Flash™
PC 전용

Recommended for you

NAVER의 웹/HTML5환경 대응 현황
NAVER의 웹/HTML5환경 대응 현황NAVER의 웹/HTML5환경 대응 현황
NAVER의 웹/HTML5환경 대응 현황

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

html5webit
반응형 웹 디자인
반응형 웹 디자인반응형 웹 디자인
반응형 웹 디자인

http://cafe.naver.com/webmarkup 웹표준 스터디 20기 결과물

media queriesresponsive web design반응형 웹 디자인
01.모바일 프레임워크 이론
01.모바일 프레임워크 이론01.모바일 프레임워크 이론
01.모바일 프레임워크 이론

01.모바일 프레임워크 이론

지원(해야) 하는 환경
iOS
7+
Android
4.1+
MSIE
8+
세 가지 이슈
스크롤 이벤트
연속성
사운드 MSIE
그림출처: GRPH3B18 CC BY-SA 3.0 via Wikimedia Commons
1.
스크롤 이벤트 연속성
1.1 스크롤 이벤트 연속성: iOS
Safari UIWebView WKWebView
iOS7 X X N / A
iOS8 O X O

Recommended for you

[H3 2012] Bridge over troubled water : make plug-in for Appspresso
[H3 2012] Bridge over troubled water : make plug-in for Appspresso[H3 2012] Bridge over troubled water : make plug-in for Appspresso
[H3 2012] Bridge over troubled water : make plug-in for Appspresso

H3 2012 발표자료 Bridge over troubled water : make plug-in for Appspresso -KTH 이상찬

GDG DevFest Busan 16" Android Nougat Developer's Note
GDG DevFest Busan 16" Android Nougat Developer's NoteGDG DevFest Busan 16" Android Nougat Developer's Note
GDG DevFest Busan 16" Android Nougat Developer's Note

안드로이드 누가에 대한 변경점, 몇몇 안드로이드 개발자들에 대한 팁을 알려 드립니다.

firebaseandroidgdg
Web app 개발 방법론
Web app 개발 방법론Web app 개발 방법론
Web app 개발 방법론
web appwebkithtml5
1.1 스크롤 이벤트 연속성: iOS
<div style=“
overflow: auto;
”></div>
<div style=“
overflow: auto;
-webkit-overflow-scrolling: touch
”></div>
스크롤 이벤트 연속성 O
스크롤 가속도 X
스크롤 이벤트 연속성 X
스크롤 가속도 O
1.1 스크롤 이벤트 연속성: iOS
document.body.addEventListener(“touchmove”, function () {
console.log(document.body.scrollTop);
});
touchmove 이벤트는 연속적으로 발생하기는 하지만
이 상태에서 갱신된 실제 스크롤 위치를 얻을 수는 없다.
1.1 스크롤 이벤트 연속성: iOS
setInterval(function () {
console.log(document.body.scrollTop);
});
사용자가 스크롤 하는 동안 타이머를 포함한 자바스크립트
동작이 멈추므로 setInterval 이나
requestAnimationFrame 같은 타이머 함수로도 연속적인
스크롤 위치 정보를 얻을 수는 없다.
1.1 스크롤 이벤트 연속성: iOS
User Agent String
네이버앱
Mozilla/5.0 (iPhone; CPU iPhone OS 8_1_2 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like
Gecko) Mobile/12B440 NAVER(inapp; search; 390; 6.0.2)
라인
Mozilla/5.0 (iPhone; CPU iPhone OS 8_1_2 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like
Gecko) Mobile/12B440 Safari Line/5.1.1
카카오톡
Mozilla/5.0 (iPhone; CPU iPhone OS 8_1_2 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like
Gecko) Mobile/12B440 KAKAOTALK
페이스북
Mozilla/5.0 (iPhone; CPU iPhone OS 8_1_2 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like
Gecko) Mobile/12B440
[FBAN/FBIOS;FBAV/28.0.0.10.10;FBBV/8930087;FBDV/iPhone7,2;FBMD/iPhone;FBSN/iPhone
OS;FBSV/8.1.2;FBSS/2; FBCR/SKTelecom;FBID/phone;FBLC/ko_KR;FBOP/5]
UA string 은 UIWebView 와 WKWebView 가 완전히 같다.
Tip. iOS8 WKWebView 구분하는 방법:

Recommended for you

Adobe Dreamweaver CS5.5 를 이용한 HTML5 개발
Adobe Dreamweaver CS5.5 를 이용한 HTML5 개발Adobe Dreamweaver CS5.5 를 이용한 HTML5 개발
Adobe Dreamweaver CS5.5 를 이용한 HTML5 개발

Dreamweaver CS5.5 를 이용한 HTML5 개발

cs5.5html5jongkwang
[211] 인공지능이 인공지능 챗봇을 만든다
[211] 인공지능이 인공지능 챗봇을 만든다[211] 인공지능이 인공지능 챗봇을 만든다
[211] 인공지능이 인공지능 챗봇을 만든다

The document discusses various machine learning clustering algorithms like K-means clustering, DBSCAN, and EM clustering. It also discusses neural network architectures like LSTM, bi-LSTM, and convolutional neural networks. Finally, it presents results from evaluating different chatbot models on various metrics like validation score.

deview2018
[233] 대형 컨테이너 클러스터에서의 고가용성 Network Load Balancing: Maglev Hashing Scheduler i...
[233] 대형 컨테이너 클러스터에서의 고가용성 Network Load Balancing: Maglev Hashing Scheduler i...[233] 대형 컨테이너 클러스터에서의 고가용성 Network Load Balancing: Maglev Hashing Scheduler i...
[233] 대형 컨테이너 클러스터에서의 고가용성 Network Load Balancing: Maglev Hashing Scheduler i...

[233] 대형 컨테이너 클러스터에서의 고가용성 Network Load Balancing: Maglev Hashing Scheduler in IPVS, Linux Kernel

deview2018
1.1 스크롤 이벤트 연속성: iOS
iOS8
WKWebView
iOS8
UIWebView
iOS7
UIWebView
WebGL3D O O X
CSS Shapes O O X
Indexed DB O X X
HTML5
Coverage Score
440/555 427/555 410/555
UA string 으로 WebView 가려낸 뒤 indexedDB 지원 여부 확인
Tip. iOS8 WKWebView 구분하는 방법:
1.2 스크롤 이벤트 연속성: Android
단말기
OS
버전
실행환경
스크롤 이벤트
연속성
브라우저 엔진
갤럭시
S3
4.1.2
S Browser Good AppleWebKit/534.30
Chrome Good AppleWebKit/537.36
NAVER App. Good AppleWebKit/534.30
갤럭시
S4 mini
4.2
S Browser Bad Chrome/18.0.1025.308
Chrome Good Chrome/42.0.2311.111
NAVER App. Good AppleWebKit/534.30
갤럭시
S4
4.3
S Browser Good Chrome/28.0.1500.94
Chrome Good Chrome/28.0.1500.94
NAVER App. Good AppleWebKit/534.30
갤럭시
S5
4.4.2
S Browser Bad Chrome/28.0.1500.94
Chrome Good Chrome/42.0.2311.111
NAVER App. Good Chrome/30.0.0.0
갤럭시
S4
4.4.2
S Browser Bad Chrome/28.0.1500.94
Chrome Good Chrome/42.0.2311.111
NAVER App. Good Chrome/30.0.0.0
단말기
OS
버전
실행환경
스크롤 이벤트
연속성
브라우저 엔진
갤럭시
S4 mini
4.4.4
S Browser Bad Chrome/28.0.1500.94
Chrome Good Chrome/42.0.2311.111
NAVER App. Good Chrome/33.0.0.0
갤럭시
노트4
4.4.4
S Browser Good Chrome/34.0.1847.76
Chrome Good Chrome/42.0.2311.111
NAVER App. Good Chrome/33.0.0.0
갤럭시
노트4
5.0.1
S Browser Bad
Chrome/34.0.1847.76
SamsungBrowser/2.1
Chrome Good Chrome/39.0.2171.93
NAVER App. Good Chrome/37.0.0.0
갤럭시
S6
5.0.2
S Browser Good Chrome/38.0.2125.102
Chrome Good Chrome/39.0.2171.93
NAVER App. Good Chrome/37.0.0.0
Android 4.1+ : 일부 삼성 브라우저를 제외하고 연속적인 스크롤 이벤트 제공
1.2 스크롤 이벤트 연속성: Android
예외 #1.
1. 스크롤 이벤트는 연속적이지만 화면 갱신이 느린 경우
2. 스크롤 이벤트에서 스타일 변화를 주면
브라우저 크래시 되는 경우
(Android 4.1.2 Chrome/42.0.2311.111)
Android 4.1.2 WebView (NAVER App), Chrome, S-Browser
Android 4.2.0 WebView (NAVER App)
1.2 스크롤 이벤트 연속성: Android
예외 #2.
스크립트 스크롤 (iscroll.js) 영역의 높이가 긴 경우
브라우저 앱 충돌 발생 (Fatal signal 11 SIGSEGV)
Android 4.4.2 WebView (NAVER App. Chrome/30.0.0.0)

Recommended for you

[215] Druid로 쉽고 빠르게 데이터 분석하기
[215] Druid로 쉽고 빠르게 데이터 분석하기[215] Druid로 쉽고 빠르게 데이터 분석하기
[215] Druid로 쉽고 빠르게 데이터 분석하기

[215] Druid로 쉽고 빠르게 데이터 분석하기

deview2018
[245]Papago Internals: 모델분석과 응용기술 개발
[245]Papago Internals: 모델분석과 응용기술 개발[245]Papago Internals: 모델분석과 응용기술 개발
[245]Papago Internals: 모델분석과 응용기술 개발

[245]Papago Internals: 모델분석과 응용기술 개발

[236] 스트림 저장소 최적화 이야기: 아파치 드루이드로부터 얻은 교훈
[236] 스트림 저장소 최적화 이야기: 아파치 드루이드로부터 얻은 교훈[236] 스트림 저장소 최적화 이야기: 아파치 드루이드로부터 얻은 교훈
[236] 스트림 저장소 최적화 이야기: 아파치 드루이드로부터 얻은 교훈

[236] 스트림 저장소 최적화 이야기: 아파치 드루이드로부터 얻은 교훈

deview2018
1.3 스크롤 이벤트 특성
Event Type Sync/Async
Trusted event target
types
DOM interface
scroll Async Document, Element UIEvent
wheel Async Element WheelEvent
mousemove Sync Element MouseEvent
click Sync Element MouseEvent
load Async
Window,
Document,Element
Event
http://www.w3.org/TR/DOM-Level-3-Events/
scroll 이벤트 자체가 비동기적 이벤트
1.4 스크립트 스크롤의 활용
scroll 이벤트가 없으면 만들면 되지:
touchmove 이벤트를 이용해 마치 스크롤 하는 것 같은 느낌을 준다
<div style=“overflow: hidden;”>
<div style=“transform: translate3d(0, -100px, 0);”>
…
</div>
</div>
JMC, iscroll.js, ScrollMagic, Skrollr …
1.4 스크립트 스크롤의 활용
그런데, 효과툰 한 편의 콘텐트를 스크립트 스크롤 영역에 넣으면 …
Size: 638 x 72049px
Memory: 175Mb
1.4 스크립트 스크롤의 활용
개선 #1.
하나의 거대한 <div> 대신 해당 구간의 작은 <div> 를 움직이자
Size: 360x40201
Memory: 55.2Mb
Size: 360x640
Memory: 900Kb

Recommended for you

[235]Wikipedia-scale Q&A
[235]Wikipedia-scale Q&A[235]Wikipedia-scale Q&A
[235]Wikipedia-scale Q&A

[235]Wikipedia-scale Q&A

deview2018
[244]로봇이 현실 세계에 대해 학습하도록 만들기
[244]로봇이 현실 세계에 대해 학습하도록 만들기[244]로봇이 현실 세계에 대해 학습하도록 만들기
[244]로봇이 현실 세계에 대해 학습하도록 만들기

The document discusses challenges with using reinforcement learning for robotics. While simulations allow fast training of agents, there is often a "reality gap" when transferring learning to real robots. Other approaches like imitation learning and self-supervised learning can be safer alternatives that don't require trial-and-error. To better apply reinforcement learning, robots may need model-based approaches that learn forward models of the world, as well as techniques like active localization that allow robots to gather targeted information through interactive perception. Closing the reality gap will require finding ways to better match simulations to reality or allow robots to learn from real-world experiences.

deview2018
[243] Deep Learning to help student’s Deep Learning
[243] Deep Learning to help student’s Deep Learning[243] Deep Learning to help student’s Deep Learning
[243] Deep Learning to help student’s Deep Learning

This document describes research on using deep learning to predict student performance in massive open online courses (MOOCs). It introduces GritNet, a model that takes raw student activity data as input and predicts outcomes like course graduation without feature engineering. GritNet outperforms baselines by more than 5% in predicting graduation. The document also describes how GritNet can be adapted in an unsupervised way to new courses using pseudo-labels, improving predictions in the first few weeks. Overall, GritNet is presented as the state-of-the-art for student prediction and can be transferred across courses without labels.

deview2018
1.4 스크립트 스크롤의 활용
개선 #2.
활성 상태로 만들 페이지 구간을 현재 페이지 기준 전후 일정 개수에서
현재 스크롤 위치 기준 화면 크기만큼 전후 구간에 포함되는 페이지로
1.4 스크립트 스크롤의 활용
Q. 화면 안에 들고 날 때마다 display 속성을 변경 한다는 말인가요?
A. 네
Q. Display 속성을 변경하면 Layout (Reflow) 발생할 텐데요?
A. 알아요
Q. 그걸 아는 사람이 그래?
A.
1.4 스크립트 스크롤의 활용
그대로 두면 그래픽 레이어 과다로
메모리 문제 발생
à display 속성 제어가
성능 저해 요소지만 유일한 해법
구간 안에 존재하는 레이어 수가 한정되어 있어서
Reflow 비용이 비교적 적은 편이라 가능한 것이기도
display: none 으로 레이어 제거 비용보다는
display: block 으로 레이어 생성 비용이 더 큼.
1.4 스크립트 스크롤의 활용
레이어의 생성 비용은 크기에 비례:
적당한 크기로 나누어 줄 필요가 있다
iOS Safari 기준 최대 이미지 크기
가로 x 세로 <= 1024 x 1024 x 3
https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/
CreatingContentforSafarioniPhone/CreatingContentforSafarioniPhone.html

Recommended for you

[234]Fast & Accurate Data Annotation Pipeline for AI applications
[234]Fast & Accurate Data Annotation Pipeline for AI applications[234]Fast & Accurate Data Annotation Pipeline for AI applications
[234]Fast & Accurate Data Annotation Pipeline for AI applications

This document provides a summary of new datasets and papers related to computer vision tasks including object detection, image matting, person pose estimation, pedestrian detection, and person instance segmentation. A total of 8 papers and their associated datasets are listed with brief descriptions of the core contributions or techniques developed in each.

deview2018
Old version: [233]대형 컨테이너 클러스터에서의 고가용성 Network Load Balancing
Old version: [233]대형 컨테이너 클러스터에서의 고가용성 Network Load BalancingOld version: [233]대형 컨테이너 클러스터에서의 고가용성 Network Load Balancing
Old version: [233]대형 컨테이너 클러스터에서의 고가용성 Network Load Balancing

그림이 정상 출력되는 다음 링크의 자료를 확인해 주세요. https://www.slideshare.net/deview/233-network-load-balancing-maglev-hashing-scheduler-in-ipvs-linux-kernel

deview2018
[226]NAVER 광고 deep click prediction: 모델링부터 서빙까지
[226]NAVER 광고 deep click prediction: 모델링부터 서빙까지[226]NAVER 광고 deep click prediction: 모델링부터 서빙까지
[226]NAVER 광고 deep click prediction: 모델링부터 서빙까지

This document presents a formula for calculating the loss function J(θ) in machine learning models. The formula averages the negative log likelihood of the predicted probabilities being correct over all samples S, and includes a regularization term λ that penalizes predicted embeddings being dissimilar from actual embeddings. It also defines the cosine similarity term used in the regularization.

deview2018
1.4 스크립트 스크롤의 활용
- 네이버 효과툰 저작툴에서 [페이지 나누기] 기능을 제공
- 일정 크기 이상의 이미지는
자동으로 분할:
정해진 크기 단위가 아니라
컷 사이 여백을 고려한
자연스러운 이미지로 분할
X O
1.4 스크립트 스크롤의 활용
개선 #3.
scroll 이벤트:
스크롤에 따라 활성 구간에 들어가는 페이지만 이미지 로딩
= <img> src 지정하는 순간 Paint (Image Decode) 발생
scrollEnd 이벤트 CustomEvent:
스크롤이 잠시 멈췄을 때 = 사용자가 현재 로딩 된 구간을 보는 동안
다음 구간의 이미지를 불러오기 (pre-load)
+ 미리 Image Decode 해두기 (pre-paint)
1.4 스크립트 스크롤의 활용
개선 #3.
Pre-paint 사용 전
Pre-paint 사용 후
스크롤 멈춘 시점들
스크롤 시작한 시점들
1.4 스크립트 스크롤의 활용
개선 #4.
CSS3 Transform 사용시 GPU 가속을 받는 속성을 사용한다
scale, opacity 사용시에도 주의!
transform: scale(x,y) à
transform: scale3d(x,y,0)
opacity: n à
opacity: n;
transform: translateZ(0)
CSS3 Transform 속성이 변화할 때
Layout 이 계속 발생한다면 GPU 가속 여부 확인!

Recommended for you

[225]NSML: 머신러닝 플랫폼 서비스하기 & 모델 튜닝 자동화하기
[225]NSML: 머신러닝 플랫폼 서비스하기 & 모델 튜닝 자동화하기[225]NSML: 머신러닝 플랫폼 서비스하기 & 모델 튜닝 자동화하기
[225]NSML: 머신러닝 플랫폼 서비스하기 & 모델 튜닝 자동화하기

[225]NSML: 머신러닝 플랫폼 서비스하기 & 모델 튜닝 자동화하기

deview2018
[224]네이버 검색과 개인화
[224]네이버 검색과 개인화[224]네이버 검색과 개인화
[224]네이버 검색과 개인화

[224]네이버 검색과 개인화

deview2018
[216]Search Reliability Engineering (부제: 지진에도 흔들리지 않는 네이버 검색시스템)
[216]Search Reliability Engineering (부제: 지진에도 흔들리지 않는 네이버 검색시스템)[216]Search Reliability Engineering (부제: 지진에도 흔들리지 않는 네이버 검색시스템)
[216]Search Reliability Engineering (부제: 지진에도 흔들리지 않는 네이버 검색시스템)

[216]Search Reliability Engineering (부제: 지진에도 흔들리지 않는 네이버 검색시스템)

deview2018
1.4 스크립트 스크롤의 활용
스크롤 스크립트 영역 바깥에 이미 HTML 요소가 들어있으면?
iscroll
footer
- 스크립트 스크롤 영역 끝까지 도달하면 비활성화
Iscroll.on(“scroll”, function () {
if (Iscroll.y === Iscroll.maxScrollY) {
Iscroll.disable();
}
});
window.addEventListener(“scroll”, function () {
if (window.scrollY === 0) {
Iscroll.enable();
}
});
- 네이티브 스크롤 위치가 문서 처음이면 활성화
2.
사운드
2.1 사운드 : 요구사항
배경음
네이버 웹툰 : 악의는없다 2화 (금요일 연재)
http://m.comic.naver.com/webtoon/detail.nhn?titleId=657522&no=2
효과음
효과음
2.2 HTML5 Audio의 한계
HTML5 Audio (Element)
다양한 환경에서 쉽게 사용할 수 있지만
동시에 여러 리소스 재생은 불가능
https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/
Device-SpecificConsiderations/Device-SpecificConsiderations.html
mediaGroup (controller) 속성을 이용해 동시 재생하는 방법이 있지만
같은 그룹 내의 사운드를 개별적으로 재생할 수는 없음.
https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/
ControllingMediaWithJavaScript/ControllingMediaWithJavaScript.html

Recommended for you

[214] Ai Serving Platform: 하루 수 억 건의 인퍼런스를 처리하기 위한 고군분투기
[214] Ai Serving Platform: 하루 수 억 건의 인퍼런스를 처리하기 위한 고군분투기[214] Ai Serving Platform: 하루 수 억 건의 인퍼런스를 처리하기 위한 고군분투기
[214] Ai Serving Platform: 하루 수 억 건의 인퍼런스를 처리하기 위한 고군분투기

The document discusses running a TensorFlow Serving (TFS) container using Docker. It shows commands to: 1. Pull the TFS Docker image from a repository 2. Define a script to configure and run the TFS container, specifying the model path, name, and port mapping 3. Run the script to start the TFS container exposing port 13377

deview2018
[213] Fashion Visual Search
[213] Fashion Visual Search[213] Fashion Visual Search
[213] Fashion Visual Search

The document discusses linear algebra concepts including: - Representing a system of linear equations as a matrix equation Ax = b where A is a coefficient matrix, x is a vector of unknowns, and b is a vector of constants. - Solving for the vector x that satisfies the matrix equation using linear algebra techniques such as row reduction. - Examples of matrix equations and their component vectors are shown.

deview2018
[232] TensorRT를 활용한 딥러닝 Inference 최적화
[232] TensorRT를 활용한 딥러닝 Inference 최적화[232] TensorRT를 활용한 딥러닝 Inference 최적화
[232] TensorRT를 활용한 딥러닝 Inference 최적화

This document describes the steps to convert a TensorFlow model to a TensorRT engine for inference. It includes steps to parse the model, optimize it, generate a runtime engine, serialize and deserialize the engine, as well as perform inference using the engine. It also provides code snippets for a PReLU plugin implementation in C++.

deview2018
2.2 HTML5 WebAudio API의 활용
WebAudio API
웹 어플리케이션에서 오디오 데이터를
Processing/Synthesizing 할 수 있는 고수준 API
= 동시에 여러 사운드 리소스 재생 가능
http://www.slideshare.net/deview/2-hello-world-web-aaudioapi
Source GainNode Destination
AudioContext
var context = new AudioContext();
var gainNode = context.createGain();
var source = context.createBufferSource();
source.buffer = ArrayBuffer;
gainNode.gain.value = 1.0; // volume
source.connect(gainNode);
gainNode.connect(context.destination);
source.noteOn(0); // play
2.2 HTML5 WebAudio API의 활용
WebAudio API available on:
https://gist.github.com/NielsLeenheer/4daa6a9ce7f4a0f4733d
http://caniuse.com/#feat=audio-api
MSIE Edge, FireFox 25+, Chrome 10+
iOS 6+, Android 5.x+ (Chromium 40+)
갤럭시 S4
삼성 브라우저 1.5 (Chromium 28)
Android 4.3 / 4.4.2 / 4.4.4 / 5.0.1
+
2.2 HTML5 WebAudio API의 활용
WebAudio API 가 제공되기는 하는데…
https://code.google.com/p/chromium/issues/detail?id=393436
https://code.google.com/p/chromium/issues/detail?id=176902
갤럭시 S4
삼성 브라우저 1.5 (Chromium 28)
Android 4.3 / 4.4.2 / 4.4.4 / 5.0.1
- Web Audio API crashes tab when decodeAudioData is called with a large
( > 15MB) arraybuffer In Chrome Version: 24.0.1312.57 m
- decodeAudioData crashes confirmed on Android 4.2.2 chrome v31~43
may be some buggy ArrayBuffer data ? but it should crash the app anyhow.
2.3 자동 재생 문제
iOS
명시적인 사용자 액션에 의해서만 사운드 재생이 가능함.
On iOS, the Web AudioAPI requires sounds to be triggered from an explicit user action.
https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/
PlayingandSynthesizingSounds/PlayingandSynthesizingSounds.html
http://paulbakaus.com/tutorials/html5/web-audio-on-ios/
단, 한 번 사용자 액션에 의해 재생을 하고나면
그 이후로는 프로그램적으로 재생 가능
As soon as the Web Audio context is “unmuted”, it will stay that way for the entire session,
and every other action won’t require a user event.

Recommended for you

[242]컴퓨터 비전을 이용한 실내 지도 자동 업데이트 방법: 딥러닝을 통한 POI 변화 탐지
[242]컴퓨터 비전을 이용한 실내 지도 자동 업데이트 방법: 딥러닝을 통한 POI 변화 탐지[242]컴퓨터 비전을 이용한 실내 지도 자동 업데이트 방법: 딥러닝을 통한 POI 변화 탐지
[242]컴퓨터 비전을 이용한 실내 지도 자동 업데이트 방법: 딥러닝을 통한 POI 변화 탐지

[242]컴퓨터 비전을 이용한 실내 지도 자동 업데이트 방법: 딥러닝을 통한 POI 변화 탐지

deview2018
[212]C3, 데이터 처리에서 서빙까지 가능한 하둡 클러스터
[212]C3, 데이터 처리에서 서빙까지 가능한 하둡 클러스터[212]C3, 데이터 처리에서 서빙까지 가능한 하둡 클러스터
[212]C3, 데이터 처리에서 서빙까지 가능한 하둡 클러스터

[212]C3, 데이터 처리에서 서빙까지 가능한 하둡 클러스터

deview2018
[223]기계독해 QA: 검색인가, NLP인가?
[223]기계독해 QA: 검색인가, NLP인가?[223]기계독해 QA: 검색인가, NLP인가?
[223]기계독해 QA: 검색인가, NLP인가?

The document discusses machine reading comprehension (MRC) techniques for question answering (QA) systems, comparing search-based and natural language processing (NLP)-based approaches. It covers key milestones in the development of extractive QA models using NLP, from early sentence-level models to current state-of-the-art techniques like cross-attention, self-attention, and transfer learning. It notes the speed and scalability benefits of combining search and reading methods for QA.

deview2018
2.3 자동 재생 문제
iOS
http://paulbakaus.com/tutorials/html5/web-audio-on-ios/
window.addEventListener('touchstart', function() {
//  create  empty  buffer
var buffer  = myContext.createBuffer(1, 1, 22050);
var source  = myContext.createBufferSource();
source.buffer  = buffer;
//  connect  to  output  (your  speakers)
source.connect(myContext.destination);
//  play  the  file
source.noteOn(0);
}, false);
한 번 사용자 액션이 있을 때
임의의 빈 사운드를 재생해두면
그 이후로는 자유롭게
사운드를 재생할 수 있다.
2.3 자동 재생 문제
http://trac.webkit.org/changeset/108831
Android
일단 사운드가 로드되면 프로그램적으로 자동 재생이 가능함
(Webkit 528+) All restrictions are removed in the first successful load() or play() call.
단,
갤럭시 S4 Android 4.3
갤럭시 노트4 Android 4.4.4
삼성 브라우저에서는 자동 재생 불가
2.4 다른 음악앱 재생이 멈추는 경우
http://lab.laziel.com/when-webaudio-stops-music/
WebAudio API
var context = new AudioContext();
var gainNode = context.createGain();
var source = context.createBufferSource();
source.buffer = ArrayBuffer;
gainNode.gain.value = 1.0; // volume
source.connect(gainNode);
gainNode.connect(context.destination);
source.noteOn(0); // play
이 시점에 재생중이던
다른 음악앱 재생이 중단된다.
그러므로 .createGain() 은
실제로 사운드 재생하기
직전에 하는 것이 좋다
3.
MSIE

Recommended for you

3.1 MSIE 대응의 중요성
40.53%
IE8 + IE9:
http://www.acecounter.com/www2/education/trendReportDetail.amz?rno=95
3.2 CSS3 Transform in IE
-ms-transform 속성으로 translateX, translate 를 포함해서
rotate, scale … 등 2D transform 사용 가능.
àtranslate3d(), scale3d() 등 3D 속성은
translateX, translateY 등 2D 속성으로 변환해서 사용
IE9
DXImageTransform.Microsoft.Matrix 필터를 사용해야 한다
설마하니 2015년에도 이걸 쓰게 될 줄이야
IE8
3.2 CSS3 Transform in IE
https://msdn.microsoft.com/en-us/library/ms533014(v=vs.85).aspx
- translateX, translateY 는 top, left 속성 제어
- scale, rotate 는 Matrix 필터
IE8
var scale = 3, degrees = 50;
var radian = (degrees - 360) * Math.PI / 180; // degree to radian
var cos = Math.cos(radian), sin = Math.sin(radian);
matrix.scale = parseFloat(scale);
matrix.rotate = {M11: cos, M12: -sin, M21: sin, M22: cos};
var matrixStr = ['M11=' + matrix.rotate.M11 * matrix.scale,
'M12=' + matrix.rotate.M12 * matrix.scale,
'M21=' + matrix.rotate.M21 * matrix.scale,
'M22=' + matrix.rotate.M22 * matrix.scale].join(',');
element.style.filter = 'progid:DXImageTransform.Microsoft.Matrix(' + matrixStr + ')’;
3.2 CSS3 Transform in IE
http://blogs.msdn.com/b/ie/archive/2008/09/08/microsoft-css-vendor-extensions.aspx
- Opacity 는 Alpha 필터
IE8
element.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(Opacity=50)’;
- 투명 PNG 이미지는 AlphaImageLoader 필터
element.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”img.png")';
이 모든 필터들은 띄어쓰기로 중첩 지정 가능

Recommended for you

3.2 CSS3 Transform in IE
AlphaImageLoader 필터 사용시 주의사항
- AlphaImageLoader 필터는 모든 필터에 앞서
가장 먼저 지정되어야 한다
- AlphaImageLoader 필터와Alpha 필터를
동시 지정시 렌더링 오류 발생 할 수 있으므로
HTML 마크업을 분리하여 지정해야 한다
IE8
<div style=“filter:Alpha”>
<div style=“filter:AlphaImageLoader”></div>
</div>
3.2 CSS3 Transform in IE
In Internet Explorer 7, 8, 9, non-static child elements
do not inherit the opacity of the parent.
IE8
http://www.jacklmoore.com/notes/ie-opacity-inheritance/
<div style=“filter:Alpha”>
<div style=“position: static”></div>
</div>
3.2 CSS3 Transform in IE
CSS3 transform 을 적용한 엘리먼트가
부모 엘리먼트 overflow: hidden 무시하는 현상
transform 엘리먼트에 opacity 속성 부여로 해결
@media all and (-ms-high-contrast:none) {
*::-ms-backdrop, .trasformed-element {
opacity: 0.99;
}
}
IE11 @ Windows 8.1
3.2 CSS3 Animation in IE
- setInterval() 타이머 함수로 대체
- @-webkit-keyframe {} 설정을 CSS 파일에 선언한 뒤
자바스크립트 정규식으로 분석해서 유사한 동작으로 변환
è 하나의 애니메이션 설정 파일로
여러 환경 동일하게 대응 가능
IE8 ~ IE9

Recommended for you

결론
기술의 역할: 가치의 상승, 비용의 감소
가치는 더하고, 비용을 줄여서
더 많은 가능성을 만들어 내기 위한 노력
비용
가치
Q&A
Thank You

Recommended for you

More Related Content

What's hot

Akka.NET 으로 만드는 온라인 게임 서버 (NDC2016)
Akka.NET 으로 만드는 온라인 게임 서버 (NDC2016)Akka.NET 으로 만드는 온라인 게임 서버 (NDC2016)
Akka.NET 으로 만드는 온라인 게임 서버 (NDC2016)
Esun Kim
 
Ryan Dahl의 Node.js 소개 동영상 해설 by doortts
Ryan Dahl의 Node.js 소개 동영상 해설 by doorttsRyan Dahl의 Node.js 소개 동영상 해설 by doortts
Ryan Dahl의 Node.js 소개 동영상 해설 by doortts
Suwon Chae
 
[211]대규모 시스템 시각화 현동석김광림
[211]대규모 시스템 시각화 현동석김광림[211]대규모 시스템 시각화 현동석김광림
[211]대규모 시스템 시각화 현동석김광림
NAVER D2
 
[231]나는서버를썰터이니너는개발만하여라 양지욱
[231]나는서버를썰터이니너는개발만하여라 양지욱[231]나는서버를썰터이니너는개발만하여라 양지욱
[231]나는서버를썰터이니너는개발만하여라 양지욱
NAVER D2
 
Node.js 시작하기
Node.js 시작하기Node.js 시작하기
Node.js 시작하기
Huey Park
 
C# Game Server
C# Game ServerC# Game Server
C# Game Server
lactrious
 
[133] 브라우저는 vsync를 어떻게 활용하고 있을까
[133] 브라우저는 vsync를 어떻게 활용하고 있을까[133] 브라우저는 vsync를 어떻게 활용하고 있을까
[133] 브라우저는 vsync를 어떻게 활용하고 있을까
NAVER D2
 
[233]멀티테넌트하둡클러스터 남경완
[233]멀티테넌트하둡클러스터 남경완[233]멀티테넌트하둡클러스터 남경완
[233]멀티테넌트하둡클러스터 남경완
NAVER D2
 
백억개의 로그를 모아 검색하고 분석하고 학습도 시켜보자 : 로기스
백억개의 로그를 모아 검색하고 분석하고 학습도 시켜보자 : 로기스백억개의 로그를 모아 검색하고 분석하고 학습도 시켜보자 : 로기스
백억개의 로그를 모아 검색하고 분석하고 학습도 시켜보자 : 로기스
NAVER D2
 
파이썬 생존 안내서 (자막)
파이썬 생존 안내서 (자막)파이썬 생존 안내서 (자막)
파이썬 생존 안내서 (자막)
Heungsub Lee
 
[152] 웹브라우저 감옥에서 살아남기
[152] 웹브라우저 감옥에서 살아남기[152] 웹브라우저 감옥에서 살ᄋ��남기
[152] 웹브라우저 감옥에서 살아남기
NAVER D2
 
Nginx Testing in NAVER
Nginx Testing in NAVERNginx Testing in NAVER
Nginx Testing in NAVER
형근 송
 
[232] 성능어디까지쥐어짜봤니 송태웅
[232] 성능어디까지쥐어짜봤니 송태웅[232] 성능어디까지쥐어짜봤니 송태웅
[232] 성능어디까지쥐어짜봤니 송태웅
NAVER D2
 
[H3 2012] 내컴에선 잘되던데? - vagrant로 서버와 동일한 개발환경 꾸미기
[H3 2012] 내컴에선 잘되던데? - vagrant로 서버와 동일한 개발환경 꾸미기[H3 2012] 내컴에선 잘되던데? - vagrant로 서버와 동일한 개발환경 꾸미기
[H3 2012] 내컴에선 잘되던데? - vagrant로 서버와 동일한 개발환경 꾸미기
KTH, 케이티하이텔
 
[Play.node] node.js 를 사용한 대규모 글로벌(+중국) 서비스
[Play.node] node.js 를 사용한 대규모 글로벌(+중국) 서비스[Play.node] node.js 를 사용한 대규모 글로벌(+중국) 서비스
[Play.node] node.js 를 사용한 대규모 글로벌(+중국) 서비스
Dan Kang (강동한)
 
[야생의 땅: 듀랑고] 지형 관리 완전 자동화 - 생생한 AWS와 Docker 체험기
[야생의 땅: 듀랑고] 지형 관리 완전 자동화 - 생생한 AWS와 Docker 체험기[야생의 땅: 듀랑고] 지형 관리 완전 자동화 - 생생한 AWS와 Docker 체험기
[야생의 땅: 듀랑고] 지형 관리 완전 자동화 - 생생한 AWS와 Docker 체험기
Sumin Byeon
 
[123] electron 김성훈
[123] electron 김성훈[123] electron 김성훈
[123] electron 김성훈
NAVER D2
 
Python server-101
Python server-101Python server-101
Python server-101
Huey Park
 
시간당 수백만 요청을 처리하는 node.js 서버 운영기 - Playnode 2015
시간당 수백만 요청을 처리하는 node.js 서버 운영기 - Playnode 2015시간당 수백만 요청을 처리하는 node.js 서버 운영기 - Playnode 2015
시간당 수백만 요청을 처리하는 node.js 서버 운영기 - Playnode 2015
Goonoo Kim
 
[NDC17] 왓 스튜디오 서비스파트
[NDC17] 왓 스튜디오 서비스파트[NDC17] 왓 스튜디오 서비스파트
[NDC17] 왓 스튜디오 서비스파트
Chanwoong Kim
 

What's hot (20)

Akka.NET 으로 만드는 온라인 게임 서버 (NDC2016)
Akka.NET 으로 만드는 온라인 게임 서버 (NDC2016)Akka.NET 으로 만드는 온라인 게임 서버 (NDC2016)
Akka.NET 으로 만드는 온라인 게임 서버 (NDC2016)
 
Ryan Dahl의 Node.js 소개 동영상 해설 by doortts
Ryan Dahl의 Node.js 소개 동영상 해설 by doorttsRyan Dahl의 Node.js 소개 동영상 해설 by doortts
Ryan Dahl의 Node.js 소개 동영상 해설 by doortts
 
[211]대규모 시스템 시각화 현동석김광림
[211]대규모 시스템 시각화 현동석김광림[211]대규모 시스템 시각화 현동석김광림
[211]대규모 시스템 시각화 현동석김광림
 
[231]나는서버를썰터이니너는개발만하여라 양지욱
[231]나는서버를썰터이니너는개발만하여라 양지욱[231]나는서버를썰터이니너는개발만하여라 양지욱
[231]나는서버를썰터이니너는개발만하여라 양지욱
 
Node.js 시작하기
Node.js 시작하기Node.js 시작하기
Node.js 시작하기
 
C# Game Server
C# Game ServerC# Game Server
C# Game Server
 
[133] 브라우저는 vsync를 어떻게 활용하고 있을까
[133] 브라우저는 vsync를 어떻게 활용하고 있을까[133] 브라우저는 vsync를 어떻게 활용하고 있을까
[133] 브라우저는 vsync를 어떻게 활용하고 있을까
 
[233]멀티테넌트하둡클러스터 남경완
[233]멀티테넌트하둡클러스터 남경완[233]멀티테넌트하둡클러스터 남경완
[233]멀티테넌트하둡클러스터 남경완
 
백억개의 로그를 모아 검색하고 분석하고 학습도 시켜보자 : 로기스
백억개의 로그를 모아 검색하고 분석하고 학습도 시켜보자 : 로기스백억개의 로그를 모아 검색하고 분석하고 학습도 시켜보자 : 로기스
백억개의 로그를 모아 검색하고 분석하고 학습도 시켜보자 : 로기스
 
파이썬 생존 안내서 (자막)
파이썬 생존 안내서 (자막)파이썬 생존 안내서 (자막)
파이썬 생존 안내서 (자막)
 
[152] 웹브라우저 감옥에서 살아남기
[152] 웹브라우저 감옥에서 살아남기[152] 웹브라우저 감옥에서 살아남기
[152] 웹브라우저 감옥에서 살아남기
 
Nginx Testing in NAVER
Nginx Testing in NAVERNginx Testing in NAVER
Nginx Testing in NAVER
 
[232] 성능어디까지쥐어짜봤니 송태웅
[232] 성능어디까지쥐어짜봤니 송태웅[232] 성능어디까지쥐어짜봤니 송태웅
[232] 성능어디까지쥐어짜봤니 송태웅
 
[H3 2012] 내컴에선 잘되던데? - vagrant로 서버와 동일한 개발환경 꾸미기
[H3 2012] 내컴에선 잘되던데? - vagrant로 서버와 동일한 개발환경 꾸미기[H3 2012] 내컴에선 잘되던데? - vagrant로 서버와 동일한 개발환경 꾸미기
[H3 2012] 내컴에선 잘되던데? - vagrant로 서버와 동일한 개발환경 꾸미기
 
[Play.node] node.js 를 사용한 대규모 글로벌(+중국) 서비스
[Play.node] node.js 를 사용한 대규모 글로벌(+중국) 서비스[Play.node] node.js 를 사용한 대규모 글로벌(+중국) 서비스
[Play.node] node.js 를 사용한 대규모 글로벌(+중국) 서비스
 
[야생의 땅: 듀랑고] 지형 관리 완전 자동화 - 생생한 AWS와 Docker 체험기
[야생의 땅: 듀랑고] 지형 관리 완전 자동화 - 생생한 AWS와 Docker 체험기[야생의 땅: 듀랑고] 지형 관리 완전 자동화 - 생생한 AWS와 Docker 체험기
[야생의 땅: 듀랑고] 지형 관리 완전 자동화 - 생생한 AWS와 Docker 체험기
 
[123] electron 김성훈
[123] electron 김성훈[123] electron 김성훈
[123] electron 김성훈
 
Python server-101
Python server-101Python server-101
Python server-101
 
시간당 수백만 요청을 처리하는 node.js 서버 운영기 - Playnode 2015
시간당 수백만 요청을 처리하는 node.js 서버 운영기 - Playnode 2015시간당 수백만 요청을 처리하는 node.js 서버 운영기 - Playnode 2015
시간당 수백만 요청을 처리하는 node.js 서버 운영기 - Playnode 2015
 
[NDC17] 왓 스튜디오 서비스파트
[NDC17] 왓 스튜디오 서비스파트[NDC17] 왓 스튜디오 서비스파트
[NDC17] 왓 스튜디오 서비스파트
 

Similar to [121]네이버 효과툰 구현 이야기

Javascript everywhere - Node.js | Devon 2012
Javascript everywhere - Node.js | Devon 2012Javascript everywhere - Node.js | Devon 2012
Javascript everywhere - Node.js | Devon 2012
Daum DNA
 
Front end dev 2016 & beyond
Front end dev 2016 & beyondFront end dev 2016 & beyond
Front end dev 2016 & beyond
Jae Sung Park
 
[132]웨일 브라우저 1년 그리고 미래
[132]웨일 브라우저 1년 그리고 미래[132]웨일 브라우저 1년 그리고 미래
[132]웨일 브라우저 1년 그리고 미래
NAVER D2
 
[DEVIEW 2016] 네이버의 모던 웹 라이브러리 - egjs
[DEVIEW 2016] 네이버의 모던 웹 라이브러리 - egjs[DEVIEW 2016] 네이버의 모던 웹 라이브러리 - egjs
[DEVIEW 2016] 네이버의 모던 웹 라이브러리 - egjs
Jae Sung Park
 
Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유
Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유
Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유
Sang Seok Lim
 
[124] 하이브리드 앱 개발기 김한솔
[124] 하이브리드 앱 개발기 김한솔[124] 하이브리드 앱 개발기 김한솔
[124] 하이브리드 앱 개발기 김한솔
NAVER D2
 
웹 Front-End 실무 이야기
웹 Front-End 실무 이야기웹 Front-End 실무 이야기
웹 Front-End 실무 이야기
JinKwon Lee
 
HTML5/JSON 을 이용해 범용 2D 맵에디터 제작하기
HTML5/JSON 을 이용해 범용 2D 맵에디터 제작하기HTML5/JSON 을 이용해 범용 2D 맵에디터 제작하기
HTML5/JSON 을 이용해 범용 2D 맵에디터 제작하기
Miyu Park
 
[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...
[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...
[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...
JinKwon Lee
 
Hybrid App Platform - HyWAI 3.5
Hybrid App Platform - HyWAI 3.5Hybrid App Platform - HyWAI 3.5
Hybrid App Platform - HyWAI 3.5
Jonathan Jeon
 
웹 소프트웨어 시대의 새로운 롤(role) 모델, 자바스크립트
웹 소프트웨어 시대의 새로운 롤(role) 모델, 자바스크립트웹 소프트웨어 시대의 새로운 롤(role) 모델, 자바스크립트
웹 소프트웨어 시대의 새로운 롤(role) 모델, 자바스크립트
Rhio Kim
 
우리가 몰랐던 크롬 개발자 도구
우리가 몰랐던 크롬 개발자 도구우리가 몰랐던 크롬 개발자 도구
우리가 몰랐던 크롬 개발자 도구
Jae Sung Park
 
NAVER TECH CONCERT_FE2019_빠르게 훑어보는 웹 개발 트렌드
NAVER TECH CONCERT_FE2019_빠르게 훑어보는 웹 개발 트렌드NAVER TECH CONCERT_FE2019_빠르게 훑어보는 웹 개발 트렌드
NAVER TECH CONCERT_FE2019_빠르게 훑어보는 웹 개발 트렌드
NAVER Engineering
 
NAVER의 웹/HTML5환경 대응 현황
NAVER의 웹/HTML5환경 대응 현황NAVER의 웹/HTML5환경 대응 현황
NAVER의 웹/HTML5환경 대응 현황
NAVER Engineering
 
반응형 웹 디자인
반응형 웹 디자인반응형 웹 디자인
반응형 웹 디자인
준극 김
 
01.모바일 프레임워크 이론
01.모바일 프레임워크 이론01.모바일 프레임워크 이론
01.모바일 프레임워크 이론
Hankyo
 
[H3 2012] Bridge over troubled water : make plug-in for Appspresso
[H3 2012] Bridge over troubled water : make plug-in for Appspresso[H3 2012] Bridge over troubled water : make plug-in for Appspresso
[H3 2012] Bridge over troubled water : make plug-in for Appspresso
KTH, 케이티하이텔
 
GDG DevFest Busan 16" Android Nougat Developer's Note
GDG DevFest Busan 16" Android Nougat Developer's NoteGDG DevFest Busan 16" Android Nougat Developer's Note
GDG DevFest Busan 16" Android Nougat Developer's Note
Seok-yong Kim
 
Web app 개발 방법론
Web app 개발 방법론Web app 개발 방법론
Web app 개발 방법론
Sang Seok Lim
 
Adobe Dreamweaver CS5.5 를 이용한 HTML5 개발
Adobe Dreamweaver CS5.5 를 이용한 HTML5 개발Adobe Dreamweaver CS5.5 를 이용한 HTML5 개발
Adobe Dreamweaver CS5.5 를 이용한 HTML5 개발
JongKwang Kim
 

Similar to [121]네이버 효과툰 구현 이야기 (20)

Javascript everywhere - Node.js | Devon 2012
Javascript everywhere - Node.js | Devon 2012Javascript everywhere - Node.js | Devon 2012
Javascript everywhere - Node.js | Devon 2012
 
Front end dev 2016 & beyond
Front end dev 2016 & beyondFront end dev 2016 & beyond
Front end dev 2016 & beyond
 
[132]웨일 브라우저 1년 그리고 미래
[132]웨일 브라우저 1년 그리고 미래[132]웨일 브라우저 1년 그리고 미래
[132]웨일 브라우저 1년 그리고 미래
 
[DEVIEW 2016] 네이버의 모던 웹 라이브러리 - egjs
[DEVIEW 2016] 네이버의 모던 웹 라이브러리 - egjs[DEVIEW 2016] 네이버의 모던 웹 라이브러리 - egjs
[DEVIEW 2016] 네이버의 모던 웹 라이브러리 - egjs
 
Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유
Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유
Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유
 
[124] 하이브리드 앱 개발기 김한솔
[124] 하이브리드 앱 개발기 김한솔[124] 하이브리드 앱 개발기 김한솔
[124] 하이브리드 앱 개발기 김한솔
 
웹 Front-End 실무 이야기
웹 Front-End 실무 이야기웹 Front-End 실무 이야기
웹 Front-End 실무 이야기
 
HTML5/JSON 을 이용해 범용 2D 맵에디터 제작하기
HTML5/JSON 을 이용해 범용 2D 맵에디터 제작하기HTML5/JSON 을 이용해 범용 2D 맵에디터 제작하기
HTML5/JSON 을 이용해 범용 2D 맵에디터 제작하기
 
[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...
[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...
[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...
 
Hybrid App Platform - HyWAI 3.5
Hybrid App Platform - HyWAI 3.5Hybrid App Platform - HyWAI 3.5
Hybrid App Platform - HyWAI 3.5
 
웹 소프트웨어 시대의 새로운 롤(role) 모델, 자바스크립트
웹 소프트웨어 시대의 새로운 롤(role) 모델, 자바스크립트웹 소프트웨어 시대의 새로운 롤(role) 모델, 자바스크립트
웹 소프트웨어 시대의 새로운 롤(role) 모델, 자바스크립트
 
우리가 몰랐던 크롬 개발자 도구
우리가 몰랐던 크롬 개발자 도구우리가 몰랐던 크롬 개발자 도구
우리가 몰랐던 크롬 개발자 도구
 
NAVER TECH CONCERT_FE2019_빠르게 훑어보는 웹 개발 트렌드
NAVER TECH CONCERT_FE2019_빠르게 훑어보는 웹 개발 트렌드NAVER TECH CONCERT_FE2019_빠르게 훑어보는 웹 개발 트렌드
NAVER TECH CONCERT_FE2019_빠르게 훑어보는 웹 개발 트렌드
 
NAVER의 웹/HTML5환경 대응 현황
NAVER의 웹/HTML5환경 대응 현황NAVER의 웹/HTML5환경 대응 현황
NAVER의 웹/HTML5환경 대응 현황
 
반응형 웹 디자인
반응형 웹 디자인반응형 웹 디자인
반응형 웹 디자인
 
01.모바일 프레임워크 이론
01.모바일 프레임워크 이론01.모바일 프레임워크 이론
01.모바일 프레임워크 이론
 
[H3 2012] Bridge over troubled water : make plug-in for Appspresso
[H3 2012] Bridge over troubled water : make plug-in for Appspresso[H3 2012] Bridge over troubled water : make plug-in for Appspresso
[H3 2012] Bridge over troubled water : make plug-in for Appspresso
 
GDG DevFest Busan 16" Android Nougat Developer's Note
GDG DevFest Busan 16" Android Nougat Developer's NoteGDG DevFest Busan 16" Android Nougat Developer's Note
GDG DevFest Busan 16" Android Nougat Developer's Note
 
Web app 개발 방법론
Web app 개발 방법론Web app 개발 방법론
Web app 개발 방법론
 
Adobe Dreamweaver CS5.5 를 이용한 HTML5 개발
Adobe Dreamweaver CS5.5 를 이용한 HTML5 개발Adobe Dreamweaver CS5.5 를 이용한 HTML5 개발
Adobe Dreamweaver CS5.5 를 이용한 HTML5 개발
 

More from NAVER D2

[211] 인공지능이 인공지능 챗봇을 만든다
[211] 인공지능이 인공지능 챗봇을 만든다[211] 인공지능이 인공지능 챗봇을 만든다
[211] 인공지능이 인공지능 챗봇을 만든다
NAVER D2
 
[233] 대형 컨테이너 클러스터에서의 고가용성 Network Load Balancing: Maglev Hashing Scheduler i...
[233] 대형 컨테이너 클러스터에서의 고가용성 Network Load Balancing: Maglev Hashing Scheduler i...[233] 대형 컨테이너 클러스터에서의 고가용성 Network Load Balancing: Maglev Hashing Scheduler i...
[233] 대형 컨테이너 클러스터에서의 고가용성 Network Load Balancing: Maglev Hashing Scheduler i...
NAVER D2
 
[215] Druid로 쉽고 빠르게 데이터 분석하기
[215] Druid로 쉽고 빠르게 데이터 분석하기[215] Druid로 쉽고 빠르게 데이터 분석하기
[215] Druid로 쉽고 빠르게 데이터 분석하기
NAVER D2
 
[245]Papago Internals: 모델분석과 응용기술 개발
[245]Papago Internals: 모델분석과 응용기술 개발[245]Papago Internals: 모델분석과 응용기술 개발
[245]Papago Internals: 모델분석과 응용기술 개발
NAVER D2
 
[236] 스트림 저장소 최적화 이야기: 아파치 드루이드로부터 얻은 교훈
[236] 스트림 저장소 최적화 이야기: 아파치 드루이드로부터 얻은 교훈[236] 스트림 저장소 최적화 이야기: 아파치 드루이드로부터 얻은 교훈
[236] 스트림 저장소 최적화 이야기: 아파치 드루이드로부터 얻은 교훈
NAVER D2
 
[235]Wikipedia-scale Q&A
[235]Wikipedia-scale Q&A[235]Wikipedia-scale Q&A
[235]Wikipedia-scale Q&A
NAVER D2
 
[244]로봇이 현실 세계에 대해 학습하도록 만들기
[244]로봇이 현실 세계에 대해 학습하도록 만들기[244]로봇이 현실 세계에 대해 학습하도록 만들기
[244]로봇이 현실 세계에 대해 학습하도록 만들기
NAVER D2
 
[243] Deep Learning to help student’s Deep Learning
[243] Deep Learning to help student’s Deep Learning[243] Deep Learning to help student’s Deep Learning
[243] Deep Learning to help student’s Deep Learning
NAVER D2
 
[234]Fast & Accurate Data Annotation Pipeline for AI applications
[234]Fast & Accurate Data Annotation Pipeline for AI applications[234]Fast & Accurate Data Annotation Pipeline for AI applications
[234]Fast & Accurate Data Annotation Pipeline for AI applications
NAVER D2
 
Old version: [233]대형 컨테이너 클러스터에서의 고가용성 Network Load Balancing
Old version: [233]대형 컨테이너 클러스터에서의 고가용성 Network Load BalancingOld version: [233]대형 컨테이너 클러스터에서의 고가용성 Network Load Balancing
Old version: [233]대형 컨테이너 클러스터에서의 고가용성 Network Load Balancing
NAVER D2
 
[226]NAVER 광고 deep click prediction: 모델링부터 서빙까지
[226]NAVER 광고 deep click prediction: 모델링부터 서빙까지[226]NAVER 광고 deep click prediction: 모델링부터 서빙까지
[226]NAVER 광고 deep click prediction: 모델링부터 서빙까지
NAVER D2
 
[225]NSML: 머신러닝 플랫폼 서비스하기 & 모델 튜닝 자동화하기
[225]NSML: 머신러닝 플랫폼 서비스하기 & 모델 튜닝 자동화하기[225]NSML: 머신러닝 플랫폼 서비스하기 & 모델 튜닝 자동화하기
[225]NSML: 머신러닝 플랫폼 서비스하기 & 모델 튜닝 자동화하기
NAVER D2
 
[224]네이버 검색과 개인화
[224]네이버 검색과 개인화[224]네이버 검색과 개인화
[224]네이버 검색과 개인화
NAVER D2
 
[216]Search Reliability Engineering (부제: 지진에도 흔들리지 않는 네이버 검색시스템)
[216]Search Reliability Engineering (부제: 지진에도 흔들리지 않는 네이버 검색시스템)[216]Search Reliability Engineering (부제: 지진에도 흔들리지 않는 네이버 검색시스템)
[216]Search Reliability Engineering (부제: 지진에도 흔들리지 않는 네이버 검색시스템)
NAVER D2
 
[214] Ai Serving Platform: 하루 수 억 건의 인퍼런스를 처리하기 위한 고군분투기
[214] Ai Serving Platform: 하루 수 억 건의 인퍼런스를 처리하기 위한 고군분투기[214] Ai Serving Platform: 하루 수 억 건의 인퍼런스를 처리하기 위한 고군분투기
[214] Ai Serving Platform: 하루 수 억 건의 인퍼런스를 처리하기 위한 고군분투기
NAVER D2
 
[213] Fashion Visual Search
[213] Fashion Visual Search[213] Fashion Visual Search
[213] Fashion Visual Search
NAVER D2
 
[232] TensorRT를 활용한 딥러닝 Inference 최적화
[232] TensorRT를 활용한 딥러닝 Inference 최적화[232] TensorRT를 활용한 딥러닝 Inference 최적화
[232] TensorRT를 활용한 딥러닝 Inference 최적화
NAVER D2
 
[242]컴퓨터 비전을 이용한 실내 지도 자동 업데이트 방법: 딥러닝을 통한 POI 변화 탐지
[242]컴퓨터 비전을 이용한 실내 지도 자동 업데이트 방법: 딥러닝을 통한 POI 변화 탐지[242]컴퓨터 비전을 이용한 실내 지도 자동 업데이트 방법: 딥러닝을 통한 POI 변화 탐지
[242]컴퓨터 비전을 이용한 실내 지도 자동 업데이트 방법: 딥러닝을 통한 POI 변화 탐지
NAVER D2
 
[212]C3, 데이터 처리에서 서빙까지 가능한 하둡 클러스터
[212]C3, 데이터 처리에서 서빙까지 가능한 하둡 클러스터[212]C3, 데이터 처리에서 서빙까지 가능한 하둡 클러스터
[212]C3, 데이터 처리에서 서빙까지 가능한 하둡 클러스터
NAVER D2
 
[223]기계독해 QA: 검색인가, NLP인가?
[223]기계독해 QA: 검색인가, NLP인가?[223]기계독해 QA: 검색인가, NLP인가?
[223]기계독해 QA: 검색인가, NLP인가?
NAVER D2
 

More from NAVER D2 (20)

[211] 인공지능이 인공지능 챗봇을 만든다
[211] 인공지능이 인공지능 챗봇을 만든다[211] 인공지능이 인공지능 챗봇을 만든다
[211] 인공지능이 인공지능 챗봇을 만든다
 
[233] 대형 컨테이너 클러스터에서의 고가용성 Network Load Balancing: Maglev Hashing Scheduler i...
[233] 대형 컨테이너 클러스터에서의 고가용성 Network Load Balancing: Maglev Hashing Scheduler i...[233] 대형 컨테이너 클러스터에서의 고가용성 Network Load Balancing: Maglev Hashing Scheduler i...
[233] 대형 컨테이너 클러스터에서의 고가용성 Network Load Balancing: Maglev Hashing Scheduler i...
 
[215] Druid로 쉽고 빠르게 데이터 분석하기
[215] Druid로 쉽고 빠르게 데이터 분석하기[215] Druid로 쉽고 빠르게 데이터 분석하기
[215] Druid로 쉽고 빠르게 데이터 분석하기
 
[245]Papago Internals: 모델분석과 응용기술 개발
[245]Papago Internals: 모델분석과 응용기술 개발[245]Papago Internals: 모델분석과 응용기술 개발
[245]Papago Internals: 모델분석과 응용기술 개발
 
[236] 스트림 저장소 최적화 이야기: 아파치 드루이드로부터 얻은 교훈
[236] 스트림 저장소 최적화 이야기: 아파치 드루이드로부터 얻은 교훈[236] 스트림 저장소 최적화 이야기: 아파치 드루이드로부터 얻은 교훈
[236] 스트림 저장소 최적화 이야기: 아파치 드루이드로부터 얻은 교훈
 
[235]Wikipedia-scale Q&A
[235]Wikipedia-scale Q&A[235]Wikipedia-scale Q&A
[235]Wikipedia-scale Q&A
 
[244]로봇이 현실 세계에 대해 학습하도록 만들기
[244]로봇이 현실 세계에 대해 학습하도록 만들기[244]로봇이 현실 세계에 대해 학습하도록 만들기
[244]로봇이 현실 세계에 대해 학습하도록 만들기
 
[243] Deep Learning to help student’s Deep Learning
[243] Deep Learning to help student’s Deep Learning[243] Deep Learning to help student’s Deep Learning
[243] Deep Learning to help student’s Deep Learning
 
[234]Fast & Accurate Data Annotation Pipeline for AI applications
[234]Fast & Accurate Data Annotation Pipeline for AI applications[234]Fast & Accurate Data Annotation Pipeline for AI applications
[234]Fast & Accurate Data Annotation Pipeline for AI applications
 
Old version: [233]대형 컨테이너 클러스터에서의 고가용성 Network Load Balancing
Old version: [233]대형 컨테이너 클러스터에서의 고가용성 Network Load BalancingOld version: [233]대형 컨테이너 클러스터에서의 고가용성 Network Load Balancing
Old version: [233]대형 컨테이너 클러스터에서의 고가용성 Network Load Balancing
 
[226]NAVER 광고 deep click prediction: 모델링부터 서빙까지
[226]NAVER 광고 deep click prediction: 모델링부터 서빙까지[226]NAVER 광고 deep click prediction: 모델링부터 서빙까지
[226]NAVER 광고 deep click prediction: 모델링부터 서빙까지
 
[225]NSML: 머신러닝 플랫폼 서비스하기 & 모델 튜닝 자동화하기
[225]NSML: 머신러닝 플랫폼 서비스하기 & 모델 튜닝 자동화하기[225]NSML: 머신러닝 플랫폼 서비스하기 & 모델 튜닝 자동화하기
[225]NSML: 머신러닝 플랫폼 서비스하기 & 모델 튜닝 자동화하기
 
[224]네이버 검색과 개인화
[224]네이버 검색과 개인화[224]네이버 검색과 개인화
[224]네이버 검색과 개인화
 
[216]Search Reliability Engineering (부제: 지진에도 흔들리지 않는 네이버 검색시스템)
[216]Search Reliability Engineering (부제: 지진에도 흔들리지 않는 네이버 검색시스템)[216]Search Reliability Engineering (부제: 지진에도 흔들리지 않는 네이버 검색시스템)
[216]Search Reliability Engineering (부제: 지진에도 흔들리지 않는 네이버 검색시스템)
 
[214] Ai Serving Platform: 하루 수 억 건의 인퍼런스를 처리하기 위한 고군분투기
[214] Ai Serving Platform: 하루 수 억 건의 인퍼런스를 처리하기 위한 고군분투기[214] Ai Serving Platform: 하루 수 억 건의 인퍼런스를 처리하기 위한 고군분투기
[214] Ai Serving Platform: 하루 수 억 건의 인퍼런스를 처리하기 위한 고군분투기
 
[213] Fashion Visual Search
[213] Fashion Visual Search[213] Fashion Visual Search
[213] Fashion Visual Search
 
[232] TensorRT를 활용한 딥러닝 Inference 최적화
[232] TensorRT를 활용한 딥러닝 Inference 최적화[232] TensorRT를 활용한 딥러닝 Inference 최적화
[232] TensorRT를 활용한 딥러닝 Inference 최적화
 
[242]컴퓨터 비전을 이용한 실내 지도 자동 업데이트 방법: 딥러닝을 통한 POI 변화 탐지
[242]컴퓨터 비전을 이용한 실내 지도 자동 업데이트 방법: 딥러닝을 통한 POI 변화 탐지[242]컴퓨터 비전을 이용한 실내 지도 자동 업데이트 방법: 딥러닝을 통한 POI 변화 탐지
[242]컴퓨터 비전을 이용한 실내 지도 자동 업데이트 방법: 딥러닝을 통한 POI 변화 탐지
 
[212]C3, 데이터 처리에서 서빙까지 가능한 하둡 클러스터
[212]C3, 데이터 처리에서 서빙까지 가능한 하둡 클러스터[212]C3, 데이터 처리에서 서빙까지 가능한 하둡 클러스터
[212]C3, 데이터 처리에서 서빙까지 가능한 하둡 클러스터
 
[223]기계독해 QA: 검색인가, NLP인가?
[223]기계독해 QA: 검색인가, NLP인가?[223]기계독해 QA: 검색인가, NLP인가?
[223]기계독해 QA: 검색인가, NLP인가?
 

[121]네이버 효과툰 구현 이야기

  • 4. contents 1. 왜 웹 기술로 만들었나? 2. 어떤 Angular.js 구조로 만들어졌을까? 3. 성능과 관련 있는 Angular.js Things 4. 그밖에 알아두면 좋은 Angular.js Things 5. PSD 파싱은 어떻게 했을까? 6. 테스트 자동화는? 7. 마치며
  • 7. 1.1 왜 웹 기술로 만들어졌을까? • 기획의 최종 목표는 웹 서비스로 제공. • 그렇지만 웹툰 작가님들이 Offline 으로 작업 가능 해야함. • 작가님들 PC는 대부분 Windows 이지만 Mac도 있음. • 두가지 방법이 있음. OS별 Native Application Platform-Neutral WebApp Why Platform-Neutral
  • 8. 1.2 어떤 기술들이 사용됐나?
  • 9. 1.3 왜 Angular.js를 사용 했나? Why Angular.js 1. 간단 명료한 MVC 패턴 2. 적은 코드량으로 개발 3. PubSub 시스템 4. 다국어 지원 5. 많은 오픈 라이브러리 6. 테스트 작성 용이 7. 지속적인 업데이트
  • 11. 2.1 복잡한 Angular.js 구조 Flexible 1. Angular.js는 DOM에 Controller를 자유롭게 연결 할 수 있고, 2. ng-include를 이용하여 View를 짜집기 할 수 있으며, 3. Directive를 이용해 UI 컴포넌트를 만들수도 있고, 4. Helper로 만들 수도 있다.
  • 12. 2.1 복잡한 Angular.js 구조 Complicated
  • 13. Views Directives Controllers OtherCtrl.js ddd.js ddd.html aaa.js aaa.html 2.2 쉽고 간결한 Angular.js 구조 Simple Angular.js 는 다행스럽게도 다음의 구조도 가능하다 Views Directives Controllers MainCtrl.js aaa.js aaa.html bbb.js bbb.js ccc.js ccc.js
  • 14. 2.2 쉽고 간결한 Angular.js 구조 머리 - Controller 다리 - Directive 팔, 몸통 - Directives Body Structure Pattern
  • 15. 2.2 쉽고 간결한 Angular.js 구조 Define Directives effects pages content layers applied-effects
  • 16. 2.2 쉽고 간결한 Angular.js 구조 Attention 여기서 주의할 점은, 1. 한 페이지의 Main Controller는 하나이고, 2. ng-include는 Directive 내에서만 꼭 필요할 때만 사용하며, 3. Directive와 View는 1:1 매칭한다. 4. Directive의 역할이 커질수록 Service와 Factory를 이용하고, 5. 필요에 따라 사람의 소뇌 성격의 Controller가 추가 될 수 있다.
  • 17. 2.3 외부 패키지 관리 방법 Package Managing Rule • Bower뿐만 아니라 NPM을 이용해서 모듈을 설치 가능 • 예를 들어 underscore.js 를 설치하려고 했을 때, Bower를 이용할지, NPM을 이용할지 고민해야 한다. 1. 순위 : Bower 이용 2. 순위 : NPM 이용 • 이유 : 최대한 Front-end모듈로 작성을 해야 추후 웹서비스로 만들때, NPM을 이용한 모듈만 Back-end로 작성하여 AJAX 통신하면 기존 코드에서 큰 수정 없이 작동 가능하기 때문이다.
  • 19. 3.1 Two-way binding 전/후 이벤트 처리 전/후 이벤트 처리 전/후 이벤트 처리 $watch $watch $watch 너무 느리다. Dirty Checking 주의 http://goo.gl/0N5YrB
  • 20. 3.1 Two-way binding Event를 활용하자 $emit(‘content.selectedLayerMoved’) Controller.$on(‘content.selectedLayerMoved’) $broadcast(‘layers.syncLayers’) $broadcast(‘pages.renderSelectedPage’) $on(‘layers.syncLayers’)$on(‘pages.renderSelectedPage’)
  • 21. 3.2 ng-route 메모리 부족 메모리 부족 /index.html#/preview
  • 22. 3.2 ng-route 메모리 부족 ng-route를 거치지 않고, 직접 html file에 접근하여 해결 /preview.html
  • 23. 3.3 Directives in Directive Nodes Listeners Used JS Heap Nested Directive는 명시적으로 $destroy 호출 해야함
  • 27. $scope 의 변수가 반영되는 조건은, 1. DOM 이벤트(ng-click, ng-mousedown, …)가 발생 2. $http와 $resource에서 응답이 돌아왔을 경우 3. $location에서 URL을 변경한 후 4. $timeout이벤트가 발생한 후 5. $scope.$apply()나 $scope.$digest() 호출 4.1 외부 모듈 사용하여 개발할 때, jQuery나 Node.js 또는 Custom Event 를 이용할 시, Angular.js의 $scope 내의 값이 변하지 않는다. in Controller : $scope.$safeApply(); in Directive : scope.$root.$safeApply();
  • 28. Directive 로 컴포넌트를 만들때 initialize()를 DOM과 같이 할 때가 있다. 하지만, Directive 에는 DOM Ready Event가 없다. 4.2 Directive DOM Ready DOM 렌더링 완료 Event는 $timeout() 메소드로 대체 할 수 있다. 그렇지만 $timeout() 보단 setTimeout() 을 이용하자. $timeout() 을 이용하면, 불필요한 Dirty Checking을 수행하여 성능 저하를 초 래 할 수 있다.
  • 29. 4.3 Undo/Redo Editor 작업을 총괄하는 하나의 Object(workspace) 이용, History 추가시 Object Snapshot 을 저장 memento-promise : http://goo.gl/ZQwBY3
  • 31. 5.1 psd.js http://meltingice.github.io/psd.js 한글 레이어 이름 깨짐 긴 Height 파싱시 꺼짐
  • 32. 5.2 python psd-tools pypi.python.org/pypi/psd-tools 한글 레이어 이름 해결 긴 Height PSD도 메모리 문제 없음 너무 긴 PSD는 자동 나누기 기능 개발
  • 35. 6.2 End to End Test http://angular.github.io/protractor
  • 36. 6.2 End to End Test https://github.com/nwjs/nw.js/wiki/chromedriver 1. 셀레니움 다운로드 2. http://dl.nwjs.io/ chromedriver 다운로드 3. nw or nw.exe(win), or node-webkit.app(osx) 다운로드 4. 모두 같은 디렉토리에 넣음 5. java -jar selenium-server-standalone-VE R.jar -Dwebdriver.chrome.driver=./chromedri ver 6. npm install wd (프로젝트 폴더)
  • 37. 6.2 End to End Test 테스트 코드 작성 어려움
  • 38. 6.2 End to End Test UI 개발할 때처럼 화면을 보면서 테스트 코드를 작성 할 수는 없을까?
  • 39. 6.2 End to End Test
  • 44. 이전에 있었던 효과툰 비슷한 것들 Adobe Flash™ PC 전용
  • 46. 세 가지 이슈 스크롤 이벤트 연속성 사운드 MSIE 그림출처: GRPH3B18 CC BY-SA 3.0 via Wikimedia Commons
  • 48. 1.1 스크롤 이벤트 연속성: iOS Safari UIWebView WKWebView iOS7 X X N / A iOS8 O X O
  • 49. 1.1 스크롤 이벤트 연속성: iOS <div style=“ overflow: auto; ”></div> <div style=“ overflow: auto; -webkit-overflow-scrolling: touch ”></div> 스크롤 이벤트 연속성 O 스크롤 가속도 X 스크롤 이벤트 연속성 X 스크롤 가속도 O
  • 50. 1.1 스크롤 이벤트 연속성: iOS document.body.addEventListener(“touchmove”, function () { console.log(document.body.scrollTop); }); touchmove 이벤트는 연속적으로 발생하기는 하지만 이 상태에서 갱신된 실제 스크롤 위치를 얻을 수는 없다.
  • 51. 1.1 스크롤 이벤트 연속성: iOS setInterval(function () { console.log(document.body.scrollTop); }); 사용자가 스크롤 하는 동안 타이머를 포함한 자바스크립트 동작이 멈추므로 setInterval 이나 requestAnimationFrame 같은 타이머 함수로도 연속적인 스크롤 위치 정보를 얻을 수는 없다.
  • 52. 1.1 스크롤 이벤트 연속성: iOS User Agent String 네이버앱 Mozilla/5.0 (iPhone; CPU iPhone OS 8_1_2 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Mobile/12B440 NAVER(inapp; search; 390; 6.0.2) 라인 Mozilla/5.0 (iPhone; CPU iPhone OS 8_1_2 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Mobile/12B440 Safari Line/5.1.1 카카오톡 Mozilla/5.0 (iPhone; CPU iPhone OS 8_1_2 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Mobile/12B440 KAKAOTALK 페이스북 Mozilla/5.0 (iPhone; CPU iPhone OS 8_1_2 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Mobile/12B440 [FBAN/FBIOS;FBAV/28.0.0.10.10;FBBV/8930087;FBDV/iPhone7,2;FBMD/iPhone;FBSN/iPhone OS;FBSV/8.1.2;FBSS/2; FBCR/SKTelecom;FBID/phone;FBLC/ko_KR;FBOP/5] UA string 은 UIWebView 와 WKWebView 가 완전히 같다. Tip. iOS8 WKWebView 구분하는 방법:
  • 53. 1.1 스크롤 이벤트 연속성: iOS iOS8 WKWebView iOS8 UIWebView iOS7 UIWebView WebGL3D O O X CSS Shapes O O X Indexed DB O X X HTML5 Coverage Score 440/555 427/555 410/555 UA string 으로 WebView 가려낸 뒤 indexedDB 지원 여부 확인 Tip. iOS8 WKWebView 구분하는 방법:
  • 54. 1.2 스크롤 이벤트 연속성: Android 단말기 OS 버전 실행환경 스크롤 이벤트 연속성 브라우저 엔진 갤럭시 S3 4.1.2 S Browser Good AppleWebKit/534.30 Chrome Good AppleWebKit/537.36 NAVER App. Good AppleWebKit/534.30 갤럭시 S4 mini 4.2 S Browser Bad Chrome/18.0.1025.308 Chrome Good Chrome/42.0.2311.111 NAVER App. Good AppleWebKit/534.30 갤럭시 S4 4.3 S Browser Good Chrome/28.0.1500.94 Chrome Good Chrome/28.0.1500.94 NAVER App. Good AppleWebKit/534.30 갤럭시 S5 4.4.2 S Browser Bad Chrome/28.0.1500.94 Chrome Good Chrome/42.0.2311.111 NAVER App. Good Chrome/30.0.0.0 갤럭시 S4 4.4.2 S Browser Bad Chrome/28.0.1500.94 Chrome Good Chrome/42.0.2311.111 NAVER App. Good Chrome/30.0.0.0 단말기 OS 버전 실행환경 스크롤 이벤트 연속성 브라우저 엔진 갤럭시 S4 mini 4.4.4 S Browser Bad Chrome/28.0.1500.94 Chrome Good Chrome/42.0.2311.111 NAVER App. Good Chrome/33.0.0.0 갤럭시 노트4 4.4.4 S Browser Good Chrome/34.0.1847.76 Chrome Good Chrome/42.0.2311.111 NAVER App. Good Chrome/33.0.0.0 갤럭시 노트4 5.0.1 S Browser Bad Chrome/34.0.1847.76 SamsungBrowser/2.1 Chrome Good Chrome/39.0.2171.93 NAVER App. Good Chrome/37.0.0.0 갤럭시 S6 5.0.2 S Browser Good Chrome/38.0.2125.102 Chrome Good Chrome/39.0.2171.93 NAVER App. Good Chrome/37.0.0.0 Android 4.1+ : 일부 삼성 브라우저를 제외하고 연속적인 스크롤 이벤트 제공
  • 55. 1.2 스크롤 이벤트 연속성: Android 예외 #1. 1. 스크롤 이벤트는 연속적이지만 화면 갱신이 느린 경우 2. 스크롤 이벤트에서 스타일 변화를 주면 브라우저 크래시 되는 경우 (Android 4.1.2 Chrome/42.0.2311.111) Android 4.1.2 WebView (NAVER App), Chrome, S-Browser Android 4.2.0 WebView (NAVER App)
  • 56. 1.2 스크롤 이벤트 연속성: Android 예외 #2. 스크립트 스크롤 (iscroll.js) 영역의 높이가 긴 경우 브라우저 앱 충돌 발생 (Fatal signal 11 SIGSEGV) Android 4.4.2 WebView (NAVER App. Chrome/30.0.0.0)
  • 57. 1.3 스크롤 이벤트 특성 Event Type Sync/Async Trusted event target types DOM interface scroll Async Document, Element UIEvent wheel Async Element WheelEvent mousemove Sync Element MouseEvent click Sync Element MouseEvent load Async Window, Document,Element Event http://www.w3.org/TR/DOM-Level-3-Events/ scroll 이벤트 자체가 비동기적 이벤트
  • 58. 1.4 스크립트 스크롤의 활용 scroll 이벤트가 없으면 만들면 되지: touchmove 이벤트를 이용해 마치 스크롤 하는 것 같은 느낌을 준다 <div style=“overflow: hidden;”> <div style=“transform: translate3d(0, -100px, 0);”> … </div> </div> JMC, iscroll.js, ScrollMagic, Skrollr …
  • 59. 1.4 스크립트 스크롤의 활용 그런데, 효과툰 한 편의 콘텐트를 스크립트 스크롤 영역에 넣으면 … Size: 638 x 72049px Memory: 175Mb
  • 60. 1.4 스크립트 스크롤의 활용 개선 #1. 하나의 거대한 <div> 대신 해당 구간의 작은 <div> 를 움직이자 Size: 360x40201 Memory: 55.2Mb Size: 360x640 Memory: 900Kb
  • 61. 1.4 스크립트 스크롤의 활용 개선 #2. 활성 상태로 만들 페이지 구간을 현재 페이지 기준 전후 일정 개수에서 현재 스크롤 위치 기준 화면 크기만큼 전후 구간에 포함되는 페이지로
  • 62. 1.4 스크립트 스크롤의 활용 Q. 화면 안에 들고 날 때마다 display 속성을 변경 한다는 말인가요? A. 네 Q. Display 속성을 변경하면 Layout (Reflow) 발생할 텐데요? A. 알아요 Q. 그걸 아는 사람이 그래? A.
  • 63. 1.4 스크립트 스크롤의 활용 그대로 두면 그래픽 레이어 과다로 메모리 문제 발생 à display 속성 제어가 성능 저해 요소지만 유일한 해법 구간 안에 존재하는 레이어 수가 한정되어 있어서 Reflow 비용이 비교적 적은 편이라 가능한 것이기도 display: none 으로 레이어 제거 비용보다는 display: block 으로 레이어 생성 비용이 더 큼.
  • 64. 1.4 스크립트 스크롤의 활용 레이어의 생성 비용은 크기에 비례: 적당한 크기로 나누어 줄 필요가 있다 iOS Safari 기준 최대 이미지 크기 가로 x 세로 <= 1024 x 1024 x 3 https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/ CreatingContentforSafarioniPhone/CreatingContentforSafarioniPhone.html
  • 65. 1.4 스크립트 스크롤의 활용 - 네이버 효과툰 저작툴에서 [페이지 나누기] 기능을 제공 - 일정 크기 이상의 이미지는 자동으로 분할: 정해진 크기 단위가 아니라 컷 사이 여백을 고려한 자연스러운 이미지로 분할 X O
  • 66. 1.4 스크립트 스크롤의 활용 개선 #3. scroll 이벤트: 스크롤에 따라 활성 구간에 들어가는 페이지만 이미지 로딩 = <img> src 지정하는 순간 Paint (Image Decode) 발생 scrollEnd 이벤트 CustomEvent: 스크롤이 잠시 멈췄을 때 = 사용자가 현재 로딩 된 구간을 보는 동안 다음 구간의 이미지를 불러오기 (pre-load) + 미리 Image Decode 해두기 (pre-paint)
  • 67. 1.4 스크립트 스크롤의 활용 개선 #3. Pre-paint 사용 전 Pre-paint 사용 후 스크롤 멈춘 시점들 스크롤 시작한 시점들
  • 68. 1.4 스크립트 스크롤의 활용 개선 #4. CSS3 Transform 사용시 GPU 가속을 받는 속성을 사용한다 scale, opacity 사용시에도 주의! transform: scale(x,y) à transform: scale3d(x,y,0) opacity: n à opacity: n; transform: translateZ(0) CSS3 Transform 속성이 변화할 때 Layout 이 계속 발생한다면 GPU 가속 여부 확인!
  • 69. 1.4 스크립트 스크롤의 활용 스크롤 스크립트 영역 바깥에 이미 HTML 요소가 들어있으면? iscroll footer - 스크립트 스크롤 영역 끝까지 도달하면 비활성화 Iscroll.on(“scroll”, function () { if (Iscroll.y === Iscroll.maxScrollY) { Iscroll.disable(); } }); window.addEventListener(“scroll”, function () { if (window.scrollY === 0) { Iscroll.enable(); } }); - 네이티브 스크롤 위치가 문서 처음이면 활성화
  • 71. 2.1 사운드 : 요구사항 배경음 네이버 웹툰 : 악의는없다 2화 (금요일 연재) http://m.comic.naver.com/webtoon/detail.nhn?titleId=657522&no=2 효과음 효과음
  • 72. 2.2 HTML5 Audio의 한계 HTML5 Audio (Element) 다양한 환경에서 쉽게 사용할 수 있지만 동시에 여러 리소스 재생은 불가능 https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/ Device-SpecificConsiderations/Device-SpecificConsiderations.html mediaGroup (controller) 속성을 이용해 동시 재생하는 방법이 있지만 같은 그룹 내의 사운드를 개별적으로 재생할 수는 없음. https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/ ControllingMediaWithJavaScript/ControllingMediaWithJavaScript.html
  • 73. 2.2 HTML5 WebAudio API의 활용 WebAudio API 웹 어플리케이션에서 오디오 데이터를 Processing/Synthesizing 할 수 있는 고수준 API = 동시에 여러 사운드 리소스 재생 가능 http://www.slideshare.net/deview/2-hello-world-web-aaudioapi Source GainNode Destination AudioContext var context = new AudioContext(); var gainNode = context.createGain(); var source = context.createBufferSource(); source.buffer = ArrayBuffer; gainNode.gain.value = 1.0; // volume source.connect(gainNode); gainNode.connect(context.destination); source.noteOn(0); // play
  • 74. 2.2 HTML5 WebAudio API의 활용 WebAudio API available on: https://gist.github.com/NielsLeenheer/4daa6a9ce7f4a0f4733d http://caniuse.com/#feat=audio-api MSIE Edge, FireFox 25+, Chrome 10+ iOS 6+, Android 5.x+ (Chromium 40+) 갤럭시 S4 삼성 브라우저 1.5 (Chromium 28) Android 4.3 / 4.4.2 / 4.4.4 / 5.0.1 +
  • 75. 2.2 HTML5 WebAudio API의 활용 WebAudio API 가 제공되기는 하는데… https://code.google.com/p/chromium/issues/detail?id=393436 https://code.google.com/p/chromium/issues/detail?id=176902 갤럭시 S4 삼성 브라우저 1.5 (Chromium 28) Android 4.3 / 4.4.2 / 4.4.4 / 5.0.1 - Web Audio API crashes tab when decodeAudioData is called with a large ( > 15MB) arraybuffer In Chrome Version: 24.0.1312.57 m - decodeAudioData crashes confirmed on Android 4.2.2 chrome v31~43 may be some buggy ArrayBuffer data ? but it should crash the app anyhow.
  • 76. 2.3 자동 재생 문제 iOS 명시적인 사용자 액션에 의해서만 사운드 재생이 가능함. On iOS, the Web AudioAPI requires sounds to be triggered from an explicit user action. https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/ PlayingandSynthesizingSounds/PlayingandSynthesizingSounds.html http://paulbakaus.com/tutorials/html5/web-audio-on-ios/ 단, 한 번 사용자 액션에 의해 재생을 하고나면 그 이후로는 프로그램적으로 재생 가능 As soon as the Web Audio context is “unmuted”, it will stay that way for the entire session, and every other action won’t require a user event.
  • 77. 2.3 자동 재생 문제 iOS http://paulbakaus.com/tutorials/html5/web-audio-on-ios/ window.addEventListener('touchstart', function() { //  create  empty  buffer var buffer  = myContext.createBuffer(1, 1, 22050); var source  = myContext.createBufferSource(); source.buffer  = buffer; //  connect  to  output  (your  speakers) source.connect(myContext.destination); //  play  the  file source.noteOn(0); }, false); 한 번 사용자 액션이 있을 때 임의의 빈 사운드를 재생해두면 그 이후로는 자유롭게 사운드를 재생할 수 있다.
  • 78. 2.3 자동 재생 문제 http://trac.webkit.org/changeset/108831 Android 일단 사운드가 로드되면 프로그램적으로 자동 재생이 가능함 (Webkit 528+) All restrictions are removed in the first successful load() or play() call. 단, 갤럭시 S4 Android 4.3 갤럭시 노트4 Android 4.4.4 삼성 브라우저에서는 자동 재생 불가
  • 79. 2.4 다른 음악앱 재생이 멈추는 경우 http://lab.laziel.com/when-webaudio-stops-music/ WebAudio API var context = new AudioContext(); var gainNode = context.createGain(); var source = context.createBufferSource(); source.buffer = ArrayBuffer; gainNode.gain.value = 1.0; // volume source.connect(gainNode); gainNode.connect(context.destination); source.noteOn(0); // play 이 시점에 재생중이던 다른 음악앱 재생이 중단된다. 그러므로 .createGain() 은 실제로 사운드 재생하기 직전에 하는 것이 좋다
  • 81. 3.1 MSIE 대응의 중요성 40.53% IE8 + IE9: http://www.acecounter.com/www2/education/trendReportDetail.amz?rno=95
  • 82. 3.2 CSS3 Transform in IE -ms-transform 속성으로 translateX, translate 를 포함해서 rotate, scale … 등 2D transform 사용 가능. àtranslate3d(), scale3d() 등 3D 속성은 translateX, translateY 등 2D 속성으로 변환해서 사용 IE9 DXImageTransform.Microsoft.Matrix 필터를 사용해야 한다 설마하니 2015년에도 이걸 쓰게 될 줄이야 IE8
  • 83. 3.2 CSS3 Transform in IE https://msdn.microsoft.com/en-us/library/ms533014(v=vs.85).aspx - translateX, translateY 는 top, left 속성 제어 - scale, rotate 는 Matrix 필터 IE8 var scale = 3, degrees = 50; var radian = (degrees - 360) * Math.PI / 180; // degree to radian var cos = Math.cos(radian), sin = Math.sin(radian); matrix.scale = parseFloat(scale); matrix.rotate = {M11: cos, M12: -sin, M21: sin, M22: cos}; var matrixStr = ['M11=' + matrix.rotate.M11 * matrix.scale, 'M12=' + matrix.rotate.M12 * matrix.scale, 'M21=' + matrix.rotate.M21 * matrix.scale, 'M22=' + matrix.rotate.M22 * matrix.scale].join(','); element.style.filter = 'progid:DXImageTransform.Microsoft.Matrix(' + matrixStr + ')’;
  • 84. 3.2 CSS3 Transform in IE http://blogs.msdn.com/b/ie/archive/2008/09/08/microsoft-css-vendor-extensions.aspx - Opacity 는 Alpha 필터 IE8 element.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(Opacity=50)’; - 투명 PNG 이미지는 AlphaImageLoader 필터 element.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”img.png")'; 이 모든 필터들은 띄어쓰기로 중첩 지정 가능
  • 85. 3.2 CSS3 Transform in IE AlphaImageLoader 필터 사용시 주의사항 - AlphaImageLoader 필터는 모든 필터에 앞서 가장 먼저 지정되어야 한다 - AlphaImageLoader 필터와Alpha 필터를 동시 지정시 렌더링 오류 발생 할 수 있으므로 HTML 마크업을 분리하여 지정해야 한다 IE8 <div style=“filter:Alpha”> <div style=“filter:AlphaImageLoader”></div> </div>
  • 86. 3.2 CSS3 Transform in IE In Internet Explorer 7, 8, 9, non-static child elements do not inherit the opacity of the parent. IE8 http://www.jacklmoore.com/notes/ie-opacity-inheritance/ <div style=“filter:Alpha”> <div style=“position: static”></div> </div>
  • 87. 3.2 CSS3 Transform in IE CSS3 transform 을 적용한 엘리먼트가 부모 엘리먼트 overflow: hidden 무시하는 현상 transform 엘리먼트에 opacity 속성 부여로 해결 @media all and (-ms-high-contrast:none) { *::-ms-backdrop, .trasformed-element { opacity: 0.99; } } IE11 @ Windows 8.1
  • 88. 3.2 CSS3 Animation in IE - setInterval() 타이머 함수로 대체 - @-webkit-keyframe {} 설정을 CSS 파일에 선언한 뒤 자바스크립트 정규식으로 분석해서 유사한 동작으로 변환 è 하나의 애니메이션 설정 파일로 여러 환경 동일하게 대응 가능 IE8 ~ IE9
  • 90. 기술의 역할: 가치의 상승, 비용의 감소 가치는 더하고, 비용을 줄여서 더 많은 가능성을 만들어 내기 위한 노력 비용 가치
  • 91. Q&A