시작하기

모바일 사이트를 구축할 때 알아야 하는 3가지 사항

1. 고객이 쉽게 사용할 수 있게 만듭니다.

사이트 방문자가 방문 목적을 달성할 수 있도록 도와주세요. 방문자는 내 블로그 소식을 읽으며 기분을 풀거나 내가 운영하는 식당의 주소를 확인하거나 내 제품 관련 리뷰를 확인하고 싶어할 수 있습니다. Walgreens GVP 겸 eCommerce 수석 기술 책임자인 Abhi Dhar는 다음과 같이 말합니다. "모바일에서 우리가 수행하는 모든 작업의 목표는 고객의 삶을 더 편하게 만드는 것입니다."

고객이 가장 자주 수행하는 작업이 쉬워지도록 사이트를 설계하세요. 작업의 시작부터 사이트 방문, 작업 수행에 이르기까지 모든 과정이 어렵지 않아야 합니다.

고객이 수행하는 작업에 필요한 단계를 대략적으로 수행해보고 휴대기기에서 간단하게 완료할 수 있는지 확인합니다. 과정을 간소화하고 사용자가 수행해야 하는 작업의 수를 줄이도록 노력하세요. 이 예시의 경우 (1) 고객이 구매할 램프를 검색한 후 사이트를 클릭합니다. (2) 다양한 램프를 탐색한 후 (3) 원하는 램프를 구입합니다.

2. 모바일 고객이 일반적인 작업을 얼마나 간편하게 완료할 수 있는지 확인하여 웹사이트의 효율성을 측정합니다.

모바일 사이트를 만들 때 우선순위가 필요합니다. 모바일에서 고객에게 가장 중요하고 일반적인 작업이 무엇인지를 결정하는 것부터 시작합니다. 이러한 작업을 지원할 수 있는 능력은 매우 중요하며 결국 모바일 사이트의 평가 기준은 고객이 자신의 목표를 얼마나 잘 완료할 수 있는가입니다. 사이트의 디자인을 통해 사이트를 편하게 사용할 수 있도록 지원하는 방법이 있습니다. 인터페이스의 일관성을 유지하고 플랫폼 간에 통일성 있는 환경을 제공하도록 해 보세요.

'모바일 쇼핑 사이트 이용자는 사용 편의성을 가장 중요하게 생각합니다. 응답자의 48%가 사용 편의성이 모바일 사이트를 선택하는 데 있어 가장 중요하게 생각하는 요인이라고 답했습니다.'라는 내용이 MediaPost에 실리기도 했습니다.

3. 모든 기기에 일관성 있는 모바일 템플릿, 테마, 디자인을 선택합니다(예: 반응형 웹 디자인 사용).

'반응형 웹 디자인' 또는 RWD란 사용자가 데스크톱 컴퓨터를 사용하든 태블릿 또는 스마트폰을 사용하든 페이지에 같은 URL과 코드를 사용한다는 의미합니다. 화면 크기에 맞춰 디스플레이만 조정 또는 '반응'하게 됩니다. Google에서는 다른 디자인 패턴보다 RWD 사용을 권장하고 있습니다. RWD의 장점 중 한 가지는 사이트에 대해 2가지 버전이 아닌 1가지 버전만 유지관리하면 된다는 점입니다. 일례로 www.example.com에서 데스크톱 사이트를 관리하고 m.example.com에서 모바일 버전을 관리하지 않아도 되며, 데스크톱과 모바일 방문자 모두를 위해 www.example.com과 같은 사이트 하나만 유지관리하면 됩니다.

반응형 사이트는 동일한 URL과 코드를 사용하면서도 디스플레이를 다양한 화면 크기에 맞게 조정합니다. 위의 3가지 기기 모두 www.example.com을 사용합니다 (모바일 페이지로 m.example.com을 사용하거나 태블릿 페이지로 t.example.com을 사용하지 않아도 됨).

"Baines & Ernst는 RWD를 사용함으로써 여러 웹사이트를 만들지 않고도 다양한 화면 크기에 맞도록 사이트 환경을 최적화했습니다. Baines & Ernst 사이트의 방문자는 매 방문 시 11% 더 많은 페이지를 방문했고 모바일 전환도 51% 증가했습니다."

고객이 제품을 구입하거나 업체에 전화를 걸거나 뉴스레터를 구독하는 등 원하는 작업을 수행했을 때 '전환'이 발생한 것으로 봅니다.

반응형 웹 디자인 구현 방법을 자세히 알아보려면 Web Fundamentals에서 개발자 콘텐츠를 참조하세요. 모바일, 태블릿, 데스크톱 웹사이트를 별도로 구현할 때의 장점과 단점을 비교하려면 멀티스크린 소비자를 위한 웹사이트 구축을 확인하세요.

초보자가 가장 많이 하는 3가지 실수

실수 1 - 모바일 고객의 존재를 잊어버린다.

