Chrome Dev Summit - 모바일 요약

Chrome Dev Summit은 몇 주 전에 열렸으며, 이벤트 보고서 중 첫 번째 보고서입니다. 특히 모바일 및 교차 기기 개발에 중점을 두는 만큼, 이 부분을 시작하겠습니다.

폴 킨란이 쓴 최고의 모바일 웹 앱 UX 패턴

상위 1,000개 사이트의 모바일 친화성을 분석한 결과, 몇 가지 문제 영역을 발견했습니다. 53%는 여전히 데스크톱 전용 환경을 제공하고, 사이트의 82%는 휴대기기에서 상호작용 문제가 있으며, 사이트의 64%는 텍스트를 읽는 데 문제가 있습니다.

빠른 조회로 모바일 웹 환경 극적으로 개선

  • 항상 표시 영역 정의
  • 표시 영역 내에 콘텐츠 맞추기
  • 가독성 높은 글꼴 크기 유지
  • 웹 글꼴 사용 제한
  • 탭 타겟의 크기와 간격을 적절하게 조정합니다.
  • 입력 요소에 시맨틱 유형 사용

PageSpeed Insights에서 내 사이트의 모바일 친화성을 판단하는 UX 분석을 출시했습니다. 사이트의 모바일 UX에서 일반적인 문제를 발견하는 데 도움이 될 것입니다. 직접 사용해 보신 후

슬라이드: 모바일 웹 앱을 위한 최고의 UX 패턴

앨리스 박스홀의 멀티 디바이스 접근성

사용자는 다양한 접근성 요구사항이 있는 여러 기기를 통해 사이트와 서비스에 액세스하게 됩니다. 올바른 의미 체계와 올바른 ARIA 역할을 사용하면 브라우저와 보조 기술이 페이지를 더 잘 이해할 수 있게 됩니다.

Slides: 멀티스크린 접근성

접근성 문제를 이해하고 해결하는 주요 방법

  • 키보드 전용 사용자 환경 조성
  • 올바른 요소 선택과 ARIA를 통해 인터페이스의 의미 체계를 표현합니다.
  • 테스트하려면 데스크톱에서 ChromeVox, Android의 TalkBack을 사용하세요.
  • 접근성 개발자 도구 Chrome 확장 프로그램을 사용해 보세요.
  • 온라인에 접속하는 잠재고객이 많아지면서 사이트에 대한 접근성을 개선해야 할 필요성이 더욱 커지고 있습니다.

Matt Guant의 Chrome WebView를 사용하여 모바일 앱 빌드

우리 모두는 개발자가 과거에 WebView를 개발할 때 직면한 문제를 잘 알고 있습니다. 제한된 HTML5 기능, 디버깅 도구 또는 빌드 도구 없음과 같은 문제들이 있습니다. Android 4.4 (KitKat)에 Chromium 지원 WebView가 도입됨에 따라 개발자는 이제 WebView를 사용하여 훌륭한 네이티브 앱을 빌드할 수 있는 다양한 새 도구를 원하는 대로 사용할 수 있습니다.

WebView는 Chrome에서 사용하는 것과 동일한 도구로 완전한 원격 디버깅을 지원합니다. 또한 Grunt를 통해 신뢰할 수 있는 웹 개발 워크플로를 선택하고 Gradle을 통해 이를 네이티브 스택 도구에 통합할 수 있습니다. 세계가 더욱 병합되는 가운데, Chrome DevTools를 사용하여 JavaScript에서 네이티브 코드를 테스트할 수 있는 영리한 트릭이 있습니다.

프레젠테이션: Chrome WebView를 사용하여 모바일 앱 빌드

효과적인 WebView 개발 핵심사항

  • 중요한 것은 새로운 기능이 아니라 이제 워크플로의 속도를 높이는 데 사용할 수 있는 도구입니다.
  • 네이티브 UI를 에뮬레이션하려고 하지 마세요. 하지만 '웹 콘텐츠'라는 안내 중 일부를 삭제해야 합니다.
  • 필요한 경우 기능의 네이티브 구현을 사용합니다. 즉, 대용량 파일에는 XHR 대신 DownloadManager를 사용합니다.

교차 기기 환경에 맞춘 워크플로 최적화(작성자: 맷 곤트)

데스크톱, 모바일, 태블릿, 웨어러블 기기 및 기타 폼 팩터를 위한 개발이 필요한 경우 어떻게 하면 워크플로 최적화로 스트레스를 줄일 수 있을까요? LiveReload, Grunt, Yeoman 및 새로 공개된 Mini Mobile Device Lab을 통해 여러 기기에서 빠르게 반복할 수 있습니다. 마지막으로 테스트하려는 물리적 하드웨어가 없는 경우 일부 제공업체는 클라우드를 통해 하드웨어를 제공합니다.

슬라이드: 교차 기기 환경에 맞춘 워크플로 최적화

핵심 사항

  • 우리가 감당해야 하는 기기의 수가 앞으로 계속 늘어날 것이다.
  • GruntYeoman을 통해 올바른 워크플로 수행
  • Mini Mobile Device Lab으로 교차 브라우저 및 교차 기기 테스트를 간소화하세요.
  • Chrome DevTools 에뮬레이션, 스톡 에뮬레이터, 클라우드 기반 에뮬레이터(예: Saucelabs, Browserstack, appexperience)와 서드 파티 에뮬레이터인 Genymotion을 사용하여 에뮬레이션을 현명하게 선택하세요.
  • 모바일 테스트는 Wi-Fi 연결을 테스트하는 것 이상의 의미를 지니며, 프록시를 사용하여 느린 네트워크 속도를 시뮬레이션할 수 있습니다.

네트워크 연결: 제이크 아치볼드가 선택사항으로 제공

우리는 이 대담을 통해 많은 것을 배웠습니다. 제이크는 발표할 때 신발을 신지 않습니다. Business Kinlan에서 곧 새 책을 출간할 예정입니다. 브라우저 공급업체에서 오프라인을 심각하게 받아들이고 있으며, 오프라인 상태에서도 원활하게 작동하는 멋진 환경을 구축할 수 있도록 도와주는 도구가 곧 제공됩니다.

ServiceWorker는 매력적인 오프라인 우선 환경을 쉽게 빌드하고 AppCache로 인한 어려움을 겪지 않는 데 필요한 유연성을 제공합니다. Polyfill을 사용하여 API를 실험할 수도 있습니다.

슬라이드: 네트워크 연결: 선택사항

ServiceWorker의 구조

  • 차세대 점진적 개선에서는 네트워크를 잠재적 향상이라고 생각합니다.
  • ServiceWorker는 네트워크 요청에 대해 스크립트 작성이 가능하고 디버깅 가능한 전체 제어 기능을 제공합니다.
  • 오프라인 환경이 있는 경우 시간이 오래 걸릴 수 있으므로 네트워크를 표시하기 전에 네트워크가 실패할 때까지 기다리지 마세요.