Mobile UI/UX Guideline

Mobile UI/UX Guideline ([1][2]참고)
 
1. 하나의 웹을 위한 설계

다양한 장비를 고려하여 설계한 컨텐츠는 비용을 절감시키고, 유연성을 증대하며, 더 많은 사람들의 필요를 충족시킬 수 있다.

• 주제의 일관성: 다양한 장비에서 동일 URI에 접속했을 때 제공되는 정보와 기능은 일관성이 있어야 함
• 성능: 사용자에게 향상된 기능을 제공하기위해 장비 성능을 상세히 확인
• 오작동: 다양한 장비가 각각 다르게 해석하여 발생할 수 있는 오작동을 염두에 두고 설계
• 테스팅: 실제 장비와 에뮬레이터 상에서 테스트를 수행

2. 웹 표준 준수 

세계 곳곳의 제각기 다른 장비와 브라우저의 호환을 위해서는 표준을 준수해야한다.

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

3. 유해요소 제거

모바일 장비의 제한 된 화면크기, 키보드, 기타 기능으로 발생하는 사용자의 문제를 고려하여 설계한다.

• 팝업창: 팝업창이나 새로운 창이 열리지 않도록 하고, 사용자에게 사전 정보없이 현재 창을 바꾸지 않는다.
• 테이블 속의 테이블: 테이블 내에 또 다른 테이블을 포함하지 않는다.
• 테이블 레이아웃: 테이블을 이용하여 레이아웃을 구성하지 않는다.
• 여백과 그래픽: 여백 공간에 그래픽을 사용하지 않는다.
• 프레임 비사용: 프레임을 사용하지 않는다.
• 이미지 맵(IMAGE MAPS): 이미지 맵은 장비에서 효과적으로 지원되지 않는 한 사용하지 않는다.

4. 장비 제한 주의

특정 웹 기술을 사용하고자 할때는, 모바일 장비 성능이 제각기 다르다는 것을 염두해 두어야 한다.

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

5. 웹 네비게이션 최적화

작은 화면과 키보드, 제한된 bandwidth에서는 단순한 네비게이션과 입력이 매우 중요하다.

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

6. 그래픽과 색상 확인

이미지, 색상, 스타일은 컨텐츠를 빛나게하지만 지원되는 포맷과 저사양의 화면 등을 유의하여야 한다.

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

7. 가볍고 간결한 사이트

가벼운 사이트는 시간과 비용을 절약하여 사용자를 즐겁게 한다.

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

8. 네트워크 자원 절약

웹 프로토콜 기능을 활용하면 네트워크 부하와 대기시간을 줄여 사용자 이용을 향상시킬 수 있다.

• 오토 리프레쉬: 사용자에게 사전에 알리거나 중지 방법을 제공하지 않는 한, 주기적인 페이지 오토 리프레시는 사용하지 않는다.
• 경로 변경: 마크업으로 자동 경로 변경(redirection)을 사용하지 않고, 서버 설정을 통한 HTTP 3xx code 경로 변경을 사용한다.
• 외부 자원: 외부 자원의 링크 활용을 최소화한다.
• CACHING: HTTP 응답에는 캐쉬 정보를 제공한다.

9. 사용자 입력 가이드

모바일 장비에서 키보드 및 각종 입력 방법은 비효율적일 수 있으며, 효과적인 설계는 이러한 입력을 최소화 할 수 있다.

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

10. 모바일 유저 배려

시간이 부족하고 번잡한 상황에 있는 모바일 사용자들은 간결한 정보를 얻고자 한다.

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

N-Screen UI (참고)
다음 페이지와 같은 동적인 크기 지정, 화면 크기의 변경에 따른 적절한 변경

* http://www.colly.com

Reference
[1] http://www.w3c.or.kr/Translation/mwbp_flip_cards/ 
[2] http://www.w3.org/TR/mobile-bp/