NSM 사이트 컨설팅 전략에 대한 열 일곱번째 이야기!

 

 

 

모바일 웹① : 모바일 웹에서 효율적인 정보전달을 위해 꼭 지켜야 할 10가지 가이드

 

 

지난 칼럼 내용 중, 모바일을 주제로 한 ‘모바일 환경을 고려한 모바일 웹사이트 제작 TIP’에서 언급했던 것처럼 스마트폰을 이용한
모바일 인터넷 사용량은 시간과 장소를 가리지 않고 더 급격히 늘어나고 있으며, 2012년 미국 BIA/KELSEY가 리서치한 ‘Desktop과 Mobile 검색 추이’ 그래프처럼 모바일 웹이 조만간 PC웹 시장규모를 뛰어넘을 것이라는 예측이 보도되고 있습니다.

 

[그림 1] Desktop vs Mobile 검색량 예측 그래프(Source:BIA/Kelsey 2012) 

 

 

이렇듯 스마트폰과 태블릿PC의 보급 활성화로 인해 PC에서 스마트 디바이스로 중심이 이동함에 따라, 쉬운 접근과 정보탐색을 위한 최적화 작업이 최근 모바일 웹의 화두로 떠오르고 있습니다. 하지만 급변하는 모바일 시장의 속도가 너무 빠르다 보니 하드웨어보다
소프트웨어적인 부분은 아직 체계화되지 못한 모습입니다. 그래서 이번 칼럼에서는 모바일 웹 환경에서 최적화된 웹사이트를 제작하기 위해 알아야 할 기본적인 제작 가이드에 대하여 알아보도록 하겠습니다.

 

 

모바일 웹의 현황과 문제파악

 

 

국내에서는 2009년 말 애플의 아이폰 출시를 시작으로 태블릿PC, 스마트TV 등 다양한 디바이스와 플랫폼이 상용화되면서 본격적인 스마트시대가 열리게 되었습니다. 하지만 그와 동시에 수많은 디바이스의 제조사들이 내세우는 개발방식이 플랫폼마다 달라
크로스 플랫폼이 어려워 같은 제품이면서도 OS별로 다른 제품을 만들어야 하는 불편한 이슈가 생겨나기 시작하였습니다.
또한, 기존 웹사이트에서 사용되던 제작 기술과 디자인을 모바일 웹에 그대로 접목시키거나 기능이나 화려한 디자인에만 주력하는
경우가 많았기 때문에 모바일 유저의 사용성이나 접근성은 애초부터 고려하지 못하는 경우가 많았습니다.
따라서 이러한 모바일 유저의 사용성을 높이기 위해서는 제작사가 지원하는 플랫폼에 관계없이 모두가 지켜나갈 수 있는 ‘표준 제작 가이드’가 필요하게 되었습니다.

 

 

10가지 표준 제작 가이드의 이해

 

앞서 말한 ‘모바일 웹 표준 제작 가이드’가 필요해짐에 따라 2010년 7월 지식경제부에서는 사용자의 불편함을 최소화하고 모바일 웹 편의성을 높이고자 ‘모바일 웹 콘텐츠 구축 가이드’를 마련하였습니다. 이 가이드는 W3C(웹 표준을 제정하는 등 웹의 장기적인 발전을 위해 1992년에 창립된 인터넷 관련 국제 컨소시엄)에서 제정한 웹표준을 준수하였으며, ‘한국형 모바일 웹 모범사례(Mobile Web Best Practices 1.0) 표준 규격’이라는 제목으로 다음의 10가지 내용을 안내하고 있습니다.
 

[참고] 한국형 모바일 웹 모범사례(Mobile Web Best Practices 1.0) 표준 규격

 

 

1) 하나의 웹을 위한 설계

2) 웹 표준 준수

3) 유해요소 제거

4) 장비 제한 주의

5) 웹 네비게이션 최적화

6) 그래픽과 색상 확인

7) 가볍고 간결한 사이트

8) 네트워크 자원 절약

9) 사용자 입력 가이드

10) 모바일 유저 배려

 

 

본 10가지 가이드는 모바일 웹 환경에 맞는 사이트를 만들기 위한 기본적인 지침이므로
유저에게 좀 더 쉽고 편리한 모바일 웹 제작을 위해 반드시 실현시켜 보시기 바랍니다

 

---

 

1) 하나의 웹을 위한 설계
 

 

: 다양한 디바이스와 플랫폼들간의 크로스 사용이 어려움에 따라, 어떤 모바일 기기와 OS를 사용하여 사이트에 접속하더라도
동일한 기능과 정보를 제공하여 일관성을 갖추어야 합니다. 만약, 안드로이드와 iOS 플랫폼에서 같은 주소의 모바일 웹 사이트 접속 시
다른 UI를 보인다거나 어느 한쪽의 플랫폼에서는 보이지 않는 기능이 구현되고 있다면 사용자에게 동일한 웹사이트를 제공하였다고
보기 어렵습니다.

 

