YouTube 모바일 웹페이지에서는 동영상이 자동으로 재생된다?

2016.07.09 13:08

모바일 사파리나 크롬 모바일과 같은 모바일 브라우저에서는 동영상이 자동으로 재생되지 않습니다. autoplay 속성을 사용하거나 JavaScript 함수를 이용해서 자동으로 재생시킬 수 없습니다. 이것은 데이터 네트워크에서 사용자가 의도하지 않게 고용량의 동영상을 시청할 때 발생할 수 있는 비용을 막고자 함입니다. (참고) 결과적으로 클릭과 같은 사용자의 행동이 있어야만 동영상이 재생됩니다.


그런데 우연히 유튜브 모바일 웹에서는 자동으로 동영상이 재생된다는 이야기를 들었습니다. 저 또한 모바일 웹에서 자동으로 동영상을 재생시키려다 포기한 적이 있어 그 방법이 궁금해서 잠시 살펴봤는데, 결론은 자동으로 재생되는 것 처럼 보인다는 것입니다.


자동으로 재생되는 것처럼 보이는 이유는 유튜브 모바일 웹이 Single Page Application (SPA) 이기 때문입니다. 첫페이지에서 동영상을 클릭하면 마치 페이지가 이동하는 것처럼 보이지만 실제로는 페이지의 모습이 다른 형태로 변경되는 것을 발견했습니다. 페이지 이동이 아니니 사용자가 동영상 목록에서 특정 동영상을 클릭했을 때 페이지의 모습을 바꾸고 동영상을 바로 재생시킬 수가 있는 것입니다. 시청하던 동영상의 URL을 복사하여 새로운 탭에서 붙여 넣고 유튜브 사이트로 접근하면 동영상이 자동으로 재생하지 않는 것을 알 수 있습니다. 만약 자동재생이 가능했다면 동영상의 URL로 직접 접근하더라도 자동으로 동영상이 재생되어야 할 것입니다.


개발자 도구의 element나 network, timeline 탭을 열고 페이지를 사용해보시면 금방 확인할 수 있습니다.


nundefined ETC autoplay, Chrome, mobile, mobile safari, YouTube, 동영상, 동영상 자동재생, 모바일, 모바일 사파리, 유튜브, 자동재생, 크롬

  1. Blog Icon
    de

    자동재생 되는데요??유튜브 캐시 재거하고 사파리에서도 띄어보고 먼가 다른 방법으로 구현한거같아요

  2. Blog Icon
    de

    아모바일에서 맞네여 흐음 난감하네요 모바일에서 채팅 푸쉬 알람 소리로 구현해야하는데 ㅜ

DevTools in 2016: Accelerate your workflow 요약

2016.06.06 01:13

DevTools에 새롭게 추가된 기능에 대한 세션입니다.


- 새로운 기능은 chrome canary 버전에서 chrome://flags 에서 Enable Developer Tools experiments를 활성화해야 사용할 수 있음

- Authoring

    - Device mode

        - Mobile first를 먼저 하길 권장. 이에 맞춰 개선했음

        - responsive design을 쉽게 확인하도록 다양한 사이즈를 쉽게 선택해서 볼 수 있음

        - 디바이스 회전 아이콘을 클릭하면 키보드 노출 화면도 확인 가능

        - settings - show the device frame 을 선택하면 기기의 프레임을 보여줌. 

        - 스크린샷 촬영 가능

        - 기기를 추가할 수 있고

        - device pixel ratio 지정 가능

        - network throttling 설정 가능. 네트워크 패널에 있는 것과 동일

        - 줌 레벨을 낮추면 4K 모니터에서도 어떻게 보이는지 확인 가능

        - 랩탑의 디바이스 타입 설정 가능 (터치 유무)

        - show media queries를 선택하면 media query에 지정된 너비를 선택해서 볼 수 있음

    - color

        - css variable 사용 가능

        - 클래스를 설정해서 클래스 선택에 따라 스타일이 달라지는 모습을 확인할 수 있음

    - animation

        - 새로운 bezier curve editor

        - animation inspector

    - devtools의 기능을 쉽게 찾고 싶을 때

        - sublime text edtor에서 처럼 command + shift + p 를 누르고 키워드를 입력해서 기능을 쉽게 찾을 수 있음

