2019.08.22

모바일에 최적화된 웹 사이트, 검색에는 친화적인가

Techworld Staff | Techworld
사이트 방문자를 유지하려면 모바일 친화적인 웹 사이트를 구축해야 한다. 하지만, 이 모바일 친화적인 웹 사이트가 SEO, 사용자 경험, 속도, 디자인을 통해 검색에 최적화되어 있는지도 확인해야 한다. 

모바일에 최적화된 웹 사이트가 검색엔진에 친화적인지 확인하는 몇 가지 팁을 소개한다. 

1. AMP 사용


구글은 2016년에 AMP(Accelerated Mobile Page)를 모바일 검색 알고리즘에 공식적으로 통합한 이후 기업에서 AMP를 검색에 사용하는 것이 중요해졌다. AMP 링크는 관련 검색어를 만들 때 구글 검색 상단에 표시된다. 클릭하면 리디렉션할 필요 없이 페이지가 즉시 로드된다. AMP 페이지를 구축할 때 가장 많이 사용되는 구성 요소는 AMP HTML, AMP JS, AMP 캐시(AMP Cache)다. 각 구성 요소는 빠른 로딩을 위해 AMP 페이지의 성능을 높인다.

2. 팝업 제거


팝업은 웹 사이트 방문자 이탈의 주요 원인 중 하나다. 팝업이 많으면 사람들이 원하는 것을 찾기 전에 사이트를 쉽게 떠나도록 만들 수 있다. 팝업은 사용자에게 부정적인 경험을 제공할 수 있어서 사이트 순위에도 큰 영향을 줄 수 있다. 

구글은 침입으로 간주되는 특정 팝업을 가지고 있다. 즉, 당신의 사이트에서 어떤 카테고리에 팝업이 포함되어 있으면 구글 검색에 표시되지 않거나 검색 순위가 매우 낮아질 수 있다. 따라서 팝업을 꼭 사용해야 한다면 모바일 및 검색 친화적인 팝업을 고려하는 것이 좋다.

3. 원활한 경험 창출 


사용자 경험은 모바일 웹 최적화에 특히 중요하다. 이를 통해 뉴스레터와 이메일 마케팅 목록 같은 내용을 구독하면서 콘텐츠를 활용하여 사용자를 끌어들일 수 있다. 

이탈률을 개선하여 시작하는 것이 좋다. 이는 한 페이지를 본 후 사람들이 사이트에서 이탈할 가능성을 예측하는 것이다. 목표는 사람들을 사이트에 머무르게 하는 것이므로 전체 사이트에는 사용자를 끌어들이고 검색 순위를 높일 수 있는 충분한 SEO 콘텐츠가 있어야 한다.

4. 속도 테스트
ⓒGetty Images Bank

 
이동통신사와 핸드셋 제조사의 주장과 관계없이 모바일 웹의 속도는 여전히 느리다. 그렇다면 이미지가 모바일에 최적화돼 있는지 확인하고 불필요한 텍스트를 잘라내라. 모바일 화면은 작고 모바일 사용자는 빠르게 스크롤하기를 원하므로 헷갈리게 해서는 안 된다. 

방문자를 방해할 수 있는 속도 문제가 있는지 확인하기 위해 속도 테스트를 고려하라. 속도는 특히 모바일 웹 사용자에게 큰 요소며 속도가 느린 경우 이미지 크기 조정 및 캐싱을 고려하여 신속한 페이지를 제공하라.


5. 반응형 프레임워크 사용

ⓒGetty Images Bank
 
반응형 프레임워크는 서로 다른 화면 크기에 맞게 웹 사이트 요소를 격자 형태로 배치한다. 이들은 웹 개발에 대한 일반적인 접근 방식을 제공하여 사용자가 사이트에 접근하는 방식과 관계없이 유사한 환경을 만들 수 있다. 고객은 여러 기기에서 더 나은 사용자 환경을 경험할 수 있으며 웹 사이트를 통합하여 별도의 모바일 URL이 필요하지 않다. 오픈소스며 문서화가 잘되어 있고 사용하기 쉬운 부스트랩(Bootstrap) 같은 프레임워크를 사용해 보라.

6. 한 손만으로 탐색할 수 있도록 불필요한 요소 제거
ⓒGetty Images Bank
 
손가락이나 엄지손가락을 생각하라. 사용자는 자신의 '전화번호' 사이트를 검색할 수 있어야 한다. 확대/축소하기 위해 손가락을 움직여야 하는 경우 콘텐츠가 해당 기기에 최적화되어 있지 않을 수 있다. '뚱뚱한 손가락' 사용자가 사용하기에 불편하지 않을 만큼 버튼이 충분히 큰지 확인하라. CSS 미디어 쿼리를 사용하여 화면 크기를 조정하지 마라.

