Chrome Dev Summit 2015 - Developing for Billions 요약

2015. 12. 3. 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, 구글, 인도, 중국, 크롬

Chrome Dev Summit 2015 - Keynote 요약

2015. 11. 25. 01:19

지난 17, 18 양일간 마운틴뷰에서는 Chrome Dev Summit 2015가 열렸습니다. 유튜브에 행사 양일의 라이브 동영상(17일, 18일)이 공개되어 있고 각 세션별 동영상도 공개되어 있습니다. 관심있으신 분들은 동영상을 보셔도 좋겠습니다.


여기서는 첫날의 Keynote를 간단히 요약해봅니다.


====


발표자: Darin Fisher, VP of Chrome


- Android chrome은 3년 됐음

- 롤리팝 이후의 사용자들은 크롬, 웹뷰가 자동 업데이트됨

- 작년 4억명이 크롬 모바일 사용

- 올해 8억명이 크롬 모바일 사용

- 플랫폼으로써 웹의 가치

    - low friction: 설치 없이 클릭만으로 개발자가 만든 결과물에 접근할 수 있음.

        - 6월 기준

            - 매월 25개의 앱을 사용

            - 크롬 사용자는 100개가 넘는 웹 사이트를 방문

            - 80%의 시간은 3개의 앱에서 사용

            - top 10k app vs web에서 웹의 monthly uv가 더 높음

            - 모웹 트래픽이 앱보다 두 배 이상 빠르게 성장하고 있음

            - 플립보드는 모웹을 시작한 후 75% 액티브 유저 증가

- 모웹은 모바일 전략에서 매우 중요

- 웹은 크롬만이 아님. 다양한 벤더와 개발자와 협조할 것임.

- 크롬을 개선하기 위해 한 일

    - reliability

        - 네트워크 상황이 좋지 않을 때에 대한 이야기

        - 개발자는 항상 네트워크가 연결되어 있다고 가정하면 안된다.

        - 해법은 service worker

        - 2.2B Page loads/day 에서 서비스 워커 사용 중

    - performance

        - 엔진을 빠르게 하기 위해 많은 일을 하고 있음.

        - 여기서는 javascript의 속도에 대해 이야기함

        - performance is what a user perceives it is

        - RAIL이라는 metric을 사용

            - Reaction Time

            - Animation Time

            - Idle Time

            - Load Time

            - 크롬 엔진 팀에서도 이 기준으로 엔진 개선작업을 하고 있음

        - 내부적으로 개선 하는 것은

            - 10% 메모리 사용량 감소

            - 25% 시작 시간 감소

            - 25% 이상 파워 사용 감소 (맥)

        - amp project

        - polymer

    - engagement

        - 사용자가 사이트를 재방문하게 만드는 것 (re-engagement)

        - 홈스크린

            - 홈스크린에서 웹을 실행시키는 비율은 79% 성장

            - 사용자가 웹을 많이 사용하면 홈스크린에 아이콘을 추가하겠냐고 물어봄

        - push notification

            - 3억5천만 push notification / day

            - 2300 사이트에서 사용

- 이런 특징을 다 모으면 웹을 변화시킬 수 있다.

- progressive web apps

    - flipkart.com

- 크롬팀은 모바일 웹에서의 여러분의 성공을 위해 노력하고 있음.

- MDN에 많은 기여를 하고 있음.

- udacity web nanodegree 개설


====


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





nundefined ETC Chrome, chrome dev summit 2015, Google, 구글, 크롬

What's new in Chrome DevTools? by Addy Osmani 간단 정리

2015. 10. 6. 01:31

지난 9월 16~17일간 토론토에서 열렸던 WEB UNLEASHED 2015에서 Addy Osmani가 발표한 What's new in Chrome DevTools?를 간단하게 요약했다. 발표자료동영상이 각각 제공되고 있으니 관심있는 분은 꼭 원본 자료를 살펴보기 바란다. 발표자료보다 동영상에서 확인할 수 있는 내용이 많으므로 자료를 살펴볼 결심을 했다면 동영상을 볼 것을 추천한다.


DevTools 공통

- DevTools 상단의 메뉴탭의 위치를 drag & drop으로 변경 가능

- Console에서 다양한 syntax highlighting 지원


Network Panel

