모바일웹을 위한 모범사례 가이드

"모바일웹 모범사례 1.0 (Mobile Web Best Practices 1.0)"은 모바일 장비에서 이용되는 컨텐츠를 보다 편리하게 설계하고 이용할 수 있도록 제정한 W3C의 웹표준입니다. 본 팜플렛에는 모바일웹 모범사례를 10가지 주제로 쉽게 설명하고 있습니다. 본 팜플렛의 가이드라인을 따르면 컨텐츠 제공자들은 더 많은 고객에게 컨텐츠를 제공할 수 있게되고, 효과적인 웹사이트와 어플리케이션을 구현할 수 있으며, 다양한 장비에서 웹을 편리하게 브라우징 할 수 있을 것입니다.

 

 

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

 

하나의 웹을 위한 설계

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

 

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

 

웹 표준 준수

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

 

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

 

 

유해요소 제거

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

 

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

 

 

장비 제한 주의

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

 

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

 

 

웹 네비게이션 최적화

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

 

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

 

 

그래픽과 색상 확인

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

 

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

 

 

가볍고 간결한 사이트

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

 

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

 

 

네트워크 자원 절약

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

 

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

 

 

사용자 입력 가이드

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

 

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

 

 

모바일 유저 배려

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

 

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

 

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

Mobile Web Best Practices 1.0