안녕하세요, 위시켓입니다.
모바일이 우리 생활에서 차지하는 비중이 점점 더 커지고 있습니다. 위시켓을 이용하는 클라이언트님들도 웹사이트 제작 프로젝트를 의뢰할 때, PC용 웹사이트뿐만 아니라, 모바일 웹 사이트도 필수적으로 고려하시는 분들이 대다수이지요.
여러분은 왜 모바일 웹사이트를 만들기로 결정했나요? 아마 모바일 환경을 통해 웹사이트에 접속하는 사용자들이 서비스를 편리하게 이용할 수 있도록 돕기 위함이 목적이겠지요.
많은 사람들이 모바일 웹사이트를 만들 때 저지르는 실수가 있습니다. 이러한 실수는 좋지 않은 사용자 경험을 주기 때문에 꼭 주의를 기울여야 합니다. 오늘 그린 클라이언트에서는 모바일 웹 사이트를 만들 때 주의해야 할 점 10가지를 알려드리겠습니다.

모바일 웹 사이트 만들 때 주의해야 할 점 10가지

1. 도메인을 반드시 통일하세요

여러분이 현재 사용하고 있는 웹사이트의 도메인을 그대로 가져가야 합니다. 서브도메인으로 모바일 웹사이트의 도메인을 설정하세요. 대다수의 웹사이트들은 ‘mobile’이나 ‘m’을 서브도메인으로 지정하고 있습니다. 예를 들어 네이버의 경우, PC용 웹사이트 주소는 ‘www.naver.com’이고, 모바일용 웹사이트 주소는 ‘m.naver.com’ 인 것처럼 말이지요.

2. 웹사이트의 주요 요소들을 바꾸지 않도록 주의하세요

모바일 최적화 페이지를 디자인할 때, 기존 웹사이트의 네비게이션 구조나 색상, 이미지 등 기본적인 디자인 골조는 그대로 가져가세요. 스마트폰이나 태블릿 PC 등 모바일 디바이스로 여러분의 웹사이트에 접속하려는 사람들은 대부분 이전에 PC용 웹사이트에 방문한 경험이 있어, 기존 콘텐츠 구조에 익숙할 것입니다.
사람들이 가장 많이 찾는 메뉴를 반드시 포함시키면서 기존의 모습과 느낌을 최대한 유지하도록 하세요. 만일 사람들이 가장 많이 찾는 메뉴 중 하나가 모바일 환경에서 구현하기 어려운 것이라면, 반드시 첫 화면에 이를 명시해야 합니다.

3. 한 페이지에 모든 콘텐츠를 다 담을 필요는 없습니다

모든 콘텐츠를 한 페이지에 넣어 생기는 끝없는 ‘스크롤 압박’을 반가워 할 사용자는 아무도 없습니다. 가장 많이 사용되는 제일 중요한 부분만 골라 모바일 웹사이트에 노출시키세요. 한 페이지에 너무 많은 콘텐츠를 담는다면 로딩 시간이 길어질 것입니다. 또한 좌우 스크롤은 모바일 환경에선 최악의 경험임을 명심하시기 바랍니다.

4. 사이트 내 검색 기능은 꼭 남겨두세요

검색 기능은 일반적으로 첫 화면의 우측 상단에 위치합니다. 이 기능은 모바일 웹사이트에 익숙하지 않아 헤매는 사용자들에게 동아줄이나 다름 없습니다. 또한 사이트 내 검색 기능은 대개 스마트폰 화면 스크롤을 내려 콘텐츠를 찾는 것보다 빠른 경우가 많습니다.

5. 테스트 한 후 깨지는 이미지 파일을 교체하세요

