웹 앱 권장사항

휴대기기용 웹페이지 및 애플리케이션을 개발하는 것은 데스크톱 웹브라우저용 웹페이지 개발까지 다양합니다 다음 관행은 가장 효과적인 웹 애플리케이션을 개발합니다.

  1. 휴대기기를 웹사이트의 전용 모바일 버전으로 리디렉션합니다. 여기에는 서버 측 리디렉션을 사용하여 이 작업을 수행하는 방법을 알아보겠습니다. 한 가지 일반적인 방법은 웹브라우저에서 제공하는 사용자 에이전트 문자열입니다. 확인 모바일 버전의 사이트를 제공할지 여부를 결정하려면 '모바일' 문자열에 포함되어야 합니다.
    2. <ph type="x-smartling-placeholder">
  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를 참조하세요.

추가 리소스