훌륭한 모바일 사이트란 유용하게 활용되는 사이트라는 사실을 기억하세요. 흥미로운 기사를 읽거나 내 상점의 위치를 확인하는 등 방문자가 원하는 작업을 완료할 수 있도록 돕는 것이 진짜 훌륭한 모바일 사이트입니다. 모바일 형식의 사이트(모바일에서 멋지게 보이는 사이트)를 만들겠다는 함정에 빠지지 마세요. 그러다 보면 정작 중요한 실용성은 놓치게 됩니다. 대신 모바일 친화적인 사이트(모바일 고객에게 실제로 유용하고 고객이 일반적인 작업을 하는 데 최적화된 사이트)를 만들어야 한다는 사실을 기억하세요.

실수 2 - 데스크톱 사이트의 다른 도메인, 하위 도메인, 하위 디렉토리에 모바일 사이트를 구현한다.

Google은 여러 모바일 사이트 설정을 지원하기 때문에 별도의 모바일 URL을 만들면 사이트를 유지관리하고 업데이트할 때 수행해야 하는 작업이 늘어나고 기술적인 문제가 발생할 수도 있습니다. 반응형 웹 디자인을 사용하여 하나의 URL에서 데스크톱과 모바일에 동시에 서비스를 제공하면 작업을 크게 단순화할 수 있습니다. Google은 반응형 웹 디자인 설정을 추천합니다.

실수 3 - 주변에서 영감을 얻으려 하지 않고 독자적으로 작업한다.

같은 업계의 다른 사이트나 경쟁 사이트에서 영감을 얻으세요. 업계 최초로 모바일 사이트를 구축하는 것이 아니라면 이전 사례로부터 배울 수 있다는 장점이 있습니다. 모바일 플레이북Google 멀티스크린 성공사례에서도 다양한 아이디어를 얻을 수 있습니다.

개발자와 작업할 때 고려해야 할 사항

모바일 사이트를 구축하기 위해 개발자와 함께 작업할 때 다음 단계에 따라 좋은 결과를 기대해 보세요.

1. 개발자의 모바일 웹사이트 관련 참고자료와 포트폴리오를 요청합니다.

개발자에게 반응형 웹 디자인(RWD) 관련 경험이 있는지 묻습니다. 데스크톱 전용 사이트가 있다면 개발자에게 데스크톱 사이트를 반응형 사이트로 전환한 경험이 있는지 물어봅니다. 개발자가 구축한 다른 사이트를 확인합니다. 개발자를 추천한 사람이나 이전 고객에게 연락하여 개발자에 대해 어떻게 생각하는지 물어봅니다. Google의 PageSpeed Insights와 같은 도구를 사용하여 개발자의 포트폴리오를 확인해 볼 수 있습니다. PageSpeed Insights는 페이지 속도를 저하하거나 페이지의 사용 편의성을 저해하는 요소를 알려줍니다.

Web Fundamentals는 속도와 사용자 환경 모두에 관한 PageSpeed Insights 모바일 테스트를 전달합니다.

2. 개발자에게 내 모바일 고객에 대한 정보를 제공합니다.

개발자에게 내 비즈니스에 대해 설명하고, 가장 자주 사용되는 작업이 무엇이며 어떤 작업을 모바일 사이트에 최적화하고 싶은지도 알립니다. 모바일 고객이 필요로 하는 기능을 지원하는 사이트를 개발하도록 하세요.

3. 개발자에게 속도 개선을 위해 노력해 달라고 요청합니다.

고객이 브라우저에서 내 페이지가 로드될 때까지 너무 오랫동안 기다려서는 안 된다고 이야기하세요. 개발자가 PageSpeed Insights(위에서 설명한 도구)에 대해 알고 있는지, 페이지 로드 시간을 단축할 수 있는 기술에 대해 잘 알고 있는지 묻습니다. 계약서에 WebPagetest에 따라 경쟁 사이트만큼 빠른 페이지 '렌더링' 내용을 포함시킬 수 있습니다. 또는 이렇게 하기 어려운 경우 개발자가 PageSpeed Insights 결과에 '수정 필요' 상태의 문제가 없음을 의미하는 초록색 체크 표시가 나타나도록 해 달라고 요청하세요 (페이지 결과에 초록색 체크 표시가 나타나지 않는 경우 문제 해결에 드는 비용과 이점을 비교하여 사이트 소유자와 개발자가 판단을 내려야 함). 모바일 페이지의 속도와 관련된 정보를 알아보려면 '신속한 모바일 웹사이트 성능 개선' 동영상을 시청하세요.

4. 개발자에게 웹로그 분석 도구를 설치하라고 합니다.

Google 애널리틱스와 같은 웹로그 분석 도구를 설치하면 사이트 성능에 관한 종합적인 정보를 수집할 수 있습니다.

5. 개발자와 함께 Google의 웹마스터 가이드라인을 숙지합니다.

가이드라인에는 Google이 사이트의 콘텐츠를 검색하고, 처리하고, 순위를 지정하는 방법이 설명되어 있습니다.

6. 계약서에 최초 출시 이후의 모바일 사이트 개선 내용을 포함시킵니다.

수집된 고객의 의견과 웹로그 분석 도구의 데이터를 사이트 개선에 활용할 수 있습니다.

Google 애드워즈 추천 모바일 및 멀티스크린 공급업체 목록을 확인해 보세요. 모바일 웹사이트 구현 관련 내용을 자세히 알아보려면 모바일 검색엔진 최적화 관련 Google 문서를 참조하세요.

다음에 대한 의견 보내기...