Chrome Dev Summit 2014에서는 새로운 API를 다루는 다양한 주제와 브랜드가 열렸지만 새롭고 반짝이는 소식이 전부는 아닙니다.
새로운 API를 탐색하는 신규 웹 개발자이거나 숙련된 개발자라면 학습, 빌드, 반복의 세 단계를 따를 수 있습니다.
Matt Gaunt에서는 이러한 문제를 해결하기 위해 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의 홈 화면에 추가 및 스플래시 화면 지원을 추가했습니다.
스타일가이드
웹 스타터 키트의 마지막 부분은 바로 스타일 가이드입니다.
이렇게 하면 모든 새 프로젝트에 스타일 기반 개발을 권장하는 유용한 기본 스타일 및 구성요소 집합을 이용할 수 있습니다. 기존 스타일을 요소로 변경하고 나만의 스타일을 추가할 수 있습니다.
내년 초에 출시될 WSK의 다음 버전에서는 스타일 가이드의 연동 방식을 간소화하고 머티리얼 디자인 디자인으로 전환하기 위해 노력하고 있습니다. Matt는 Chrome Dev Summit에서 이러한 기능이 어떻게 표시되는지조기 모의 예시로 보여주었으며 아래에서 예시를 확인할 수 있습니다.
재조정
새로운 지식을 실천에 옮기기 시작했다면 DevTools를 사용하여 작업을 디버그, 개선, 유지보수하는 것이 좋습니다.
DevTools에는 몇 가지 새로운 기능이 도입되며, Matt는 다음과 같은 새로운 기능을 살펴봅니다.
기기 모드
기기 모드는 CSS에서 미디어 쿼리를 보면서 다양한 휴대기기에서 사이트가 어떻게 작동하는지 빠르게 확인할 수 있는 DevTools의 새로운 섹션입니다.
Device Mode의 유용한 기능 중 하나는 네트워크 속도를 조절하는 기능으로, 이를 통해 GPRS, EDGE, 3G, DSL, Wi-Fi 연결에서의 사용자 환경을 시뮬레이션할 수 있습니다.
페인트 프로파일러
타임라인 탭을 열고 녹화 버튼을 누르신 적이 있다면 폭포에서 페인트 이벤트가 발생하는 것을 보셨을 것입니다. 일반적으로 이는 브라우저가 왜 수행되었는지 또는 어떤 작업을 하고 있었는지 알 수 있는 방법이 없는 검은색 상자입니다.
페인트 프로파일러는 페인트 기간 동안 브라우저가 정확히 실행하는 작업에 관한 자세한 정보를 제공하지 않습니다.
무효화 추적
이제 DevTools에서 페인트 또는 레이아웃이 발생하는 이유를 제공할 수 있습니다. 이는 타임라인과 브라우저 동작에 관해 알아보는 모든 사람에게 유용하며 성능 문제를 방지하도록 코드를 최적화할 수 있게 해줍니다.
Flame Chart 뷰
이는 타임라인에서 사용할 수 있는 정보를 보는 매우 다른 방법입니다. 이렇게 하면 작업이 겹치는 방식과 다른 작업의 결과로 발생한 브라우저 동작을 훨씬 쉽게 확인할 수 있습니다.
프레임 뷰어
Flame Chart 뷰에서 특정 프레임을 선택할 수 있으며, 이 프레임 내에서 페이지의 어떤 요소가 복합 레이어로 승격된 이유와 이러한 요소가 승격된 이유를 살펴볼 수 있습니다.
알아보기 구축, 재조정
개발자가 웹 개발 속도를 높일 수 있도록 Chrome팀에서 이러한 노력을 기울이고 있으니 웹 기초, 웹 스타터 키트, Chrome DevTools의 새로운 기능을 확인해 보세요.