모든 기기에서 사이트가 잘 보이는지 확인하는 방법

불과 10년 전만 해도 웹마스터는 다양한 플랫폼에서 보기 위해 여러 버전의 웹사이트를 만드는 것에 대해 걱정할 필요가 없었습니다. 소비자는 집이나 사무실에서 데스크탑이나 노트북 컴퓨터를 사용하여 제품을 조사하고 휴가를 예약하고 최신 뉴스를 읽었습니다. 화면 크기는 다르지만 같은 디자인 패턴으로 소비자들에게 정보를 제공했고, 예측할 수 있다는 느낌이 있어 작업이 조금 더 수월했다.

오늘날 소비자는 데스크탑, 랩탑, 스마트폰, 태블릿, e-리더 및 게임 콘솔에서 웹에 액세스합니다. 이러한 장치는 다양한 연결 속도를 사용하고 다양한 화면 크기와 다양한 해상도를 제공하며 반응 시간 면에서 거북이에서 토끼에 이르는 처리 속도를 제공합니다. 소비자가 다양한 기기에서 페이지를 탐색하는 상황에서 브랜드와 상호작용하기 위해 어떤 기기를 사용하더라도 사이트가 멋지게 보이도록 하려면 어떻게 해야 할까요?

이 게시물에서는 염두에 두어야 할 요소에 대해 논의하고 여러 장치에서 볼 수 있도록 웹 페이지를 최적화하는 데 도움이 되는 몇 가지 팁을 제공합니다.

다양한 장치에서 사이트를 보는 방법

대부분의 미국인과 같다면 스마트폰이나 태블릿, 또는 둘 다 가지고 있을 것입니다. 그러나 오늘날 시장에 떠돌아다니는 다양한 화면 크기, 프로세서 및 운영 체제를 갖춘 이러한 장치가 있을 가능성은 거의 없습니다. 다행히 HubSpot의 좋은 사람들이 각 장치에서 웹사이트를 테스트할 필요 없이 다양한 장치에서 웹사이트를 볼 수 있는 도구를 만들었습니다. 그들의 Device Lab은 2013년에 시작되었으며 사이트의 URL을 입력하기만 하면 됩니다.

Device Lab은 다양한 장치 및 운영 체제에서 페이지가 어떻게 보이는지 보여줄 뿐만 아니라 다양한 플랫폼에서 모바일 방문자의 비율에 대한 빠른 보고서를 생성합니다. iPhone 4/4S, iPhone 5, iPhone 6/6 Plus, Samsung Galaxy S3/S4/S5 기기 및 오늘날 가장 인기 있는 태블릿 기기에 대한 보고서를 볼 수 있습니다.

모바일 친화적인 사이트를 만드는 방법

Device Lab은 다양한 플랫폼에서 웹사이트를 볼 수 있도록 도와드립니다. 페이지가 태블릿에서 잘리거나 방문자에게 너무 많은 확대/축소 및 스크롤 작업이 필요한지 확인할 수 있지만 모바일 친화적인 플랫폼을 개발하는 데 필요한 변경 방법은 알려주지 않습니다. 소비자가 사이트에 액세스하는 장치에 관계없이 사용자에게 친숙한 매력적인 웹 사이트를 찾도록 하려고 합니다.

Entrepreneur는 모든 장치에서 멋지게 보이는 사이트를 만들려는 웹마스터를 위한 몇 가지 기본 시작점을 제공합니다. 우선 시간을 내어 현재 사이트를 살펴보고 오늘날의 웹 사용자와 일치하는지 확인해야 합니다. 전 세계적으로 10억 명이 넘는 사람들이 스마트폰을 사용하며 많은 사람들이 스마트폰을 인터넷의 기본 액세스 지점으로 사용합니다.