> Filmstrip 지원

 - 시간별로 스크린샷을 기록.

 - 실제 화면에 렌더링되는 내용을 알 수 있음.

> Throttling

 - 브라우저에서 네트워크 속도를 조절할 수 있음.

 - 이미 정해져 있는 속도 중에서 선택하거나 임의로 조건을 지정할 수 있음.

> Block Request

 - 특정 요청을 보내지 않도록 막을 수 있음.

 - 특정한 요청으로 인해 속도가 느려지는 것으로 의심된다면 해당 요청만 막은 후 테스트 가능.


Timeline

> long frame times

 - 붉은 삼각형은 jank가 존재하는 것을 나타냄

 - Jank: 16ms(실제로는 10ms)내에 화면이 갱신되지 못해 프레임 속도가 떨어지는 현상

> Filmstrip

 - 메뉴의 Screenshots를 선택

 - 애니메이션과 같이 화면에 그려지는 내용을 확인할 수 있음

 - 타임라인의 특정 위치를 선택하면 해당 시간에서 화면에 그려지는 내용을 알 수 있음

> Aggregated Details

 - 실행 비용이 가장 높은 코드를 쉽게 볼 수 있음

 - URL을 기준으로 모아볼 수 있음

> Paint Profiler

 - 메뉴의 Paint 선택

 - 페인트된 내용, 그리는데 걸리는 시간, 페인트에 대한 상세한 내용을 알 수 있음.


Elements Panel

> Animation Inspection

 - about:flags에서 기능을 활성화해야 사용 가능

 - Elements > Styles > Toggle Animation controls

 - playback 속도, 실행 시간등을 간단히 변경하면서 테스트 가능

> Cubic Bezier Editor

 - transition이 적용된 엘리먼트에서 직접 값을 변경해가며 테스트 가능

> DOM Animation Changes

 - Class 변경으로 애니메이션이 이루어질 때 변경이 발생하는 dom에 대한 하이라이트 지원

> Colors & Pallettes

 - Eye Dropper로 페이지상의 색을 바로 선택 가능

 - 페이지에서 사용중인 Color pallettes 지원

 - Matirial Design palette 지원

 - Custom palette 지원

> Search selectors

 - ctrl+f 후 셀렉터를 입력해서 element를 찾을 수 있음

> Event Listeners

 - 임의의 Dom에 등록된 이벤트 리스너를 확인할 수 있음

 - Framework를 사용하여 등록된 이벤트 리스너도 확인 가능

> HTML in Console

 - console에서 html element를 바로 수정할 수 있으며 화면에도 반영됨


Console

> tips

 - $0: 마지막으로 선택한 dom node

 - $$('header'): query selector의 alias

 - copy(): clipboard로 복사

 - inspect(): 코드로 특정한 코드를 선택하여 inspect할 수 있음

 - console.timeStamp: timeline에 라벨을 붙일 수 있음


Sources

> inline variables

 - 디버깅 중에 변수의 값을 인라인으로 표시

> Proactive Compilation

 - 컴파일러처럼 오류가 있을 경우 바로 표시

> Blackboxing JS libraries

 - 특정한 파일을 블랙박스 처리하여 해당 파일은 디버깅 과정에서 건너뛸 수 있음

> ES2015 Promises Inspector

 - about:flags에서 기능을 활성화해야 사용 가능

 - promise의 다양한 정보를 제공하여 디버깅을 편리하게 만듬

 - Async모드: 비동기적으로 실행되는 경우에도 call stack을 정상적으로 보여줌


이 외에도 계속 기능을 추가하고 있음



여기에서는 요약하지 않았지만 발표자료 초반에 RAIL에 대한 언급이 있다. 크롬팀에서는 Performance에 대해 지속적으로 RAIL 모델을 사용하고 있으므로 성능 개선에 대한 이해를 높이기 위해서는 RAIL 모델에 대해 이해를 하고 있는 것이 큰 도움이 될 것이다.

Devtools에 대한 세션 말고도 IE6 sucks!를 외치던 더글러스 크록포드 아저씨가 발표한 Upgrading the Web을 비롯하여 다양한 세션의 동영상이 유튜브에 업로드되어 있으니 다른 주제들도 살펴보기 바란다.


