Chrome Dev Summit 2014에는 새로운 API를 다루는 다양한 주제와 브랜드가 있었지만 새롭고 흥미로운 내용에 관한 내용은 아닙니다.
신규 웹 개발자이거나 새로운 API를 사용하려는 숙련된 개발자라면 학습, 빌드, 반복의 세 단계를 따르게 될 것입니다.
맷 건트가 이러한 문제를 해결하기 위한 Chrome 개발자 플랫폼팀의 지속적인 노력을 다룹니다.
학습
웹 기초는 다양한 주제를 다루는 사용 사례 중심 문서 모음입니다. 핵심 목표는 개발자가 별다른 지식이 없거나 전혀 없어도 최대한 빠르게 권장사항을 구현하도록 하는 것입니다.
웹 기초의 주요 목표 중 하나는 주제를 처음 접하는 경우 이 가이드를 통해 '선택권 마비'를 최대한 줄일 수 있습니다. Addy Osmani는 Pastry Box를 커버합니다.
사이트 또는 콘텐츠에서 문제를 발견하거나 웹 기초에서 특정 주제를 다루고 싶다면 GitHub에서 의견을 제출하여 알려주세요.
빌드
Google에서는 새로운 웹 프로젝트를 쉽게 시작할 수 있도록 웹 스타터 키트를 만들었습니다. 여기에는 필요한 모든 것이 있습니다.
- 견고한 빌드 프로세스
- 표준 HTML
- 스타일가이드
빌드 프로세스
빌드 프로세스를 처음 사용하는 경우 빌드 프로세스를 가장 쉽게 이해할 수 있는 방법은 파일 세트를 가져와서 특정 작업을 실행하여 다른 위치에 새 버전을 출력하는 프로그램으로 생각하는 것입니다. 이 작업은 파일을 최적화하여 로드 시간을 개선하고 오류 가능성을 확인하거나 자동화할 수 있는 작업을 처리합니다.
Web Starter Kit의 프로세스는 다음과 같습니다.
브라우저가 파일을 빠르게 가져올 수 있도록 CSS와 JavaScript를 축소하고 연결합니다. 또한 JavaScript는 JSHint를 통해 실행되어 JavaScript 권장사항 및 일반적인 코딩 실수를 확인합니다. imagemin을 사용하면 이미지를 축소할 수 있으며 이를 통해 파일 크기를 상당히 줄일 수 있습니다. 스타일 가이드 CSS를 만드는 프로세스도 있습니다.
다중 기기 HTML용 상용구
새 페이지용으로 작성하는 첫 번째 HTML 세트는 꽤 불안정하므로 여러 기기와 화면 크기에서 잘 작동하는 스톡 HTML 파일을 빠르게 가져올 수 있습니다.
Web Starter Kit에는 플랫폼과 사이트 사이의 경계를 모호하게 만드는 모든 기능에 대한 지원이 추가되었기 때문에 Android, Windows Phone, iOS, Opera Coast용 홈 화면에 추가 및 스플래시 화면 지원을 추가했습니다.
스타일가이드
웹 스타터 키트의 마지막 제품은 스타일 가이드입니다.
이렇게 하면 모든 새 프로젝트에 스타일 중심 개발을 장려하는 훌륭한 기본 스타일 및 구성요소 집합이 제공됩니다. 기존 스타일을 요소로 변경하고 자신만의 스타일을 추가할 수 있습니다.
Google은 내년 초에 출시될 예정인 다음 버전의 WSK에서 스타일 가이드가 조화를 이루는 방식을 단순화하고 머티리얼 디자인의 디자인과 분위기로 전환하기 위해 노력하고 있습니다. 맷이초기 예시를 통해 Chrome Dev Summit에서 어떻게 표시되는지 보여주었습니다. 아래에서 예시를 확인할 수 있습니다.
반복
새로운 지식을 실천하기 시작했다면 DevTools를 사용하여 작업을 디버그, 개선, 유지관리할 수 있습니다.
DevTools에는 몇 가지 새로운 기능이 있으며 Matt는 다음과 같은 새로운 기능을 살펴봅니다.
기기 모드
DevTools의 새로운 섹션인 기기 모드를 사용하면 CSS에서 미디어 쿼리를 보면서 다양한 휴대기기에서 사이트가 어떻게 작동하는지 빠르게 확인할 수 있습니다.
Device Mode의 뛰어난 기능 중 하나는 네트워크 속도를 제한하는 기능으로 GPRS, EDGE, 3G, DSL 또는 Wi-Fi 연결을 사용하는 사용자의 환경을 시뮬레이션할 수 있다는 것입니다.
페인트 프로파일러
타임라인 탭을 열고 기록 버튼을 누른 적이 있다면 폭포식 구조에서 페인트 이벤트가 발생한 것을 볼 수 있을 것입니다. 일반적으로 이는 브라우저가 수행한 이유 또는 수행한 작업을 알 수 있는 방법이 없는 블랙박스입니다.
페인트 프로파일러는 페인트 중에 브라우저가 정확히 어떤 작업을 실행하는지에 관한 자세한 정보를 제공하지 않습니다.
무효화 추적
이제 DevTools는 가능한 경우 페인트 또는 레이아웃이 발생한 이유를 제공합니다. 이는 타임라인과 브라우저 동작에 관해 알아보는 모든 사람에게 유용하며 성능 문제를 방지하도록 코드를 최적화할 수 있게 해줍니다.
Flame Chart 뷰
이는 타임라인에서 사용 가능한 정보를 보는 매우 다른 방법입니다. 이를 통해 작업이 어떻게 중복되는지와 다른 작업의 결과로 발생한 브라우저 동작을 훨씬 쉽게 확인할 수 있습니다.
프레임 뷰어
Flame Chart 뷰에서 특정 프레임을 선택하면 페이지의 어떤 요소가 복합 레이어로 승격되었는지와 그 요소가 승격된 이유를 살펴볼 수 있습니다.
학습하고 Cloud Build가 모든 것을 처리합니다 반복
개발자가 웹 개발에 빠르게 적응할 수 있도록 지원하기 위해 Chrome팀의 노력은 다음과 같습니다. 웹 기초, 웹 스타터 키트, Chrome DevTools의 새로운 기능을 확인해 보세요.