7. 깔끔함 유지
ⓒGetty Images Bank
 
모바일 친화적인 디자인은 군더더기 없이 직관적이다. 디자인은 깔끔하고 단순하다. 부가기능은 없다. 빠른 로딩을 위해 이미지를 줄이고 콘텐츠를 없앤다. 당신의 사이트는 고객이 원하는 것을 몇 초 안에 제공해야 한다. 반응형 웹 사이트라면 더 큰 기기에서 익숙한 모양과 느낌을 더한 콘텐츠와 결합할 수 있다.

8. 자바스크립트
자바스크립트를 처리할 때 다른 브라우저와 다른 기기, 심지어 동일한 스마트폰의 다른 모델조차 다르게 동작한다. 아마 자바스크립트 없이는 안되는 상황이라면, 이를 사용하는 방식으로 통하지 마라. 제이쿼리 모바일(jQuery Mobile)과 같은 부피가 큰 자바스크립트 라이브러리를 독립형 자바스크립트로 바꾸기를 고려하라.

9. 양식 단순화
양식이 모바일용으로 설계되어 있는지 확인하라. 최소량의 정보를 요청하라. 꼭 필요한 것을 요청하라. 가능하면 GPS 정보를 통해 양식을 미리 채운다. 어떤 정보는 전혀 없는 것보다 낫다는 것을 기억하라.

10. 지리적 위치 고려
기업은 위치 정보를 사용해 길 찾기를 제공하고, 방문자가 가장 가까운 매장 위치에서 찾는 상품이 있는지 확인하게 해주며, 타깃 마케팅 프로모션을 제공하고, 현지 통화로 온라인 쇼핑객에게 가격을 제시하며, 방문자가 소셜 커뮤니티에 연결하도록 해준다. 위치 정보의 잠재력을 무시하지 마라.

11. 테스트, 테스트, 테스트
ⓒGetty Images Bank

다른 기기, 다른 플랫폼, 다른 운영체제에서도 콘텐츠를 제대로 볼 수 있는지 테스트하라. 시중에는 수십 가지 모바일 테스트 툴이 있다. 그러므로 임직원이 자신의 기기에서 베타 사이트를 테스트하도록 하라. 직원 자신의 기기와 네트워크 연결을 사용하면 그동안 해왔던 테스트에서 발견하지 못했던 문제를 찾게 될 수 있다. ciokr@idg.co.kr


2019.08.22

모바일에 최적화된 웹 사이트, 검색에는 친화적인가

Techworld Staff | Techworld
사이트 방문자를 유지하려면 모바일 친화적인 웹 사이트를 구축해야 한다. 하지만, 이 모바일 친화적인 웹 사이트가 SEO, 사용자 경험, 속도, 디자인을 통해 검색에 최적화되어 있는지도 확인해야 한다. 

모바일에 최적화된 웹 사이트가 검색엔진에 친화적인지 확인하는 몇 가지 팁을 소개한다. 

1. AMP 사용


구글은 2016년에 AMP(Accelerated Mobile Page)를 모바일 검색 알고리즘에 공식적으로 통합한 이후 기업에서 AMP를 검색에 사용하는 것이 중요해졌다. AMP 링크는 관련 검색어를 만들 때 구글 검색 상단에 표시된다. 클릭하면 리디렉션할 필요 없이 페이지가 즉시 로드된다. AMP 페이지를 구축할 때 가장 많이 사용되는 구성 요소는 AMP HTML, AMP JS, AMP 캐시(AMP Cache)다. 각 구성 요소는 빠른 로딩을 위해 AMP 페이지의 성능을 높인다.

2. 팝업 제거


팝업은 웹 사이트 방문자 이탈의 주요 원인 중 하나다. 팝업이 많으면 사람들이 원하는 것을 찾기 전에 사이트를 쉽게 떠나도록 만들 수 있다. 팝업은 사용자에게 부정적인 경험을 제공할 수 있어서 사이트 순위에도 큰 영향을 줄 수 있다. 

구글은 침입으로 간주되는 특정 팝업을 가지고 있다. 즉, 당신의 사이트에서 어떤 카테고리에 팝업이 포함되어 있으면 구글 검색에 표시되지 않거나 검색 순위가 매우 낮아질 수 있다. 따라서 팝업을 꼭 사용해야 한다면 모바일 및 검색 친화적인 팝업을 고려하는 것이 좋다.

3. 원활한 경험 창출 


사용자 경험은 모바일 웹 최적화에 특히 중요하다. 이를 통해 뉴스레터와 이메일 마케팅 목록 같은 내용을 구독하면서 콘텐츠를 활용하여 사용자를 끌어들일 수 있다. 

