Chrome 개발자 서밋이 몇 주 전에 종료되었습니다. 다음은 이 행사에 관한 일련의 보고서 중 첫 번째입니다. 모바일 및 교차 기기 개발이 강조되었으므로 먼저 이를 살펴보겠습니다.
Paul Kinlan의 모바일 웹 앱을 위한 최적의 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를 사용합니다.
교차 기기 환경에 맞게 워크플로 최적화하기(Matt Gaunt)
데스크톱, 모바일, 태블릿, 웨어러블 및 기타 폼 팩터를 위해 개발해야 하는 경우 스트레스를 줄이기 위해 워크플로를 최적화하려면 어떻게 해야 하나요? LiveReload, Grunt, Yeoman, 그리고 새로 공개된 Mini Mobile Device Lab을 사용해 빠르게 반복할 수 있는 강력한 멀티기기 접근 방식이 있습니다. 마지막으로 테스트하려는 실제 하드웨어가 없는 경우 일부 제공업체에서는 클라우드를 통해 하드웨어를 제공합니다.
핵심 사항
- 지원해야 할 기기 수는 점점 늘어날 것입니다.
- Grunt 및 Yeoman으로 올바른 워크플로 설정하기
- Mini Mobile Device Lab으로 교차 브라우저 및 교차 기기 테스트 간소화
- Chrome DevTools 에뮬레이션, 기본 에뮬레이터, 클라우드 기반 에뮬레이터(예: Saucelabs, Browserstack, appexperience) 및 서드 파티 에뮬레이터 Genymotion을 사용하여 에뮬레이션을 현명하게 선택하세요.
- 모바일 테스트는 Wi-Fi 연결에서 테스트하는 것 이상을 의미합니다. 프록시를 사용하여 느린 네트워크 속도를 시뮬레이션하세요.
네트워크 연결: 제이크 아치볼드님 제공(선택사항)
이번 강연에서 많은 것을 배웠습니다. 제이크는 프레젠테이션할 때 신발을 신지 않는다는 점, 비즈니스 킨란의 새 책이 곧 출간된다는 점, 브라우저 공급업체가 오프라인을 중요하게 생각하고 있으며 곧 오프라인에서 잘 작동하는 멋진 환경을 구축하는 데 도움이 되는 도구를 사용할 수 있다는 점 등입니다.
ServiceWorker를 사용하면 매력적인 오프라인 우선 환경을 쉽게 빌드하고 AppCache로 인한 문제를 겪지 않을 수 있습니다. Polyfill을 사용하여 API를 실험할 수도 있습니다.
ServiceWorker가 구출
- 차세대 프로그레시브 개선에서는 네트워크를 잠재적인 개선사항으로 취급합니다.
- ServiceWorker를 사용하면 네트워크 요청을 완전히 스크립트화하고 디버그할 수 있습니다.
- 오프라인 환경이 있는 경우 네트워크 연결이 끊어질 때까지 기다리지 마세요. 시간이 오래 걸릴 수 있습니다.