1-1 반응형 웹사이트란?
반응형 웹 사이트(Responsive web)란 사용자의 화면 크기에 반응하여 보이는 웹 사이트입니다. 즉, 홈페이지의 크기(가로/세로)가 사용자 화면 크기에 따라 줄었다 늘었다 하며 반응하는 웹 사이트로 저희 애드 스튜디오 또한 반응형 웹 사이트입니다.
(스마트폰, 태블릿pc, 데스크톱 각각 애드 스튜디오를 접속하였을 때 화면을 비교해보세요.)
그렇다면 이러한 반응형 웹 사이트가 정말 필요할까요?
반응형 웹 사이트 이전 또는 반응형 웹 사이트가 아닌 홈페이지의 경우 PC 버전과 모바일 버전을 따로 제작하여, PC 버전 내부의 모든 콘텐츠 내용을 모바일 버전에서 표현하기 어렵기 때문에 모바일 버전을 포기하거나 하단에 대문짝만한 PC 버전 이용하기 등의 버튼을 통하여 500PX 정도의 작은 스마트폰에서 PC 버전의 웹으로 정보를 얻는 등의 불편함을 겪었습니다. 더불어 검색엔진에서 웹 사이트 내부의 콘텐츠를 수집할 때에도 모바일 호환이 안될 경우 또는 모바일환경에서의 콘텐츠가 누락될 경우 해당 웹 사이트의 콘텐츠 수집의 우선순위 경쟁에서 심각한 마이너스를 부여할 수 밖에 없으며 이는 사이트 누락으로 가는 지름길이라고 설명해 드립니다.
누가 봐도 멋지고 깔끔한 내 웹사이트가 웹 버전 따로, 태블릿 PC 따로, 모바일 버전까지 보이는 게 제각각이라면? 심지어 태블릿 PC 또는 모바일버전 지원이 안 되는 웹사이트라면 어떨까요?? 상위노출에 있어서 첫 발걸음부터 고비라고 말씀드리고 싶습니다. 전 세계인구 대부분이 스마트폰을 이용하고 있는 시대입니다. 시대의 흐름에 맞춰 웹사이트 또한 모바일이나 태블릿 PC에서 데스크톱 웹사이트와 같은 내용을 비추어야 하며, 이는 검색엔진 상위노출의 첫걸음입니다.
1-2 모바일 ‘친화적’ 웹 사이트
2019년 기준 대한민국의 95%는 스마트폰을 이용하고 있습니다. 전 세계 시장도 마찬가지로 데스크톱 환경에서의 웹 사이트 및 검색엔진 이용률보다 스마트폰 환경에서의 모바일 버전 웹 사이트 및 검색엔진 이용률이 월등히 앞서는 시대인만큼 검색엔진의 로직 또한 이에 맞춰 모바일 ‘친화적’ 웹 사이트를 우선으로 크롤링하고 있습니다. 나의 웹 사이트의 비중을 너무 PC 버전에 맞춰져 있다면 지금이라도 모바일의 최적화가 필요한 시점입니다.
《구글 모바일 친화성 테스트》
저희의 궁극적인 목표는 ‘구글 상위노출’입니다. 그 첫 단추이자 지름길인 모바일 친화적인 웹 사이트가 필요한 시기입니다. 여러 곳의 국내, 해외 블로그 및 포스팅에 따르면 ‘구글 SEO 알고리즘 중 똑같은 콘텐츠 혹은 비슷한 콘텐츠일 경우, 모바일 친화적 페이지를 우선순위로 크롤링하여 검색자들에게 노출한다’라는 포스팅을 접해보신 분들도 계실 겁니다. 이 내용을 풀이해 보자면, PC 버전의 검색엔진 검색률보다는 모바일 버전의 검색엔진 검색률이 월등히 높다고 해석할 수 있으며, 이미 검색엔진의 알고리즘은 ‘모바일 버전의 콘텐츠를 더 선호한다.’ 라고 풀이할 수 있습니다. PC 버전의 웹 사이트에 의한 구매율보다 스마트폰 모바일 버전의 웹 사이트에 의한 구매율이 월등히 앞선 시대인 만큼 저희가 가지고 있는 웹 사이트의 모바일 ‘친화적’ 웹 사이트로 바뀌는 것이 ‘구글 상위노출’에서 가장 먼저 해야 할 숙제이지 않을까요?
《SEO 웹 사이트 관련포스팅》
인터넷 홈페이지를 통하여 판매 또는 서비스하고자 하는 다시 말해, 웹 사이트가 가리키는 상품 또는 ‘키워드’는 웹 사이트의 주인인 자신이 제일 잘 알고 있습니다. 그렇다면 우리는 해당 키워드에 맞는 콘텐츠를 양산하면서 놓치기 쉬운 요소들을 파악해야 합니다. 다양한 콘텐츠를 업로드하여 많은 정보를 구글에 비추고 크롤링을 통하여 해당 콘텐츠들을 기반으로 상위노출에 한 걸음 더 나아가는 것은 정말 중요한 행위입니다. 하지만, 우리가 생각했던 콘텐츠들이 이미 여러 사이트에 떠돌아다니는 콘텐츠라면 어떨까요? 조금 더 보태서 내 웹 사이트에 이미 존재하는 콘텐츠의 내용을 조금 수정한 후 다시 업로드한 콘텐츠라면 어떨까요? 이러한 콘텐츠들에 대해서 구글은 스팸 콘텐츠로 간주하여 사이트 지수를 오히려 낮춰버린다고 말씀드립니다. 더불어 이러한 행위들이 반복되면, 상위노출과는 정반대인 사이트 누락으로 이어지는 지름길입니다.
그렇다면 우리는 콘텐츠를 어떻게 업로드 해야 할까요? 최신 구글 알고리즘에 따르면 양보다는 질! 키워드 관련 대량의 스팸성 콘텐츠보단 하나의 콘텐츠라도 양질의 콘텐츠, 같은 키워드의 콘텐츠라도 나만의 콘텐츠가 핵심포인트입니다. 예를 들어보자면 A+B=C입니다. (A, B=콘텐츠, C=키워드) 많은 웹 사이트 관리자 혹은 작가들이 제작하는 콘텐츠는 ‘A+B, B+A, A+A, B+B 등 =C입니다.’라는 콘텐츠를 제작 후 업로드 합니다. 그렇다면 여기서 우리가 A, B를 대입해서 콘텐츠를 제작해야 할까요? 물론 더 정확한 정보를 제공할 수 있는 콘텐츠라면 상관없을 수 있겠지만, 대부분은 중복콘텐츠로 간주할 소지가 다소 높습니다. C라는 키워드를 주제를 두고 A, B와 비슷한 성질을 띠는 D, E를 찾아서 A, B와 엮은 후 C를 가리키는 콘텐츠를 제작하는 방법이 고유콘텐츠를 제작하는 방법의 하나일 수 있습니다.
자신만의 독특하고 창의적인 고유’콘텐츠’를 제작하였다면, 적절한 태그와 함께 최적화를 진행해야 할 때입니다. 콘텐츠의 카테고리는 다양하기 때문에 현재 문장에서는 블로그형식의 포스팅을 예로 들어보겠습니다. 포스팅 문장에 있어서, 제일 중요한 제목(H1 Tag)과 소제목(H2 Tag)이 대표적이며 그 이하의 주제들(H3, H4, H5, H6까지)의 중요성은 뒤로 갈수록 떨어집니다. 단, 제목(H1 Tag)은 페이지당 단 하나만 사용하는 것을 추천해 드립니다. 제목 태그의 효과는 단순하게 제목이 굵다고, 색이 다르다는 것 뿐만 아니라 검색 엔진 로봇의 크롤링에서도 주제와 설명을 구분할 수 있기 때문에 SEO면에서 제목 태그를 사용하지 않은 콘텐츠보다 훨씬 더 좋은 영향을 받을 수 있습니다.
H1 Tag의 제목을 구성한 후 그에 맞는 제목을 설명하는 큰 문단 태그(paragraph, P Tag)로 콘텐츠의 header 영역을 장식합니다. 이후 제목 태그를 뒷받침하는 자료의 소제목을 H2 Tag와 P Tag로 채울 수 있습니다. 물론 동일한 비중의 소제목이라면 H3 H4 H5 Tag를 사용하지 않고 큰 소제목으로 H2 Tag를 여러 개 사용하여도 무방합니다. 콘텐츠의 제목을 뒷받침하는 정확한 설명 또는 자료들에 이미지 또는 동영상을 적절하게 사용하시는 것을 추천해 드립니다.
위와 같은 태그로 구성된 콘텐츠의 부가설명으로 혹은 좀 더 구독자, 사용자가 쉽고 정확하게 이해하는데 필요한 것은 이미지 또는 동영상일 수도 있습니다. 예를 들어 무언가의 방법을 설명하는 콘텐츠라면 긴 문장보다는 그 내용을 포함한 동영상 파일이 더 정확할 수 있으며, 무언가를 표현하는 콘텐츠라면 그 ‘무언가’를 보여주는 이미지가 더 정확할 수 있습니다. 그렇다면 이러한 이미지 및 동영상을 어느 영역에 표현해야 더 좋은가를 고민해야 할 문제입니다.
구글은 새로운 것을 좋아합니다. 이미지를 표현해야 한다면, 새로운 이미지를 만들어서 표현해주세요. 저장방식은 고화질의 PNG 확장자를 사용하시면 고화질을 유지하실 수 있습니다. 단, PNG 확장자는 용량이 크니, https://tinypng.com와 같은 곳에서 용량을 줄여주시는 것도 매우 좋습니다. (용량이 큰 이미지들이 웹 사이트에 쌓이면 웹 사이트가 느려질 뿐만 아니라, 구글 크롤링 로봇이 찾아오는 빈도가 낮아지게 되며, 이는 누락으로 가는 지름길입니다.)
위와 같은 이미지표현의 기본적인 내용또한 자신이 서비스 하고있는 콘텐츠의 키워드 범위내에서 혹은 유사키워드에 알맞는 이미지를 사용하시는것이 바람적입니다. 위의 내용에 포함되지않은 자세한 내용은 아래에서 확인해 주세요.
《이미지 최적화방법》
HTTP란 Hypertext Transfer Protocol의 약자로서 하이퍼텍스트 형식의 HTML을 전송하기 위한 통신규약이며, Over Secure Socket Layer의 약자인 S를 덧붙여 보안이 강화된 버전으로, 기존의 HTTP는 암호화되지 않은 방식으로 데이터의 전송을 주고받았다면 HTTPS는 암호화된 데이터를 주고받음으로써 외부의 공격으로부터 보호받을 수 있습니다. (비밀번호 해킹, 데이터 해킹 등등)
HTTPS를 활성화 하는데에는 비용이 발생하며 그 규모에 따라서 가격또한 상당히 차이가 납니다. 또한 현재는 많이 개선이 되었지만 텍스트데이터를 암호화 하기때문에 속도가 조금은 더 느릴 수 있습니다. 이러한 단점에도 불구하고 구글은 HTTPS가 활성화 돼있는 사이트를 최우선으로 하며, Chrome browser에서는 HTTPS를 사용하지 않을경우 상단에 ‘안전하지 않음(Not Secure)’이라는 표시를 띄워 사용자들에게 경고하고 있습니다.
<<관련기사>>
위와같이 비용도 발생하며 웹 사이트의 속도 또한 느릴 수 있음에도 구글이 HTTPS가 활성화된 웹사이트를 중요하시 하는 이유를 2가지로 설명드립니다.
좀 더 풀어서 설명하자면, HTTP의 방식은 말 그대로 암호와 없이 데이터를 텍스트 형식으로 전송하기 때문에 외부의 공격에 취약합니다. 같은 네트워크 안에서 누군가의 공격에 의해 내 웹사이트의 HTML 데이터를 모두 가로챌 수 있으며, 중요한 데이터, 비밀번호 등을 해킹당할 수 있습니다. 그러나 HTTPS는 이러한 데이터를 암호화 과정을 거쳐 전송하기 때문에 데이터 전송 간의 공격에 피해를 받을 수 없으며 안전한 웹 사이트 운영이 가능합니다.
같은 웹 사이트를 두고 일반 HTTP의 웹 사이트보다 HTTPS가 활성화된 웹 사이트를 더 우선으로 구글은 선택합니다. 이는 2014년 구글정책의 일부분으로 ‘HTTPS의 보안 프로토콜을 사용하는 웹 사이트를 HTTP의 일반 프로토콜을 사용하는 웹 사이트보다 더 높은 점수를 부여할 것’ 이라고 발표한바 있습니다.
쇼핑몰 또는 공공기관에서만 필요하던 HTTPS. 이제는 일반 웹 사이트도 기본적으로 활성화해야만 하며 이를 통해 웹 사이트 최적화, 구글SEO에 한 걸음 더 가까워질 수 있습니다. 또한 HTTPS의 활성화를 통하여 자신의 웹 사이트의 보안 역시 안전하게 되므로 일석이조가 아닐까 생각합니다.