이탈률을 개선하여 시작하는 것이 좋다. 이는 한 페이지를 본 후 사람들이 사이트에서 이탈할 가능성을 예측하는 것이다. 목표는 사람들을 사이트에 머무르게 하는 것이므로 전체 사이트에는 사용자를 끌어들이고 검색 순위를 높일 수 있는 충분한 SEO 콘텐츠가 있어야 한다.

4. 속도 테스트
ⓒGetty Images Bank

 
이동통신사와 핸드셋 제조사의 주장과 관계없이 모바일 웹의 속도는 여전히 느리다. 그렇다면 이미지가 모바일에 최적화돼 있는지 확인하고 불필요한 텍스트를 잘라내라. 모바일 화면은 작고 모바일 사용자는 빠르게 스크롤하기를 원하므로 헷갈리게 해서는 안 된다. 

방문자를 방해할 수 있는 속도 문제가 있는지 확인하기 위해 속도 테스트를 고려하라. 속도는 특히 모바일 웹 사용자에게 큰 요소며 속도가 느린 경우 이미지 크기 조정 및 캐싱을 고려하여 신속한 페이지를 제공하라.


5. 반응형 프레임워크 사용

ⓒGetty Images Bank
 
반응형 프레임워크는 서로 다른 화면 크기에 맞게 웹 사이트 요소를 격자 형태로 배치한다. 이들은 웹 개발에 대한 일반적인 접근 방식을 제공하여 사용자가 사이트에 접근하는 방식과 관계없이 유사한 환경을 만들 수 있다. 고객은 여러 기기에서 더 나은 사용자 환경을 경험할 수 있으며 웹 사이트를 통합하여 별도의 모바일 URL이 필요하지 않다. 오픈소스며 문서화가 잘되어 있고 사용하기 쉬운 부스트랩(Bootstrap) 같은 프레임워크를 사용해 보라.

6. 한 손만으로 탐색할 수 있도록 불필요한 요소 제거
ⓒGetty Images Bank
 
손가락이나 엄지손가락을 생각하라. 사용자는 자신의 '전화번호' 사이트를 검색할 수 있어야 한다. 확대/축소하기 위해 손가락을 움직여야 하는 경우 콘텐츠가 해당 기기에 최적화되어 있지 않을 수 있다. '뚱뚱한 손가락' 사용자가 사용하기에 불편하지 않을 만큼 버튼이 충분히 큰지 확인하라. CSS 미디어 쿼리를 사용하여 화면 크기를 조정하지 마라.

7. 깔끔함 유지
ⓒGetty Images Bank
 
모바일 친화적인 디자인은 군더더기 없이 직관적이다. 디자인은 깔끔하고 단순하다. 부가기능은 없다. 빠른 로딩을 위해 이미지를 줄이고 콘텐츠를 없앤다. 당신의 사이트는 고객이 원하는 것을 몇 초 안에 제공해야 한다. 반응형 웹 사이트라면 더 큰 기기에서 익숙한 모양과 느낌을 더한 콘텐츠와 결합할 수 있다.

8. 자바스크립트
자바스크립트를 처리할 때 다른 브라우저와 다른 기기, 심지어 동일한 스마트폰의 다른 모델조차 다르게 동작한다. 아마 자바스크립트 없이는 안되는 상황이라면, 이를 사용하는 방식으로 통하지 마라. 제이쿼리 모바일(jQuery Mobile)과 같은 부피가 큰 자바스크립트 라이브러리를 독립형 자바스크립트로 바꾸기를 고려하라.

9. 양식 단순화
양식이 모바일용으로 설계되어 있는지 확인하라. 최소량의 정보를 요청하라. 꼭 필요한 것을 요청하라. 가능하면 GPS 정보를 통해 양식을 미리 채운다. 어떤 정보는 전혀 없는 것보다 낫다는 것을 기억하라.

10. 지리적 위치 고려
기업은 위치 정보를 사용해 길 찾기를 제공하고, 방문자가 가장 가까운 매장 위치에서 찾는 상품이 있는지 확인하게 해주며, 타깃 마케팅 프로모션을 제공하고, 현지 통화로 온라인 쇼핑객에게 가격을 제시하며, 방문자가 소셜 커뮤니티에 연결하도록 해준다. 위치 정보의 잠재력을 무시하지 마라.

11. 테스트, 테스트, 테스트
ⓒGetty Images Bank

다른 기기, 다른 플랫폼, 다른 운영체제에서도 콘텐츠를 제대로 볼 수 있는지 테스트하라. 시중에는 수십 가지 모바일 테스트 툴이 있다. 그러므로 임직원이 자신의 기기에서 베타 사이트를 테스트하도록 하라. 직원 자신의 기기와 네트워크 연결을 사용하면 그동안 해왔던 테스트에서 발견하지 못했던 문제를 찾게 될 수 있다. ciokr@idg.co.kr


X