- 새로운 기능

    - source diff - element에서 변경하면 소스코드에서 변경된 부분을 표시해줌

    - quick source - source와 동일. element에서 style tab에 해당하는 부분을 동시에 보여줌

    - css source map을 on 하면 scss 원본 파일과 연결해줌. 이 상태에서 수정해도 반영됨.

        - 변수에 지정된 값을 변경 가능

        - 저장하면 원본 파일도 같이 변경됨. 파일을 변경해도 스타일 반영됨.

- application

    - resources 패널이 변경됨

    - manifest를 시각적으로 표현

    - service worker 를 다양하게 테스트 가능

    - sw에서 생성하는 로그의 색을 변경하는 데모 보여줌

    - clear storage

- lighthouse

    - progressive web app을 만들기 위한 체크리스트 역할을 하는 프로젝트

- DevTools에 node.js를 디버깅할 수 있는 기능 추가 


이 세션의 후반부인 Application 패널부터는 Great libraries and tools for great Progressive Web Apps 의 후반부와 내용이 같습니다. Node.js 프로그램을 DevTools에서 디버깅하는 데모도 동일합니다. 둘 중 하나의 영상만 봐도 충분합니다. 다만 Application 패널에 대한 설명은 service worker pane에 대한 데모가 추가되어 있는 이 동영상이 더 낫습니다. 나머지는 거의 비슷하니 두 개 중 하나만 보셔도 충분할 것입니다.



잘못된 부분이 있을 수 있으니, 꼭 원본 동영상을 참고하시기 바랍니다.









nundefined ETC Animation, application, Canary, Chrome, device mode, devtools, google io, google io 2016, LIGHTHOUSE, node.js, service worker, 서비스 워커, 크롬

Great libraries and tools for great Progressive Web Apps 요약

2016.05.31 23:32

오늘 본 비디오는 Great libraries and tools for great Progressive Web Apps 입니다. 솔직히 제목에 혹~! 했습니다만 막상 비디오를 다 보고 나니 동영상에 나온 것들을 적용하려면 고민을 많이 해야 할 것 같더군요. 동영상의 내용은 대략 다음과 같습니다.



Progressive Web Apps 은 웹에서의 최신 유행어다.

    - PWA는 최신 기술을 많이 사용하고

    - PWA를 만들면 사용자에게 유용하고, 사용성이 높고, 즐거운 경험을 줄 수 있다.

 

PWA를 만드려면 만드는 방법의 변화가 필요하다.

    - 예전 웹

        - 예전에는 고수준의 기능으로 웹페이지를 만들었다.

        - 이미지를 보여주고 싶으면 이미지 태그를 사용하고, 테이블을 보여주고 싶으면 테이블 태그를 사용했다.

    - 확장할 수 있는 웹

        - 웹 표준의 새로운 아이디어는 extensible web이다.

        - 특정한 기능을 하는 간단한 API 대신 새로운 기능은 저수준이고 강력하며 더 다양한 것을 가능하게 한다.

            - 이미지를 보여주는 태그 대신 임의의 그래프를 그릴 수 있는 태그를 제공한다.

            - 테이블 태그 보다는 원하는 것을 그리를 수 있는 CSS 속성을 제공한다.

        - 페이지를 앱으로 바꿀 수 있다.

    - 그런데 실제 만들어야 할 것과 플랫폼 사이에 간극이 생기게 되고

    - 이 간격은 라이브러리로 채운다.

    - 커뮤니티는 개발자가 원하는 특정한 기능을 수행할 수 있는 간단하고 사용하기 좋은 라이브러리를 제공할 책임이 있다.


