[2014.08] 모바일 '친화적인' 웹사이트 구축 팁 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)의 부사장 야니브 마체디는 "텍스트를 줄여야 한다. 스마트폰은 데스크톱보다 화면 크기가 작다. 따라서 모바일 웹사이트에서는 텍스트 양을 최소화하려 노력해야 한다. 모바일 사용자는 빠른 스크롤을 좋아하기 때문에, 가능한 하나의 필수 카피로 독자의 관심을 끌어야 한다"라고 말했다.

 

 

5. 수십, 수천 단어의 가치가 있는 아이콘

디지털 크리에이티브 대행사인 피들플라이(Fiddlefly)의 CEO인 제임스 램지는 "사이트를 지저분하지 않게 만들려면, 동작, 소셜 연결, 메뉴에 단어보다는 기존의 모바일 아이콘을 사용한다. 이런 심벌들은 해당 사이트가 모바일에 최적화되어 있다는 사실을 방문자에게 알리는 데 도움을 준다"라고 말했다.

 

 

6. 모바일에 최적화된 이미지로 빠른 사이트 구현

웹 디자인 대행사인 뉴 헤어컷(New Haircut)의 CEO인 제이 멜론은 "모바일 웹은 FiOS나 케이블 광대역 웹 보다 느리다. 특히 미국의 LTE 속도는 평균 6.5 Mbps로 끝에서 두 번째에 불과하다"라고 지적했다. 그는 "동영상 등 데스크톱 사이트에서 사용하는 무거운 미디어 파일은 없애야 한다. 미디어 쿼리를 이용해 데스크톱 사이트를 레티나 등 모바일 스크린에 맞는 저화질 이미지로 바꿔야 한다. 또 제이쿼리(jQuery) 모바일 같이 무거운 자바스크립트를 표준 자바스크립트로 바꾸는 것을 고려할 필요가 있다"라고 밝혔다.

 

웹과 모바일 앱을 위한 이미지 관리 솔루션인 클라우디너리(Cloudinary)의 CEO인 이타이 라한은 "모바일 기기의 해상도와 비율은 240 x 320에서 2560 x 1440 이상 등 제 각각이다. 또 3G 네트워크의 다운로드 속도가 느리며, 아직까지 많은 모바일 사용자가 3G 네트워크를 이용하고 있다는 점을 유념해야 한다. 이런 모든 부분들을 감안해 특정 모바일 기기의 해상도와 비율에 맞춰 이미지를 잘라내고, 크기를 재조정하고, 최적화해야 한다. 이렇게 하면 대역 소비를 낮춰, 웹 페이지가 더 빨리 로딩되며, 사용자의 브라우징 경험 또한 개선된다"라고 강조했다.

 

 

7. 지나친 '자바' 사용은 금물

흄은 "모바일 웹사이트에서는 지나친 자바스크립트 사용을 지양해야 한다. 브라우저와 기기가 제각각이기 때문이다. 같은 스마트폰이라도 모델에 따라 자바스크립트 동작이 달라지기도 한다”라고 조언했다. “그렇다고 자바스크립트를 사용하지 말아야 한다는 의미는 아니다. 자바스크립트가 모바일 친화형 사이트의 성능에 영향을 미칠 수 있음을 염두에 둬야 한다는 이야기다"라고 말했다.

 

 

8. 사업장 전화번호, 위치, 연락처를 쉽게 찾을 수 있도록 배치

풀서비스 디자인 및 개발 대행사인 인게이지(Engage)의 크리에이티브 디렉터 안토니 오버캠프는 "모바일을 대상으로 한 사이트라는 점을 명심한다. 사용자들은 종종 영업시간, 연락을 할 수 있는 전화번호, 예약 번호, 가장 가까운 사업장 위치를 찾는다. 사용자가 이런 정보를 쉽게 찾을 수 있어야 사용자 경험이 향상된다"라고 말했다.

 

 

9. 동영상을 현명하게 활용

동영상 전략 및 콘텐츠 제공업체인 인보도(Invodo)의 마케팅 부사장인 러스 소머스는 "모바일 사이트에서도 반드시 동영상을 활용해야 한다. 모바일 기기 사용자는 노트북 컴퓨터 및 데스크톱 컴퓨터 사용자보다 3배 이상 동영상 시청을 즐기는 경향이 있다"라고 강조했다.

 

모바일에서 매끄러운 경험을 제공하는 동영상 기술을 활용해야 한다. 모바일 동영상 플레이어는 대다수 모바일 기기에서 작동이 될 수 있도록 HTML5에 기반을 두고 있어야 한다. 소머스는 "대역이나 프로세싱 자원을 많이 소비하지 않는 가벼운 동영상 플레이어를 채택해 페이지 로딩 시간을 줄이고, 사용자 경험을 향상해야 한다"라고 충고했다.

 

 

10. 모바일에 최적화된 양식 사용

웹 디자인 및 브랜딩 회사인 루시드 퓨전(Lucid Fusion)의 CEO인 주빈 모왈라 비는 "잠재 고객에게 연락할 때 필요한 정보를 최소화해 요청해야 한다. 양식 항목의 크기와 수를 최소화하고, 모바일 기기에 최적화된 기술을 활용한다. GPS를 예로 들 수 있다. GPS가 작동되고 있으면, 살고 있는 도시, 주, 우편번호 입력을 요구할 필요가 없다"라고 말했다.

 

 

11. 지리정보 고려

웹 디자인 및 개발 대행사인 더 레벨(The Level)의 CEO인 마이클 리드는 "지리정보 등 모바일 특유의 기능을 장점으로 활용해야 한다. 기업들은 이 지리정보 기술을 이용해 지도 정보를 제공하고, 방문자가 가장 가까운 사업장에 상품이나 서비스가 가용한 지 확인하며, 특정 청중을 대상으로 한 판촉 활동을 추진하고, 현지 통화로 환산한 가격을 제시하며, 엘프 등 소셜 커뮤니티를 연계한 마케팅 활동을 추진할 수 있다"라고 밝혔다.

 

 

12. 다양한 기기, 플랫폼, 운영 시스템에서 콘텐츠 확인
디지털 사용자 경험 창출 대행사인 스미스(SMITH)의 부사장인 데비 카트 너는 "여러 운영 시스템에서 사용자 경험을 테스트해야 한다. 사이트의 사용자 경험과 유용성을 높이기 위해서다. 솔리디파이앱(Solidifyapp), UX리코더(UXRecorder), 딜라이트. io(delight.io) 등 이를 테스트할 수 있는 툴도 나와 있다"라고 전했다.