기획
모바일에 친화적인 웹사이트를 위한 5분 완벽 가이드
9분
2021.01.08.5.5K
이번 글의 주요 내용 모바일 친화적인 웹사이트는 스마트폰 기기를 통해서 보다 쉽게 접근할 수 있도록 최적화되어 있습니다. 반응형 디자인 웹사이트는 사용자의 접근성 측면에서 더욱 유연하며, 단순한 모바일 친화적인 웹사이트와 비교했을 때에도 훨씬 더 효과적인 경우가 많습니다. 웹사이트의 기능과 효율성을 확인하고 싶은 경우를 위해서, 웹사이트를 테스트하는 방법과 그 도구에 대해서도 소개합니다. 수많은 연구 결과에 의하면, 모바일 친화적인 웹사이트가 SEO의 순위가 더 높고, 트래픽의 유입량을 늘리며, 보다 높은 전환율을 이끌어내는 것으로 나타나고 있습니다.
모바일 친화적 디자인과 반응형 디자인의 차이점
웹사이트를 모바일 친화적으로 만드는 작업을 시작하기에 앞서, 먼저 모바일 친화적인 웹사이트와 반응형 디자인 사이의 차이점을 이해하는 것이 중요합니다. 반응형 디자인이란, 접속하는 기기가 무엇인지에 관계없이 유연하게 대응할 수 있도록 만들어진 웹사이트를 말합니다. 반응형 웹사이트는 접속하는 기기나 브라우저가 무엇인지를 확인하는데 시간을 들이지 않고, 해당 기기의 화면 사이즈에 맞게 즉시 조정이 됩니다.
이러한 웹사이트는 온라인에 게시되기 전에 이미 반응형으로 만들어진 것입니다. 그리고 반응형 웹사이트는 기기의 화면 크기에 맞게 자동으로 조절된다는 것을 이해해야 합니다. 그렇기 때문에 모바일 사용자들은 해당 웹사이트에 자연스럽게 접속할 수 있습니다. 모바일 친화적인 웹사이트와 반응형 디자인을 비교했을 때 가장 커다란 차이점은, 단순한 모바일 친화적 웹사이트는 접속하는 기기의 화면 사이즈에 맞게 자동적으로 조절되지 않는다는 것입니다.
모바일 친화적인 웹사이트는 접속하는 기기에 관계없이 모두 동일하게 표시됩니다. 접속하는 기기에 따라서 유일하게 다른 것이 있다면, 웹사이트의 용량입니다. 대부분의 모바일 친화적인 디자인들은 모바일 기기에서 제대로 작동하지 않는 기능들은 제한하고 있습니다. 예를 들자면, 드롭다운(drop-down) 방식의 네비게이션은 사용되지 않는 경우가 많습니다. 하지만 웹사이트를 반응형으로 디자인 하면 3개의 패널로 나뉜 일반적인 레이아웃이 아니라, 웹사이트의 이미지와 텍스트가 모바일 기기의 정확한 화면 해상도에 맞는 레이아웃으로 바뀌게 됩니다.
그렇기 때문에 모바일 사용자들을 완전히 무시하는 웹사이트보다는 모바일 친화적인 디자인이 훨씬 더 효과적인 것은 분명하지만, 가능하면 웹사이트를 반응형 디자인으로 만드는 것이 더 좋습니다. 반응형 디자인이 단순한 모바일 친화적인 웹사이트보다 좋은 이유는, 웹사이트의 기능들을 일부 제한하지 않아도 화면의 크기가 자동으로 바뀌기 때문입니다.
반응형 디자인에서는 모바일 사용자들도 데스크톱 환경에서와 동일한 경험을 하기 때문에, 고객들의 충성도를 높이는 데 도움이 됩니다. 그리고 요즘에는 대부분의 사용자들이 모바일 기기를 이용해서 인터넷에 접속하고 있기 때문에, 이러한 모바일 사용자들을 염두에 두지 않는다면 상당한 손해를 입을 가능성이 큽니다. 그런데 ‘모바일 친화적’이라는 표현과는 다르게, 이러한 웹사이트들이 전부 모바일 사용자들이 사용하기 편한 것은 아니기 때문에, 가능하면 반응형 디자인으로 만드는 것이 좋습니다.
모바일 친화적인 웹사이트의 중요성
요즘의 웹사이트들은 대부분 모바일 기기를 염두에 두고 만들어집니다. 즉, 여러분의 경쟁자들도 모바일 친화적인 웹사이트를 갖고 있을 가능성이 크다는 것입니다. 사용자들이 모바일 기기를 이용해서 웹사이트에 접속할 때, 그들은 데스크톱 컴퓨터를 이용했을 때와 크게 다르지 않은 뛰어난 사용자 경험(UX)을 할 거라고 기대합니다. 그런데 웹사이트의 네비게이션이 복잡하고 모바일 기기의 특성을 제대로 반영하지도 않았다면, 사용자들은 불편함을 느껴서 다른 모바일 사이트로 옮겨가게 될 것입니다.
통계적인 수치를 살펴봐도 모바일 친화적인 웹사이트가 중요하다는 점을 확인할 수 있습니다. 예를 들자면, 전체 모바일 사용자의 91% 이상은 콘텐츠에 쉽게 접근할 수 있는 것이 중요하다고 말합니다. 그리고 앞에서도 언급했듯이, 전 세계 웹사이트 트래픽의 52% 이상이 모바일 기기에서 유입됩니다. 브라이트엣지(BrightEdge)의 2017년 연구에 의하면, 모바일 사용자의 약 70%는 모바일 환경을 염두에 둔 웹사이트에서 구매할 가능성이 더 높은 것으로 나타났습니다. 이러한 수치는 매년 점점 더 증가하고 있습니다. 대상 고객층을 늘리고 기존 고객의 참여율을 유지하려면, 그들의 기대에 부응하는 웹사이트를 제공하는 것이 중요합니다.
모바일 친화적인 웹사이트에서 갖추어야 하는 것은 무엇인가?
모바일 친화적인 웹사이트를 만들 때는, 그 디자인에서 반드시 고려해야 하는 것들이 있습니다. 예를 들자면, 웹사이트가 성공하기 위해서는 속도가 아주 중요합니다. 로딩 속도가 2초 이내인 웹사이트의 이탈률(bounce rate)은 9%밖에 되지 않지만, 여기에서 3초가 더 지연되면 이탈률은 38%로 늘어납니다. 로딩 시간을 줄이는 것이 얼마나 중요한 지를 단적으로 보여주는 사례라고 할 수 있습니다. 로딩 시간을 줄이는 한 가지 방법은 이미지를 압축하는 것입니다. 멀티미디어는 용량이 크기 때문에, 로딩 시간을 개선하기 위해서는 가능한 많이 압축하는 것이 좋습니다.
그리고 사용자 정보를 안전하게 보관하기 위해서 웹사이트의 보안을 높이는 것도 아주 중요합니다. 구글은 최신의 보안 기법에 맞지 않는 웹사이트에는 “안전하지 않음”이라는 라벨을 자동적으로 표시하고 있는데, 웹사이트에 이런 표시가 붙는다면 브랜드의 평판이 떨어지고 결국에는 트래픽의 양도 줄어들게 될 것입니다. 데스크톱을 이용하든 모바일 기기를 이용하든, 모든 사용자들은 안전하면서도 보안이 유지되는 경험을 원합니다. 온라인에서 제품이나 서비스를 구매하는 고객들은, 자신들이 제공하는 정보가 안전하게 보호될 것이라는 확신이 들어야 합니다.
모바일 기기를 위한 웹사이트를 만들 때 중요하게 고려해야 하는 또 다른 요소는, 콜투액션(CTA)이 데스크톱에서 보이는 것보다 더 크게 만들어야 한다는 것입니다. 모바일 기기를 통해서 웹사이트에 접속했을 때는 마우스가 아니라 손가락으로 버튼을 눌러야 하기 때문에, 이러한 점을 중요하게 고려해야 합니다. 그리고 폰트의 크기도 스마트폰이나 태블릿에서도 읽기 쉽게 충분히 커야 합니다. 모바일 기기의 화면은 작기 때문에, 폰트의 크기를 키우는 것이 좋습니다. 접근성을 쉽게 하는 것도 중요합니다. 이렇게 웹사이트가 모바일 친화적으로 만들어지면, 잠재적인 고객들이 더욱 쉽게 접근할 수 있고 사용자 경험도 훨씬 더 좋아질 것입니다.
모바일 친화적인 웹사이트의 성능과 효율성을 확인할 수 있는 곳
모바일 친화적인 웹사이트를 만들었다면, 그 성능과 효율성을 확인할 수 있는 도구들은 많이 있습니다. 이러한 도구를 이용하면 사용적합성(usability) 테스트를 할 수 있는데, 이는 실제 사람들이 웹사이트를 직접 사용해보고 그것에 대한 생각을 알려주는 간단한 테스트입니다. 이런 테스트를 통해서 웹사이트를 개선하기 위한 피드백을 받을 수 있으며, 더욱 모바일 친화적인 웹사이트를 만들 수 있습니다. 웹사이트 운영자들이 이용할 수 있는 사용적합성 테스트를 위한 도구들은 많이 있는데, 대표적으로는 구글 라이트하우스(Google Lighthouse), 구글 서치콘솔(Google Search Console), 구글 페이지스피드(Google PageSpeed), 솔리디파이(Solidify) 등이 있습니다.
구글 라이트하우스는 웹사이트의 성능과 품질을 개선하기 위해서 수많은 테스트를 자동으로 진행해볼 수 있는 도구입니다. 이곳에서의 테스트를 통해서 웹사이트에서 개선 가능성이 있는 부분을 확인할 수 있습니다.
구글 서치콘솔은 인기가 많은 웹 서비스로, 사이트 운영자들이 웹사이트의 전반적인 비주얼을 최적화할 수 있게 도와줍니다.
구글 페이지스피드에는 웹사이트를 테스트 해볼 수 있는 다양한 도구들이 있습니다. 그래서 웹사이트의 전반적인 성능을 강화하기 위해서 필요한 부분들을 확인할 수 있습니다.
솔리디파이라는 앱은 웹사이트 프로토타입의 UI가 실제 사용자들에게 어떻게 보이는지를 빠르게 테스트 해볼 수 있게 해주는 간단한 도구입니다. 테스트에 참여하는 사용자들은 자신의 의견과 함께 개선이 필요한 잠재적인 문제들에 대해서도 피드백을 제공해줄 것입니다. 그리고 모든 플랫폼을 지원하기 때문에, 태블릿이나 스마트폰, 그리고 데스크톱 환경에 대해서도 테스트를 할 수 있습니다. 그 외에도 알아두면 좋은 도구들은 다음과 같습니다.
- 마우스플로우(Mouseflow) - 파이브세컨드테스트(FiveSecondTest) - 피드백 아미(Feedback Army)
모바일 친화적인 웹사이트가 비즈니스에 미치는 영향
모바일 친화적인 웹사이트를 갖고 있으면 비즈니스에 있어서 다양한 방식으로 많은 도움이 됩니다. 요즘의 고객들은 웹사이트가 당연히 모바일 친화적일 거라고 생각하기 때문입니다. 만약 웹사이트가 모바일 기기에 최적화되어 있지 않다면, 웹사이트의 기능이 떨어지기 때문에 모바일 사용자들에게는 형편없는 경험을 제공할 것입니다. 반응형 디자인을 이용한다면, 사용자들에게 뛰어난 경험을 제공하는 데 있어서 크게 걱정을 하지 않아도 됩니다. 모바일 사용자들의 상당수는 비교적 인내심이 적고 일상생활이 바쁘다는 점을 염두에 두어야 합니다. 이런 사람들에게 모바일 친화적인 웹사이트를 제공한다면, 로딩 시간이 오래 걸리지도 않고 스크롤을 내려야 할 필요도 없기 때문에 보다 쉽게 이용할 수 있을 것입니다. 로딩 시간이나 스크롤은 고객전환율을 떨어트리기만 하는 요소입니다. 웹사이트의 디자인을 통해서 고객들이 원하는 것을 제공한다면, 브랜드의 평판이 개선돼서 고객 유지율이 높아지고 수익도 증가하게 될 것입니다. 모바일에 친화적이거나 반응형 웹사이트를 디자인하는 것은 어렵지도 않고, 높은 수익을 제공해줄 수 있습니다. 가능한 많은 사람들에게 다가가고 싶다면, 대상 고객들이 어떤 기기를 이용해서 접속하든 관계없이 잘 동작하는 웹사이트를 만들어야 합니다. 그렇게 한다는 것은 고객들이 웹사이트에서 훌륭한 경험을 얻게 해준다는 것이며, 더 나아가서는 이탈률은 줄이고 고객 전환율을 높여줄 것입니다.> 이 글은 'A Comprehensive Guide to a Mobile-Friendly Website'을 각색하여 작성되었습니다.
로그인하고 자유롭게 의견을 남겨주세요.