Service Worker libraries

    - PWA에서 가장 중요한 기술은 Service Worker다.

        - 오프라인, 푸시 메시지, 백그라운드 데이터 싱크 같은 기능을 제공

    - sw-toolbox (https://github.com/GoogleChrome/sw-toolbox)

        - 연결 상태와 관련된 패턴을 추출하여 쉽게 사용할 수 있도록 만듬

    - sw-precache (https://github.com/GoogleChrome/sw-precache)

        - 캐시 관리를 쉽게 하도록 도와줌

        - cli로도 사용 가능

    - sw-appcache-behavior (https://github.com/GoogleChrome/sw-helpers/tree/master/projects/sw-appcache-behavior)

        - 기존에 만들어진 appCache 사이트를 Service Worker로 바꾸도록 도와줌

    - sw-helpers (https://github.com/GoogleChrome/sw-helpers)

        - sw-appcache-behavior는 sw-helpers의 일부임

    - 현재 작업 중인 것에는 offline analytics 가 있음

        - 오프라인일 때 ga 요청을 저장하고 있다가 온라인이 되면 서버로 전송


Chrome DevTools

    - 최신 버전 (Canaray 52)에서 사용 가능

    - resources 패널이 application 패널로 변경

    - manifest panel

        - manifest 의 정보를 확인 가능

        - add to homescreen 가 있어서 homescreen에 추가되지는 않지만 onbeforeinstallprompt 이벤트를 트리거함

    - service worker panel

        - offline, update on reload, bypass for network(service worker 미동작) 등의 상태를 테스트할 수 있다.

    - clear storage panel

        - 현재 사이트의 값만 제거할 수 있다.

    - cache storage viewer

        - 추가된지는 좀 됐지만 사람들은 잘 모른다.

        - 캐시된 항목의 목록


Lighthouse (https://github.com/GoogleChrome/lighthouse)

    - 크롬 익스텐션이나 npm 모듈로 제공

    - remote debugging API 사용

    - 몇 번 페이지 로드한 후 PWA의 관점에서 리포트를 제공해줌

    - cli: $ lighthouse your.address

        - 콘솔에 찍거나, json, html로 리포트 제공

    - node module로도 사용 가능

        - ci 과정에서 활용 가능

    - 알파 버전 상태, 규칙은 아직 확정되지 않은 상태, 카나리 52+에서만 동작, 

    - 아직 초기 단계료 여러분의 도움이 필요함



잘못된 부분이 있을 수 있으니, 꼭 원본 동영상을 참고하시기 바랍니다.





nundefined ETC Canary, Chrome, devtools, extensible web, google io, google io 2016, LIGHTHOUSE, progressive web app, pwa, service worker, sw-appcache-behavior, sw-helpers, sw-precache, sw-toolbox, 서비스 워커, 크롬

V8, modern JavaScript, and beyond 요약

2016.05.31 00:31

Google I/O 2016 에서 웹을 주제로 하는 세션 중에 동영상으로 공개된 것은 27편입니다. 이게 전체인지 일부인지는 알 수 없지만 작년에 비하면 상당히 많아졌습니다. 그 중 V8, modern JavaScript, and beyond 라는 세션의 동영상을 간단히 요약해봅니다.


V8의 미션

    - Speed up real-world performance for modern JavaScript, and enable developers to build a faster future web.

    - 크롬에서 현재 사용 중인 자바스크립트를 빠르게 동작 시키는 것

    - 개발자들이 더 빠른 앱을 만들도록 지원하는 것 - 올바른 도구, 언어의 새로운 기능, 다양한 리소스 등


Real-world performance

    - 과거

        - 마이크로 벤치마크

            - 일정한 기능을 반복적으로 테스트해서 속도를 확인

        - 테스트 스위트

            - 일정한 기능(pdf.js, gameboy 에뮬레이터 등)을 실행

    - 지금부터

        - 실제 웹 페이지를 대상으로 퍼포먼스 확인

        - 구글을 포함하여 전세계의 사이트를 대상으로 자동 확인


JS engine upgrades

    - 구조 개선

    - GC의 개선

        - 메모리가 어느 선을 넘으면 GC했으나

        - 16ms마다 진행되는 렌더링에 걸려 GC로 인해 frame을 건너 뛸수도

        - frame 사이의 idle time에 일부 GC

    - 인터프리터

        - 시작을 빠르게

        - 컴파일에 걸리는 시간을 짧게

        - 메모리 사용량은 적게

        - 순수 JS의 실행 시간은 길어지나 파싱, 컴파일에 걸리는 시간이 짧아져 전체 실행 시간은 짧아짐


ES6 & ES7

    - M51까지 점진적으로 ES6의 feature를 구현

    - M52에서는 ES6과 ES7를 네이티브로 지원

    - ES.next도 곧

    - 트랜스파일러나 폴리필이 있지만 네이티브로 지원하는 것은 여러 모로 중요하다.


Debugging + Node.js

    - V8_inspector support를 Node.js core project에 pull request를 보냈음 (https://github.com/nodejs/node/pull/6792)

    - Node.js에서 실행되는 코드를 개발도구에서 디버깅할 수 있음.


WebAssembly

    - binary로 된 c/c++ 코드를 실행.

    - 주요 브라우저에서 지원.

    - 성능 좋음. 2012년 맥북 에어에서 시연.

        - 동시에 두 개의 브라우저에서 시연하지만 매끄럽게 동작

        - 발표하는 동안 계속 백그라운드에서 동작하고 있었음



잘못된 부분이 있을 수 있으니 꼭 원본 동영상을 참고하시기 바랍니다.


nundefined ETC devtools, ES2016, ES6, es7, google io, google io 2016, node.js, Performance, V8, WebAssembly, 성능, 웹어셈블리, 크롬, 퍼포먼스

Chrome Dev Summit 2015 - Developing for Billions 요약

2015.12.03 00:03

Chrome Dev Summit 2015의 Developing for Billions 를 요약해봅니다.


====


발표자: Tal Oppenheimer, Product Manager for Chrome


- 전세계를 대상으로 하는 웹 경험 만들기

- 2014년 말

    - 32억명의 인터넷 유저

    - 미국과 인도가 비슷한 규모

    - 인도의 경우 2014년에 3천만의 사용자가 인터넷을 처음 사용하기 시작

    - 인도와 중국의 사용자는 아직 온라인이 아닌 사람이 많음

        - 인도만 10억 이상

- 도전꺼리

    - 처음 인터넷을 사용하게 되는 경험이 다르다.

        - 남편의 전화기를 빌려 처음으로 인터넷을 경험.

    - 인도에 처음 인터넷을 쓰는 사람들이 쓰는 기기는...

        - Samsung Galaxy J1

            - 2015 발매

            - 4.3인치, 512 램, 4GB 저장공간

        - 우리가 쓰는 기기와는 다르다.

    - 웹은 이런 이런 차이에서 발생하는 문제를 많이 해결할 수 있다.

        - 저장 공간이 한정된 기기에서 인스톨이 필요 없다는 점

        - APK 크기의 제약이 없음

        - 항상 최신의 프로그램

    - 하지만 다른 제약 조건들도 있다.

        - 연결 품질: 2G가 대부분

            - 전세계의 62%가 2G

            - 인디아의 경우 87%가 2G

            - 1초가 지연되면

                - PV는 11%가 줄어듬

                - 사용자의 만족도는 16%가 감소

                - 4G나 Wifi에 비해 2G에서는 지연이 10배? 100배?가 될 수 있다.

            - 가능한 빨라지도록 만드는 것이 중요

        - 연결 비용이 비쌈

            - 500MB 데이터 요금제를 쓰려면 최저 시급으로 17시간을 일해야 함

            - 1시간의 급료로는 15페이지를 볼 수 있다. (사이트가 아님)

- 이런 이유로 사용자가 폰으로 인터넷을 사용하는 경험은 (우리와는) 다르다.

    - 주기적으로 트레이드 오프를 하게 됨

        - 하나의 사용자 경험을 선택하는 것은 다른 경험을 포기하는 것임

            - 나중에는 인터넷 연결을 못할 수도 있고

            - 그 날 혹은 그 달의 데이터를 다 쓰게 될 수도 있다.

        - 브라질의 학생의 경우

            - 하루를 시작할 때는 브라우즈를 많이 하지 않음

            - 만나기로 한 친구에게 메시지를 보낼 때 등 꼭 필요한 경우에만 사용

            - 그날 늦게, 남은 데이터 상태를 알고 나면 더 많이 탐색하고

            - 집에 도착하면 브라우즈를 함

            - 정말 데이터를 써야 할 때 데이터가 끊어지지 않을 것이라는 것을 알게 됐기 때문임.

    - 매일 데이터를 끄고 켠다.

        - 인도에서 하루에 14번 비행 모드로 옮겨가는 경우가 있었음

            - 데이터 사용에 대한 우려로 간헐적으로 접속하는 것과 더불어

            - 데이터 사용을 잘 관리하고자 하고

            - 비행 모드 전환이 데이터를 조금씩 쓰게 될거라는 믿음이 있음

            - 그래서 알지 못하고 필요하지 않을 때 데이터가 소진되지 않도록 데이터를 끔

    - 추가적인 것을 할 때는 시간과 돈이 듬

        - 페이지를 이동하면 데이터가 필요하고 충분한 데이터 요금제를 사용하기 위해서는 일을 더 해야 함.

- 그럼 뭘 해야 할까..?

    - re-engagement에 필요한 단계를 없애라.

        - 검색을 해서 원하는 페이지에 갈 때까지 여러 단계를 거치는데 add to homescreen 과 같은 것을 제공해서 중간 단계를 없앨 수 있다.

        - 앱에서 사용자에게 가장 중요하고 필수적인 경험을 바로 제공한다.

            - 웹 노티피케이션이라면 딥 링크를 제공

    - 빠르고 데이터를 조금쓰도록

        - Chrome data saver

            - 60%까지 데이터를 줄일 수 있음

            - 전세계 10%의 사용자가 사용 중

            - 이미지를 플레이스홀더로 바꿔서 필요한 이미지만 로드하도록

        - pagespeed module

            - 한 줄의 코드로도 데이터를 줄일 수 있다.

            - WebP를 지원하는 기기의 경우 이것만으로도 37%의 데이터를 아낄 수 있다. 사용자에게 보여지는 것은 동일.

        - M46 이후의 버전에서는 클라이언트에 대한 정보를 더 많이 얻을 수 있다.

            - DPR, Width, Viewport-Width

                - 사용자의 기기에 맞게 경험을 최적화 할 수 있다.

                - 화면이 작은 사용자의 경우 큰 이미지 전체를 보내지 않고 적절한 이미지를 보낼 수 있다.

            - Save-Data

                - M49

                - 사용자가 Data Saver를 사용하는지 알 수 있다.

                - save-data를 키면

                    - 꼭 필요한 이미지만 로드

                    - 비디오 해상도를 변경

                    - 동영상 자동 플레이 끔

                    - 이를 통해 사용자에게 주도권을 줌으로써 데이터에 민감한 사용자를 만족시킬 수 있다.

            - downlinkMax

                - M48

                - actual navigation connection type뿐 아니라 connection type의 maximum expected throughput을 알 수 있음

            - 개발자 도구에서 속도를 시뮬레이트 할 수 있음

    - offline experience

        - 사용자가 재방문을 하려 할 때 오프라인 공룡 페이지를 만나게 될 수 있다.

        - Service worker를 사용하면 오프라인일때도 사용자 경험을 제공할 수 있다.

            - 온라인이 되면 자연스럽게 이어질 수 있다.

- 이런 작업을 하면

    - 모든 기기에 최적화할 수 있고

    - 쉽게 재방문하도록 할 수 있고

    - 사용자의 시간과 돈을 배려할 수 있고

    - 어떤 종류의 네트워크라도 대응할 수 있다.

- 이런 방법을 적용하면 모든 사람에게 경험을 제공하는 결과물을 만들게 될 것이다.


====


동영상을 보고 가볍게 정리한 것이므로 내용을 빠뜨렸거나 잘못된 내용이 있을 수 있습니다. 발견하시는 분은 댓글로 내용을 남겨주시면 반영하겠습니다.



nundefined ETC Chrome, chrome dev summit 2015, Google, 구글, 인도, 중국, 크롬