[그림 2] 다양한 장비와 플랫폼에서도 동일한 기능과 정보 제공

 

---

 

2) 웹 표준 준수

: 웹 표준은 다양한 접속 환경 속에서 인터넷 사용자가 정보를 동등하게 이용할 수 있도록 하기 위해 국제 표준 방식에 따라 제작하는 것을 말합니다. 웹 표준을 지키기 위해서는 국제 웹 표준 기구인 W3C(World Wide Web consortium)가 제안하는 표준 방식에
따라 개발되어야 하고, 일부 디바이스에서 지원되지 않는 기술과 포맷은 사용하지 않도록 해야 합니다. 예를 들어, 레이아웃과 포맷의 설계는 스타일시트^*를 사용하여 페이지 전체에 일관성을 주도록 하는 방법입니다. 개발과 디자인의 요소를 별도로 관리하면
운영도 쉬워질 뿐 아니라 웹표준도 지킬 수 있기 때문에 웹 접근성이 향상되어 유저 사용성은 더욱 높아지게 되며 전환에까지 영향을 미치게 될 것입니다.

 

* 스타일시트
페이지를 만드는데 사용될 여러 가지(폰트 종류와 크기, 여백, 글자색, 배경색, 정렬 등) 스타일들을 미리 정의해 놓은 기능.
페이지 제작 시, 글꼴과 색상 등의 스타일을 페이지별로 일일이 지정해주지 않아도 되며, 스타일시트에서 한 가지 요소만 변경해도 스타일시트를 적용한 모든 페이지에서 한꺼번에 변경가능.

 

---

 

3) 유해요소 제거
 

: PC 웹에서 주로 많이 사용되는 팝업창, 프레임^*, 이미지 맵^* 등은 모바일 기기에서는 사용에 제한적일 수 있으며 기능에도 문제가
발생할 수 있으므로 사용하지 않도록 설계되어야 합니다.

 

* 프레임 : 레이아웃을 나누는 디자인 기능
* 이미지 맵 : 사용할 이미지를 잘라 링크를 설정하지 않고, 풀 이미지에 링크 영역을 설정하는 기능. 
                  이미지 맵이 실행될 때마다 서버가 작동되어야 하는 불편함 때문에 PC웹에서도 많이 쓰이지 않음.

 

---

 

4) 장비 제한 주의

: 특정 웹 기술(Flash및 스크립트 등)은 일부 모바일 기기에서는 지원되지 않는 경우가 존재합니다. 예를 들면, 애플의 아이폰은 Mobile Flash Player를 지원하고 있지 않기 때문에, Flash로 제작된 웹사이트에 접근 시 Flash 영역이 Blank로 보여지는 등
웹사이트를 이용하는데 커다란 제약이 존재합니다. 따라서 이러한 대안으로 요즘은 차세대 표준규격이라 일컬어지는 HTML5를
사용하여 ActiveX, Flash, 실버라이트 없이도 그에 못지않은 동적인 구현을 처리하고 있고 호환성도 좋기 때문에 모바일 기기에서는 HTML5를 선호하고 있는 추세입니다. 그리고 디바이스마다 성능이 다르므로 디자인 요소가 없이도 문서를 읽을 수 있도록 제작해야 하는 부분도 충분히 고려해야 합니다. 디자인을 너무 신경 쓴 나머지 가장 중요한 핵심정보를 읽을 수 없도록 방해한다면 안되겠죠.
 

---

 

5) 웹 네비게이션 최적화

 

: 웹 네비게이션은 사용자들이 정보를 쉽고 빠르게 찾을 수 있도록 가이드를 제공하는 방법입니다.
모바일 기기는 이와 달리 작은 화면과 키보드로 인해 터치 영역의 크기나 위치 이동 등이 제한적이기 때문에 메뉴 사용과 이동 경로가 복잡해서는 안됩니다. 아무리 퀄리티 높은 디자인을 갖고 있는 모바일 웹 사이트라도 웹 네비게이션의 사용성이 떨어진다면 이용자는 원하는 정보를 얻지 못하고 페이지 이탈로 이뤄질 수 밖에 없습니다. 웹 네비게이션을 최적화하기 위해서는 URI(Uniform Resource Identifier)^*를 짧게 하여 입력을 쉽게 하고 페이지 상단에는 최소한의 네비게이션 메뉴바를 제공하는 등 사용자가 최소화된 행동으로 목적 페이지까지 이동할 수 있도록 하는 것을 고려해야 합니다.

 

* URI : 흔히 많이 쓰이는 URL(Uniform Resource Locator)보다 상위 개념이며, 인터넷에서 요구되는 기본조건으로서
           인터넷 프로토콜(HTTP 또는 FTP)이 항상 붙어 다님.

 

[그림3] 페이지 상단에 최소한의 메뉴바 제공
 

---

 

6) 그래픽과 색상 확인

 

