휴대기기용 웹페이지 및 웹 애플리케이션을 개발하는 작업은 일반 데스크톱 웹브라우저용 웹페이지를 개발하는 작업과 비교해 다른 차원의 어려움이 있습니다. 다음 관련 리소스를 참조하세요.
다음은 Android 및 기타 휴대기기에 가장 효과적인 웹 애플리케이션을 제공하기 위한 방법으로, 이 방법을 따르면 쉽게 개발을 시작할 수 있습니다.
- 웹사이트 전용 모바일 버전으로 휴대기기 리디렉션
서버 측 리디렉션을 사용하여 웹사이트의 모바일 버전으로 요청을 리디렉션하는 데에는 몇 가지 방법이 있습니다. 대부분 이 작업은 웹브라우저의 사용자 에이전트 문자열을 '스니핑'하여 수행됩니다. 사이트의 모바일 버전을 제공할지를 결정하려면 사용자 에이전트에서 'mobile' 문자열을 찾아야 합니다.
- 휴대기기에 HTML5 DOCTYPE 사용
모바일 웹사이트에 가장 일반적으로 사용되는 마크업 언어는 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로 설정하는 것은 권장되지 않습니다. 이렇게 설정할 경우 크기 조정이 정확하지 않고 Android 4.4(API 레벨 19) 이하를 타겟팅하는 앱에서는 하위 호환성을 유지하기 위해 HTML viewport meta 태그가 무시되기 때문입니다. 마찬가지로 레이아웃 너비를wrap_content로 설정하는 것은 지원되지 않으며 이렇게 설정할 경우WebView가 부모 너비를 대신 사용하게 됩니다. 이 동작으로 인해,WebView객체의 부모 레이아웃 객체 중 어떠한 객체도 높이와 너비가wrap_content로 설정되어서는 안 됩니다. - 여러 개의 파일 요청 방지
일반적으로 휴대기기가 데스크톱 컴퓨터에 비해 연결 속도가 훨씬 느리기 때문에 최대한 빨리 웹페이지가 로드되도록 해야 합니다. 속도를 높이는 한 가지 방법은 스타일시트, 스크립트 파일 같은 추가 파일을
<head>에서 로드하지 않도록 하는 것입니다. 휴대기기에서 페이지 로드를 최적화하는 좋은 방법은 Google의 PageSpeed Insights로 모바일 분석을 수행하는 것입니다. 앱 성능을 최적화하려면 PageSpeed Insights 규칙을 참조하세요.
참고: Android 기반의 대형 화면 휴대기기 중 원본 크기 웹사이트가 제공되어야 하는 기기(예: 태블릿)는 사용자 에이전트에 'mobile' 문자열을 포함해서는 안 되고, 나머지 사용자 에이전트 문자열은 대부분 동일합니다. 따라서 사용자 에이전트에 'mobile' 문자열이 있는지에 따라 웹사이트의 모바일 버전을 제공하는 것이 중요합니다.
우수한 모바일 웹 애플리케이션 제작에 관한 자세한 가이드는 W3C의 모바일 웹 권장사항을 참조하세요. 모바일 및 데스크톱용 웹사이트 속도 개선에 관한 기타 안내는 웹을 더 빠르게에서 Google의 속도 가이드를 참조하세요.