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

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, 구글, 크롬

Performance and RAIL

2015.08.02 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, 구글, 성능, 퍼포먼스

Performance Guide RAIL 요약

2015.07.15 00:48

지난 5월 초 라스베가스에서 열렸던 LoopConf의 세션 중 Performance Guide RAIL를 요약했다. 동영상은 여기서 볼 수 있다.



Performance

- Performance는 성공적으로 실행되는 방법의 관점에서 살펴보는 행동, 작업, 활동이다.

- 성공의 의미: 성공이란 인간 두뇌의 지각 반응이 기대하는 바를 충족시키는 것이며, 사용자에게 초점을 맞추면 다른 것들은 따라온다는 것


RAIL 성능 모델 - Response, Animation, Idle, Load


Response

- 목적: 즉각적이라고 느끼도록 100ms 내에 반응

- 반응 속도에 따른 느낌을 알 수 있는 비디오: https://www.youtube.com/watch?v=vOvQCPLkPt4 (Applied Sciences Group: High Performance Touch on YouTube)


Animation

- 목적: 16ms 마다 프레임을 갱신

- 일정한 속도를 내는 쪽이 좋은 성능을 낸다고 받아들이게 된다.

- 따라서 0.5초 동안 아무것도 안하고 나머지 0.5초 동안 16ms마다 그리는 것보다 32ms마다 지속적으로 그리는 것이 사용자에게는 더 좋다.


Idle

- 목적: 가능한 긴 유휴시간을 확보

- 100ms 이내에 즉각적으로 반응하려면 100ms보다 짧은 시간마다 메인 쓰레드가 실행될 수 있도록 해야 한다. 따라서 유휴시간은 길 수록 좋다.


Load

- 목적: 사용자가 계속 집중할 수 있도록 1000ms 이내에 인터랙티브한 내용을 노출

- 1000ms (=1s) 내에 모든 내용을 보여줘야 한다는 의미는 아님. 일부라도 노출되어야 한다.


기타

서버와 통신하는 작업동안 긴 시간을 기다려야 하므로 이 시간에 트랜지션을 이용하여 사용자에게 즉각 반응하는 모습을 보여주는 것은 좋다. 그러나 트랜지션에는 수백 ms의 긴 시간이 걸리므로 주의해야 한다.


참고자료

- 슬라이드: bit.ly/perf-rails

- https://paulbakaus.com/tutorials/performance/the-illusion-of-motion/

- speed, performance and human perception

https://developers.google.com/web/fundamentals/performance/critical-rendering-path/

- Platform Success Model Explainer : chrome, blink가 performance에 대해 생각하는 내용을 알 수 있음




nundefined HTML5_JS_CSS Animation, Chrome, Google, IDLE, load, Performance, Rail, response, 구글, 성능, 크롬

Google I/O 2015 두 번째 날

2015.06.11 00:38

행사의 두 번째 날이 밝았으나... 이 날은 늦잠을 자고 말았다. 맞춰둔 알람은 제대로 듣지도 못하고 정신을 차리니 시간은 10시를 향해 가고 있었다. 이 때문에 9시 세션이었던 Polymer를 놓치는 불상사가 발생. 다행히 동영상으로도 제공되는 세션이라 최악의 상황은 면할 수 있었다.



오전부터 이번 IO의 기념품(?)인 넥서스9를 나눠주고 있었다. 집에서 이미 사용 중인 테블릿이 한 대 있고 그 활용도가 높지 않은 상태라 그런지 감동같은 감성적인 생각보다는 짬내서 안드로이드 M이나 올려봐야겠다는 생각이 들었다. 아직 올려보진 못했지만. 내심 테블릿 대신 핸드폰을 바랬는지도 모르겠다.



첫째 날 세션 중에 Notifications API가 구현되어 브라우저에 추가된 내용을 발표하는 자리가 있었는데 그 활용편이다. 웹사이트에서 알림을 사용하는 예제를 보여주는 세션이었다.



Notification을 구현하기 위해 위와 같이 세 가지 API를 같이 사용하게 된다.



Service worker에서 디버깅을 하려면 위 사진의 주소를 크롬브라우저에 입력하면 된다. 지금 사용 중인 브라우저에 입력해보니 구글 IO 사이트와 medium의 Service worker가 등록되어 있다.



성능 최적화 세션에 들어왔더니 이렇게 세 가지 숫자를 보여준다.



항상 느끼는 것이지만 이 동네 사람들은 경험을 정리하고 구조화하고 이름을 붙이는 것을 잘한다는 생각이 든다. 반면 우리나라 개발자들은 개발은 잘 하지만 이런 작업에는 약하다는 생각이 든다.



사용자의 각 동작을 RAIL에 맞게 분류한 화면이다. Animation은 16ms마다, 응답은 100ms보다 짧은 시간에, 로드는 1000ms 내에 화면이 갱신되어야 한다는 것이 RAIL의 개념이다. 시간표를 짤 때 처음 제목을 보고는 Ruby on Rails를 떠올렸다. 좀 노린 것일지도 모르겠다. 물론, 설명을 보고 금방 아닌 것을 알았지만.



