검색엔진 최적화에 유리한 모바일웹 구축 방법론에 대해 살펴보도록 하겠습니다.모바일웹 검색엔진 최적화 구축방법론
반응형웹을 제작하는 이유는 무엇일까요?
사용자가 PC웹과 마찬가지로 모바일웹을 동일한 콘텐츠를 보여주기 위해서 반응형웹이라는 기술을 사용한다고 많이 들으셨을 것입니다.
그럼, 모바일웹을 구축하는 방법은 반응형웹 뿐일까요?
모바일웹을 구축하는 방법은 ①반응형웹과 ②적응형웹이라는 두가지 기술로 나누어 집니다.
① 반응형웹은 PC, 태블릿, 모바일 기기 별로 화면 크기를 측정해서 기기별로 화면이 반응해서 달라지는 것을 말합니다.
반대말이 적응형웹입니다.
② 적응형웹은 모바일웹을 PC웹과 분리해서 별도로 제작하는 것입니다.
그럼, 모바일웹을 구축하는 방법은 반응형웹 뿐일까요?
모바일웹을 구축하는 방법은 ①반응형웹과 ②적응형웹이라는 두가지 기술로 나누어 집니다.
① 반응형웹은 PC, 태블릿, 모바일 기기 별로 화면 크기를 측정해서 기기별로 화면이 반응해서 달라지는 것을 말합니다.
반대말이 적응형웹입니다.
② 적응형웹은 모바일웹을 PC웹과 분리해서 별도로 제작하는 것입니다.
적응형웹을 만드는 이유는 반응형으로 표현하기 어려운 레이아웃 또는 사용자의 편의성을 위해 모바일 화면에 최적화된 화면을 만들기 위해서입니다. 표현은 반응형웹보다는 더 디테일하고 사용성을 모바일앱처럼 최적화 시킬 수 있겠죠.
각 기술의 장단점이 있습니다.
반응형웹은 유지보수 시 한 파일에서 핸들링하기 때문에 유지보수가 쉽다는 장점이 있고
적응형웹은 PC웹과 모바일웹 많게는 태블릿웹까지 2~3가지 소스를 핸들링 하기 때문에 유지보수 시 아무래도 손이 더 가겠죠? 또한 개발도 2개를 다 소스를 관리해야해서 유지보수 시 소스관리가 어렵습니다.
반응형웹은 한 소스에 PC웹과 모바일웹 2가지를 구현하다보니 소스가 복잡해집니다. 그리고, html, css, js, 개발소스까지 전체 소스의 양이 늘어나 속도에 안좋은 영향을 끼칠 수 있습니다.
반응형웹은 유지보수 시 한 파일에서 핸들링하기 때문에 유지보수가 쉽다는 장점이 있고
적응형웹은 PC웹과 모바일웹 많게는 태블릿웹까지 2~3가지 소스를 핸들링 하기 때문에 유지보수 시 아무래도 손이 더 가겠죠? 또한 개발도 2개를 다 소스를 관리해야해서 유지보수 시 소스관리가 어렵습니다.
반응형웹은 한 소스에 PC웹과 모바일웹 2가지를 구현하다보니 소스가 복잡해집니다. 그리고, html, css, js, 개발소스까지 전체 소스의 양이 늘어나 속도에 안좋은 영향을 끼칠 수 있습니다.
그렇다면 반응형웹과 적응형웹 중 어떤 기술이 검색엔진 최적화에 유리할까요?
검색엔진 최적화라면 어려울 수 있는데요.
쉽게 말씀드리면 디지털 마케팅에 유리할까요?라고 물어봐도 마찬가지입니다.
이를 알아보기 위해서는 랭킹을 정하는 구글의 최근 트렌드 , 지침을 살펴봐야 합니다.
구글은 다음 사이트와 같이 반응형웹으로 웹사이트를 제작하라고 지침까지 알려주고 있습니다.
쉽게 말씀드리면 디지털 마케팅에 유리할까요?라고 물어봐도 마찬가지입니다.
이를 알아보기 위해서는 랭킹을 정하는 구글의 최근 트렌드 , 지침을 살펴봐야 합니다.
구글은 다음 사이트와 같이 반응형웹으로 웹사이트를 제작하라고 지침까지 알려주고 있습니다.
[구글 반응형 웹 디자인 가이드 사이트]
그럼 위에서 말한 속도 최적화 부분도 검색엔진 최적화에서 주요한 부분인데 이 부분은 반응형웹이 소스가 많아서 마이너스일텐데 나쁜 영향을 미칠까요? 다행히도 속도 최적화 하는 방법은 많이 있습니다.
그 중 위의 소스(css, js, html 등)는 대부분 텍스트 파일인데 http server compression(http 서버 압축) 기술을 사용하면 텍스트 파일은 약 80%가 압축되어 매우 소스가 가벼워 집니다. 쉽게 말씀드리면 텍스트 파일을 zip으로 압축해보신 분은 매우 작아 지는 것을 알 수 있습니다.
그 중 위의 소스(css, js, html 등)는 대부분 텍스트 파일인데 http server compression(http 서버 압축) 기술을 사용하면 텍스트 파일은 약 80%가 압축되어 매우 소스가 가벼워 집니다. 쉽게 말씀드리면 텍스트 파일을 zip으로 압축해보신 분은 매우 작아 지는 것을 알 수 있습니다.
그러니 반응형웹일 경우에는 http 서버 압축 gzip이 필수 겠죠?
실제로 구글 SEO 랭킹 가점에는 http 서버 압축과 반응형웹 2가지가 모두 존재합니다. 결론은 반응형웹이 SEO에 유리하다는 결론이 나겠군요?
또한 , 구글은 Web Fundamentals라는 사이트에서 웹의 가장 기본적인 속성으로 4가지를 제시했습니다.
또한 , 구글은 Web Fundamentals라는 사이트에서 웹의 가장 기본적인 속성으로 4가지를 제시했습니다.
[구글의 웹의 가장 중요한 기본속성 4가지 = Fast, Intergrated, Reliable, Engaging]
Fast와 Reliable은 속도에 대해서 말하는 것이고 이는 제가 쓴 이전 포스트 "검색엔진 최적화의 최근 트렌드는 "네이버.구글은 기술기업"에서 알 수 있다." 를 보시면 쉽게 이해하실 수 있습니다.
Engaging은 디자인 적인 사용성과 아름다움을 얘기 하는 항목이구요.
여기에서 Intergrated라는 항목을 눈여겨 봐야 합니다.
PC웹이든 모바일웹이든 모바일앱이든 사용자는 상관없이 통일된 경험을 하고 쉽게 느낄 수 있도록 제약이 있으면 안된다는 것입니다.
즉, PC웹에서 보여준 경험이 모바일웹과 전혀틀리다면 , 예를 들어 PC웹의 콘텐츠 중 요약된 내용만 있다든지 아니면 기능 중 일부만 제공을 한다던지 하는 것은 사용자에게 모바일에서의 한계를 느끼게 하는 것입니다.
그렇기 때문에 반응형웹을 제공하는 것이 적응형웹보다 모든 콘텐츠, 기능을 제공할 것이기에 우선 점을 줄 수 있는 것입니다.
물론, 반응형웹이라고 해도 모바일웹에서 한정을 주게 제작할 수 도 있겠지요. 그렇지만, 일단 반응형웹으로 가고자 한다면 그렇게 의도적으로 제작할 이유는 없다고 봅니다.
여기에서 Intergrated라는 항목을 눈여겨 봐야 합니다.
PC웹이든 모바일웹이든 모바일앱이든 사용자는 상관없이 통일된 경험을 하고 쉽게 느낄 수 있도록 제약이 있으면 안된다는 것입니다.
즉, PC웹에서 보여준 경험이 모바일웹과 전혀틀리다면 , 예를 들어 PC웹의 콘텐츠 중 요약된 내용만 있다든지 아니면 기능 중 일부만 제공을 한다던지 하는 것은 사용자에게 모바일에서의 한계를 느끼게 하는 것입니다.
그렇기 때문에 반응형웹을 제공하는 것이 적응형웹보다 모든 콘텐츠, 기능을 제공할 것이기에 우선 점을 줄 수 있는 것입니다.
물론, 반응형웹이라고 해도 모바일웹에서 한정을 주게 제작할 수 도 있겠지요. 그렇지만, 일단 반응형웹으로 가고자 한다면 그렇게 의도적으로 제작할 이유는 없다고 봅니다.
검색엔진 최적화(SEO)는 쉽게 말씀드리자면, 사용자 경험성이 좋은 웹사이트에 가점을 주어 랭킹을 높여준다."로 쉽게 바꾸어 말씀드릴 수 있겠습니다.
그럼 이렇게 말씀드릴 수 있겠네요.
검색엔진 최적화 = 사용성 최적화
그럼 이렇게 말씀드릴 수 있겠네요.
검색엔진 최적화 = 사용성 최적화
지금까지는 사용자와 관리자 입장에서 살펴본 반응형웹의 장점이구요.
여기에 구글 검색엔진 입장에서 살펴보자면,
여기에 구글 검색엔진 입장에서 살펴보자면,
① 하나의 URL사용
PC웹과 모바일웹의 URL이 동일하니 관리하기가 쉽겠죠? 일반적을 https://, http://, www, www(X) 모두 다른 도메인으로 인식합니다. 그러니 여기에 PC웹 , 모바일웹이 틀리면 검색엔진으로서는 골치 아프겠죠?
② 구글 크롤러의 효율적인 검색 크롤링가능
하나의 URL을 사용하니 검색엔진이 색인할 때 자원이 덜 들어가겠죠?
③ 중복콘텐츠 방지 등이 있습니다.
중복 콘텐츠는 검색엔진 입장에선 매우 골치아픈 일입니다. 기껏 색인화 시켰는데 사본이 여기저기 돌아다니면 맥이 빠지겠죠? 검색결과로 어디를 알려줘야 할지도 혼동되구요.ㅎㅎ 그래서 Canonical URL이라는 메타 태그를 설정하기도 합니다. 즉, 내가 진본이야 ~~ 여기로 와 이것이죠? 모바일웹, PC웹에 이중 콘텐츠가 있으면 색인화가 어렵겠죠? 그래서 하나의 URL에 모바일웹 PC웹이 있으면 검색엔진 입장에서는 쌩유입니다. ~
PC웹과 모바일웹의 URL이 동일하니 관리하기가 쉽겠죠? 일반적을 https://, http://, www, www(X) 모두 다른 도메인으로 인식합니다. 그러니 여기에 PC웹 , 모바일웹이 틀리면 검색엔진으로서는 골치 아프겠죠?
② 구글 크롤러의 효율적인 검색 크롤링가능
하나의 URL을 사용하니 검색엔진이 색인할 때 자원이 덜 들어가겠죠?
③ 중복콘텐츠 방지 등이 있습니다.
마지막으로 검색엔진 최적화가 html 메타정보나 키워드를 최적화 시키는 것이 전부인 것처럼 말씀을 하시는 분들이 많으신데 사실은 그렇지 않습니다. 이제 검색엔진 최적화는 사용성을 극대화 시킨 웹사이트에게 가점을 주는 방식으로 동작합니다.
물론, 네이버는 아직 미숙하지만~
물론, 네이버는 아직 미숙하지만~
웹사이트를 제작할 때 반응형웹은 기본으로 제작해야하고 모바일앱과 통합시에는 이 반응형웹이 하이브리드형으로 모바일앱으로 통합해서 제작하는 것을 추천해 드립니다. 가장 기본적인 검색엔진 최적화를 꼭 염두해 주시구요.
마케팅&홍보가 안되는 웹사이트는 전혀 쓸모가 없습니다. ^^
저희 넥스트티는 위와 같은 생각으로 디지털 제작 및 마케팅 캠페인을 진행합니다.
마케팅&홍보가 안되는 웹사이트는 전혀 쓸모가 없습니다. ^^
저희 넥스트티는 위와 같은 생각으로 디지털 제작 및 마케팅 캠페인을 진행합니다.