모바일 UX 가이드 만들때 참고 - 모바일웹 모범사례 1.0 (Mobile Web Best Practices 1.0)

상세 내용 참조: http://www.w3.org/TR/mobile-bp/   

"모바일웹 모범사례 1.0 (Mobile Web Best Practices 1.0)"은 
모바일 장비에서 이용되는 컨텐츠를 보다 편리하게 설계하고 이용할 수 있도록 제정한 W3C의 웹표준입니다.

 

 

 * 모바일화를 위한 10가지 가이드 
  • 하나의 웹을 위한 설계 
  • 웹 표준 준수 
  • 유해 요소 제거  : 모바일 장비의 제한 된 화면크기, 키보드, 기타 기능에 대한 사용자의 문제를 고려하여 설계
  • 장비 제한 주의 
  • 웹 navigation 최적화 : 작은 화면, 제한된 모바일 환경에서는 단순한 navigation과 입력이 매우 중요
  • 그래픽과 색상 확인 : 이미지, 색상, 스타일은 contents를 빛나게 하지만 지원되는 포맷과 저사양 등을 유의
  • 가볍고 간결한 사이트 
  • 네트워크 자원 절약 
  • 사용자 입력 가이드 
  • 모바일 유저 배려  : 시간이 부족하고 번잡한 상황에 있는 모바일 사용자들은 간결한 정보를 얻고자

 

 

 

 

모바일화를 위한 10가지 가이드

 

1.하나의 웹을 위한 설계
다양한 장비를 고려하여 설계한 컨텐츠는 비용을 절감시키고, 유연성을 증대하며, 더 많은 사람들의 필요를 충족시킬 수 있다.
주제의 일관성: 다양한 장비에서 동일 URI에 접속했을 때 제공되는 정보와 기능은 일관성이 있어야 한다.
성능: 사용자에게 향상된 기능을 제공하기 위해 장비 성능을 상세히 확인해야 한다.
오작동: 다양한 장비가 각각 다르게 해석하여 발생할 수 있는 오작동을 염두에 두고 설계한다.
테스팅: 실제 장비와 에뮬레이터 상에서 테스트를 수행한다.

 

2.웹 표준 준수
세계 곳곳의 제각기 다른 장비와 브라우저의 호환을 위해서는 표준을 준수해야 한다.
유효한 MARKUP: 표준 문법에 유효한 문서를 작성한다.
컨텐츠 포맷 지원: 장비가 지원하는 컨텐츠를 전송한다.
선호하는 컨텐츠 포맷 제공: 가능하면 장비가 선호하는 포멧으로 컨텐츠를 전송한다.
캐릭터 인코딩 지원: 장비가 지원하는 캐릭터 인코딩을 사용한 컨텐츠를 제공해야 한다.
캐릭터 인코딩 정보 활용: 장비에서 사용되는 캐릭터 인코딩을 확인한다.
스타일 시트 사용: 장비가 지원하지 않는 경우를 제외하고, 레이아웃과 형식의 설계는 스타일 시트를 사용한다.
구성: 논리적인 문서 구성을 위해 마크업 언어(markup language) 기능을 사용한다.
오류 메시지: 발생한 오류 정보를 알 수 있는 메시지를 제공하고, 그러한 오류를 피해 브라우징을 계속할 수 있도록 한다.

 

3.유해요소 제거
모바일 장비의 제한 된 화면크기, 키보드, 기타 기능으로 발생하는 사용자의 문제를 고려하여 설계한다.
팝업창: 팝업창이나 새로운 창이 열리지 않도록 하고, 사용자에게 사전 정보 없이 현재 창을 바꾸지 않는다.
테이블 속의 테이블: 테이블 내에 또 다른 테이블을 포함하지 않는다.
테이블 레이아웃: 테이블을 이용하여 레이아웃을 구성하지 않는다.
여백과 그래픽: 여백 공간에 그래픽을 사용하지 않는다.
프레임 비사용: 프레임을 사용하지 않는다.
이미지 맵(IMAGE MAPS): 이미지 맵은 장비에서 효과적으로 지원되지 않는 한 사용하지 않는다.

 

4.장비 제한 주의
특정 웹 기술을 사용하고자 할 때는, 모바일 장비 성능이 제각기 다르다는 것을 염두해 두어야 한다.
쿠키(COOKIES): 이용 가능한 쿠키에 의존해서는 안된다.
객체나 스크립트: 임베드 되어 있는 객체나 스크립트에 의존해서는 안된다.
테이블 지원: 장비에서 테이블을 지원하지 않는 경우 사용하지 않는다.
테이블 대체: 가능한 경우에는 테이블 형식을 대체할 수 있는 형식으로 작성한다.
스타일 시트 지원: 필요한 경우 스타일 시트 없이도 문서를 읽을 수 있도록 구성한다.
글꼴: 글꼴 관련 스타일링에는 의존하지 않는다.
색상 사용: 색상을 통해 얻을 수 있는 정보도 색상을 사용하지 않고 이용할 수 있게 한다.

 

