모바일웹

모범사례

하나의 웹을 위한 설계

주제의 일관성: 다양한 장비에서 동일 URI에 접속했을 때 제공되는 정보와 기능은 일관성이 있어야 한다.

성능: 사용자에게 향상된 기능을 제공하기위해 장비 성능을 상세히 확인해야한다.

오작동: 다양한 장비가 각각 다르게 해석하여 발생할 수 있는 오작동을 염두에 두고 설계한다.

테스팅: 실제 장비와 에뮬레이터 상에서 테스트를 수행한다.

유해 요소의 제거

팝업창: 팝업창이나 새로운 창이 열리지 않도록 하고, 사용자에게 사전 정보없이 현재 창을 바꾸지 않는다.

테이블 속의 테이블: 테이블 내에 또 다른 테이블을 포함하지 않는다.

테이블 레이아웃: 테이블을 이용하여 레이아웃을 구성하지 않는다.

여백과 그래픽: 여백 공간에 그래픽을 사용하지 않는다.

프레임 비사용: 프레임을 사용하지 않는다.

이미지 맵(IMAGE MAPS): 이미지 맵은 장비에서 효과적으로 지원되지 않는 한 사용하지 않는다.

장비 제한을 주의

쿠키(COOKIES): 이용 가능한 쿠키에 의존해서는 안된다.

객체나 스크립트: 임베드 되어 있는 객체나 스크립트에 의존해서는 안된다.

테이블 지원: 장비에서 테이블을 지원하지 않는 경우 사용하지 않는다.

테이블 대체: 가능한 경우에는 테이블 형식을 대체할 수 있는 형식으로 작성한다.

스타일 시트 지원: 필요한 경우 스타일 시트 없이도 문서를 읽을 수 있도록 구성한다.

글꼴: 글꼴 관련 스타일링에는 의존하지 않는다.

색상 사용: 색상을 통해 얻을 수 있는 정보도 색상을 사용하지 않고 이용할 수 있게 한다.

웹 네비게이션(navigation)의 최적화

NAVBAR: 페이지 상단에는 최소의 네비게이션 메뉴바를 제공한다.

네비게이션: 일관된 네비게이션 메카니즘을 제공한다.

타겟 ID 링크: 각 링크의 타겟을 명확히한다.

파일 포멧: 이용되는 파일의 포멧이 장비에서 지원되는지 주의한다.

타겟의 접근: 네비게이션 메뉴와 자주 사용하는 기능에는 키보드 숏컷(shortcut)을 지정한다.

URI: URI를 짧게하여 입력을 쉽게한다.

균형: 사용자가 원하는 정보와 페이지에 제공되는 링크 수의 균형을 맞춰 원하는 정보를 쉽게 얻도록 한다.

그래픽과 색상을 확인

이미지 크기 조절: 고유 크기가 있는 이미지는 서버에서 크기를 조절한다.

대용량 그래픽: 장비에서 제공할 수 없는 이미지는 사용하지 않는다. 정보제공을 위해 꼭 필요한 것이 아니면 고사양의 고해상도 이미지의 사용은 피한다.

이미지 크기 설정: 고유 크기가 있는 이미지는 마크업에 이미지 크기를 설정한다.

NON-TEXT 대체: 텍스트가 아닌 요소(이미지, 애니메이션, 동영상 등)에 대해서는 그에 상응하는 텍스트를 제공한다.

색상 명암: 전경과 배경의 색 조합은 적절한 명암 대비를 유지해야 한다.

배경 이미지 가독성: 배경에 이미지를 사용할 경우 컨텐츠 내용을 볼 수 있어야 한다.

측정: 마크업 언어 속성 값과 스타일 시트 속성 값에는 픽셀 측정과 절대 단위를 사용하지 않는다.

가겹고 간결한 사이트

최소화: 간결하고 효율적인 마크업을 사용한다.

페이지 사이즈 제한: 장비의 메모리 한계를 고려한 페이지를 설계한다.

스타일 시트 크기: 스타일 시트의 크기를 최소화한다.

스크롤링: 추가적인 스크롤링을 사용해야 하는 경우가 아니라면, 한 방향으로 스크롤을 하도록 제한한다.

네트워크 자원을 절약

오토 리프레쉬: 사용자에게 사전에 알리거나 중지 방법을 제공하지 않는 한, 주기적인 페이지 오토 리프레시는 사용하지 않는다.

경로 변경: 마크업으로 자동 경로 변경(redirection)을 사용하지 않고, 서버 설정을 통한 HTTP 3xx code 경로 변경을 사용한다.

외부 자원: 외부 자원의 링크 활용을 최소화한다.

CACHING: HTTP 응답에는 캐쉬 정보를 제공한다.

사용자 입력 가이드

키입력 최소화: 키 입력 횟수를 최소화한다.

텍스트 입력 최소화: 가능하면 텍스트 입력을 피한다.

기본값(default) 제공: 가능하면 미리 선택된 기본값을 제공한다.

기본 입력 모드: 장비가 지원하는 기본 텍스트 입력 모드, 언어, 포멧을 설정한다.

탭 순서: 링크, 폼 컨트롤과 객체를 이용한 논리적 탭 순서를 생성한다.

라벨 컨트롤: 모든 폼 컨트롤에 적절한 라벨을 붙이고, 명시적으로 라벨과 폼 컨트롤을 연계시킨다.

위치 제어: 라벨과 연관된 폼 컨트롤이 서로 적절한 위치에 있도록 한다.

모바일 유저를 배려

페이지 제목: 간단 명료한 페이지 제목을 제공한다.

명확성: 명확하고 간단한 언어를 사용한다.

한 눈에 의미 파악: 페이지의 내용을 간단 명료하게 하여 다음 페이지의 내용까지 파악할 수 있도록 한다.

제한: 사용자가 요청한 범위로 컨텐츠를 제한한다.

적절: 모바일 환경 사용에 적절한 컨텐츠를 보장한다.

적절한 페이지 사이즈: 장비의 성능과 네트워크 부하 등을 고려하여 사용하기 편리하고 유용한 크기로 페이지 사이즈를 분할한다.