#187 : 크롬 Dev Summit 2018: 더 빠르고 부드러운 웹 만들기

이소희 edited this page Dec 13, 2018 · 1 revision

크롬 Dev Summit 2018: 더 빠르고 부드러운 웹 만들기

원문 : https://blog.chromium.org/2018/11/chrome-dev-summit-2018-building-faster.html

오늘, Chrome Dev Summit 2018에 참여한 웹 커뮤니티 여러분을 환영한다. 앞으로 이틀 동안 웹 플랫폼의 발전을 축하하며, 전체 웹 생태계의 도움으로 노력하여 발전시킨 웹의 변화를 공유할 예정이다.

Chrome의 10번째 생일은 지난 10년 동안 크롬과 웹이 얼마나 발전하였는지 회상할 수 있는 기회를 주었다. 사람들이 만드는 콘텐츠, , 게임이 얼마나 풍부해지고 있는지 지켜보는 것은 즐거운 일이다.

크롬 업데이트 중에서 우리가 매우 열심히 노력하는 것은 크롬을 빠르게 만드는 것이다. 속도는 웹에서 가장 중요한 요소 중 하나이다. 사용자가 검색에서 실제 사용으로 얼마나 빨리 이동하는지 그리고 웹사이트 사이를 얼마나 빨리 이동하는지 비교할만한 다른 플랫폼은 없지만, 사이트가 너무 느리게 로딩되거나 UI의 상호작용이 부드럽지 않으면 그 사용은 중단된다.

그러므로, 우리는 웹 개발자 커뮤니티와 더 많이 협력하여 최종 사용자가 링크를 클릭하는 순간부터 즐겁고 빠른 경험을 전달하고 싶다.

처음 클릭부터 빠른 속도

HTTPAchive에 따르면, 2011년 이후로 웹 사이트들의 자바스크립트 사용률이 평균 8배나 증가했다고 한다. 우리는 성능의 주요 병목 요인을 CPU로 보기 시작했고, 특히 저전력 모바일 장치에서 컴파일되고 실행되는 코드가 많아지고 있다.

첫 번째 로드(혹은 그 이상)에 중점을 둔 서비스는 성능 목표 수치(Performance Budgets)에 집중하여 더욱더 좋은 결과를 보고 있다. 이런 성능 목표는 자바스크립트, CSS, 이미지 및 다른 리소스의 바이트 크기는 물론 다른 로딩 측정 항목을 토대로 설정할 수 있다. 예를 들어 상호 작용 시간(Time-to-Interaction)이 3G 네트워크 상황과 특정 휴대전화 종류에서 5초를 초과하지 않도록 지정할 수 있다.

시간이 지남에 따라 기능을 추가하면서 같은 성능 목표 수치 내에서 머무르기는 쉽지 않다. Wayfair는 자신들의 퇴행을 알아차리고, 개발자들이 성능 개선을 할 수 있도록 내부적으로 성능 목표 수치를 계산하는 시스템을 구축했다. 그 이후에 Wayfair의 페이지 속도는 계속 빨라졌고, 매년 구매율이 10% 이상으로 증가하였다.

Pinterest는 성능에 초점을 두어 모바일 웹 사용성을 개편했고, 사용자 감성과 참여를 향상시켰다. 현재 그들의 모바일 웹 사이트는 가입을 위한 최고의 플랫폼이 되었다. 다음 동영상에서 그들의 여정을 확인할 수 있다.

클릭 이후에 버터처럼 부드러운 동작

웹 페이지 로딩 속도를 최적화하는 것도 중요하지만, 웹 페이지가 로드되고 표시된 이후에 부드럽게 상호작용하는 사용자 경험을 전달하는 것도 중요하다. 즉, 모든 사용자의 입력에 1/10초 이내로 빠르게 응답하고, 사용자 인터페이스가 jank(UI가 멈추고 갑자기 점프하는 것) 되지 말아야 한다.

지난 10년 동안 우리는 크롬이 가능한 많은 작업을 메인 스레드에서 분리하여 수행할 수 있게 발전시켜왔다. 예를 들어 이미지를 디코드하며, 자바스크립트 구문분석은 별도로 수행한다. 그리고 웹 워커를 사용하여 UI를 멈추지 않게 하면서, 오랫동안 구동되는 자바스크립트를 실행할 수 있다.

