Google+

요약

Google+는 완벽한 반응형 디자인을 제공합니다.

반응형 광고 만들기

Google+는 좀비 고양이에서부터 빈티지 계산기에 이르기까지 사람들이 공통의 관심사를 중심으로 모이는 곳입니다. 최근까지 Google+에는 데스크톱과 이전 브라우저용으로 설계된 모바일 웹용 두 가지 버전의 웹사이트가 있었습니다.

챌린지

두 개의 사이트를 관리하는 것은 나름의 어려운 과제였습니다. 별도의 사이트 버전이 있으면 각 기능을 두 번 구현해야 했습니다. 이로 인해 많은 중복 코드가 발생했고 데스크톱과 모바일 웹에 두 가지 환경을 최적화하는 작업이 추가로 필요했습니다. 또한 터치를 지원하는 데스크톱과 화면이 커진 강력한 모바일 기기가 도입되면서 기기 간의 경계가 점점 흐려지면서 데스크톱과 모바일에 서로 다른 디자인의 디자인을 갖추게 되었습니다.

기능이 추가됨에 따라 기존 데스크톱 사이트도 속도가 느려지고 확장되었습니다. 올해 초 Google 홈페이지의 무게는 약 5MB였고 약 250건의 HTTP 요청을 생성했습니다. 실적이 저조했기 때문일 뿐입니다. 사이트에 있는 이미지가 무거워서 최적화되지 않았기 때문에 페이지 속도가 더욱 느려졌습니다. 그 결과, 느리고 불안정한 네트워크에서는 스트림에 액세스할 수 없었습니다. 이러한 사용자의 경험은 실망스러웠습니다. 또한 모바일 웹에서 기존 브라우저를 지원해야 한다는 요구사항으로 인해 사이트 전체에서 JavaScript에 의존하지 않았고 대화형 기능을 구현할 수 없었습니다. 모바일 웹브라우저의 발전에 의존할 수 없게 되었습니다.

해결 방법

Google은 먼저 모바일, 태블릿, 데스크톱 등에서 작동하는 반응형 디자인에 중점을 두었습니다. Google은 모든 기능, 페이지, 자바스크립트 라이브러리, CSS 클래스를 철저히 살펴봤습니다. Google은 사용자가 추가 요청을 하지 않는 한 사이트에서 작동하는 데 꼭 필요한 항목만 다운로드하도록 하는 시스템을 구축하고 싶었습니다. 하지만 모바일 데이터 연결을 사용하는 느린 휴대전화에서는 제대로 작동하는 웹사이트를 구축하는 것이 과제였고, 한편으로는 더 빠른 브라우저와 대형 화면에서도 훌륭한 몰입형 환경을 제공하는 것이었습니다.

이러한 제약 조건으로 인해 앞으로의 코드 변경사항을 모두 철저히 살펴봐야 했습니다. 이를 달성하기 위해 초기 페이지 로드 시 60K가 넘는 HTML, 60K, JavaScript 60K, 애니메이션은 항상 60fps였으며 평균 지연 시간은 0.6초를 넘지 않도록 6^5 규칙을 설정했습니다.

이를 위해 처음부터 모듈성과 지연 로드를 빌드한 JavaScript 및 CSS 프레임워크를 선택했습니다. 따라서 사용자는 JavaScript 및 CSS가 필요한 기능을 실제로 사용할 때만 JavaScript 및 CSS를 다운로드할 수 있습니다. 이 작업은 Google의 빌드 및 모듈 시스템과 결합된 템플릿 기반 접근 방식을 통해 수행되므로 개발자의 노력이 거의 필요하지 않습니다.

Google은 이 새로운 프레임워크를 통해 웹에서 Google+를 재구현할 수 있는 프로토타입 제작을 시작했습니다. Google은 '나쁜' 것을 금지하고 개발 규칙을 엄격하게 적용하기 시작했습니다. 우리의 주요 규칙 중 하나는 모든 페이지가 서버 측과 클라이언트 측에서 모두 렌더링되어야 한다는 것이었습니다. 서버 측 렌더링을 사용하면 HTML이 로드되는 즉시 사용자가 읽기를 시작할 수 있으며 페이지의 콘텐츠를 업데이트하기 위해 자바스크립트를 실행하지 않아도 됩니다. 페이지가 로드되고 사용자가 링크를 클릭한 후에는 모든 것을 다시 렌더링하기 위해 전체 왕복을 실행하지 않을 수 있습니다. 이때 클라이언트 측 렌더링이 중요합니다. 데이터와 템플릿을 가져오고 클라이언트에서 새 페이지를 렌더링하기만 하면 됩니다. 여기에는 많은 장단점이 수반되므로 서버 및 클라이언트에서 모든 것을 두 번 구현할 필요 없이 서버 측 렌더링과 클라이언트 측 렌더링을 쉽게 만드는 프레임워크를 사용했습니다.

다른 규칙에는 브라우저의 레이아웃 재배치를 야기하고 성능에 부정적인 영향을 미칠 수 있는 높이 및 너비 애니메이션 금지도 포함되어 있습니다. DOM 조작 및 애니메이션의 경우 브라우저의 렌더링 새로고침 빈도와 동기화되어 작업이 실행되도록 예약했습니다. 또한 모든 측정 작업을 함께 그룹화하여 비용이 많이 드는 반복 스타일 계산을 피할 수 있습니다. 또한 Chrome 프로파일러 도구에 의존하여 모든 것이 의도한 대로 작동하는지 확인했습니다. 또한 페이지 크기가 급격하게 늘어나지 않도록 하기 위해 코드 변경이 JS 공간에 미치는 영향을 계산하는 도구를 만들었습니다.

다소 시간이 걸렸지만 빌드할 때 문제를 식별하고 제거할 수 없었다면 훨씬 더 어려웠을 것입니다.

이 반응형 구현의 모바일 웹 버전은 2015년 2월에 출시되었습니다. 이를 통해 새로운 디자인과 새로운 프로세스를 점검할 수 있었습니다. Google은 이번 출시 이후의 데이터를 사용하여 효과가 있는 것과 그렇지 않은 것을 검증했습니다. 디자인을 반복하고 더 많은 기기를 지원하도록 확장하기 시작했습니다. Google에서는 2015년 11월에 모든 기기를 대상으로 이 새로운 구현을 출시했습니다.

결과

Google+는 성능 저하 없이 풍부한 UI를 갖춘 복잡한 웹 앱을 구축할 수 있었습니다. 이 사이트는 그 어느 때보다 빠르고 간결해졌습니다.

	변경 전	변경 후
gzip으로 압축한 총 홈페이지 크기 (이미지 포함)	22,600 KB	327 KB
요청 수	251	45
HTML (gzip으로 압축되지 않음)	1,100 KB	362 KB
자바스크립트 및 CSS (gzip)	2,768 KB	111KB
평균 전체 페이지 로드 시간 (지연 시간)	12초 첫 번째 바이트까지 0.7초	3초 첫 번째 바이트까지 0.1초