콘텐츠
- 01. 등대
- 02. 폴리머
- 03. API 탐색기
- 04. 플러터
- 05. Google GitHub
- 06. 인형극
- 07. 워크 박스
- 08. 코드 랩
- 09. 색상 도구
- 10. 디자인 스프린트
- 11. 사람 + AI 가이드 북
- 12. Google 어시스턴트
- 13. PageSpeed Insights
- 14. Google의 AMP
- 15. Google DevTools
- 16. 머티리얼 디자인
웹에서 작업한다는 것은 일반적으로 어떤 형태 나 형태로 Google과 함께 작업한다는 것을 의미합니다. 그리고 Google 크롬이 경쟁보다 앞서 있기 때문에 디자이너와 개발자는 자신의 프로젝트가 브라우저에서 어떻게 작동 할 것인지 생각해야합니다. 어떻게 보일까요? 어떤 기술을 지원하고 얼마나 안전하며 어떻게 수행합니까?
다행히 Chrome은 모든 사이트 또는 앱이 최상의 상태가되도록하는 도구를 제공합니다. DevTools를 사용하면 디자이너와 개발자가 웹 페이지에 대한 통찰력을 얻을 수 있습니다. DOM을 조작하고, CSS를 확인하고, 라이브 편집으로 디자인을 실험하고, JavaScript를 디버그하고, 성능을 확인할 수 있습니다. (여기에서 이러한 Google 웹 도구를 사용하는 방법에 대해 자세히 알아보고 처음부터 시작하는 경우 최고의 웹 빌더 목록도 참조하세요.)
그러나 Google은 브라우저 이상의 기능을 제공합니다. 설계 및 개발 수명의 거의 모든 측면을 지원하는 도구와 리소스가 있습니다. 성능 향상 방법을 알고 싶으십니까? Lighthouse가 도와 드리겠습니다. 더 나은 성능의 모바일 사이트를 구축하고 싶으십니까? 그런 다음 AMP에 인사하세요. 아름다운 PWA를 구축하고 싶으십니까? 그러면 Flutter, Material Design 및 Workbox가 준비됩니다.
Google 도구, 리소스, 라이브러리 및 프레임 워크 사용의 장점은 지구상에서 가장 인기있는 브라우저 인 Chrome 브라우저와 잘 작동한다는 것입니다. 더 많은 도구는 웹 디자인 도구 요약을 참조하세요.
01. 등대
성능은 사이트 성공의 핵심 요소이며 Lighthouse는 웹 페이지의 품질을 개선하기위한 Google의 도구입니다 (올바른 웹 호스팅 서비스도 도움이 될 것입니다). 그렇다면 Lighthouse를 어떻게 사용하고 무엇을 할 수 있습니까? 가장 간단한 형태로 감사 탭에서 Lighthouse를 실행하고 성능, 접근성 및 SEO에 대한 체크 박스 외에도 데스크톱 또는 모바일을 포함한 다양한 옵션 중에서 선택하여 개선 사항이 제안 된 최종 보고서를 생성 할 수 있습니다.
02. 폴리머
Polymer는 웹 구성 요소 작업으로 잘 알려져 있지만이 프로젝트는 이제 라이브러리, 도구 및 표준 모음을 포함하도록 레퍼토리를 확장했습니다. 무엇이 포함되어 있습니까? LitElement는 웹 구성 요소를 쉽게 정의 할 수있는 편집기이며 lit-html은 사용자가 JS에서 차세대 HTML 템플릿을 작성할 수 있도록하는 HTML 템플릿 라이브러리입니다. 또한 PWA 스타터 키트, 원래 폴리머 라이브러리 및 웹 구성 요소 세트도 찾을 수 있습니다.
03. API 탐색기
Google에는 개발자가 사용할 수있는 방대한 API 라이브러리가 있지만 필요한 것을 찾는 것은 쉬운 일이 아닙니다. 여기에서 Google의 API Explorer가 도움의 손길을 제공합니다. 스크롤 할 수있는 긴 목록이 있지만 더 빠른 액세스를 위해 API 목록을 필터링하는 검색 상자가 있습니다. 각 항목은 API 사용 방법에 대한 자세한 내용이있는 참조 페이지로 연결됩니다.
04. 플러터
단일 코드베이스에서 모바일, 웹 및 데스크톱 용으로 멋진 애플리케이션을 구축하려는 경우 Flutter가 적합 할 수 있습니다. 이 사이트는 Flutter로 작업하고 구축하는 데 대한 완전한 참고 자료입니다. 무엇을해야할지 모르겠습니까? 이 문서는 많은 샘플과 튜토리얼의 도움을 받아 설치부터 생성까지 사용자를 안내합니다.
05. Google GitHub
대부분이 알다시피 GitHub는 코드와 파일을 저장하고 공유하는 호스팅 플랫폼 / 저장소입니다. 다행히도 Google은 260 개가 넘는 저장소를 선별 할 수있는 플랫폼을 보유하고 있습니다. 필터를 사용하여 검색 시간을 줄이고 함께 플레이하거나 기여하고 싶은 저장소에 더 가까이 다가 가세요.
06. 인형극
Node에 내장 된 Puppeteer는 헤드리스 Chrome에 액세스 할 수있는 고급 API를 제공합니다. UI없이 효과적으로 Chrome에 액세스 할 수 있으며 개발자는 명령 줄을 통해 제어 할 수 있습니다. 그렇다면 Puppeteer로 무엇을 할 수 있습니까? 페이지의 스크린 샷 및 PDF 생성, 양식 제출 자동화 및 자동화 된 테스트 환경 생성을 위해 몇 가지 옵션을 사용할 수 있습니다.
07. 워크 박스
PWA를 구축하려는 경우 이것은 훌륭한 출발점입니다. Workbox는 웹 앱에 오프라인 지원을 추가하기위한 JavaScript 라이브러리 모음을 제공합니다. 엄선 된 심층 가이드에서는 서비스 워커 파일을 생성 및 등록하고, 요청을 라우팅하고, 플러그인을 사용하고, Workbox에서 번 들러를 사용하는 방법을 보여줍니다. 체크 아웃 할 캐싱 전략의 예도 있습니다.
08. 코드 랩
Google 제품에 대한 실용적인 지침이 필요하십니까? Codelabs는 "안내 식, 자습서, 실습 코딩 경험"을 제공합니다. 이 사이트는 범주와 이벤트로 깔끔하게 분류되어 원하는 것을 빠르고 쉽게 찾을 수 있습니다. 여기에는 분석, Android, 어시스턴트, 증강 현실, Flutter, G Suite, Search, TensorFlow 및 가상 현실이 포함됩니다. 옵션을 선택하고 작은 애플리케이션을 빌드하는 데 필요한 코드와 지침을 얻으십시오.
09. 색상 도구
색상 도구는 접근성을 확인하는 것 외에도 팔레트를 만들고 공유하고 적용 할 수있는 간단한 도구입니다. 사용자는 재료 팔레트에서 미리 정의 된 팔레트를 선택할 수 있습니다. 색상을 선택한 다음 기본 색상 구성표에 적용하고 보조 옵션으로 전환 한 다음 다시 선택하면됩니다. 마지막으로 두 구성표의 텍스트 색상을 선택합니다. 또는 사용자 정의로 전환하여 색상을 선택하십시오. 그런 다음 접근성으로 전환하여 팔레트를 내보내기 전에 모든 것이 양호한 지 확인하십시오.
10. 디자인 스프린트
디자인 스프린트 키트는 디자인 스프린트에 참여하거나 실행하는 방법을 배우는 사람들을위한 것입니다. 초보자부터 숙련 된 스프린트 촉진자에 이르기까지 모든 지식 기반을 다룹니다. 방법론에 대해 배우거나 브리핑 작성, 데이터 및 연구 수집, 스프린트 후 수행 할 작업을 포함하여 계획 단계로 바로 이동합니다. 또한 도구, 템플릿, 레시피 및 자체 메서드 제출 옵션과 같은 다양한 리소스가 포함됩니다. 또한 리소스를 저장하고 공유 할 곳이 필요할 수 있으므로 클라우드 스토리지 선택이 적절한 지 확인하십시오.
11. 사람 + AI 가이드 북
이 가이드는 Google의 People + AI Research 이니셔티브의 작업이며 인간 중심의 AI 제품을 구축하려는 사람들에게 도움을 제공합니다. 포괄적 인 가이드 북은 사용자 요구, 데이터 수집 및 평가, 정신 모델, 신뢰, 피드백 및 정상적인 실패를 다루는 6 개의 장으로 나뉩니다. 각 장에는이를 실현하는 데 필요한 연습, 워크 시트 및 도구와 리소스가 함께 제공됩니다.
12. Google 어시스턴트
콘텐츠와 서비스를 Google Assistant와 통합하는 방법에 대한 가이드를 제공하는 Google Assistant의 개발자 플랫폼입니다. 모바일 앱을 확장하고, 검색 및 어시스턴트를 위해 다양한 방식으로 콘텐츠를 제공하고, 조명, 커피 머신 및 기타 기기를 집안에서 제어하고, 스마트 스피커, 디스플레이 및 전화를위한 음성 및 시각적 경험을 구축하는 방법을 보여줍니다.
13. PageSpeed Insights
PageSpeed Insights는 웹 콘텐츠를 분석 한 다음로드 속도를 높이는 방법에 대한 제안을 제공합니다. URL을 추가하고 분석 버튼을 누르고 마술이 일어날 때까지 기다리십시오. PageSpeed API의 작동 방식과 사용 시작 방법에 대한 더 나은 통찰력을 얻으려면 문서를 확인하세요.
14. Google의 AMP
AMP는 검색 순위의 최상위에 올 수있는 빠른로드 모바일 페이지를 만드는 Google의 도구입니다. 빠른 사용자 우선 사이트를 만들고, Google 제품 전반에 AMP를 통합하고, Google AMP 캐시를 사용하여 AMP 페이지를 더 빠르게 만들고, 다른 Google 제품으로 AMP 페이지로 수익을 창출하는 방법을 알아보세요.
15. Google DevTools
모든 디자이너와 개발자는 Chrome이 브라우저에 직접 내장 된 도구 모음과 함께 제공된다는 것을 알고 있습니다 (또는 적어도 알아야합니다). Chrome의 DevTools는 페이지를 구성하는 요소를 검사하고, CSS를 확인하고, 즉시 페이지를 편집하는 등의 작업에 이상적입니다.
Elements 탭은 DevTools에 대한 소개입니다. 선택한 페이지를 구성하는 HTML 코드를 표시합니다. 선택한 페이지에서 각 div 또는 태그의 속성을 파악하고 실시간 편집을 시작합니다. 이것은 디자인 실험에 적합합니다. Flexbox를 사용하든 Grid를 사용하든 Layout을 확인하고 예제와 함께 관련 글꼴을 살펴보고 애니메이션을 검토하십시오.
다른 곳에서는 CSS를보고 변경할 수 있습니다. 요소 패널의 스타일 탭에는 DOM 트리에서 현재 선택된 요소에 적용되는 CSS 규칙이 나열됩니다. 속성을 켜고 끄거나 새 값을 추가하여 디자인을 실험합니다. 이것은 라이브 디자인에 변경 사항을 적용하기 전에 모든 것이 예상대로 작동하는지 확인하기위한 완벽한 도구입니다.
JavaScript를 디버깅하고, 웹 사이트 속도를 최적화하고, 네트워크 속도를 검사 할 수도 있습니다. 다음은 워크 플로우 속도를 즉시 높이는 데 사용할 수있는 빠른 팁입니다. Sources 탭으로 이동하여 New Snippet을 클릭하고 자주 사용하는 코드를 추가합니다. 코드 조각의 이름을 지정하고 저장합니다. 필요에 따라 반복하십시오. 이제 다시 작성하는 대신이 코드 조각을 가져올 수 있습니다.
모든 좋은 브라우저와 마찬가지로 Chrome은 지속적으로 발전하고 있으며 새로운 릴리스마다 새로운 기능이 제공됩니다. Chrome 상태 플랫폼에서 무슨 일이 일어나고 있는지 알아보세요.
16. 머티리얼 디자인
개발은 구글이 선호하는 아이로 보일 수 있지만, 당신이 만들고, 만들거나, 구축하는 것이 무엇이든, 그것은 멋지게 보이고 사용자가 그것을 사용하고 싶어하는 경험을 제공해야합니다. 머티리얼은 구글 스 테이블에 더 최근에 추가되었지만 디자인 키트의 중요한 부분으로 발전한 디자인 시스템입니다.
다른 좋은 디자인 시스템과 마찬가지로 자체 가이드 라인을 가지고 있으며, 더 흥미로운 것에 들어가기 전에 살펴 봐야합니다. 다양한 요소를 사용하는 방법, 머티리얼 테마가 무엇인지, 테마를 구현하는 방법 및 접근성을 포함한 사용성 가이드에 대한 개요를 확인하세요. 다른 곳에서는 레이아웃, 내비게이션, 색상, 타이포그래피, 사운드, 아이콘, 동작 및 상호 작용과 같은 디자인의 주요 영역을 포함하는 Material Foundation에 대한 통찰력이 있습니다. 각 카테고리는해야 할 일과하지 말아야 할 일, 그리고주의해야 할 부분을 보여줍니다. 무엇을 기대해야하는지에 대한 아이디어를 제공하기 위해 레이아웃 카테고리는 레이아웃, 픽셀 밀도, 열, 거터 및 여백, 중단 점, UI 영역 및 간격 방법을 포함한 반응 형 레이아웃 작업 방법에 대한 섹션을 제공합니다.
디자인 섹션 외에도 디자인을 만드는 데 필요한 물리적 구성 요소를 제공하는 구성 요소가 있습니다. 여기에 무엇이 포함되어 있습니까? 버튼, 배너, 카드, 대화 상자, 구분선, 목록, 메뉴, 진행률 표시기, 슬라이더, 스낵바 (화면 하단의 앱 프로세스에 대한 간략한 메시지), 탭, 텍스트 필드 및 도구 설명. 의심 할 여지없이 포괄적 인 구성 요소 모음입니다.
Android, iOS, 웹 및 Flutter와 같은 다양한 플랫폼 용으로 빌드하는 방법에 대한 세부 정보와 자습서를 통해 개발자를 잊지 않았습니다. 마지막으로, 선택한 디자인을 실현하는 데 도움이되는 다양한 리소스 전용 페이지가 있습니다.
이 기사는 원래 인터넷 잡지에 실 렸습니다. 326 호 구매.
