웹 앱 권장사항

휴대기기용 웹페이지 및 애플리케이션을 개발하는 작업은 데스크톱 웹브라우저용 웹페이지를 개발하는 작업과 비교해 다른 차원의 어려움이 있습니다. 다음은 Android 및 기타 휴대기기에 가장 효과적인 웹 애플리케이션을 제공하기 위한 방법입니다.

  1. 웹사이트 전용 모바일 버전으로 휴대기기를 리디렉션합니다. 서버 측 리디렉션을 사용하여 이 작업을 실행하는 방법에는 여러 가지가 있습니다. 일반적인 방법 중 하나는 웹브라우저에서 제공하는 사용자 에이전트 문자열을 '스니핑'하는 것입니다. 사이트의 모바일 버전을 제공할지 여부를 결정하려면 사용자 에이전트에서 'mobile' 문자열을 찾으세요.
  2. 휴대기기에 HTML5를 사용합니다. HTML5는 모바일 웹사이트에 가장 일반적으로 사용되는 마크업 언어입니다. 이 표준은 다양한 기기에서 웹사이트가 작동하도록 모바일 우선 개발을 권장합니다. 이전 웹 언어와 달리 HTML5에서는 더 단순한 <DOCTYPE> 및 charset 선언이 사용됩니다. 
    <!DOCTYPE html>
...
<meta charset="UTF-8">
  3. 표시 영역 메타데이터를 사용하여 웹페이지의 크기를 적절하게 조정합니다. 브라우저의 표시 영역에서 웹페이지를 어떻게 렌더링할지 지정하는 메타데이터를 문서 <head>에 제공합니다. 예를 들어 표시 영역 메타데이터는 브라우저 표시 영역의 높이와 너비를 비롯하여 초기 페이지 스케일과 타겟 화면 밀도까지도 지정할 수 있습니다.

    다음 예는 뷰포트 메타데이터를 설정하는 방법을 보여줍니다.

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

    Android 기반 기기에 표시 영역 메타데이터를 사용하는 방법에 관한 자세한 내용은 웹 앱에서 다양한 화면 지원을 참고하세요.

  4. 수직 선형 레이아웃을 사용합니다. 사용자가 페이지를 탐색하는 동안 좌우로 스크롤하지 않아도 됩니다. 위아래로 스크롤하는 것이 사용자에게 더 편안하고 페이지가 더 간단해 보입니다.
  5. 레이아웃 높이와 너비를 match_parent로 설정합니다. WebView 객체의 높이와 너비를 match_parent로 설정하면 앱 뷰의 크기가 올바르게 조정됩니다. 높이를 wrap_content로 설정하는 것은 권장되지 않습니다. 이렇게 설정할 경우 크기 조정이 정확하지 않기 때문입니다. 마찬가지로 레이아웃 너비를 wrap_content로 설정하는 것은 지원되지 않으며 이렇게 설정할 경우 WebView가 부모 너비를 대신 사용하게 됩니다. 이 동작으로 인해 WebView 객체의 상위 요소 레이아웃 객체 중 어떠한 객체도 높이와 너비가 wrap_content로 설정되어서는 안 됩니다.
  6. 여러 개의 파일 요청을 피하세요. 일반적으로 휴대기기가 데스크톱 컴퓨터에 비해 연결 속도가 느리므로 최대한 빨리 페이지가 로드되도록 해야 합니다. 속도를 높이는 한 가지 방법은 스타일시트, 스크립트 파일 같은 추가 파일을 <head>에서 로드하지 않도록 하는 것입니다. 또한 Google의 PageSpeed Insights로 모바일 분석을 수행하여 앱에 맞는 자세한 최적화 제안을 확인해 보세요.
  7. 파비콘이 필요하지 않으면 자동 다운로드를 사용 중지합니다. 기본적으로 WebView는 탐색 시 사이트를 방문할 때마다 자동으로 파비콘을 다운로드합니다. WebView는 다운로드된 각 파비콘의 사본을 두 개 (하나는 Java에, 하나는 네이티브 메모리에) 유지하므로 파비콘 다운로드를 사용 중지하면 메모리 (WebView 인스턴스당 약 8KB)가 절약되고 대역폭 소비가 줄어듭니다. 앱에서 즐겨찾기 아이콘을 사용하거나 표시하지 않는 경우 Jetpack Webkit 라이브러리의 WebSettingsCompat.setDownloadFaviconsEnabled()를 사용하여 자동 다운로드를 사용 중지하세요.

    Kotlin

    // In this example, "myWebView" is an instance of WebView.
