이 도움말에서는 웹사이트를 더욱 모바일 친화적으로 만드는 방법에 대해 설명합니다.
총 2부로 구성된 시리즈 중 1부이며, 2부에서는 광고를 모바일 친화적으로 만들기에 대해 알아보겠습니다.
시작하기 전에: 모바일이 중요한 이유
이제는 휴대기기에서도 제대로 작동하도록 웹사이트를 구현하는 것이 매우 중요합니다. 따라서 운영 중인 웹사이트를 아직 모바일 친화적으로 만들지 않으셨다면 필요한 최적화 작업을 진행하시기 바랍니다. 모바일이 비즈니스 성과에 중요한 이유는 다음과 같습니다.
- 모바일 친화적인 사이트가 검색결과의 상위에 표시됩니다.
- 모바일 검색이 Google.com 검색의 절반 이상을 차지하고 있습니다.
- 휴대전화에서 트래픽의 대부분이 발생하는 광고주가 많습니다.
- 사이트가 모바일 친화적이지 않으면 방문자가 떠날 확률이 5배 더 높습니다.
웹사이트가 모바일 친화적입니까?
잠재고객의 입장에서 휴대전화를 이용해 귀하의 웹사이트에 접속해 보세요. 웹사이트 로드가 얼마나 빠릅니까? 원하는 정보를 쉽게 찾을 수 있습니까?
모바일로 웹사이트에 접속한 방문자는 원하는 대답을 바로 얻기를 원합니다. 또한 사이트에서 비즈니스의 내용을 신속하게 확인하고 관심이 있는지를 판단하고 싶어합니다. 방문자가 웹사이트에서 갖는 경험에 따라 비즈니스에 대한 인상과 고객으로 전환할 가능성이 크게 달라집니다.
모바일용 웹사이트를 만들 때는 사용자가 원하는 정보를 바로 찾을 수 있도록 간단하고 명확하게 사이트를 구성하는 것이 가장 중요합니다.
다음은 사용하기 편한 모바일 웹사이트를 만들려고 할 때 고려해야 하는 기본 사항입니다.
웹사이트 로드가 빠른가요? 모바일 웹사이트 방문자의 절반 정도는 페이지가 3초 이내에 로드되지 않으면 해당 사이트에서 바로 나갑니다. 화면에 웹페이지가 표시되는데 걸리는 시간인 로드 시간을 최소화해서 방문자가 웹사이트를 빠르고 쉽게 탐색할 수 있게 하세요.
정보를 찾기 쉬운가요? 작은 화면에서는 사용자가 원하는 정보를 찾기 어려울 수 있습니다. 방문자가 정보를 찾으면서 이동이나 화면 확대를 많이 할수록 불편함 때문에 사이트를 떠날 가능성이 커집니다. 웹사이트 메뉴를 간단하게 만들고 화면 확대 없이도 모든 내용이 눈에 들어오게 하면 방문자의 정보 검색이 쉬워집니다.
주요 기능을 쉽게 이용할 수 있나요? 모바일 웹사이트에서 방문자가 비즈니스에 연락, 제품 검색, 구매와 같이 자주 사용하는 기능을 빠르고 쉽게 이용할 수 있어야 합니다. 양식 작성이나 거래 완료를 위해 거쳐야 하는 단계를 최소화하세요.
아래의 버튼을 클릭하여 귀하가 운영하는 사이트의 모바일 속도 등급과 간단한 개선 방법을 확인해 보세요.
웹사이트가 구체적인 비즈니스 목표에 맞춰 제작되었나요?
모바일 웹사이트의 로드가 빠르고 탐색이 쉬워도 귀하가 정한 목표에 사용자가 도달해야 효과가 있는 사이트라고 할 수 있습니다.
웹사이트를 모바일에 최적화하는 방법을 찾으려면 귀하에게 중요한 비즈니스 목표가 무엇인지 생각해 보세요. 고객이 웹사이트에서 무엇을 하기를 기대하십니까? 특정 제품을 구매하기를 원하십니까? 아니면 연락처 양식 작성을 원하십니까? 방문자가 하기를 원하는 행동을 명확하게 인식하여 사이트를 만들어야 방문자가 해당 행동을 실제로 할 가능성이 커집니다.
마케팅 목표에 해당하는 행동을 유도할 수 있도록 웹사이트를 구성하세요. 다음은 목표에 따른 권장 방법입니다.
온라인 매출 증대
- 사이트를 손쉽게 둘러볼 수 있게 하세요. 화면을 확대하지 않아도 모든 내용을 쉽게 알아볼 수 있도록 사이트 메뉴는 최대한 간소하게 구성합니다.
- 필요한 정보를 쉽게 확인할 수 있게 하세요. 제품 이미지는 별도로 확대가 가능하도록 배려해 고객이 충분히 살펴볼 수 있게 합니다.
- 손쉽게 구매할 수 있게 하세요. 안내 또는 '구매하기' 버튼을 전면 중앙에 배치하세요. 가능하면 기존 정보를 활용하여 고객이 입력해야 하는 정보를 줄이세요.
- 구매 과정을 데스크톱에서 이어서 처리할 수 있게 하세요. 휴대기기에서 장바구니에 담은 상품을 데스크톱 컴퓨터에서 확인하고 구매를 완료할 수 있게 하세요.
- 클릭 투 콜 버튼 또는 링크를 사용하세요. 사용자가 전화번호를 기억하거나 확대해서 확인할 필요가 없게 하세요.
- 메뉴 옵션을 단순한 형식으로 만드세요. 각종 문의나 상담에는 전화 통화가 가장 효과적인 연락 방법임을 확실히 표기하고, 사이트의 모든 페이지 하단에 클릭하면 바로 연결되는 전화번호나 버튼을 표시합니다.
- 관심을 돌릴 수 있는 요소가 눈에 잘 띄지 않게 하세요. 전화 연락 방법이 쉽게 보이도록 프로모션이나 기타 안내는 측면에 배치하세요.
- 양식을 쉽게 이용할 수 있게 하세요. 양식을 쉽게 찾을 수 있고, 입력할 내용을 최소화하여 손가락으로 정보를 쉽게 입력할 수 있게 하세요.
- 스크롤 및 화면 확대/축소를 제한적으로만 사용하세요. 양식 전체가 모바일 화면 안에 표시될 수 있게 하세요. 스크롤이나 확대/축소 동작은 고객이 정보를 입력하는 과정에서 실수하기 쉽게 만듭니다.
- 데이터 필드는 신중하게 선택하세요. 양식에서 고객에게 요청하는 정보는 간편하게 액세스할 수 있고 쉽게 확인할 수 있어야 합니다. 유효성 검사 기능을 사용하여 작성이 완료되지 않은 입력란에 오류가 표시되도록 하세요.
- 매장 방문을 최대한 유도하도록 사이트를 구성하세요. 고객에게 오프라인 매장 방문이 가장 좋은 방법임을 명확히 알리도록 합니다. 사이트의 모든 페이지에 지도, 위치 버튼 또는 실제 주소 및 영업시간으로 바로 연결되는 아이콘을 표시하세요.
- 필요한 정보만 제공하세요. 매장 방문 결정에 필요한 정보가 제공되는 수준에서 사이트의 탐색을 간소화하세요.
- 사이트 이용을 방해하는 요소가 있는지 확인하세요. 프로모션으로 매장 방문을 유도하는 것은 좋지만, 정도가 지나쳐 사이트 이용에 방해가 되면 곤란합니다.
- 정보를 쉽게 찾을 수 있게 하세요. 사용자가 구매를 결심하기 전까지는 검색이 용이하도록 간단한 메뉴와 큰 텍스트를 사용하세요. 모바일 화면은 크기가 작으므로 메뉴 옵션을 최소한으로 줄이세요.
- 기기와 관계없이 기존 작업을 이어서 처리할 수 있게 하세요. 고객이 구매를 결심하는 데 걸리는 시간이 길수록 거래 완료 전에 다양한 기기(데스크톱, 태블릿, 휴대전화)를 번갈아 사용하며 검색할 가능성이 큽니다. 사용자가 어떤 기기를 사용하든 저장한 선택사항을 다른 기기에서도 확인할 수 있게 하세요.
- 홈 화면으로 돌아가는 링크를 제공하세요. 정보 찾기에 진전이 없을 때 홈 화면으로 쉽게 돌아가서 다시 시작할 수 있게 하세요.
웹 개발자와 논의하기
웹사이트를 모바일 친화적으로 만드는 방법에는 여러 가지가 있습니다. 따라서 변경사항을 계획하고 구현할 때 웹 개발자와 논의하여 최적의 방법을 찾는 것이 좋습니다.
대부분의 비즈니스에서는 화면 크기, 해상도, 기기에 맞춰 웹사이트 레이아웃이 유연하게 변하는 반응형 디자인을 사용하고 있습니다. 반면 데스크톱 버전과 모바일 버전을 확실하게 구분하고 싶어하는 비즈니스 소유자도 있습니다. 웹 개발자와의 논의를 통해 비즈니스, 웹사이트 니즈, 웹 개발자 리소스를 고려하여 최적의 방법을 찾으시기 바랍니다.