CSR, SPA? 웹렌더링 몰라도 SEO는 해야 하니까
CSR 렌더링에도 마케터가 울지 않는 법
콘텐츠 마케팅으로 커리어를 시작했던 제게 SEO는 그저 블로그 글을 상위에 노출시키는 기술일 뿐이었습니다. 적어도 이전 회사에서는 그랬죠. 메타태그만 잘 넣어두면 홈페이지도 자연스럽게 검색에 노출되는 줄로만 알았습니다. 하지만 현재 재직 중인 회사에 합류한 뒤, 홈페이지 SEO는 그렇게 간단한 일이 아니라는 걸 깨닫는 데 오래 걸리지 않았습니다.
이 글은 웹 렌더링 방식도 모른 채 개발자와 부딪히고, SEO 전략 수립 과정에서 수없이 헤매던 시간을 기록으로 남기고자 작성되었습니다.
혹시 "홈페이지 SEO, 꼭 필요한가?" 싶으신가요?
홈페이지 SEO가 왜 필요한지는 사용자의 행동 심리를 떠올려보면 쉽게 이해할 수 있어요. 주택, 투자, 대출, 자동차처럼 큰 자산이 들어가는 상품을 우리는 흔히 ‘고관여 상품’이라고 부릅니다. 이런 상품을 선택할 때 여러분은 어떤 행동을 하시나요? 대부분 ‘검색’이라는 행동을 포함하고 있을 겁니다.
설명을 돕기 위해 먼저 말씀드리자면, 저는 투자와 대출 서비스를 제공하는 핀테크 스타트업에 다니고 있습니다. 이런 서비스를 제공하다 보니, 유저 입장에서는 ‘이 회사에 자산을 믿고 맡길 수 있는지’가 정말 중요하게 작용하죠.
투자 서비스를 이용하는 유저는 보통 “어디에 돈 넣을까?”라는 질문에서 출발합니다. 그리고 그 답을 찾기 위해 다양한 경로로 정보를 탐색하죠. SNS 광고나 배너는 시선을 끌 수 있지만, 실제로 투자 직전에 하는 행동 중 하나는 검색엔진에 “{업체명} 후기”, “{업종} 투자 안전성”, “{상품명} 후기” 같은 키워드를 입력해 보는 겁니다.
제가 몸담고 있는 핀테크 플랫폼은 금융업이다 보니, 신뢰가 핵심입니다. 그런데 검색해 봤더니 관련 정보가 거의 없다면? “이거 좀 수상한 거 아냐?”, “왜 아무 후기도 없지?” 하며 이탈할 가능성이 높아집니다. 그래서 이런 검색어에 노출될 수 있는 콘텐츠와 페이지를 미리 준비해 두는 게 정말 중요합니다. 잠재 고객이 검색을 통해 우리 브랜드를 확인하고, “음~ 믿을 만하네”라는 신뢰가 생겨야 가입도 하고, 투자도 하고, 대출도 신청하게 되는 거죠.
이게 바로, 홈페이지 SEO가 중요한 이유입니다.
여기까지는 다 이해되셨겠지요? 그래서 메타태그도 다 바꾸고, 구글에서 제안하는 E-E-A-T에 맞춰서 홈페이지 내 콘텐츠도 업데이트도 했는데 혹시 홈페이지가 잘 노출되지 않는다면... 웹 렌더링 방식이 어떻게 되어있는지 살펴볼 필요가 있습니다. 왜냐하면...
렌더링 방식은 SEO에 큰 영향을 미치기 때문이죠.
브라우저 렌더링 방식이 SEO에 영향을 미친다?
브라우저 렌더링이란, 브라우저가 서버로부터 받은 데이터를 화면(View)에 표시해 주는 작업을 말합니다. 서버에서 HTML, CSS, Java Script 파일을 전달받으면, 브라우저의 렌더링 엔진이 이 문서들을 해석해서 실제 사용자에게 보이는 화면을 그려주는 거죠. 이 렌더링 방식은 크게 클라이언트 사이드 렌더링(CSR)과 서버 사이드 렌더링(SSR) 두 가지로 나뉩니다. 제가 다니는 회사는 클라이언트 사이드 렌더링(CSR) 방식을 채택하고 있습니다.
렌더링 방식 1. CSR (클라이언트 사이드 렌더링, Client Side Rendering)
엄마(서버)가 재료만 주고, 내(브라우저)가 직접 요리해서 먹는 방식입니다.
엄마가 도시락을 다 싸주는 게 아니라, 그냥 밥이랑 반찬 재료만 준다면? 내가 직접 반찬을 만들고 밥을 차려서 먹어야 하죠. 즉, 서버는 화면을 다 만들어서 보내지 않고, "재료(코드)만 보내고, 네 컴퓨터(브라우저)가 그걸 직접 조립해서 화면을 만들어!”라고 하는 거예요.
장점: 한 번 화면을 만들고 나면, 새로고침 없이 빠르게 움직일 수 있습니다.
단점: 브라우저가 직접 화면을 구성해야 하다 보니, 초기 로딩에 시간이 걸릴 수 있고 SEO에도 불리합니다. (SEO에 불리함: CSR에서는 초기 HTML 파일에 콘텐츠가 포함되어 있지 않기 때문에 검색 엔진이 페이지를 크롤링할 때 콘텐츠를 인식하지 못할 수 있습니다.)
렌더링 방식 2. SSR (서버 사이드 렌더링, Server Side Rendering)
엄마(서버)가 미리 도시락을 만들어줘서, 바로 먹을 수 있는 방식입니다.
밥이 먹고 싶은데, 엄마가 미리 밥이랑 반찬을 다 도시락에 담아준 상태라고 생각해 보세요. 우리는 그냥 도시락을 열고 바로 먹기만 하면 되죠. 웹사이트도 마찬가지예요. 서버가 화면(HTML)을 미리 만들어서 보내주면, 브라우저는 그걸 받아 바로 보여주는 방식입니다.
장점: 빠르게 화면이 보이고, 검색엔진에도 잘 노출됩니다 (SEO에 유리해요!)
단점: 새로운 화면을 볼 때마다 서버가 다시 도시락을 만들어야 하니, 화면 전환이 잦을 경우에는 오히려 느릴 수 있어요.
그래서 유튜브, 페이스북 같은 사이트는 보통 SPA + CSR을 쓰고, 뉴스 사이트 같은 곳은 SSR을 많이 사용합니다.
SPA + CSR을 쓰는 유튜브, 페이스북의 특징
사람들이 검색 엔진에 검색해서 들어오는 게 아니라, 그냥 앱이나 즐겨찾기, 직접 링크를 타고 들어오는 경우가 많습니다. 로그인하고 나서야 볼 수 있는 개인화된 정보(개인 알고리즘 기반 피드, 영상 추천)가 대부분이기 때문에, 검색엔진이 크롤링해도 볼 수 없는 내용이 많아요. 그래서 굳이 SSR 구조로까지 맞출 필요는 없다고 판단하는 거죠.
반대로, 뉴스 사이트, 쇼핑몰 같은 곳은 SEO가 엄청 중요해요.
사람들이 검색해서 들어오는 비중이 큰 편이에요. 그래서 유입을 끌어오기 위해 검색에 노출되는 게 중요하죠. 페이지가 검색 엔진에 잘 노출되게 하려면, 크롤러가 페이지를 쉽게 읽을 수 있도록 SSR 방식을 쓰는 게 좋아요.
그런데 왜 우리 회사는 SPA+CSR를 사용하는 걸까?
이 결정에 대해서 확실하게 정리된 자료는 없지만 추론해 보자면…
서비스 특성을 생각해 보면, 왜 CSR을 쓰는지 이해가 되기도 합니다.
제가 다니는 회사는 사람들이 돈을 투자하거나, 돈을 빌릴 수 있는 금융 플랫폼입니다. 로그인을 하면 내 투자 내역, 수익률, 상환 일정 같은 개인 맞춤 정보들이 한눈에 쫙 나옵니다. 그리고 이런 중요한 화면들(투자 내역, 대시보드 등)은 로그인해야만 볼 수 있어요. 이 말은 곧, 유튜브나 페이스북처럼 개인화된 콘텐츠가 많은 서비스라는 뜻이죠. 그런데 검색엔진은 로그인 후 페이지를 읽을 수 없기 때문에, 사실상 SEO가 큰 의미를 가지기 어려워요. 그래서 이런 경우엔 CSR 방식이 더 적합합니다. 브라우저가 사용자의 요청에 따라 필요한 화면만 그때그때 빠르게 그려주기 때문이죠.
투자자들은 여러 상품을 빠르게 훑어보고, 관심 가는 상품을 클릭해 상세 내용을 확인하죠. 그런데 이때마다 화면이 껌뻑껌뻑 새로고침된다면? 사용자는 불편함을 느끼고, 투자 경험에 대한 만족도도 떨어지게 됩니다. (극단적으로 상상해 보면 “답답해서 그냥 안 써!”로 이어질 수도 있어요…)
이런 이유로 SPA(Single Page Application) 구조가 많이 사용됩니다. SPA는 한 번 앱을 로딩해 두면, 그 안에서 필요한 부분만 쓱쓱 바꿔 보여줘서 화면 전환이 훨씬 빠르고 부드럽습니다. 결과적으로 저희는 ‘검색 최적화(SEO)’보다도, ‘빠르고 쾌적한 사용자 경험’을 더 우선시했기에 SEO에 더 유리한 SSR보다는 CSR 방식을 택하게 된 것 아닐까 생각해 봅니다.
유저 퍼스트… 좋아요… 좋은데…
결국 CSR + SPA 렌더링 방식에서 가장 스트레스를 받는 건... 마케터일지도 모릅니다. SEO엔 불리하지만, 유저 경험에는 강한 구조이기 때문이죠. 개인화된 콘텐츠와 빠른 반응성을 요구하는 시대, SPA는 앞으로도 늘어날 수밖에 없습니다. 그렇다면 서둘러 익숙해져야겠죠. 개발자와 더 잘 소통하고, 데이터와 도구를 활용해 이 구조 안에서 SEO 성과를 만들어내야 합니다.
SPA+CSR 환경에서 발견된 SEO 이슈
1. Java Script가 페이지를 못 읽습니다.
SPA + CSR 구조에서 title 태그를 JS로만 바꾸는 구조인데, 구글 크롤러가 자바스크립트를 실행하지 않거나 실패하면 기본 메시지(혹은 noscript 메시지)가 인덱싱 되기도 합니다.
다만 이 케이스의 경우 현재 쓰지 않고 있는 페이지였고, 자바스크립트를 비활성화한 상태의 페이지를 수집해서 그런 것임을 개발자님과의 커뮤니케이션을 통해 확인하였습니다.
2. 사이트 구조가 올바르게 인식되지 않은 것 같아 보입니다.
위 예시에서 카테고리는 상위, 탭 메뉴는 하위인데, 크롤러가 인식하기에 URL 계층이 명확하지 않은 것 같아 보여요. 때문에 SEO 상에서 카테고리와 탭 메뉴가 혼재되어 있는 결과가 나왔습니다.
3. 개명 전의 이름이 자꾸 나옵니다.
모두가 이해할 수 있도록 머기업의 이름을 잠시 빌렸습니다. 사실 제가 담당하고 있는 브랜드는 작년에 이름을 약간(?) 변경했는데요. 메타 태그에는 모두 반영했음에도 불구하고 개명 전의 이름이 종종 등장합니다. 구글이 예전 페이지 내용을 기억하고 있을 수도 있고, CSR 환경에서는 제대로 반영되지 못하는 경우가 간혹 있다고 하네요.
그럼 혹시 일부 페이만 SSR 전환하면 안 되나요?
정확히 제가 개발자님께 드린 질문입니다. 예를 들어 상품 랜딩 페이지처럼 검색 유저들을 유입시킬 수 있는 페이지만 SEO에 유리한 렌더링 방식으로 전환시키고 싶었는데요. 이에 대해 SPA 일부 페이지를 SSR로 전환하는 것은 어렵고, 크롤러를 위한 SSR 페이지를 만들고 메인 도메인을 향하게 하는 방법이 있다. 하지만 지금 상황으로는 CSR이더라도 사이트맵만 잘 제출하면 SEO 영향이 덜할 수도 있다. 는 답변을 받았습니다.
크롤러를 위한 SSR 페이지를 만든다? 이게 무슨 방식인지 알아보니 '프리렌더링(Pre-Rendering)'을 의미하는 것이었어요. 이 방식에 대해서는 AI의 도움을 받아 스터디를 해보았는데요. 총 3가지 방식으로 정리될 수 있어요.
CSR 환경에서도 SEO를 지키는 3가지 우회 전략
1. 다이내믹 렌더링(Dynamic Rendering)
동작 방식
사용자가 접속하면 기존 SPA처럼 CSR 방식으로 작동
하지만 구글, 네이버 크롤러가 접속하면 서버가 SSR 방식으로 HTML을 생성해서 제공. 즉, 사람 vs 크롤러를 구분해서 다른 페이지를 보여주는 것
크롤러는 정적인 HTML을 받아가니까 SEO 문제 해결
장점
기존 SPA 구조를 유지하면서도 SEO 문제를 해결
구글, 네이버 같은 크롤러는 SSR로 렌더링 된 HTML을 가져가기 때문에 메타태그 문제 해결
일반 사용자는 기존처럼 CSR로 빠른 인터랙션 가능
2. 프리 렌더링(Pre-Rendering)
동작 방식
사이트가 빌드될 때 검색이 중요한 페이지들(회사소개, 대출 상세 페이지 등)을 SSR로 미리 생성
구글, 네이버 같은 검색엔진이 방문하면 미리 렌더링 된 HTML을 제공
일반 사용자는 기존 SPA처럼 CSR로 빠르게 작동
장점
개발이 Dynamic Rendering보다 간단함 (그냥 HTML 파일을 미리 만들어 두는 방식)
SSR처럼 작동하지만, 실제로는 정적인 HTML 파일이므로 속도 빠름
SEO 성능이 매우 좋음
3. 서브도메인 또는 별도 SSR 서버 운영
동작 방식
기존 SPA는 그대로 CSR 방식 유지
seo.8percent.kr 같은 서브도메인에 SSR 기반의 SEO 최적화 페이지를 운영
8percent.kr/loan/12345 요청 시, 구글 크롤러는 seo.8percent.kr/loan/12345로 리디렉션
구글은 정적인 HTML을 색인해서 SEO 성능 향상
장점
기존 SPA를 바꾸지 않고도 SEO 성능을 극대화할 수 있음
SEO가 중요한 페이지에만 적용 가능
빠르게 해결하려면? → 프리 렌더링
구조적으로 가려면? → 다이내믹 렌더링
최강 SEO를 원하면? → 서브도메인 SSR 운영
SEO 환경 개선을 해보자, 차근차근
일단 SEO 현황과 사전에 확인하고 싶은 것은 모두 확인되었으니 이제 계획을 세워봅니다. 하지만 SEO 말고도 할 일이 많은 관계로… 차근차근 가보렵니다… 저는 올라운더 + 1인 브랜드 마케터거든요…
Step 1. 기본 환경 재정비
안 쓰는 페이지 정리해서 안 보이게 하기 → noindex 처리
사이트맵 업데이트 하기
페이지 별로 메타태그 및 디스크립션 업데이트 하기
Step 2. 캐노니컬 태그
Canonical 태그는 고정된 값으로 먼저 설정하고, 이후 라우팅된 페이지에 따라 title, description만 동적으로 변경
Step 3. Step 2로도 개선이 안될 때
크롤러를 위한 SSR 페이지를 만들고 메인 도메인으로 연결해 주기 (Dynamic Rendering or Pre-Rendering or 서브도메인 활용)
글을 마치며
홈페이지 SEO는 단순히 메타태그 몇 줄로 끝나는 일이 아니라, 기술적 구조와 사용자 경험, 검색 노출 전략이 맞물리는 종합적인 작업입니다. SPA + CSR 구조에서는 SEO가 어려울 수밖에 없지만, 그래서 더더욱 마케터가 기술을 이해하고 개발자와 소통하며, ‘현실적인 방법’을 찾고 합의해 나가는 노력이 필요하다고 느꼈습니다. 저도 아직 배우는 중이지만, 우리 서비스에 맞는 SEO 방법을 찾기 위해 하나씩 뜯어보고, 부딪혀보고, 적용해 보는 중입니다.
SEO는 한 번에 끝나는 프로젝트가 아니라, 꾸준히 관리하고 개선해 나가야 하는 운영 과제입니다. 이 글이 저처럼 테크니컬 SEO를 잘 모르는 상황에서 CSR 환경에 놓여 애먹는 마케터들에게 작은 힌트라도 되기를 바라며… 그리고 저도 다음 스텝을 향해 또 한 걸음씩 나아가 보려 합니다.
