모바일 친화성 시작하기

컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.

모바일이 세상을 바꾸고 있습니다. 오늘날에는 누구나 스마트폰을 가지고 끊임없이 의사소통하며 정보를 찾습니다. 여러 국가에서 스마트폰 수가 개인 컴퓨터 수를 넘어섰으며, 웹사이트를 모바일 친화적으로 만드는 것이 온라인 활동을 하는 데 중요한 역할을 하게 되었습니다.

  1. 웹사이트가 모바일에 적합한지 알지 못한다면 모바일 친화성 테스트를 진행해 보세요.
  2. 웹사이트 개발을 위해 Wordpress와 같은 콘텐츠 관리 소프트웨어(CMS)를 사용한 경우 Google의 웹사이트 소프트웨어 맞춤설정 가이드를 확인하세요.
  3. 혼자서 할 수 있을 만큼 기술을 갖추고 있다면 모바일 구성 선택으로 시작해 보세요.

모바일에 친화적인 웹사이트를 만들어야 하는 이유

모바일 친화적 버전에 비해 휴대기기에서 보거나 사용하기가 어려운 사이트

모바일에 친화적이지 않은 사이트는 휴대기기에서 보거나 사용하기가 어려울 수 있습니다. 모바일에 친화적이지 않은 사이트에서 사용자가 콘텐츠를 읽으려면 두 손가락으로 화면을 모으거나 확대해야 합니다. 사용자는 이러한 사용 환경을 번거롭게 느껴 사이트를 떠날 확률이 높습니다. 그러나 모바일 친화적 버전은 읽기 쉽고 즉시 사용할 수 있습니다.

미국에서는 스마트폰 사용자의 94%가 휴대전화로 지역 정보를 검색합니다. 흥미롭게도 데스크톱 컴퓨터가 있을 확률이 높은 집이나 직장에서의 모바일 검색 비율이 77%에 이릅니다.

좋아하는 스포츠팀에 관해 블로그 활동을 하거나 지역 극장의 웹사이트를 관리하거나 잠재 고객에게 제품을 판매하는 등 어떠한 작업을 하든 비즈니스에 있어서 모바일은 매우 중요합니다. 방문자가 휴대기기에서 사이트를 방문할 때 우수한 환경을 이용할 수 있는지 확인하세요.

시작하기

모바일 친화적인 사이트를 만드는 작업은 개발자 리소스, 비즈니스 모델, 전문 지식에 따라 달라집니다. 모바일에서 작동하도록 데스크톱 사이트를 새롭게 디자인하는 방법의 예는 다음 도표를 참고하세요.

모바일에서 작동하도록 데스크톱 사이트를 새롭게 디자인하는 방법

가장 기본적인 구현 수준에서 기존 데스크톱 사이트를 모바일용으로 전환하려면 데스크톱 사이트의 기존 콘텐츠 섹션은 그대로 두고 모바일 친화적인 디자인 패턴을 적용하세요. 모바일 사이트의 기술적 구현을 자세히 알아보려면 모바일 검색엔진 최적화 구성 옵션을 알아보세요.

휴대기기용 사이트를 구축할 때 알아야 하는 3가지 주요 사항

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

사이트 방문자가 방문 목적을 달성할 수 있도록 도와주세요. 방문자는 내 블로그 게시물을 읽으며 기분을 풀거나 내가 운영하는 식당의 주소를 확인하거나 내 제품 관련 리뷰를 확인하고 싶어 할 수 있습니다. 고객이 사이트를 방문해 손쉽게 작업을 완료할 수 있도록 사이트를 설계하세요.

고객이 거쳐야 하는 단계 요약

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

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

휴대기기를 보고 있는 사용자

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

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

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

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

데스크톱 및 모바일 방문자를 위한 웹사이트

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

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

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

반응형 웹 디자인 구현 방법을 자세히 알아보려면 웹 기초를 참고하세요. 모바일, 태블릿, 데스크톱 웹사이트를 별도로 구현할 때의 장단점을 따져보려면 멀티스크린 소비자를 위한 웹사이트 구축을 확인하세요.

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

  1. 모바일 고객의 존재를 잊어버림 훌륭한 모바일 사이트란 유용하게 활용되는 사이트라는 사실을 기억하세요. 흥미로운 기사를 읽거나 내 매장의 위치를 확인하는 등 방문자가 원하는 작업을 완료할 수 있도록 돕는 것이 진짜 훌륭한 모바일 사이트입니다. 모바일 형식은 갖췄지만 전체 기능을 제공하지 않는 사이트를 만드는 함정에 빠지지 마세요. 대신 모바일 친화적인 사이트(모바일 고객에게 실제로 유용하고 고객이 일반적인 작업을 하는 데 최적화된 사이트)를 만들어야 한다는 사실을 기억하세요.
  2. 데스크톱 사이트와 다른 도메인, 하위 도메인, 하위 디렉터리에 모바일 사이트를 구현함 Google은 여러 모바일 사이트 구성을 지원하긴 하지만, 별도의 모바일 URL을 만들면 사이트를 유지관리하고 업데이트할 때 수행해야 하는 작업이 늘어나고 기술적인 문제가 발생할 수도 있습니다. 반응형 웹 디자인을 사용하여 하나의 URL에서 데스크톱과 모바일에 동시에 서비스를 제공하면 작업을 크게 단순화할 수 있습니다. Google은 반응형 웹 디자인 설정을 추천합니다.
  3. 주변에서 영감을 얻으려 하지 않고 독자적으로 작업함 같은 업계의 다른 사이트나 경쟁 사이트에서 영감을 얻으세요. 업계 최초로 모바일 사이트를 구축하는 것은 아닐지라도 이전 사례로부터 배울 수 있다는 장점이 있습니다.