모바일 기기 사용 비율이 점차 늘어나면서 많은 사이트들이 모바일을 대응한 페이지를 함께 준비하고 있습니다. 모바일 기기에 잘 대응한 사이트란 무엇인지 알아보기 위해 모바일 기기 대응의 필요성을 다음과 같이 정리해보았습니다.
모바일 기기 대응의 필요성
1) 사용성
1-1) 출력장치 – 디스플레이(사이즈 및 해상도)
데스크탑과 다른 모바일의 출력장치 디스플레이를 이해하는 것은, 사용자가 모바일 디스플레이 환경에서 콘텐츠를 확인하고 탐색하는 사용성과 연관되어 있습니다.
모바일, 특히 휴대폰의 화면 사이즈는 데스크탑의 화면 사이즈보다 매우 작습니다. 다음 기사 내용에 따르면, 데스크탑의 평균 화면 사이즈는 2012년 평균 20.4인치이며 2017년에는 21.4인치로 커질 것을 예상하고 있습니다(관련기사링크). 반면 디스플레이서치 조사에 따르는 2014년 휴대폰 평균 사이즈는 4.7인치입니다(2016년에 출시한 갤럭시 S7: 5.1인치, 아이폰7: 4.7인치). 수치로 비교하자면 약 4~5배의 차이가 납니다.
따라서 모바일 화면 사이즈로 조정된 데스크탑 전용 콘텐츠를 확인한다면, 너무 작아져 잘 안 보일 뿐 아니라, 확대한다 해도 가로, 세로 스크롤이 생김으로써 전체 구성을 한 눈에 파악하기 어렵습니다. 또한 확대와 축소를 위한 핀치 줌(Pinch zoom 두 손가락으로 확대/축소)을 해야 된다는 점은 사용자에게 불편하게 다가갈 것입니다.
또한 2016년 9월을 기준으로, 데스크탑에서 가장 많은 해상도는 1366*768px(29.36%)이며, 휴대폰의 가장 많은 해상도는 360*640px(28.4%) 입니다. 휴대폰의 해상도가 많이 좋아졌지만, 데스크탑 해상도와 약 2배 정도 차이 나기 때문에 확인하는 콘텐츠의 질에 차이가 있을 수 있습니다.
1-2) 입력장치 – 키보드와 마우스vs터치
데스크탑의 기본 입력 장치는 마우스와 키보드임에 반해, 휴대폰은 터치를 통해 키보드 텍스트를 입력하고 콘텐츠를 클릭합니다. 따라서 휴대폰은 데스크탑에 비해 조작이 쉽고 간편하지만 정교하고 많은 작업을 처리하기에는 불편할 수 있다는 차이점을 갖고 있습니다. 따라서 웹 사이트에서 이러한 입력 장치의 차이로 겪을 수 있는 사용자 경험을 각각 따로 고려해야 합니다.
2) SEO (Search Engine Optimization, 검색엔진 최적화)
구글의 검색 알고리즘은 모바일에 최적화되지 않은 웹 사이트에 대해 패널티를 부과하고 있습니다. 또한 네이버의 검색엔진 최적화 기본 가이드에서도 모바일 친화적인 사이트 제작의 중요성을 언급하고 있습니다.
검색엔진에 최적화 된 사이트는, 동일한 콘텐츠라는 조건에서 검색 결과의 상위를 차지할 수 있는 방법입니다. 따라서 모바일 기기에 대응하는 것은 더 많은 검색 결과로의 유입을 위한 방법 중 하나가 될 수 있습니다.
구글 관련 링크
“Make sure your site’s ready for mobile-friendly Google search results”
https://support.google.com/adsense/answer/6196932
네이버 관련 링크
“네이버 > 검색엔진 최적화 기본 가이드 > 모바일 친화적인 사이트를 만들어주세요.”
http://webmastertool.naver.com/guide/basic_optimize.naver#chapter2.6
3) 성능
모바일 환경에서의 제한된 네트워크의 사용으로 인해, 데스크탑에 비해 속도가 떨어지거나 많은 데이터 사용의 부담이 존재할 수 있습니다. 따라서 사용자의 네트워크 환경을 고려한 모바일 대응은, 좋지 않은 네트워크 환경에서도 적은 데이터 양으로 사용자가 사이트를 빠르고 부담없이 이용할 수 있도록 보장해주기 때문에 좋은 사용자 경험을 제공할 수 있습니다.
구글 페이지 스피드 (url 진단 시, 모바일 페이지의 성능 동시 진단)
https://developers.google.com/speed/pagespeed/insights/
위와 같은 필요성에 따라 모바일(태블릿, 휴대폰)을 대응하기 위한 방법에는 다음과 같이 여러 가지 방법이 있으며, 이 방법들을 혼합해서 사용할 수 있습니다.
모바일 페이지 대응 방법
1) 리다이렉트 (기기에 따라 URL 이동)
2) 리다이렉트 없음 (기기에 따라 URL 이동 없음)
2.1) 동적 게재 (동일한 URL 페이지지만 유형에 따라 다른 HTML을 생성/렌더링함)
2.2) 반응형 디자인 (동일한 URL 페이지, HTML 코드지만 유형-해상도에 따라 다른 디자인-CSS로 렌더링됨)
[참고링크]
구글의 분류 정의
: https://developers.google.com/webmasters/mobile-sites/mobile-seo/
네이버의 분류 정의
: http://webmastertool.naver.com/guide/basic_optimize.naver#chapter2.6
각 사이트의 특성에 따라 모바일 대응 대상을 태블릿과 휴대폰 중 일부만 할 것인지 전체를 할 것인지 적절하게 선택할 수 있으며, 리다이렉트와 반응형 디자인을 함께 사용하여 효율적으로 콘텐츠를 제공할 수 있습니다.
다음 아티클에서는 모바일 대응 방법을 콘텐츠 유형에 따라 적절히 선택하고, 페이지에 유입되는 사용자의 기기 및 해상도를 어떻게 분류하고 이해해야 될지에 관하여 작성하고자 합니다.
이 포스팅은 영리적 사용이 불가하며, 비영리적으로 사용 시 출처를 명시해 주시기 바랍니다.
