모바일 '친화적인' 웹사이트 구축 팁 12선

시장조사업체 컴스코어(ComScore)에 따르면, 2013년 12월을 기준으로 1억 5,600만 명의 미국인이 스마트폰을 갖고 있다. 이는 같은 해 9월보다 3% 이상 증가한 수치다. 또 앞으로도 계속 증가할 것으로 기대된다. 예를 들어, 또다른 시장조사업체 이마케터(eMarketer)는 2014년 말에는 전세계적으로 17억 5,000만 명에 달하는 사람들이 정기적으로 스마트폰을 이용할 것으로 전망했다.

수 많은 스마트폰 사용자들은 스마트폰으로 통화하고, 이메일과 문자 메시지를 주고 받는다. 스마트폰 용도는 이 밖에도 많다. 소셜 네트워크로 인맥을 넓히고, 인터넷에서 뉴스와 정보를 검색하고, 상품과 서비스를 구입하는 데 스마트폰이 쓰인다. 즉 웹사이트나 전자상거래 사이트가 모바일 트래픽에 최적화 되어 있지 않다면, 잠재 고객과 매출을 상실할 위험이 있다는 의미다.

CIO닷컴(CIO.com)은 수십 명의 모바일 및 웹 디자인/개발 전문가들에게 모바일에 최적화된 웹사이트와 전자상거래 사이트를 구축하는 방법을 물었다. 다음은 그들이 전한 모바일에 친화적인 웹사이트를 만들기 위한 12가지 팁이다.

1. '바로 반응하는' 웹사이트. 부동산 관리 소프트웨어 개발사인 랜드로드스테이션(LandlordStation)의 CEO 코플리 브로이어는 "반응(Responsive) 기술 프레임워크를 활용해야 한다. 우리가 사용하고 있는 부트스트랩(Bootstrap) 등 몇몇 기술들이 가용한 상태다”라고 밝혔다.
이는 요소들을 쉽게 그리드로 배치해, 스크린 크기에 따라 그리드를 변경할 수 있도록 해주는 기술이다. 이 경우 대형 모니터와 아이패드, 스마트폰 모두에서 웹사이트 요소들을 매끄럽게 볼 수 있다. “부트스트랩 같이 무료 오픈소스 기반이면서, 잘 개발되어 있고, 도입도 쉬운 기술들이 많다"고 브로이어는 설명했다.

마케팅 및 광고 대행사인 리타(RITTA)의 COO 케빈 자노츠는 "반응 기술은 더 통합적으로 웹을 개발할 수 있는 방식이다. 사용자는 데스크톱, 태블릿, 스마트폰 등 웹 접속 수단과 상관 없이 유사한 경험을 할 수 있다. 여러 장치에 걸쳐 사용자 경험을 향상시키는 것 외에 별도의 모바일 URL을 개발할 필요 없어 SEO 및 관리 측면에서도 장점이 있다"고 덧붙였다.

2. 엄지(또는 집게) 손가락 하나로 조작 가능. 검색 엔진 마케팅 회사인 엘리트 SEM(Elite SEM)의 마케팅 책임자 마크 와이징거는 "'핀칭' 등 번거로운 동작 필요 없이 엄지 손가락 하나로 내비게이션을 할 수 있는 사이트를 구축해야 한다"고 강조했다.

그는 "모바일 사이트에서 가장 중요한 팁 중 하나다. 사용자들이 한 손으로 사이트를 내비게이션 할 수 있어야 하기 때문이다. 덧붙여, '핀치' 동작으로 확대를 할 필요가 있는 웹 사이트라면 콘텐츠의 글자가 너무 작거나 모바일 기기에 최적화 되어 있지 않는 것이다"고 말했다.

장소 예약 서비스를 제공하는 웹사이트인 하이어 스페이스(Hire Space)의 CTO 딘 흄은 "모바일 웹 사이트를 방문하는 대다수 사용자는 터치스크린 기능을 사용한다. 따라서 손가락이 두꺼운 사람이라도 클릭이 쉽도록 버튼과 메뉴를 충분히 크게 만들어야 한다”라고 전했다. 이어서 그는 “모바일에 친화적인 웹사이트 가운데 CSS(미디어 쿼리)를 이용해 스크린 크기를 간단히 조정하도록 하면서, 손가락이 잘못된 클릭을 유발할 수 있다는 점을 감안하지 않는 웹사이트가 많다"고 지적했다.

라이온스 컨설팅 그룹(Lyons Consulting Group)의 이그제큐티브 크리에이티브 디렉터 마크 라틴은 "모바일 인터페이스를 디자인 할 때 쉽게 선택할 수 있을 정도로 타깃을 크게 만들어야 한다. 성인의 집게 손가락 크기는 평균 15-20mm다. 이를 픽셀로 환산하면 45-57 픽셀이다. 버튼이나 탭의 선택 공간을 최소 45 픽셀 이상으로 만들어야 한다. 이는 가장 우선시해야 할 부분이다. 그래야만 사용자가 스크린에서 원하는 지점을 쉽게 선택할 수 있다"고 말했다.

3. 디자인은 단순하게. 애플리케이션 디자인 및 개발사인 캑시 인터랙티브(Caxy Interactive)의 설립자이자 CEO인 마이클 라비스타는 "깨끗한 디자인과 초점이 맞춰진 카피(광고 문안)가 효과적이다. 단 몇 초 만에 회사 이미지를 전달해야 한다는 사실을 명심해야 한다. 어떤 웹사이트에나 동일하게 적용되는 원칙이다. 그러나 작은 기기를 대상으로 한 웹사이트를 디자인 할 때 특히 중요하다"고 강조했다.

그래픽과 카피, 동영상 등이 너무 많으면 사이트 불러오기가 늦어지면서 메시지 전달을 방해할 위험이 있다. 흄은 "이미지를 사용할 계획을 갖고 있다면 사용자가 페이지 로딩을 오래 기다리지 않아도 되는, 파일 크기가 작은 이미지를 사용한다"고 전했다.

4. 짧으면서 신선한 콘텐츠. 브로이어는 "콘텐츠를 지나치게 중시하는 바람에 모바일 사이트가 지저분해 지는 사례가 있다. 가능한 적은 단어로 스토리를 말할 방법을 찾아야 한다"고 지적했다.

전화 서비스 공급업체인 넥스비타(Nextiva)의 부사장 야니브 마체디는 "텍스트를 줄여야 한다. 스마트폰은 데스크톱보다 화면 크기가 작다. 따라서 모바일 웹사이트에서는 텍스트 양을 최소화 하려 노력해야 한다. 모바일 사용자는 빠른 스크롤을 좋아하기 때문에, 가능한 하나의 필수 카피로 독자의 관심을 끌어야 한다"고 말했다.