nundefined HTML5_JS_CSS Chrome, devtools, Rail, 개발자도구, 크롬

  1. Blog Icon

    비밀댓글입니다

  2. 크롬팀에서 설명하는 내용들은 대체로 개발 버전인 크롬 카나리에서 실행되는 경우가 많습니다. 카나리 버전을 한 번 사용해보시면 어떨까요? https://www.google.co.kr/chrome/browser/canary.html 이 페이지에서 다운로드 하실 수 있습니다.

Performance and RAIL

2015. 8. 2. 00:24

지난 7월 12일 열렸던 Google I/O Extended 2015 서울에서 발표한 자료를 여기에 공유한다. 이 행사는 Google I/O 2015를 기념하여 I/O 행사에서 발표된 내용을 다시 공유하는 행사로써 국내의 다양한 Google Developer Group이 연합하여 진행하는 행사이다. 휴일이었지만 하루 종일 비가 와서 다소 부담스러운 날이었는데도 불구하고 천여명에 가까운 분들이 참석한 행사였다.



정보를 전달하는 이런 발표는 매번 지루해지곤 했는데 이번에도 다를 바가 없었다. 게다가 3~40분 내에 끝내시는 다른 분들에 비해 50분에 가깝게 발표하는 민페까지... 이런 여러 불편함에도 불구하고 발표를 들어주신 분들에게 감사할 따름이다.






nundefined Presentations Google, google io extended 2015 seoul, Performance, Rail, 구글, 성능, 퍼포먼스

Android M Developer Preview2 설치

2015. 7. 25. 14:22

안드로이드 M 개발자 프리뷰가 나오고 두달이 됐고, 더이상 미뤘다가는 정식판이 나와야 설치할 것 같아 잠시 시간을 내어 설치했다. 첫 설치이기 때문에 OTA로는 설치가 안되고 컴퓨터에 연결해서 설치했고 그 과정을 간단히 정리한다.


0. 실행 환경

- PC: Mac / Yosemite (크게 중요하진 않을 듯)

- Device: Nexus 9


1. 매뉴얼: https://developers.google.com/android/nexus/images#instructions


2. android-sdk 설치

- sdk tools only 만 설치

- 설치 후 README에 있는대로 tools/android update sdk --no-ui 실행


3. 기기별 이미지 다운로드

- 다운로드 페이지: https://developer.android.com/preview/download.html

- 다운로드 후 압축 품


4. 기기에서 개발자 모드 활성화

- http://developer.android.com/tools/device.html

- 설정 > 시스템 > 태블릿 정보 > 빌드 번호 7번 클릭


5. 기기의 설정 > 시스템 > 개발자 옵션에서 oem 잠금 해제 사용하도록 체크


6. adb reboot bootloader


7. fastboot oem unlock

- 보증이 되지 않는다는 메시지가 나오지만 무시하고 진행


8. 기기별 이미지의 압축을 푼 디렉토리에 가서 sudo flash-all.sh 스크립트 실행

- 이 방법이 실패하여 다른 방법을 시도


9. 직접 image file을 업로드

- 참고 문서: http://www.androidpolice.com/2014/11/12/running-into-the-dreaded-missing-system-img-error-flashing-android-5-0-factory-images-heres-how-to-get-around-it/

- unzip image-volantis-MPZ79M.zip

- fastboot flash bootloader bootloader-flounder-3.47.0.0132.img

- fastboot reboot-bootloader

- fastboot flash recovery recovery.img

- fastboot flash boot boot.img

- fastboot flash system system.img

- fastboot flash vendor vendor.img

- fastboot flash cache cache.img

- fastboot reboot

10. 업그레이드 완료


Android 개발 환경이 설치되어 있지 않아 Android SDK 다운로드 등에 시간이 걸려 이틀에 걸쳐서 진행했는데 이런 과정을 다 합쳐도 두시간 이상 걸릴 것 같지는 않다. OS 업그레이드만 한다면 15분에서 20분이면 충분할 것으로 보인다.


곧 Developer Preview 3 버전이 나올 예정이고 (7월 하순 예정) 3Q 내에 최종 버전이 나올 예정이므로 Developer Preview를 설치하려고 마음 먹었던 사람이면 서두르는 편이 좋을 것 같다.





nundefined ETC Android, Android M, developer preview, Nexus 9, 개발자 프리뷰, 안드로이드