많은 사람들이 모바일 데이터를 아끼기 위해 이미지 로딩을 비활성화 해둡니다. 통신사나 웹 브라우저에서 이미지를 로딩하기 전에 어느 기준 이상의 크기나 특정 확장자를 미리 차단하는 경우도 있지요. 하지만 다양한 기종과 브라우저들을 하나하나 확인해보며 테스트하기란 쉽지 않습니다. 경우에 따라서는 이미지들이 겹치고 사이즈가 조정되거나, 혹은 아예 로딩이 되지 않을 수도 있지요.
깨지는 이미지 파일이 발생하지 않도록 유의하고, 사이트를 이용하는 데 반드시 필요한 정보들을 이미지 형태의 텍스트로 업로드 하지 마세요. 만약 해당 이미지가 깨질 경우, 사용자들은 큰 혼란을 겪을 것입니다.

6. 콜투액션에 혼동이 없어야 합니다

대부분의 모바일 사용자들은 멀티 태스킹 중이거나, 시간이 많지 않을 것입니다. 그들에게 분명한 사용법을 제시하고 명확한 콜투액션을 제공하세요. 스마트폰으로 접속한 사용자들은 17초 이내에 방문 목적을 이루려고 합니다. 주요 메시지는 상단에 위치시키고, 사용자들이 다음 절차를 원활하게 할 수 있도록 메시지들을 미리 마련해두어야 합니다.
예를 들어, 모바일 웹사이트를 통해 결제를 한다면, ‘해당 결제를 완료하기 위해 SMS를 확인해주세요’, ‘ 결제를 완료하시려면 저희가 전송한 이메일을 확인해주세요.’ 등의 메시지를 미리 준비해서 사용자들이 다음 절차를 진행하는 데 혼란이 없도록 하는 것이 좋습니다.

7. 모바일 친화 기능을 잊지 마세요

모바일 환경에서만 구현 가능한 기능들은 사용자에게 큰 편의를 제공합니다. 사이트 내 모든 전화번호에 링크를 걸어 클릭과 동시에 전화를 걸 수 있도록 하세요. 위치 기반 서비스를 통해 현 위치에서 가장 가까운 지점을 지도에 표시하고 네비게이션 기능을 제공할 수도 있습니다. 현재시간에 맞춰 현재 영업 중인지 알 수 있도록 영업시간 등을 표시하는 것도 가능합니다.

8. 온라인과 모바일의 시너지를 반드시 고려하세요

스마트폰에서 PC버전을 이용하거나 PC에서 모바일 버전을 이용하는 일이 없도록 유저 에이전트 식별을 명확히 해야 합니다. 반대로 모바일을 통해 웹사이트를 이용할 때, PC용 웹사이트를 이용하고 싶은 유저도 있을 수 있습니다. 따라서 PC 버전 사이트로 전환할 수 있는 버튼을 마련하는 것이 좋습니다.

9. 오프라인에서도 모바일에서 얻을 수 있는 장점을 홍보하세요

모바일 사이트는 사용자가 언제 어디에 있든 여러분의 사이트에 접속할 수 있도록 만들어 준다는 장점이 있습니다. TV와 라디오, 옥외 광고판을 통한 전통적인 광고를 통해서 여러분의 모바일 콘텐츠를 홍보해보세요. 모바일 사이트 링크를 기재하여 쉽게 접속할 수 있도록 유도하고, QR코드 등의 이미지를 활용해서 모바일 사이트로의 유입을 꾀하는 방법도 있습니다.

10. 포털 사이트를 간과해서는 안됩니다

잊지 말고 여러분의 사이트를 사용자들이 검색하기 쉽도록 로컬 검색엔진에 등록해야 합니다. 사무실 주소와 전화번호, 사진을 업로드 한 뒤, 리뷰와 별 점, 약도 등을 포함시키세요. 또한, 여러분의 사이트가 다양한 앱들에서 검색이 되도록 허용하거나 별도의 신청을 해야 합니다. GPS정보를 hCard 마이크로 포맷에 반드시 포함시켜, 위치 기반 검색에 노출되도록 하는 것도 좋은 방법입니다.

• 본문 내용은 https://www.mobilemoxie.com/blog/archives/mobile-site-usability-mistakes/을 각색하여 작성했습니다.