안녕하세요! 오랜만에 인사드립니다. 그간 제 환경에 큰 변화가 있었어서 매주 한 번씩 업데이트하던 SEO 관련 포스팅을 하지 못했습니다. 그러나 이번 주 부터 다시 한 번 시작해보려고 합니다. 많은 관심 부탁드립니다.
이번 주 공유드리고자 하는 내용은 "검색엔진최적화에서 맨날 SSR 페이지로 만들어라"는 이유에 대한 근본적인 설명을 드리려고 합니다. 사실 설명이라고 말씀드리지만 저도 개념적인 이해가 아닌 좀 더 근본적인 이유를 이해하고 실무에 어떻게 적용하면 좋을까 싶었던 것을 정리하는 목적도 있습니다. SSR과 CSR에 대한 정의 및 차이점은 링크를 통해 확인부탁드립니다.
우선 시작은 해당 기사 "How To Make Search Console Work Harder for You"를 보면서 시작됐습니다. 어려 SEO 관련 콘텐츠 매체들이 있지만 개인적으로 Search Engine Journal을 선호합니다. UI가 좀 더 차분해서 읽기 편하고 저한테 좀 더 공감되는 내용들이 있어서 자주 애용하고 있습니다.
검색엔진최적화(SEO) 관점에서 CSR(클라이언트 사이드 랜더링) 페이지보다 SSR(서버 사이드 랜더링)이 더 유리한 결론을 먼저 말씀드리면, CSR 방식으로 불러오는 콘텐츠 페이지는 검색엔진 크롤러가 안해도 되는 일을 한 번 더 해야하기 때문입니다. 왜...이 차이를 이렇게 알려주는 사람이 없던걸까요...있는데 제가 모르는건지 아니면 딱 보면 이해하는데 저만 이해 못했던건지...어쨌든 결론은 "안해도 되는 일을 해야 하니 검색결과 상위 노출에 불리할 수 있던 것" 입니다.
좀 더 쉬운 이해를 위해 그림을 통해 설명드려보겠습니다. 검색엔진이 크롤러가 색인해야 할 URL들을 수집하면 크롤러가 직접 방문해서 해당 URL 리스트를 이해합니다. 방금 말씀드린 "이해"의 과정에서 크롤러는 HTML 코드를 우선 적으로 파악합니다. 여기서 HTML 코드는 크롬 기준으로 웹사이트에서 오른쪽 버튼 클릭 후 "소스코드 보기" 또는 Ctrl+U를 누르면 볼 수 있는 내용입니다. 아래의 그림을 통해 볼까요?
좌측의 이미지는 고객들이 브라우저를 통해 실제로 확인하는 페이지, 우측은 해당 페이지가 브라우저에서 구현되기 위해 설정한 HTML 코드입니다. 검색엔진은 수집된 URL 리스트에 크롤러를 출동시켜 우측의 이미지에 있는 HTML 코드를 이해하도록 명령을 내려놨습니다. 그러나 여기서 문제가 있습니다. 그 문제는 페이지를 제공하는 업체 입장에서 트래픽 부담을 줄이고, 웹페이지 내 좀 더 많은 마케팅 위잿등을 설정해서 보여주고 싶기 때문에 JavaScript를 통해 고객의 서버에서 구현될 기능들을 추가한 것이죠. 이런 원론적인 설명보다 직접 화면을 통해 보여드리겠습니다.
좌측은 고객들이 브라우저에서 보는 실제 사이트, 우측은 크롬 개발자 도구에서 "Settings(톱니바퀴)" > "debugger" > "Disable Javascrip"를 하고 확인한 페이집입니다. 두 화면 모두 같은 페이지를 보이고 있지만 자바스크립트 랜더러(Renderer)가 구현하는 부분을 제외하면 좌측에 있는 많은 내용들이 우측의 화면에서 보이지 않는 것을 확인할 수 있습니다.
즉! HTML 코드만 봐서 검색엔진 크롤러가 "어? 이 페이지에 내용이 너무 없어서 내가 색인 후 검색하는 사람들한테 보여줄만한 가치가 없는데? 일단 랜더러 써서 나중에 한 번 살펴보자!"는 판단을 하는 순간 "랜더러"를 사용하는 프로세스로 넘어가게 됩니다. 이렇게 되면 검색엔진의 해당 페이지 색인이 없었기 때문에 모든 과정이 완료되기 전 까지 검색결과에서 우리 홈페이지가 나타나지 않게 됩니다.
예전에 비해 요즘은 랜더러를 통해 사이트를 다시 이해하고 색인해서 검색결과에 노출되는 시간이 훨씬 줄어들었지만, 원칙적으로 SSR 형태의 페이지가 CSR 형태의 페이지보다 유리한 것은 사실입니다. 그래서 SEO(검색엔진최적화) 하는 사람들은 맨날 "SSR 형태의 페이지로 구현하는 것이 좋습니다." 라고 하는 것 입니다. 그러나 이게...실제 페이지를 구축 하는 사람들 입장에서 보면...많이 어렵습니다. 왜냐면 아래의 같은 상황에 있기 때문이죠.
1. 검색엔진최적화(SEO)를 서비스 초기 개발 단계부터 고려하지 않았기 때문에 지금 SSR로 전환하기 너무 많은 리소스가 필요하다.
2. 그렇게 많은 리소스를 들여서 SSR로 전환하면 매출은 얼마나 늘어날 수 있는가?
3. 한국의 검색 시장에서 네이버가 60~70%는 점유하고 있는데, 네이버 검색결과 노출은 모든 광고 영역을 지나 보이는데 SSR 전환 개발 리소스 감당할 만큼 돈 벌어 올 수 있는가?
4. 기대 효과를 달성하지 못했을 시 이로 인한 기회 비용은 어떻게 보완할 것인가?
이게...제가 에이전시를 떠나 인하우스 SEO 마케터로 업무를 시작하며 맞딱뜨린 현실적 문제입니다. 그래서 인하우스 SEO 담당자로서 CSR로 구현되있는 기존 페이지들 일부를 SSR로 전환 후 그렇지 않은 페이지들과 특정 기간 동안의 성과를 비교하는 A/B 테스트를 진행했습니다. 결국 위에서 말씀드린 2~3번에 대한 타당성을 입증하기 위한 A/B 테스트였고 결과는 제가 이론적으로 알고 있던 대로 나와야만 했습니다. 세부 결과를 자세히 말씀드리기 어렵지만 결국 2~4번 문제에 맞딱드리게 됐고 원하는 결과를 얻어내기 위한 또 다른 업무를 시작하게 됐습니다.
이번 포스팅이 CSR 방식의 페이지 구현이 SEO 관점에서 선호되지 않는 이유에 대해 충분히 설명하는 자료가 되었기를 진심으로 기원합니다.
감사합니다. 다음주에 뵙겠습니다.