if (WebViewFeature.isFeatureSupported(WebViewFeature.DOWNLOAD_FAVICONS_ENABLED)) {
    WebSettingsCompat.setDownloadFaviconsEnabled(myWebView.settings, false)
}

    자바

    // In this example, "myWebView" is an instance of WebView.
if (WebViewFeature.isFeatureSupported(WebViewFeature.DOWNLOAD_FAVICONS_ENABLED)) {
    WebSettingsCompat.setDownloadFaviconsEnabled(myWebView.getSettings(), false);
}
  8. 저장된 상태를 관리하고 트랜잭션 한도를 방지합니다. saveState(Bundle)을 사용하여 수명 주기 이벤트 중에 WebView 상태를 저장하는 경우 WebViewCompat.saveState()을 사용하여 페이로드 크기 제한을 적용하여 Android의 1MB savedInstanceState 제한을 초과하지 않도록 합니다. 자세한 내용은 WebView 상태 효율적으로 관리를 참고하세요.
  9. 추측 로드 API를 사용하여 네트워크 연결 및 페이지 로드를 최적화하세요. 탐색 지연 시간을 줄이려면 Jetpack Webkit API를 사용하여 네트워크 연결과 콘텐츠를 미리 준비하세요. Profile.addQuicHints를 호출하여 QUIC를 통한 HTTP/3 지원을 미리 채우면 WebView가 첫 번째 연결에서 즉시 QUIC를 사용할 수 있고 Profile.preconnect를 사용하여 네트워크 소켓을 미리 워밍할 수 있습니다. 대상 URL을 알거나 추정할 수 있는 경우 Profile.prefetchUrlAsync 또는 WebViewCompat.prerenderUrlAsync를 사용하여 백그라운드에서 페이지를 가져오거나 렌더링합니다. 자세한 내용은 WebView의 추측 로드를 참고하세요.
  10. 파비콘이 필요하지 않으면 자동 다운로드를 사용 중지합니다. 기본적으로 WebView는 탐색 시 사이트를 방문할 때마다 자동으로 파비콘을 다운로드합니다. WebView는 다운로드된 각 파비콘의 사본을 두 개 (하나는 Java에, 하나는 네이티브 메모리에) 유지하므로 파비콘 다운로드를 사용 중지하면 메모리 (WebView 인스턴스당 약 8KB)가 절약되고 대역폭 소비가 줄어듭니다. 앱에서 즐겨찾기 아이콘을 사용하거나 표시하지 않는 경우 Jetpack Webkit 라이브러리의 WebSettingsCompat.setDownloadFaviconsEnabled()를 사용하여 자동 다운로드를 사용 중지하세요.

    Kotlin

    // In this example, "myWebView" is an instance of WebView.
if (WebViewFeature.isFeatureSupported(WebViewFeature.DOWNLOAD_FAVICONS_ENABLED)) {
    WebSettingsCompat.setDownloadFaviconsEnabled(myWebView.settings, false)
}

    자바

    // In this example, "myWebView" is an instance of WebView.
if (WebViewFeature.isFeatureSupported(WebViewFeature.DOWNLOAD_FAVICONS_ENABLED)) {
    WebSettingsCompat.setDownloadFaviconsEnabled(myWebView.getSettings(), false);
}
  11. 저장된 상태를 관리하고 트랜잭션 한도를 방지합니다. saveState(Bundle)을 사용하여 수명 주기 이벤트 중에 WebView 상태를 저장하는 경우 WebViewCompat.saveState()를 사용하여 페이로드 크기 제한을 적용하여 Android의 1MB savedInstanceState 제한을 초과하지 않도록 합니다. 자세한 내용은 WebView 상태 효율적으로 관리를 참고하세요.

추가 리소스