: 모바일 기기에서 그래픽과 색상 표현은 좁은 화면에서 가독성을 높힐 수 있는 가장 쉽고도 중요한 방법입니다. 텍스트가 아닌 이미지나 동영상 등을 제공할 때에는 이를 설명하는 텍스트를 함께 제공해주어 사용자의 이해를 도울 수 있도록 해야 합니다. 또한, 배경색이 있는 이미지 텍스트를 사용할 경우에는 3대 1 이상의 명암대비를 유지하여 제작하도록 합니다.

 

[그림4] 배경색이 있을 경우 3:1의 명암대비 고려

 

---

 

7) 가볍고 간결한 사이트
 

: 사용자의 모바일 기기에 따라 메모리 한계가 있을 수 있으며, 네트워크의 문제로 접속이 순조롭게 이어지지 않을 수 있으므로
페이지를 가볍게 설계해야 합니다. 인터넷 접속이 불안정한 상태에서 모바일 웹 사용자가 이미지로 가득 찬 페이지를 보고 있다면,
이미지가 다 보이기도 전에 창을 닫게 될 확률은 높아질 것입니다. 스타일 시트의 용량 크기를 최소화하여 서버 사용의 무게를 가볍게 한다면 이러한 문제를 줄일 수 있습니다, 또한 스크롤은 될 수 있으면 한 화면에서는 한 방향으로만 스크롤하도록 하여 사용자가 쉽고 논리적으로 이용할 수 있도록 하는 것도 사용자의 시간과 비용을 절약하는 데에 도움을 줄 수 있습니다.

 

[그림5] 한 방향으로 스크롤 하도록 제한

 

---

 

8) 네트워크 자원 절약

: 페이지 오픈 시, 웹 프로토콜^* 기능을 활용하면 네트워크 부하와 대기시간을 줄일 수 있습니다. 열린 페이지에서 사용자에게
제대로 알려주거나 중지 방법을 제공하지 않는 한, 오토 리프레시(새로고침) 기능은 사용하지 않도록 합니다.
이 기능은 네트워크 부하와 로딩 시간이 길어져 사용자의 불편함을 초래합니다.

 

* 웹 프로토콜 : 인터넷에서, 웹 서버와 사용자의 인터넷 브라우저 사이에 문서를 전송하기 위해 사용되는 통신 규약(HTTP)

 

---

 

9) 사용자 입력 가이드
 

: 모바일 기기에서 키보드 입력은 불편하게 느껴집니다. 따라서 키보드 입력 횟수를 최소화할 수 있도록 하고 가능하면 미리 선택된
기본값(Default)을 사용할 수 있도록 제공하며, 입력 폼에는 설명 레이블을 넣어 사용자가 직관적으로 이해하고 입력할 수 있도록
해야 합니다.

 

[그림6] 입력폼에 작성 가이드 레이블을 넣어 직관적으로 설명

 

---

 

10) 모바일 유저 배려
 

: 시간이 부족하고 다양한 상황에 있을 수 있는 모바일 사용자들을 위해 한 눈에 의미를 파악할 수 있도록 간단 명료한 페이지 제목을 제공해야 합니다. 또, 페이지의 내용도 간단 명료하게 서브 타이틀로 정리하여 다음 페이지의 내용까지 예측할 수 있어야 합니다.
상황에 따라 보고 있던 페이지를 일정 시간 뒤에 다시 볼 수도 있으므로 페이지 내에 현재 로케이션을 파악할 수 있도록 하여
다양한 상황에 놓인 모바일 유저를 배려할 수 있어야 합니다.

 

[그림7] 카테고리 위치와 페이지 제목을 제공하여 한 눈에 위치 파악

 

---

 

모바일에 웹 환경에 맞는 사이트 만들기, 어렵지 않아요.

 

이번 칼럼에서는 ‘한국형 모바일 웹 모범사례 표준 규격’의 내용을 살펴보았습니다. 모바일 웹 환경에 맞는 사이트를 만들기 위한
웹 표준 준수의 관심과 중요도는 점점 더 높아지고 있으며, 모바일 유저의 사용성을 향상시키기 위해서는 가독성을 고려한 설계와
지속적인 사용자 테스트가 중요합니다. 특히, 화면의 상단에 최소한의 메뉴바를 제공하거나 가독성을 높이는 색상과 폰트 크기를 고려하여 제작하는 작업만으로도 더 나은 모바일 웹사이트를 만드는데 큰 도움을 줄 수 있습니다.

 

스마트 폰의 빠른 보급은 사용자들에게 공간적, 시간적인 제약 없이 인터넷에 쉽게 접속하여 정보 탐색과 커뮤니케이션을 가능하게
한 것뿐만 아니라 구매활동으로까지 영역이 넓혀지고 있으므로 앞서 설명 드린 ‘한국형 모바일 웹 모범사례 표준 규격’의
10가지 제작 가이드를 준수하시어 광고주님의 모바일 웹사이트 최적화를 실현시켜 보시기 바랍니다.