SPA(Single Page Application) 방식으로 웹사이트를 만들면 사용자 경험은 정말 좋아집니다. 클릭 한 번에 페이지가 부드럽게 넘어가고, 불필요한 새로고침도 없습니다.
그런데 이런 SPA 방식이 SEO, 그러니까 검색엔진 최적화에는 좀 까다로운 면이 있습니다. 왜냐면 검색엔진은 HTML 안에 있는 콘텐츠를 기준으로 사이트를 평가하게 되는데, SPA는 처음 로딩할 때 HTML 안에 실제 콘텐츠가 거의 없고, 이후에 자바스크립트로 화면을 구성하다 보니, 구글이나 네이버 같은 검색엔진이 우리 사이트를 잘 못 알아보는 경우가 생깁니다.
<238LAB - SPA SEO 적용 프로젝트 사례>
광고비가 갈수록 증가하는 추세인 요즘, 올바르게 도입만 한다면 기업의 규모에 따라 별도의 광고비용 지출 없이도 엄청난 양의 트래픽을 꾸준히 획득할 수 있는 기술이기에, SPA 환경으로 개발 한 적지 않은 IT 플랫폼들이 SEO를 조용히 도입하고 있는 추세이기도 합니다.
그래서 오늘은, SPA 방식으로 사이트를 만들었을 때 SEO(검색엔진최적화)를 잘 하려면 어떤 방법들이 있고, 각각 어떤 점을 고려하면 좋은지에 대해 정리해보겠습니다.
<크롤링 봇 시점에 렌더 된 HTML이 불려와야 함>
SPA는 처음에 HTML만 덜렁 내려주고, 나머지는 브라우저에서 자바스크립트로 만들어가는 구조로 만들어집니다. 그래서 구글 봇이 막상 사이트를 방문하고 수집하는 시점에는 "어? 콘텐츠가 없네?"라고 판단할 수 있죠.
특히 페이지가 여러 개인 것처럼 보여도 실제로는 하나의 HTML 안에서 동작하기 때문에, 페이지별 인덱싱이 어렵고요. 이런 구조는 검색 노출에 불리하게 작용할 수 있습니다.
2025년 현재 구글 검색 동향을 살펴보면, 모바일 퍼스트 인덱싱의 정착과 자바스크립트 크롤링 기술 향상으로 SPA도 충분히 검색엔진에 노출될 수 있습니다만, 다만 구글봇의 한계와 크롤 예산(crawl budget) 이슈는 여전히 존재합니다. 선두 주자인 구글마저 이렇다면 네이버는 어떨 지 감이 오죠.
이런 환경에서 SEO가 더 잘되게 하기 위해서는 언젠가 되겠지라는 기대가 아니라, '크롤링 봇이 다녀가는 시점'에 적절한 HTML을 불러오게 하여 특정 페이지에 대한 SEO 태그들의 값을 정확하게 읽히게 하는 것이 중요하겠죠.
SEO를 성공적으로 도입하기 위해서는 아래의 3가지 요소를 핵심적으로 고려해야 합니다.
크롤링 가능성: 모든 URL이 검색엔진에 접근 가능해야 함
콘텐츠 접근성: JS 실행 없이도 주요 콘텐츠가 노출돼야 함
체감 성능: 사용자 및 봇에게 빠른 로딩 경험을 제공해야 함
위 핵심 요소들을 해결할 수 있는 방법은 현재로써는 SSR과 SSG, 동적 렌더링(Dynamic Rendering) 세가지입니다.
| 방식 | 설명 | 장점 | 단점 | 적합한 경우 |
|---|---|---|---|---|
| SSR (서버사이드 렌더링) | 요청 시마다 서버에서 HTML을 생성 | 크롤러에 완전한 HTML 제공 초기 콘텐츠 노출 빠름 | 서버 부하 큼 구현 복잡 | 대형 커머스 실시간 콘텐츠 사이트 |
| SSG (정적 사이트 생성) | 빌드 시점에 HTML을 미리 생성 | 빠른 응답 속도 캐싱 최적화 | 실시간 반영 어려움 페이지 수 많으면 관리 부담 | 블로그 문서 사이트 등 업데이트 적은 경우 |
| Dynamic Rendering (프리렌더링) | 크롤러에만 HTML 제공, 사용자에겐 SPA 제공 | 빠르게 적용 가능, 기존 코드 변경 최소화 | 구글 권장 아님 유지보수 복잡 | SSR 도입 전 임시 대응용 |
위의 표에서 보듯 SSR은 가장 확실한 SEO 효과를 주지만, 개발/운영 비용이 높습니다. 대가로 모든 크롤러에 대응 가능하며, 구글 이외 Bing 등 렌더링 능력이 낮은 검색엔진에도 콘텐츠 노출을 보장합니다.
SSG는 가능하면 최고의 ROI를 제공하는 방식입니다. 한 번 만들어 놓은 정적 페이지는 구글봇 뿐 아니
라 사용자에도 가장 빠른 경험을 주어 SEO와 UX를 동시에 개선하기에 결과물만 볼 때는 가장 좋은 방법일 수 있습니다. 다만 컨텐츠 갱신성이 요구되는 서비스에서는 전면 SSG 적용이 어려울 수 있어 고민이 필요합니다.
Next.js의 ISR(증분 정적 재생성)같은 하이브리드 기법도 등장했습니다. Dynamic Rendering(프리렌더)은 과거 구글이 SPA SEO 우회책으로 제시했던 방법이지만, 2022년 이후 구글 공식 가이드에 따르면 동적 렌더링(dynamic rendering) 방식을 공식적으로 권장하지 않게 되었으며, “최후의 수단으로만 사용할 일시적 우회책”이라고 문서를 수정하기도 했습니다.
가타부타 결론부터 말하게 된다면, SPA 방식으로 제작 된 사이트의 최종 목적지는 SSR(Server-Side Rendering)이 될 가능성이 매우 높습니다.
물론 Prerender.io 등의 프리렌더링 서비스를 붙이는 비용은 SSR보다 낮아 단기 ROI는 괜찮을 수 있지만, 장기적으로는 기술 부채가 될 가능성이 높습니다. 결론적으로, 가용 자원을 살펴보고 SSR ↔ SSG ↔ 프리렌더링을 전략적으로 선택해야 합니다.
크롤러가 중요한 핵심 페이지(예: 상품 리스트, 상세 페이지 등)에 우선적으로 SSR/SSG를 적용하고, 변화가 잦은 부분은 클라이언트 렌더로 남겨두는 부분적 SSR 전략도 고려해볼 수 있습니다. 이러한 하이브리드 렌더링 접근은 SEO 효과와 개발 비용의 균형을 맞추는 현실적인 방법입니다.
React로 만든 SPA는 기본적으로 클라이언트 사이드 렌더링(CSR)으로 동작하므로, 아쉽게도 SEO를 위해 추가 전략을 고민해봐야 합니다.
가장 먼저, 널리 쓰이는 방법은 Next.js를 통한 SSR/SSG 도입입니다. Next.js는 React용 SSR 프레임워크로, 페이지 단위 SSR/정적 생성을 쉽게 구현하도록 해주기에 크롤러에게는 완성된 HTML을 제공하고, 브라우저에서는 하이드레이션을 통해 SPA로 동작하게 합니다.
Next.js를 도입하면 자동으로 이미지 최적화, 코드 스플리팅 등이 적용되어 Core Web Vitals 개선에도 도움이 됩니다. 실제로 Notion, Hulu 등 많은 글로벌 서비스들이 Next.js로 마이그레이션하여 SEO 트래픽과 성능을 향상시킨 바가 있죠.
만약 정적 콘텐츠 위주의 React 사이트라면 Gatsby 같은 React 정적 사이트 생성기(SSG)를 고려해봐야 할 수도 있습니다. Gatsby는 빌드 시점에 모든 페이지를 HTML로 만들어 배포하므로 아주 빠른 페이지 로딩과 우수한 SEO 지표를 얻을 수 있습니다.
다만, Gatsby는 데이터 변경이 빈번한 서비스에는 현실적으로 진행하기 어려운 측면이 있기 때문에 블로그나 뉴스레터 사이트 등 콘텐츠의 주기적인 변경이 없는 경우에 적합합니다.
마지막으로는 리소스가 정말 부족한 환경 즉, Next.js나 Gatsby를 도입하기 어려운 경우, prerender-spa-plugin을 활용하여 빌드 후 정적 프리렌더링을 부분 적용하거나, 서버 미들웨어로 Prerender.io 같은 서비스를 붙여 일부 페이지만 동적 크롤링 대응을 하는 사례도 있습니다.
예를 들어, 본래 CSR로 만든 랜딩페이지를 Prerender.io로 크롤러에게만 정적 제공하여 검색 유입을 끌어올린 사례들이 보고되고 있습니다. 하지만 앞서 언급했듯 이 러한 방식의 접근은 임시방편으로만 사용하시는 것이 좋겠습니다.
Vue.js 기반 SPA에서는 Nuxt.js가 사실상 표준 SEO 솔루션입니다. Nuxt.js는 Vue의 SSR/SSG 프레임워크로, 서버사이드 렌더링을 간소화하여 개발자가 쉽게 SEO 대응을 할 수 있게 해줍니다.
사실상 이 부분이 핵심인데, Nuxt를 사용하면 Vue 컴포넌트로 작성한 페이지를 서버에서 미리 그려서 보내주므로, 구글봇이 빈 페이지를 보는 일 없이 곧바로 콘텐츠를 크롤링하게 합니다. 또한 Nuxt는 정적 모드로 빌드하여 SSG처럼 활용도 가능하므로, 프로젝트 성격에 맞게 SSR과 SSG를 유연하게 선택할 수 있습니다.
기존 Vue SPA를 Nuxt로 전환해 유기적 트래픽이 크게 증가한 사례가 많습니다. 특히 e커머스, 미디어 사이트 등 SEO가 중요한 Vue 앱은 Nuxt 도입 ROI가 높을 것으로 기대되죠.
그럼에도 불구하고 Nuxt 없이 기존 Vue SPA에 SEO를 적용해야 한다면, React의 경우와 유사하게 prerender-spa-plugin을 통한 사전 렌더링을 대안으로 고민하시게 될텐데, 리액트와는 달리 Vue CLI로 빌드한 결과물에 이 플러그인을 적용하면, 지정한 라우트에 대해 정적 HTML 스냅샷을 생성할 수 있습니다.
컨설팅 실무를 하다 보면 간혹 # 해시를 사용한 URL을 만드는 경우가 더러 있는데, Vue Router에서 History 모드를 사용하시면 깨끗한 URL 구조를 만들 수 있습니다. /#/ 형태의 해시뱅(hashbang) URL은 SEO에 불리하므로 반드시 피하세요.
Angular는 비교적 React와 Vue 프레임워크 대비 SEO 도입 리소스의 절대 총량은 낮은 편입니다. 구조적으로 SPA와 SSR 지원을 모두 고려하여 만들어진 프레임워크이고, Angular Universal이라는 공식 SSR 솔루션을 제공하고 있죠.
자세한 내용은 Angular Universal 공식 문서를 참조해보시는 것이 좋으며, 해당 솔루션을 사용하게 되면 Angular 애플리케이션을 Node.js 환경에서 렌더링해 HTML을 출력할 수 있게 해줍니다. Angular Universal을 적용하면 앱 초기 로드 시 서버에서 그린 HTML이 제공되고, 이후 Angular가 클라이언트에서 동작을 이어받는 형태(hydration)로 구동되는 형태입니다.
Angular에는 또한 prerender 기능 자체가 내장되어 있어서, 라우트별 정적 HTML을 빌드 타임에 생성할 수 있습니다. Angular CLI에서 ng prerender 설정을 활용하면, 지정된 경로들을 SSR한 결과를 정적으로 저장해두고 배포할 수 있습니다. 이렇게 하면 SSR의 서버 부하 없이도 SSG 효과를 누릴 수 있지만, 빌드 시점 이후 변경되는 데이터는 반영되지 않으므로 정적 콘텐츠 위주 페이지에 활용하는 것이 좋습니다.
실무를 진행하실 때 팁으로는, SSR 솔루션을 설정할 때는 서버 사이드에서 Meta 서비스를 이용해 태그와 을 동적으로 설정하고, RouterModule에서 페이지 전환시 URL 변화를 확실히 처리해야 합니다. 결국 SEO는 URL의 고유성을 어떠한 방식으로 부여하여 차별화를 가져가냐는 싸움이기에 이 부분을 유의 깊게 보시면 좋을 것 같습니다.
마지막으로, 글을 마무리하며 앞서 논의한 내용을 바탕으로 실무에서 SPA SEO를 개선하기 위한 전략 선택 및 우선순위를 정리해보려 합니다. 투자 대비 효과(ROI), 구현 난이도, SEO 임팩트를 종합적 검토했을 때 아래의 순서대로 검토해보시면 좋습니다.
1. 크롤링/인덱싱 체크하기
가장 먼저, 사이트의 핵심 콘텐츠가 검색엔진에 인덱싱이 되는 지 파악하는 것이 좋습니다. 예산과 난이도가 허락한다면 SSR 또는 SSG 도입을 최우선으로 고려하는 것이 핵심입니다만, 예산에 제약이 있을 경우 핵심 랜딩페이지부터 SSR/프리렌더링 도입을 검토하되, 구글 공식 권장처럼 dynamic rendering은 최후 수단으로만 사용하고 장기적으로는 제거하는 방향으로 계획하는 것이 좋습니다.
프리렌더링 등을 사용한 경우, 최악의 경우 위와 같이 색인 페이지가 줄어드는 사태가 발생할 수 있기 때문에 꼭 크롤링/인덱싱 여부를 먼저 판단하고 비슷한 여러 페이지의 일부를 프리렌더링으로 도입, 그 이후에 전체 적용하는 순서로 가는 것이 ROI 측면에서도 효율적입니다. 만일 새로운 프로젝트라면 Next.js, Nuxt.js, Angular Universal 같은 프레임워크를 초기부터 도입하는 것이 더 좋습니다.
2. 사이트 구조 및 URL 최적화
통상적으로 1번 단계가 잘 넘어 왔다면, 그 다음으로는 사이트의 구조와 URL 최적화를 통해 사이트 순위를 개선해나가는 것이 좋습니다. SPA 특유의 URL 구조가 있기에, 이를 SEO 친화적으로 개선하는 과정이 꼭 필요합니다.
고유한 페이지별 URL이 존재하고 의미 있는 경로를 가질 수 있도록 라우팅 전략을 잡고, 예를 들어 해시(#) 기반이 아니라 History API(pushState) 기반으로 구현하여 “페이지처럼 보이는” URL을 만들고, 사이트맵(XML)을 생성해 검색엔진에 제출하고, 중복 콘텐츠에 대한 canonical 태그, 메타 로봇태그 관리 등 온페이지 SEO 요소를 점검합니다.
이 단계까지 문제 없이 완료된다면, 기본적인 크롤링과 인덱싱 환경은 확보됩니다.
3. 노출 성과 개선(순위 개선)
제가 컨설팅을 진행할 때 꼭 말씀 드리는 부분이 있는데, '각각의 페이지 단위'로 순위를 추적할 것이 아니라, '색인 된 주요 페이지의 노출 순위 평균점'을 핵심 KPI로 잡는 것이 SEO 성과 관리에 더 적합하다는 것입니다.
통상적으로 2단계 완료 이후에는 보다 사이트 구조적인 태그 구조 수립, 키워드 전략, 컨텐츠 자동화 전략 수립 등을 통해 전체적인 사이트 지수를 상승시키는 과정에 돌입하게 됩니다. 여기까지만 와도 사실 상 SEO로 상당한 성과를 보고 있는 지점이 될 수 있습니다.
위 3가지를 우선순위로 두고 접근하면, 자원 투자 대비 최대한의 SEO 향상을 얻을 수 있습니다. 요약하면 “콘텐츠 노출 → 구조 개선 → 노출 최적화” 순으로 단계별 실행하는 것이 좋습니다.
실제 현업에서도 SSR/정적화 도입으로 인덱싱 문제를 해결한 후, 성능 튜닝으로 랭킹을 끌어올리는 패턴이 일반적입니다. 결국 자사 서비스의 규모와 목적에 맞게 최적의 전략 조합을 선택하는 것이 중요합니다.
보다 공격적인 성과를 창출하기 위해서는 키워드의 군집군부터 TF-IDF 등 더 많은 요소를 검토하는 것이 좋습니다. 간혹 프로젝트를 진행하실 때에 SSR만 도입만으로도 상당한 리소스가 투입되기 때문에 그 외에 부분들은 컨설턴트와 함께 전반적인 구조 등의 가이드를 수립하고 적용하시는 경우가 많습니다. 이러한 경우 보다 단단한 SEO 도입이 가능하다는 장점이 있습니다.
238LAB에서도 상당 수의 SPA 환경에서의 프로젝트들을 진행하며 성과를 도출한 사례가 있기에 관심이 있으신 분들은 컨설턴트와 상담을 받아보시는 것도 좋은 방법일 수 있겠습니다.
 | 조슈아(Joshua) |
