제작

CSR

CSR은 브라우저에서 자바스크립트를 실행해 페이지의 주요 내용을 구성하는 렌더링 방식입니다. 이 글의 CSR은 기업의 사회적 책임이라는 약어가 아니라 웹 화면의 생성 방식을 뜻합니다.

검토 2026-11-03·작성 김종현

CSR은 브라우저에서 자바스크립트를 실행해 페이지의 주요 내용을 구성하는 렌더링 방식입니다. 이 글의 CSR은 기업의 사회적 책임이라는 약어가 아니라 웹 화면의 생성 방식을 뜻합니다.¹

제작 방식: AI로 자료 조사와 초안 작성을 보조했습니다.

쉬운 설명: 보이는 화면과 처음 받은 응답은 다를 수 있습니다

브라우저가 처음 받은 HTML에는 틀과 스크립트만 있고, 이후 데이터 요청과 실행을 거쳐 본문이 나타날 수 있습니다. 개발자 도구에서 완성된 화면의 요소를 보는 것과 최초 서버 응답을 보는 것은 다른 관측입니다. 어느 쪽을 확인했는지 적지 않으면 같은 페이지를 보고도 진단이 엇갈릴 수 있습니다.¹

Google은 자바스크립트 페이지를 처리할 수 있지만 수집·렌더링·색인 단계를 나눕니다. 렌더링에 필요한 자원에 접근할 수 없거나 실행 중 문제가 있으면 기대한 내용과 처리 결과가 달라질 수 있습니다. CSR이라는 이름만으로 색인이 불가능하다고 단정하지도, 실행 가능하니 모두 문제없다고 단정하지도 않습니다.²³

사용자 이동 방식도 확인해야 합니다. 버튼을 누를 때만 내부 코드가 화면을 바꾸는 것과 목적지 URL이 있는 실제 링크는 다릅니다. Google은 크롤링 가능한 링크에 a 요소와 href를 사용하도록 안내합니다. 눈으로 클릭할 수 있어 보이는지만으로 검색엔진이 주소를 발견할 수 있다고 보지 않습니다.⁴

CSR은 콘텐츠 갱신이나 상호작용을 만드는 방식의 하나입니다. 로그인 뒤 개인 화면처럼 검색 공개가 목적이 아닌 영역과 공개 소개 글의 요구는 다를 수 있습니다. 사이트 전체를 한 단어로 평가하기보다 어떤 페이지를 누가 어떤 경로로 읽어야 하는지부터 나눕니다.

실무에서는 재현 경로를 고정합니다

다음은 공개 게시글 페이지를 진단하는 가상의 적용 예시입니다. 사이트 안에서 이동하는 경우와 외부에서 직접 들어가는 경우를 구분합니다.

진입·관측 방법	확인할 내용	발견할 수 있는 차이
상세 URL 직접 요청	응답 코드와 초기 본문	서버의 경로 처리 오류
스크립트 실행 완료 뒤	실제 본문·제목·링크	데이터 로딩·실행 실패
목록에서 글 선택	URL과 화면의 변경	주소 없이 화면만 바뀌는 구조
새 탭·새로고침	같은 상세 내용 유지	내부 이동에서만 성공
검색도구의 결과	처리된 내용과 오류	검색엔진이 본 결과와 화면 차이

버그를 보고할 때 '화면이 나온다'는 문장 대신 진입 URL, 실행 전후의 내용, 실패한 요청, 재현 동작을 적습니다. 이렇게 해야 서버의 경로 문제인지 스크립트·데이터 문제인지 나눠 볼 수 있습니다. 공개하지 않아야 할 정보는 진단 자료에서도 제거합니다.

제목과 메타 정보도 별도 확인 대상입니다. 화면 내용은 바뀌는데 이전 페이지의 제목이 남거나, 존재하지 않는 주소도 동일한 정상 페이지로 응답하면 문서의 의미와 상태가 어긋납니다. 본문이 보인다는 사실만으로 페이지 단위의 검색 준비가 끝났다고 하지 않습니다.²³

웨비스튜디오 작업 기록

법률사무소 A에서는 클라이언트 앱 구조 때문에 초기 HTML의 본문이 부족할 수 있음을 기록했습니다. 화면 영향을 제한한 보완 범위를 선택했으며, 공개 목록 카드를 실제 링크로 바꾼 후속 기록도 있습니다. 이를 CSR을 모두 제거했다거나 사이트 전체를 서버 렌더링으로 전환했다는 사례로 쓰지 않습니다.

자주 하는 실수와 수정 기준

완성된 DOM을 초기 HTML이라고 부르는 것. 서버가 보낸 응답과 브라우저가 실행 후 만든 결과를 따로 저장하고 비교합니다. 관측 시점이 다른 결과를 같은 증거로 쓰지 않습니다.

CSR이면 검색에서 무조건 제외된다고 말하는 것. 검색엔진의 렌더링 지원과 실제 오류 상태를 확인해야 합니다. 방식 이름만으로 색인 결과를 예언하지 않습니다.²

클릭 이벤트만 있는 요소를 링크로 간주하는 것. 목적지 URL이 크롤링 가능한 형태인지 확인합니다. 메뉴·글 목록·관련 글처럼 발견 경로가 중요한 곳부터 점검합니다.⁴

해결책을 무조건 전체 재개발로 정하는 것. 공개 본문과 링크, 상태 코드 중 실제로 문제가 있는 부분을 확인한 뒤 변경 범위를 결정합니다. 전체 방식 전환은 기존 기능과 운영 조건을 함께 검토할 별도 결정입니다.

FAQ

CSR 사이트는 Google이 읽지 못하나요?

그렇게 일반화할 수 없습니다. Google은 자바스크립트를 처리하지만 접근·실행·렌더링 결과를 검증해야 합니다. 다른 검색 서비스도 모두 동일하게 처리한다고 확대해서는 안 됩니다.²³

화면이 정상인데 검색 진단에서 본문이 부족하다고 할 수 있나요?

가능합니다. 처음 받은 응답과 스크립트 실행 뒤 결과가 다를 수 있기 때문입니다. 진단이 어느 단계의 내용을 확인했는지 먼저 확인해야 합니다.¹²

CSR과 SSR 중 하나만 써야 하나요?

실제 서비스는 여러 방식을 섞을 수 있습니다. 공개 콘텐츠 전달과 상호작용, 데이터 갱신 요구를 나눠 보고 필요한 방식을 결정하는 것이 좋습니다.¹

공식 출처

공식 문서 확인일: 2026-11-03. 재현표는 진단 제안이며 고객 사이트를 이번에 재검사한 결과가 아닙니다.

Google web.dev, Rendering on the Web: https://web.dev/articles/rendering-on-the-web ↩ ↩² ↩³ ↩⁴
Google Search Central, 자바스크립트 SEO 기본사항: https://developers.google.com/search/docs/crawling-indexing/javascript/javascript-seo-basics ↩ ↩² ↩³ ↩⁴ ↩⁵
Google Search Central, 자바스크립트 검색 문제 해결: https://developers.google.com/search/docs/crawling-indexing/javascript/fix-search-javascript ↩ ↩² ↩³
Google Search Central, 크롤링 가능한 링크: https://developers.google.com/search/docs/crawling-indexing/links-crawlable ↩ ↩²