몇 년 전쯤 사이트 개발의 화두로 'Mobile Friendly(모바일 친화적)'가 떠올랐던 적이 있었습니다. 지금이야 워낙 당연시되는 부분이지만 당시에는 꽤나 중요한 이슈로 다뤄졌죠. 진부한 얘기지만 예전에는 데스크탑 위주로 개발을 진행한 후에 모바일 사이트는 부가적인 개발 정도로 취급하기도 했었습니다. 이랬던 기조가 모바일 트래픽이 데스크탑 트래픽을 넘어서면서 모바일에 최적화된 개발이 주요 이슈로 부각되었고 현재는 그 기조를 이어 받아 'Mobile First' 가 대세가 되었죠.
또 근래에는 검색엔진 로직 상 모바일 친화적인지에 대하여 평가하고 이를 검색 결과에 반영하고 있는 실정입니다. 모바일 친화적이지 못한 사이트는 점점 검색 결과에서 밀리는 있는 실정이죠.
오늘은 이런 현실에 맞춰 내 사이트는 과연 모바일 친화적일까? 에 대한 간단한 테스트를 할 수 있는 방법과 개선이 필요한 부분에 대해 알아 볼 수 있는 가이드를 함께 알려드리도록 하겠습니다. 개인 사이트 뿐만 아니라 티스토리 블로그를 사용하고 계신 분들도 간단한 테스트 진행을 통해 모바일 친화적인지에 대해 확인해 보고 개선, 보완하는 것을 추천드립니다.
우선 테스트를 위하여 지금 보고 계시는 티스토리 블로그의 콘텐츠를 테스트 해보았습니다. 테스트는 구글의 모바일 친화성 테스트 도구를 통해서 진행하였습니다. 개별 사이트 주소를 입력한 후 테스트 실행 버튼을 누르면 바로 결과를 알 수가 있습니다.
"여러분의 웹페이지는 모바일 친화적인가요?"
"페이지가 모바일 친화적임"
모바일 친화적인지 아닌지에 대한 판단은 직관적입니다. 페이지 로딩이 모바일 디바이스에서 빠른가? 와 함께 모바일에서 페이지뷰가 사용자들의 불편함을 야기하고 있지는 않은지에 대해서 판단하는 것입니다. 모바일 디바이스에서 데스크탑 뷰가 보인다면 이를 이용하는 사용자들은 화면을 확대하고 자신이 원하는 정보를 찾기 위하여 빈번하게 화면 전환을 해야 하는 불편함을 겪을 수 밖에 없습니다. 또한 버튼의 크기가 너무 작거나 버튼 사이의 간격이 좁다면 실수로 원하지도 않는 버튼을 탭하는 경우가 많아질 것입니다.
만일 테스트를 진행한 결과 모바일 친화적이지 못하다는 평가를 받았다면 해당 부분을 개선하면 됩니다. 위는 제가 예시를 위하여 임의의 사이트를 테스트한 결과입니다. 페이지가 모바일 친화적이지 못하다는 평가와 함께 4개의 문제가 확인되었습니다. 작은 텍스트 크기, 표시 영역 부재, 콘텐츠 폭이 화면을 넘어감, 버튼 사이가 가까움 등의 문제가 나타났고 이에 대한 개선을 통해 모바일 디바이스에서의 사용자 편의성을 증대시킬 수 있을 것입니다. 그렇다면 위와 같은 문제를 수정하기 위한 가이드는 어디에서 알 수 있을까요?
구글에서는 위와 같은 문제에 대한 오류 해결 방안과 함께 모바일 친화적인 사이트 구축을 위한 가이드를 자세하게 안내하고 있습니다. 첫 째로 모바일 친화적 사이트 만들기 라는 가이드를 통해 전반적인 안내를 하고 있으며 세부적으로 오류 개선 등에 대해서는 모바일 사용 편의성 오류 가이드 등을 통해 확인해 볼 수 있도록 하였습니다.
특히 근래 추가된 모바일 중심 색인 생성 준비하기 가이드는 검색엔진 최적화를 위해서라도 꼭 한번쯤은 살펴보는 것을 추천드립니다. 서두에서 말씀드렸던 부분들과도 연관되어 있는 내용이기도 하고 앞으로 구글 검색엔진의 변경 방향성에 대해서도 알 수가 있기 때문이죠. 앞으로의 구글은 색인 생성 및 순위 지정 시 콘텐츠의 모바일 버전을 주로 사용하는 것으로 바뀔 예정입니다. 바로 바뀌지는 않겠지만 향후 시간을 두고 점진적으로 변경하다 결국엔 모바일 버전 위주의 콘텐츠들이 검색 상위를 점령하게 될 것입니다.
