2014.03.17

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

Jennifer Lonoff Schiff | CIO
모바일 기기에서 어떤 회사의 웹사이트를 볼 수 있다고 해서 그것을 모바일 친화적이라고 할 수는 없다. 모바일 고객들이 긍정적인 경험을 갖도록 하려면, 모바일 전문가와 웹 디자인 및 개발 전문가들이 말하는 조언을 따르길 바란다.

시장조사업체 컴스코어(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 픽셀 이상으로 만들어야 한다. 이는 가장 우선시해야 할 부분이다. 그래야만 사용자가 스크린에서 원하는 지점을 쉽게 선택할 수 있다"고 말했다.




2014.03.17

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

Jennifer Lonoff Schiff | CIO
모바일 기기에서 어떤 회사의 웹사이트를 볼 수 있다고 해서 그것을 모바일 친화적이라고 할 수는 없다. 모바일 고객들이 긍정적인 경험을 갖도록 하려면, 모바일 전문가와 웹 디자인 및 개발 전문가들이 말하는 조언을 따르길 바란다.

시장조사업체 컴스코어(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 픽셀 이상으로 만들어야 한다. 이는 가장 우선시해야 할 부분이다. 그래야만 사용자가 스크린에서 원하는 지점을 쉽게 선택할 수 있다"고 말했다.


X