왼쪽의 Paul Irish(@paul_irish)와 오른쪽의 Paul Lewis(@aerotwist). 위 사진의 RAIL 세션과 이어서 진행된 성능 최적화 세션은 두 명이 메인 스피커를 번갈아가며 진행했다. 개발자들을 대상으로 하는 직업탓인지 서로 이름이 Paul이라는 농담도 해가며 재미있게 진행했다. 위 사진에 보이는 슬라이드 첫 장에 Paul Irish의 이름밖에 없자 자기의 이름도 넣어달라며 장난을 치기도 했다. Paul Irish는 그에 응해 자기 이름보다 Paul Lewis의 이름을 더 크게 넣기도. 세션 내내 흥겨운 분위기였다. 



앞 세션에서 했던 RAIL를 다시 설명하고 있다. 이번 행사에서 모바일 웹 성능 최적화에 대한 세션은 다 RAIL 키워드를 중심으로 진행됐다. 당분간은 계속 이 키워드를 사용할 듯 싶다.



이 세션은 실제로 모바일 웹 성능 최적화를 진행했던 ESPN 사이트에 대한 설명이었는데 세션의 막바지에 청중들로부터 최적화를 하기를 원하는 사이트를 받아 분석하는 과정을 간단히 보여줬다. 슬라이드에 박혀 있는 고정된 그림으로 보다가 개발자 도구를 사용하여 문제가 되는 부분을 찾아가는 것을 보니 상대적으로 잘 와닿는 느낌이랄까.



시간표에 잡아뒀던 세션을 모두 마치고 행사장을 찍어봤다. 이틀동안 진행된 행사이긴 했지만 작은 세션들의 경우 두 번씩 하는 경우가 대부분이어서 실제로 느끼는 세션의 수는 더 적었다. IO에 다년간 참석했던 다른 사람들의 이야기를 모아보면 1. 작년보다 볼만한 것이 줄어든 것 같다. 2. 웹은 이제 두 번째 기술로 삼아야 하는 듯. 3. 작년에는 강의실 형태로 구성됐었는데 이번에는 이렇게 열린 형태로 구성되며서 강의 스타일보다는 구글 개발자와 직접 이야기하며 궁금한 점을 해결하는 형태로 바뀌는 것 같다. 4. 디자인 세션이 늘어난 듯. 아마 내년에는 더 늘어나지 않을까? 5. 시작은 개발자 행사였는데 점점 개발자 행사같이 생각되지 않는다. 등등이 있었다.


개인적으로는 안드로이드(모바일)이 50%, 사물인터넷이 20%, VR/AR이 20% 나머지가 10% 이하의 비중으로 느껴졌다. 특히나 웹의 경우에는 발전 혹은 혁신이라고 생각할만한 내용이 전혀 없었다. Service worker나 Notifications같은 경우에는 이미 한참 전부터 언급되던 것이 이번에 Stable 버전에 들어간 정도라 별로 와닿지 않았다. 이미 몇 달 전 국내에서 Service worker에 대한 이야기를 들었기에 신선함이 떨어졌을 수도 있다. 안드로이드 M에서 크롬이 웹뷰 대신 들어간다는 것도 있었지만 딱히 와닿지는 않고. 이는 개발 부담을 줄이려는 시도가 아닐까 싶기도 하다. 당분간은 Specification상에 존재하는 웹은 점점 발전하겠지만 사용자가 느끼는 웹은 상당히 정체되어 있을 것 같다. 물론 여기서 말하는 웹이란 브라우저에서 동작하는 것을 의미한다.


이런 행사에 참여하면 웹페이지를 통해 보는 것보다 더 생생하게 세상의 흐름을 느낄 수 있게 되는 것 같다. 무엇보다도 같은 경험을 공유한 사람들의 생각을 들을 수 있고 웹페이지에 나올 만큼의 뉴스꺼리는 아니지만 중요한 사실들을 알 수 있게 된다. (가령, 예전에는 웹쪽 일을 했던 구글러가 이제는 사물인터넷쪽 일을 한다던가 하는...) 이런 사실들이 모여 가리키고 있는 한 방향을 몸으로 느끼게 되는 것이 아닐까. 이런 행사에 참여하는 것이 여러 모로 쉬운 일은 아니지만 기회가 올 때마다 잡을만한 가치는 있다고 본다.



그리고 구글 IO의 세션 비디오가 공개됐다. 전체 세션은 아니고 강의실같은 장소에서 진행됐던 세션의 동영상이다. 한글 자막은 없지만 영어 자막이 포함되어 있으니 [cc] 메뉴를 눌러 켜놓고 보면 도움이 될 것이다. 한글로 기계 번역하는 메뉴가 있긴 한데 추천할만한 번역은 아니므로 영어로 보는 것을 추천한다.



nundefined ETC Android, Google, google io, Polymer, Rail, 구글, 구글IO, 안드로이드, 폴리머