모바일 최적화 해야하는 5가지 이유

스마트폰과 태블릿의 전성시대 그리고 모바일 인터넷 환경의 급속한 발전에 따라 웹사이트를 모바일에 밎게 최적화를 해야하는 5가지 이유에 대해 해외 커뮤니티 자료를 참고로 간략하게 정리한 글입니다.

전세계는 요즘들어 스마트폰 열풍이 몰아치고 있음을 미디어 보도 및 모바일 인터넷 환경 변화를 통해서 어렵지 않게 실감할 수 있습니다.

2010. 12월 보고에 의하면 미국 모바일 폰 시장의 약 31%를 스마트폰이 차지하고 있는 것으로 알려지고 있으며 국내의 경우도 스마트폰 가입자가 1500만에 달하고 있는 것으로 압니다. 이는 수많은 사람들이 스마트폰과 같은 다양한 모바일 기기로 웹사이트를 이용하게 될 것이란 의미를 담고 있다고 해도 과언이 아닐 것입니다.

하지만 이런 인터넷 환경의 변화에도 불구하고 웹사이트를 운영하는 기업과 기관 그리고 일반 중.소기업들의 대응은 안일하게도 여유롭기만 한 것 같습니다. 많은 사람들이 여러분들의 웹사이트를 모바일 환경에서 접속했을 때 어떠한 경험을 하고 불편함을 느끼는 지 한번쯤 고려해 보았거나 직접 살펴는 보았는지 질문을 드리고 싶습니다. 더불어 모바일 버전의 웹사이트는 가지고 있는지도 궁금합니다.

오늘날 우리가 왜 모바일 인터넷 환경을 염두에 두고 웹사이트의 모바일 최적화를 고민해야 하는지 5가지 이유에 근간을 두고 한번 살펴 보도록 하겠으며, 여러분들이 모바일 사이트를 준비하는데 조금이나마 기폭제가 되었으면 합니다.

1. 수평 스크롤 / 지랄맞은 Swiping

대부분의 스마트폰은 풀브라우징 기능을 가지고 있어 일반적인 웹사이트도 마치 데스크탑 PC에서 보는 것처럼 정확하게 보여 줍니다.

그러나 훨씬 작은 디스플레이 스크린에서는 전체 페이지를 한번에 보는 것은 결코 쉽지 않습니다. 이것은 페이지의 작은 부분으로 줌인(확대)하는 과정을 요구하게 됨을 의미합니다.

한번에 페이지의 작은 부분으로 확대하는 것으로 여러분의 모바일기기가 놀라운 반응을 하는 디스플레이가 아니면(줌 했을 정도의 텍스트공간을 보이는) 하나의 기사를 읽기위해 반복해서 스크롤하거나 상하좌우 swipe해야 한다는 것입니다.

모바일웹 버전(디자인로그)

모바일 PC버전(디자인로그)

위 사진은 고정적으로 보여지는 모바일전용 테마(왼쪽)와 데스크탑 테마(오른쪽)를 사용하여 안드로이드폰이나 아이폰에서의 일반적인 웹사이트가 어떻게 보여지는지를 나타내주고 있습니다.

예제 이미지에서도 알수 있듯이 데스크탑 버전에서는 제목의 절반이 차단이 되고, 우선 이미지를 벗어나려면, 문서 텍스트의 상당부분도 보기 어렵게 됩니다. 또한 모든 텍스트를 읽으려면 화면을 확대 해야 하거나, 가로로 움직여야 하는 불편함을 감수해야 합니다.

그러나 모바일 버전에 최적화하면, 웹사이트가 모바일 기기의 너비를 맞추어 전체기사를 아래로 스크롤 하기만 하면 쉽게 기사 내용을 읽을 수 있게 되어집니다.

2. 손가락은 정밀한 도구가 아니다.

마우스를 주로 사용해 온 웹 서핑 습관으로 인해 때때로 사각형 몇 픽셀보다 더 작은 곳을 클릭하는 것에 우리는 꽤 익숙해져 있습니다. 그렇지만 터치스크린 기반 모바일기기에서는 검지손가락으로 같은 작업을 하는 것이 만족스럽지 못한 경험을 제공하게 만듭니다.

작은 링크가 전체적으로 결합 되어있는 구조를 지녔고 원하는 곳을 손가락으로 누르는 것은 거의 불가능 하기 때문에 개인적으로 모바일기기로 이용을 포기한 사이트는 셀 수 없을 정도록 많습니다.

가능하다면 모바일용 사이트에서의 링크는 손가락 끝으로 대상을 누를 수 있도록 충분히 커야 합니다. 그리고 가급적이면 선호버튼으로 디자인해서 픽셀을 찾기 보다는 겨냥하는 부분을 명확하게 찾을 수 있어야 합니다.

3. 모바일 네트워크가 느릴 수 있다.

우리가 사용하고 있는 휴대전화가 초고속 4G 광대역에 임박해 있어 모바일 네트워크 속도에 대한 부정적인 여론은 서서히 사라지게 될지도 모릅니다. 국내의 경우에는 벌써 SKT 4G LTE, KT Wibro 4G, U+ LTE가 초기 서비스를 시작하고 있는 상황입니다.

그러나 당분간 현실은 모바일 데이터 네트워크에서의 브라우징은 웹사이트의 특성과 콘텐츠의 크기에 따라 극도로 느려질 수 있습니다.

여러분의 사이트가 모바일 전용 버전이 없다면 불필요한 스크립트, 플러그인과 이미지를 다운로드 하기 때문에 불필요한 대역폭을 낭비함으로써 웹사이트 로드도 훨씬 오래 걸리게 됩니다.

그렇게 되면 방문자는 느리게 로드하는 웹사이트를 기다리고 있지 않을 것이고 점진적으로 해당 사이트를 이용하지 않는 방문자가 증가하는 결과를 초래할 수 있기 때문입니다.

4. 상호작용은 데스크탑과 모바일이 다르다

데스크탑 컴퓨터의 웹사이트에서는 마우스 포인트를 올려 미리 정보를 확인하거나 드롭다운 메뉴를 클릭하여  더 많은 항목을 나타내는 것이 매우 일반적인 기능입니다. 하지만 여기서 문제가 되는 것은 여러분이 손가락으로 무엇인가를 할 수 없다는 것입니다. 물론 태블릿 PC라면 일부 가능할 수도 있겠지만 크게 유용하진 못하다는 점입니다.

그러므로 여러분이 웹사이트의 콘텐츠를 데스크탑이든, 모바일이든 상관없이 많은 사람들과 터치스크린 사용자들에게 표시하고자 한다면 다른 방법을 고려해야 한다는 것이 하나가 되겠습니다.

5. 모바일 최적화는 어려운가? 쉬운가?

많은 분들이 모바일 최적화에 대해 어려워하고 있음을 보게 됩니다. 하지만 플랫폼에 따라 다르겠지만 워드프레스같은 플랫폼으로 웹사이트를 구축한 경우라면 모바일 버전을 만드는 것이 플러그인을 설치하는 것 만큼 쉽습니다. 일례로 BraveNewCode의 WPtouch Pro를 사용하면 간단하게 해결할 수 있습니다.

위의 오른쪽 스크린샷에서 볼수 있는 것과 같이 터치스크린 기기에서 사이트가 보여질때 자동으로 감지하고, 필요한 것을 빼고, 가벼운 테마를 제공하기 때문입니다. 무료버전도 있지만, $39의 프로버전 사용을 추천하며 프로버전은 워드프레스 사용자 메뉴, 스레드형 덧글, 아이패드 테마 빌드, 그리고 다수의 기능을 제공하고 있어 유용합니다.