휴대기기용 웹페이지와 애플리케이션을 개발하는 것은 데스크톱 웹브라우저용 웹페이지를 개발하는 것과는 다른 어려움이 있습니다. 다음 권장사항은 Android 및 기타 휴대기기에 가장 효과적인 웹 애플리케이션을 제공하는 데 도움이 될 수 있습니다.
- 웹사이트의 전용 모바일 버전으로 휴대기기를 리디렉션합니다. 서버 측 리디렉션을 사용하여 이 작업을 수행하는 방법에는 여러 가지가 있습니다. 일반적인 방법 중 하나는 웹브라우저에서 제공하는 사용자 에이전트 문자열을 '스니프'하는 것입니다. 사이트의 모바일 버전을 제공할지 여부를 판단하려면 사용자 에이전트에서 'mobile' 문자열을 찾습니다.
- 휴대기기에는 HTML5를 사용합니다. HTML5는 모바일 웹사이트에 사용되는 가장 일반적인 마크업 언어입니다.
이 표준은 웹사이트가 다양한 기기에서 작동하도록 하기 위해 모바일 중심 개발을 권장합니다. 이전 웹 언어와 달리 HTML5는 더 간단한
<DOCTYPE>
및charset
선언을 사용합니다.<!DOCTYPE html> ... <meta charset="UTF-8">
- 표시 영역 메타데이터를 사용하여 웹페이지의 크기를 적절하게 조절합니다.
<head>
문서에 브라우저의 표시 영역에서 웹페이지를 렌더링하는 방식을 지정하는 메타데이터를 제공합니다. 예를 들어 표시 영역 메타데이터는 브라우저 표시 영역의 높이와 너비, 초기 페이지 배율, 타겟 화면 밀도를 지정할 수 있습니다.다음 예에서는 표시 영역 메타데이터를 설정하는 방법을 보여줍니다.
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
Android 지원 기기에 표시 영역 메타데이터를 사용하는 방법에 관한 자세한 내용은 웹 앱에서 다양한 화면 지원을 참고하세요.
- 세로 선형 레이아웃을 사용합니다. 사용자가 페이지를 탐색하는 동안 좌우로 스크롤하지 않아도 됩니다. 위아래로 스크롤하면 사용자가 더 쉽게 페이지를 작성할 수 있습니다.
- 레이아웃 높이 및 너비를
match_parent
로 설정합니다.WebView
객체의 높이와 너비를match_parent
로 설정하면 앱 뷰의 크기가 올바르게 조정됩니다. 높이를wrap_content
로 설정하면 크기가 잘못 조정되므로 권장하지 않습니다. 마찬가지로 레이아웃 너비를wrap_content
로 설정하는 것은 지원되지 않으며WebView
이 대신 상위 요소의 너비를 사용하게 됩니다. 이 동작으로 인해WebView
객체의 상위 요소 레이아웃 객체 중에서 높이와 너비가wrap_content
로 설정되어 있지 않은지 확인하는 것도 중요합니다. - 파일 요청을 여러 번 하지 않도록 합니다. 일반적으로 휴대기기는 데스크톱 컴퓨터보다 연결 속도가 느리므로 페이지를 최대한 빠르게 로드하는 것이 좋습니다. 속도를 높이는 한 가지 방법은
<head>
에서 스타일시트, 스크립트 파일과 같은 추가 파일을 로드하지 않는 것입니다. 또한 Google의 PageSpeed Insights로 모바일 분석을 실행하여 앱을 위한 자세한 최적화 제안을 확인해 보세요.