웹 앱 권장사항

휴대기기용 웹페이지와 애플리케이션을 개발하는 것은 데스크톱 웹브라우저용 웹페이지를 개발하는 것과는 다른 어려움이 있습니다. 다음 권장사항은 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로 모바일 분석을 실행하여 앱을 위한 자세한 최적화 제안을 확인해 보세요.

추가 리소스