5.웹 navigation 최적화
작은 화면과 키보드, 제한된 bandwidth (대역폭)에서는 단순한 navigation과 입력이 매우 중요하다.
NAVBAR: 페이지 상단에는 최소의 네비게이션 메뉴바를 제공한다.
네비게이션: 일관된 네비게이션 메카니즘을 제공한다.
타겟 ID 링크: 각 링크의 타겟을 명확히한다.
파일 포멧: 이용되는 파일의 포멧이 장비에서 지원되는지 주의한다. 
타겟의 접근: 네비게이션 메뉴와 자주 사용하는 기능에는 키보드 숏컷(shortcut)을 지정한다.
URI: URI를 짧게하여 입력을 쉽게한다.
균형: 사용자가 원하는 정보와 페이지에 제공되는 링크 수의 균형을 맞춰 원하는 정보를 쉽게 얻도록 한다.

 

6.그래픽과 색상 확인
이미지, 색상, 스타일은 컨텐츠를 빛나게 하지만 지원되는 포맷과 저사양의 화면 등을 유의하여야 한다.
이미지 크기 조절: 고유 크기가 있는 이미지는 서버에서 크기를 조절한다.
대용량 그래픽: 장비에서 제공할 수 없는 이미지는 사용하지 않는다. 정보제공을 위해 꼭 필요한 것이 아니면 고사양의 고해상도 이미지의 사용은 피한다.
이미지 크기 설정: 고유 크기가 있는 이미지는 마크업에 이미지 크기를 설정한다.
NON-TEXT 대체: 텍스트가 아닌 요소(이미지, 애니메이션, 동영상 등)에 대해서는 그에 상응하는 텍스트를 제공한다.
색상 명암: 전경과 배경의 색 조합은 적절한 명암 대비를 유지해야 한다.
배경 이미지 가독성: 배경에 이미지를 사용할 경우 컨텐츠 내용을 볼 수 있어야 한다.
측정: 마크업 언어 속성 값과 스타일 시트 속성 값에는 픽셀 측정과 절대 단위를 사용하지 않는다.

 

7.가볍고 간결한 사이트
가벼운 사이트는 시간과 비용을 절약하여 사용자를 즐겁게 한다.
최소화: 간결하고 효율적인 마크업을 사용한다.
페이지 사이즈 제한: 장비의 메모리 한계를 고려한 페이지를 설계한다.
스타일 시트 크기: 스타일 시트의 크기를 최소화한다.
스크롤링: 추가적인 스크롤링을 사용해야 하는 경우가 아니라면, 한 방향으로 스크롤을 하도록 제한한다.

 

8.네트워크 자원 절약
웹 프로토콜 기능을 활용하면 네트워크 부하와 대기시간을 줄여 사용자 이용을 향상시킬 수 있다. 
오토 리프레쉬: 사용자에게 사전에 알리거나 중지 방법을 제공하지 않는 한, 주기적인 페이지 오토 리프레시는 사용하지 않는다.
경로 변경: 마크업으로 자동 경로 변경(redirection)을 사용하지 않고, 서버 설정을 통한 HTTP 3xx code 경로 변경을 사용한다.
외부 자원: 외부 자원의 링크 활용을 최소화한다.
CACHING: HTTP 응답에는 캐쉬 정보를 제공한다.

 

9.사용자 입력 가이드
모바일 장비에서 키보드 및 각종 입력 방법은 비효율적일 수 있으며, 효과적인 설계는 이러한 입력을 최소화 
키입력 최소화: 키 입력 횟수를 최소화한다. 
텍스트 입력 최소화: 가능하면 텍스트 입력을 피한다.
기본값(default) 제공: 가능하면 미리 선택된 기본값을 제공한다.
기본 입력 모드: 장비가 지원하는 기본 텍스트 입력 모드, 언어, 포멧을 설정한다.
탭 순서: 링크, 폼 컨트롤과 객체를 이용한 논리적 탭 순서를 생성한다.
라벨 컨트롤: 모든 폼 컨트롤에 적절한 라벨을 붙이고, 명시적으로 라벨과 폼 컨트롤을 연계시킨다.
위치 제어: 라벨과 연관된 폼 컨트롤이 서로 적절한 위치에 있도록 한다.

 

10.모바일 유저 배려
시간이 부족하고 번잡한 상황에 있는 모바일 사용자들은 간결한 정보를 얻고자 한다.
페이지 제목: 간단 명료한 페이지 제목을 제공한다.
명확성: 명확하고 간단한 언어를 사용한다.
한 눈에 의미 파악: 페이지의 내용을 간단 명료하게 하여 다음 페이지의 내용까지 파악할 수 있도록 한다.
제한: 사용자가 요청한 범위로 컨텐츠를 제한한다.
적절: 모바일 환경 사용에 적절한 컨텐츠를 보장한다.
적절한 페이지 사이즈: 장비의 성능과 네트워크 부하 등을 고려하여 사용하기 편리하고 유용한 크기로 페이지 사이즈를 분할한다.

출처 : http://cafe.daum.net/hci.or.kr?t__nil_cafemy=item