Chrome Dev Summit은 몇 주 전에 열렸으며, 이벤트 보고서 중 첫 번째 보고서입니다. 특히 모바일 및 교차 기기 개발에 중점을 두는 만큼, 이 부분을 시작하겠습니다.
폴 킨란이 쓴 최고의 모바일 웹 앱 UX 패턴
상위 1,000개 사이트의 모바일 친화성을 분석한 결과, 몇 가지 문제 영역을 발견했습니다. 53%는 여전히 데스크톱 전용 환경을 제공하고, 사이트의 82%는 휴대기기에서 상호작용 문제가 있으며, 사이트의 64%는 텍스트를 읽는 데 문제가 있습니다.
빠른 조회로 모바일 웹 환경 극적으로 개선
- 항상 표시 영역 정의
- 표시 영역 내에 콘텐츠 맞추기
- 가독성 높은 글꼴 크기 유지
- 웹 글꼴 사용 제한
- 탭 타겟의 크기와 간격을 적절하게 조정합니다.
- 입력 요소에 시맨틱 유형 사용
PageSpeed Insights에서 내 사이트의 모바일 친화성을 판단하는 UX 분석을 출시했습니다. 사이트의 모바일 UX에서 일반적인 문제를 발견하는 데 도움이 될 것입니다. 직접 사용해 보신 후
앨리스 박스홀의 멀티 디바이스 접근성
사용자는 다양한 접근성 요구사항이 있는 여러 기기를 통해 사이트와 서비스에 액세스하게 됩니다. 올바른 의미 체계와 올바른 ARIA 역할을 사용하면 브라우저와 보조 기술이 페이지를 더 잘 이해할 수 있게 됩니다.
접근성 문제를 이해하고 해결하는 주요 방법
- 키보드 전용 사용자 환경 조성
- 올바른 요소 선택과 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을 통해 여러 기기에서 빠르게 반복할 수 있습니다. 마지막으로 테스트하려는 물리적 하드웨어가 없는 경우 일부 제공업체는 클라우드를 통해 하드웨어를 제공합니다.
핵심 사항
- 우리가 감당해야 하는 기기의 수가 앞으로 계속 늘어날 것이다.
- Grunt 및 Yeoman을 통해 올바른 워크플로 수행
- Mini Mobile Device Lab으로 교차 브라우저 및 교차 기기 테스트를 간소화하세요.
- Chrome DevTools 에뮬레이션, 스톡 에뮬레이터, 클라우드 기반 에뮬레이터(예: Saucelabs, Browserstack, appexperience)와 서드 파티 에뮬레이터인 Genymotion을 사용하여 에뮬레이션을 현명하게 선택하세요.
- 모바일 테스트는 Wi-Fi 연결을 테스트하는 것 이상의 의미를 지니며, 프록시를 사용하여 느린 네트워크 속도를 시뮬레이션할 수 있습니다.
네트워크 연결: 제이크 아치볼드가 선택사항으로 제공
우리는 이 대담을 통해 많은 것을 배웠습니다. 제이크는 발표할 때 신발을 신지 않습니다. Business Kinlan에서 곧 새 책을 출간할 예정입니다. 브라우저 공급업체에서 오프라인을 심각하게 받아들이고 있으며, 오프라인 상태에서도 원활하게 작동하는 멋진 환경을 구축할 수 있도록 도와주는 도구가 곧 제공됩니다.
ServiceWorker는 매력적인 오프라인 우선 환경을 쉽게 빌드하고 AppCache로 인한 어려움을 겪지 않는 데 필요한 유연성을 제공합니다. Polyfill을 사용하여 API를 실험할 수도 있습니다.
ServiceWorker의 구조
- 차세대 점진적 개선에서는 네트워크를 잠재적 향상이라고 생각합니다.
- ServiceWorker는 네트워크 요청에 대해 스크립트 작성이 가능하고 디버깅 가능한 전체 제어 기능을 제공합니다.
- 오프라인 환경이 있는 경우 시간이 오래 걸릴 수 있으므로 네트워크를 표시하기 전에 네트워크가 실패할 때까지 기다리지 마세요.