네이버 블로그를 벗어나 자사 웹진(브랜드 미디어)을 직접 구축하려는 기업이 늘고 있습니다. 그런데 홈페이지 제작을 프론트엔드 개발자에게 맡겼다가 글을 아무리 써도 검색에 단 한 줄도 안 뜨는 상황이 빈번하게 발생합니다. 원인의 대부분은 CSR(클라이언트 사이드 렌더링) 방식의 리액트 싱글 페이지 앱으로 웹진을 만들었기 때문입니다. 이 글은 왜 CSR이 SEO를 망치는지 기술적 이유를 쉽게 설명하고, 홈페이지 제작 단계에서 반드시 챙겨야 할 실무 체크포인트를 제공합니다.
네이버 블로그는 네이버가 직접 운영하는 플랫폼입니다. 서버 성능, 도메인 신뢰도, SEO 구조가 처음부터 '만점'에 가깝게 셋팅되어 있습니다. 반면 갓 만든 자사 독립 도메인 웹진은 도메인 점수가 '0'에서 시작합니다.
여기에 기술적 설계까지 잘못되면? 검색 엔진이 여러분의 웹진을 아예 읽지 못하는 상황이 벌어집니다. 가장 흔한 함정이 바로 CSR 기반 리액트 홈페이지 제작입니다.
비유하자면, CSR은 조립 전 부품 박스를 배달하는 것이고, SSR은 완성된 가구를 배달하는 것입니다. 검색 로봇은 부품 박스를 받으면 조립할 시간이 없어서 그냥 지나칩니다.
리액트로 만든 CSR 웹진에 검색봇이 접근하면 아래와 같은 HTML만 받습니다.
<body>
<div id="root"></div>
<script src="/bundle.js"></script>
</body>본문 텍스트가 단 한 글자도 없습니다. 검색봇 입장에서는 빈 페이지입니다. 실제 글 내용은 bundle.js가 실행된 다음에야 나타나는데, 이 과정이 바로 SEO의 핵심 문제입니다.
구글봇과 네이버 예티(Yeti)는 자바스크립트를 실행할 수 있는 엔진을 갖추고 있습니다. 하지만 자바스크립트 실행은 일반 HTML 파싱보다 수십~수백 배 많은 연산이 필요합니다.
그래서 검색봇들은 자바스크립트가 필요한 페이지를 발견하면 즉시 색인하지 않고 '렌더링 대기 큐'에 집어넣습니다. 구글의 경우 실제 색인까지 며칠에서 몇 주가 걸릴 수 있습니다.
네이버 서치어드바이저 공식 가이드라인: "SPA 사이트는 자바스크립트 해석에 수 배 이상의 리소스가 필요하므로, 검색 로봇이 잘 인식할 수 있도록 서버 사이드 렌더링(SSR)을 강력히 권장합니다."
신제품 출시 소식, 업계 트렌드 분석처럼 시의성이 생명인 웹진 콘텐츠가 검색봇에 읽히기 전에 이미 뉴스 가치를 잃어버리는 상황이 발생합니다.
구글은 2024년부터 INP(Interaction to Next Paint)를 핵심 랭킹 지표로 확정했습니다. INP란 사용자가 클릭하거나 키를 입력했을 때 브라우저가 다음 화면을 그리기까지 걸리는 시간입니다.
CSR 리액트 앱은 초기 로딩 시 브라우저 메인 스레드에서 대용량 자바스크립트를 한꺼번에 실행합니다. 이 과정에서 클릭이나 스크롤에 버벅임(CPU 병목)이 발생하고 INP 점수가 크게 나빠집니다.
실제 사례로, 해외 한 SaaS 기업이 자사 블로그를 순수 CSR에서 SSG(정적 사이트 생성) 방식으로 전환하고 불필요한 서드파티 스크립트를 제거했더니 INP가 650ms에서 150ms로 개선되었고, 자연 유입이 39% 증가, 이탈률은 25% 감소했습니다.
2026년 현재 구글 'AI 오버뷰'와 네이버 'AI 브리핑(Cue:)'이 검색 결과 최상단을 장악하고 있습니다. 네이버 모바일 통합 검색 결과의 약 20% 영역이 이미 AI 브리핑으로 전환되었습니다.
AI 검색봇은 수억 개의 웹서버를 실시간으로 돌아다니며 데이터를 수집합니다. 이때 자바스크립트를 실행해야 텍스트가 보이는 CSR 사이트는 AI 브리핑의 인용 출처 후보에서 자동으로 제외됩니다. 아무리 좋은 글을 써도 AI가 읽지 못하면 노출 기회 자체가 사라지는 것입니다.
홈페이지 제작 기획 단계에서 반드시 개발자에게 확인해야 할 질문이 있습니다.
"아티클 페이지가 서버에서 완성된 HTML로 내려오나요, 아니면 브라우저에서 자바스크립트로 그려지나요?"
웹진 콘텐츠 페이지는 Next.js의 SSG(Static Site Generation) 방식을 기본으로 적용해야 합니다. 빌드 시점에 이미 완성된 HTML 파일로 만들어 두기 때문에 검색봇이 즉시 텍스트를 읽어갈 수 있습니다.
새 글이 발행될 때마다 전체 사이트를 재빌드하면 시간이 걸리므로, ISR(Incremental Static Regeneration) 방식을 함께 적용해 해당 페이지만 백그라운드에서 자동 갱신되도록 설계합니다.
리액트 SPA에서 흔히 발생하는 실수가 있습니다. 글 목록에서 상세 페이지로 이동할 때 <button onClick={router.push}> 방식을 쓰는 것입니다.
검색봇은 자바스크립트를 실행하기 전까지 이 버튼이 어디로 연결되는지 알 수 없습니다. 반드시 표준 <a href="/post/seo-guide"> 태그를 사용해야 검색봇이 링크를 따라 다른 글로 이동하며 색인할 수 있습니다.
URL 구조도 중요합니다. mysite.com/post?id=123 같은 파라미터 방식보다 mysite.com/post/csr-seo-problem 처럼 키워드가 담긴 경로(Path) 구조가 SEO에 훨씬 유리합니다.
AI 검색봇이 콘텐츠의 신뢰도를 판단하려면 구조화 데이터(Schema Markup)가 필요합니다. 각 아티클 페이지의 <head> 영역에 JSON-LD 형식으로 아래 정보를 포함해야 합니다.
headline)author)datePublished)publisher)이 마크업이 없으면 AI 브리핑이 해당 글의 신뢰도를 측정하기 어려워 인용 후보에서 밀려납니다.
/_next/static 같은 자바스크립트·CSS 폴더를 Disallow로 막지 마세요. 검색봇은 레이아웃 렌더링 성능 평가를 위해 JS·CSS 리소스도 수집합니다.아래 항목을 개발사 또는 내부 개발팀에 확인하세요.
<a> 태그로 구현되어 있는가?alt 속성이 모두 작성되어 있는가?Q1. 리액트로 만든 홈페이지는 무조건 SEO가 안 되나요? 아닙니다. 리액트 자체가 문제가 아니라 렌더링 방식이 문제입니다. Next.js처럼 SSR·SSG를 지원하는 프레임워크를 사용하면 리액트 기반으로도 SEO 친화적인 홈페이지 제작이 가능합니다.
Q2. 기존 CSR 웹진을 SSR로 전환하려면 얼마나 걸리나요? 사이트 규모와 코드 구조에 따라 다르지만, 소규모 웹진 기준으로 보통 2~6주가 소요됩니다. 처음부터 올바른 구조로 홈페이지 제작을 시작하는 것이 비용과 시간 면에서 훨씬 효율적입니다.
Q3. 네이버 블로그와 자사 웹진을 동시에 운영해야 하나요? 초기에는 병행 운영이 현실적입니다. 자사 웹진의 도메인 신뢰도가 쌓이는 데 최소 3~6개월이 필요하기 때문입니다. 기술적 SEO가 완벽히 셋팅된 상태에서 콘텐츠를 꾸준히 발행해야 네이버 블로그 수준의 노출 경쟁력을 가질 수 있습니다.
Q4. 구조화 데이터(Schema Markup)는 직접 작성해야 하나요?
Next.js 환경에서는 next-seo 같은 라이브러리를 활용하면 각 페이지의 메타데이터와 구조화 데이터를 자동으로 생성할 수 있습니다. 홈페이지 제작 기획 단계에서 이 요구사항을 명시하면 개발 비용을 크게 줄일 수 있습니다.
Q5. INP 점수는 어디서 확인하나요? 구글의 PageSpeed Insights(pagespeed.web.dev)에 URL을 입력하면 무료로 확인할 수 있습니다. 모바일·데스크톱 점수를 모두 확인하고, INP 항목이 '우수(녹색)' 등급인지 체크하세요.
| 용어 | 설명 |
|---|---|
| CSR | Client-Side Rendering. 브라우저가 자바스크립트를 실행해 화면을 그리는 방식. |
| SSR | Server-Side Rendering. 서버가 완성된 HTML을 만들어 브라우저에 전달하는 방식. |
| SSG | Static Site Generation. 빌드 시점에 HTML 파일을 미리 생성해 두는 방식. SEO에 가장 유리. |
| ISR | Incremental Static Regeneration. 전체 재빌드 없이 특정 페이지만 백그라운드에서 갱신하는 Next.js 기능. |
| INP | Interaction to Next Paint. 사용자 상호작용 후 브라우저 반응 속도를 측정하는 구글 핵심 지표. 200ms 이하가 우수. |
| 구조화 데이터 | Schema Markup. 검색엔진과 AI가 페이지 내용을 정확히 이해하도록 JSON-LD 형식으로 작성하는 메타 정보. |
| 렌더링 큐 | 검색봇이 자바스크립트 실행이 필요한 페이지를 즉시 색인하지 않고 대기시키는 처리 대기열. |
| GEO | Generative Engine Optimization. AI 검색 답변의 인용 출처로 선택받기 위한 최적화 전략. |
자사 웹진 홈페이지 제작에서 가장 비싼 실수는 콘텐츠를 열심히 쓰고 나서야 기술 문제를 발견하는 것입니다. CSR 방식으로 만들어진 웹진은 글이 아무리 좋아도 검색 엔진과 AI가 읽지 못합니다. 기획 단계에서 SSG/SSR 구조, INP 최적화, 구조화 데이터를 명확히 요구사항으로 정의해야 합니다.
핵심 요점을 정리하면:
자사 웹진이나 브랜드 미디어 홈페이지 제작을 계획 중이시라면, 기술 설계 단계부터 SEO 전략을 함께 고려하는 것이 중요합니다. 에이달(ADALL)은 기획·디자인·개발·SEO 최적화를 하나의 프로세스로 연결해 검색에 실제로 노출되는 자사 미디어를 구축합니다.
기술적 구조 검토부터 시작하는 무료 컨설팅을 신청하시면 현재 사이트의 렌더링 방식과 SEO 개선 포인트를 구체적으로 안내해 드립니다.
📞 02-2664-8631 | ✉️ master@adall.co.kr
무료 컨설팅 받아보고 싶다면?
무료 컨설팅 신청하기