오늘날 여러분의 웹앱을 버터처럼 부드럽게 만들 수 있을까? 특히 무거운 작업 부하가 있다면? 우리 팀은 이 문제를 탐구하기 위해 착수했고, 그 결과로 Squoosh라는 새로운 애플리케이션을 출시했다. 이 강력한 이미지 압축 도구는 거의 즉시 실행되고, 브라우저에서 처리하지 못하는 코덱을 웹 어셈블리로 처리하는 무거운 작업 중에도 UI가 부드럽게 실행된다. Jake와 Mariko의 세션으로 그들이 무엇을 했는지 배울 수 있다.

그러나 여기에는 할 일이 더 많다. Worklets, Virtual Scroller, 스케줄러와 같은 새로운 API가 개발자들이 좀 더 쉽게 부드러운 사용성을 만들 수 있도록 돕는 것을 기쁘게 생각한다. 이러한 도구와 기술에 대해 더 많은 정보를 얻고 싶으면 2일차 키노트를 참고하세요.

좀 더 깊은 통합 기능

PWA는 사용자를 즐겁게 하고, 참여도와 구매율을 증가시킬 수 있다. 호스트 OS와의 긴밀한 통합과 더 빠른 로드 및 실행 능력으로 PWA는 빛을 받을 수 있겠지만, 이러한 통합 대부분은 모바일 우선으로 혹은, 모바일에만 집중되었다.

지난 6개월 동안 우리는 이 같은 기능을 모든 데스크톱 플랫폼에서도 제공할 수 있게 투자하였다. 크롬 OS는 웹의 경계를 뛰어넘는 환상적인 기회를 주었고 이러한 학습을 바탕으로 우리는 PWA를 윈도우와 리눅스 크롬에서 지원하게 되었다. 그리고 크롬 72부터 맥도 지원한다.

image

모바일과 데스크톱 모두에서 더 많은 기능을 제공하기 위해서, 커뮤니티에서 중요하게 여기는 기능을 우선순위에 포함하고 싶다. 그래서 오늘 우리는 여러분이 웹에서 필요하다고 생각하는 기능을 위해 우리의 계획을 공유하고, 실제 요구사항을 해결하기 위한 협력 방법을 공유하고 싶다.

web.dev를 통한 지원

우리는 여러분이 모던 웹 API의 모든 레퍼런스 정보가 한곳에 있기를 원한다는 것을 알기 때문에 MDN과 함께 웹 레퍼런스 문서를 개선할 것이다.

또한 웹 사용성을 훌륭하게 만드는 구현 방법을 많이 원한다는 것을 안다. 그래서 오늘 새로운 방식인 web.dev를 공개하게 되어서 기쁘다.

Glitch와의 파트너쉽과 Lighthouse 도구와의 긴밀한 통합 그리고 우리 팀 최고의 실습 지침서로 만들어진 web.dev를 사용하여 여러분의 웹사이트를 실시간 모니터링할 수 있다. 이를 통해 여러분의 사이트를 항상 빠르고 탄력적이며 접근성이 좋은 상태로 유지할 수 있다.

web.dev를 작업할 때, 우리는 여러분의 학습에 도움이 되는 다른 놀라운 웹 콘텐츠에 영감을 받았다. Flexbox Zombies와 CSS Grid Critters를 만든 Dave Geddes는 새로운 학습 게임인 Service Workies을 만들었다. Service Workies는 서비스 워커의 모든 것을 이해하게 도와준다. 이 모험의 첫번째 장은 현재 베타버전으로 출시되었다. 우리는 Dave와 파트너를 맺고 모든 모험을 무료로 이용할 수 있도록 했으니, 지금 당장 무엇을 하든지 Grannie에게 귀를 기울여라.

브라우저에서 바로 웹 디자인

Chrome Dev Summit은 개발자 중심의 도구와 라이브러리에 대한 업데이트를 다루지만, 새로운 초기 실험도 공개하여 사용자들의 피드백을 얻고자 한다.

Firebug가 나왔을 때의 영향과 브라우저 자체가 개발자 도구 플랫폼이 될 수 있다는 것을 기억한다. 이제는 웹에서의 디자인을 생각하고 있다. Lighthouse이 크롬 extension으로 시작한 것처럼 브라우저에서 바로 디자인할 수 있는 Project Visbug라는 또 다른 확장 프로그램이 있다. 이 링크에서 다운로드할 수 있고, 실행시키기 전에 아래의 영상을 보아라.

실시간 채널에 참여하거나 나머지 세션의 내용은 크롬 개발자 유튜브 채널의 동영상으로 보아라. 좀 더 흥미로운 발표가 있는 2일차 내용은 이 블로그에서 공개될 것이니 확인하여라.

Galbraith과 Dion Almaer가 게시함.

Clone this wiki locally
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.