전체 사이트 디자인을 단순화하여 시작하십시오. 더 빠른 로드 시간과 모바일 장치에서 더 쉽게 볼 수 있도록 더 간단한 페이지 디자인과 더 큰 글꼴 크기를 고려해야 합니다. "above fold"라는 오래된 신문 용어는 현대 웹 디자인에서 중요합니다. 시청자가 모바일 장치에서 페이지 아래로 스크롤해야 하는 경우 잘 설계된 사이트를 선택하기 위해 빨리 포기합니다. 중요한 정보가 스크롤 없이 볼 수 있는 부분에 있는지 확인하고 크고 터치 가능한 버튼을 사용하세요. 버트 다이얼링은 과거의 일이지만 뚱뚱한 손가락은 매일 스마트 폰에서 실수로 버튼을 누르는 것으로 이어집니다.

현재 웹사이트를 수정하는 데 어려움을 겪고 싶지 않다면 모바일 사이트를 만드는 옵션도 있습니다. 비즈니스를 위한 모바일 사이트를 개발하면 기존 웹사이트와 별도로 존재하지만 연결된 병렬 웹사이트가 구축됩니다. 프로세서는 방문자가 데스크톱/노트북 또는 스마트폰/태블릿에서 시작되었는지 여부를 결정하고 URL을 입력하는 즉시 모바일 사이트로 리디렉션합니다.

그러나 모바일 사이트와 함께 제공되는 절충점이 있습니다. 두 번째 URL, 특히 .m 하위 도메인을 사용하는 모바일 사이트를 구축하면 검색 엔진에서의 가시성이 저하됩니다. Google과 Bing은 .m 하위 도메인에서 찾을 수 없으며 웹마스터가 가시성과 검색 엔진 최적화를 위해 하나의 URL을 사용하도록 합니다.

하지만 예산으로 인해 기본 사이트를 재구축하는 대신 별도의 모바일 사이트를 만들어야 할 수도 있습니다. 덜 눈에 띄는 모바일 사이트가 모바일 잠재고객을 완전히 놓치는 것보다 낫습니다. 모바일 사이트를 기본 사이트에 연결하기만 하면 그 격차를 줄일 수 있습니다.

최선의 선택

물론 비즈니스에 항상 상당한 투자를 하고 언제든지 모든 장치에서 작동하는 사이트를 재구축할 수 있습니다. 적응형 및 반응형 디자인을 통해 방문자가 사용하는 장치에 관계없이 페이지를 클릭할 때마다 올바르게 표시되는 것으로 입증된 웹사이트를 구축할 수 있습니다. 다음은 두 개념에 대한 간략한 소개입니다.

• 적응형 디자인: 대기업은 적응형 디자인에 많은 투자를 합니다. 적응형 웹사이트는 몇 초 만에 각 사용자의 장치를 감지 및 식별하고 해당 장치의 기능과 일치하는 페이지를 생성합니다.
• 반응형 디자인: CSS(Cascading Style Sheets) 기술을 사용하는 반응형 디자인은 구형 휴대폰을 제외한 대부분의 장치에서 올바르게 표시되도록 자동 조정되는 단일 버전의 웹사이트를 만듭니다. 반응형 디자인은 디스플레이의 크기나 장치의 프로세서 속도에 관계없이 사이트가 멋지게 보이도록 충분히 유연합니다.

이러한 접근 방식에는 단점이 있습니다. 적응형 디자인은 오늘날 웹사이트 디자인의 정점을 대표하지만 구현 및 지원하는 데 엄청나게 많은 비용이 듭니다. 반응형 디자인은 더 저렴하지만 적응형 디자인 수준은 아닙니다. 그래도 다른 옵션에 비해 반응형은 단순한 모바일 사이트 구축보다 중요합니다.

웹 재설계를 고려할 때 이 게시물에서 언급한 요소를 염두에 두십시오. 예산이 얼마이든 상관없이 모든 장치에서 볼 수 있고 사용자에게 친숙한 웹 사이트를 디자인하려면 자금을 따로 마련해야 합니다. 오늘날에는 스마트폰, 태블릿 및 점점 더 많은 수의 스마트 TV가 있습니다. 내일 소비자는 냉장고 문을 통해 부엌에서 또는 거울로 욕실에서 귀하의 페이지를 볼 수 있습니다. 도전에 대비하여 지금 웹사이트를 준비하십시오.