개발 slecs

SEO 메타데이터를 DB로 중앙화해 팀 간 협업 개선

목차

SEO 메타데이터를 정적으로 관리하는 대신 데이터베이스에서 동적으로 가져오도록 개선했다. Astro 설정과 Base 레이아웃을 수정해서 공용 라이브러리(@hedvion/common/seo_db.mjs)를 통해 메타 정보를 중앙화했는데, 이 과정에서 몇 가지 팀 관점의 의사결정이 있었다.

정적 SEO 메타의 불편함

처음엔 각 페이지나 템플릿에 SEO 메타태그를 하드코딩하는 방식이 많았다. 간단할 땐 괜찮지만, 서비스 규모가 커지면서 몇 가지 문제가 드러났다.

  • 중복 관리: 동일한 메타 정책이 여러 파일에 흩어져 있음
  • 동기화 어려움: SEO 담당팀에서 전체 정책을 변경하려면 코드 리뷰 과정이 필요
  • 테스트 불가능: 메타데이터가 정적이라 실제 콘텐츠와 일치하는지 확인 어려움
  • 수평 확장 한계: 새로운 페이지/서비스가 늘어날 때마다 같은 코드를 반복

이런 상황에서 "차라리 DB에서 관리하자"는 의견이 나왔다.

DB 기반 구조로의 전환

항목 정적 방식 DB 기반 방식
메타 정의 위치 각 .astro 파일 seo_db.mjs
SEO 정책 변경 코드 수정 필요 DB 쿼리만 변경
런타임 유연성 낮음 높음
테스트 용이성 어려움 쉬움 (mock DB)
팀 간 협업 개발자 필수 DB 액세스 권한만 있으면 됨

Astro 설정(astro.config.mjs)에서 SEO DB 초기화를 담당하고, Base 레이아웃(src/layouts/Base.astro)에서 실제 메타태그를 렌더링할 때 DB에 쿼리하는 구조로 만들었다.

// Base.astro 레이아웃에서 (개념적 예시)
---
import { getSeoMeta } from '@hedvion/common/seo_db.mjs'

const seoData = await getSeoMeta(Astro.props.pageId)
---

<head>
  <title>{seoData.title}</title>
  <meta name="description" content={seoData.description} />
  <meta property="og:title" content={seoData.ogTitle} />
</head>

기술적 선택과 그 배경

공용 라이브러리 재사용을 택한 이유:
@hedvion/common/seo_db.mjs는 여러 서비스가 공유할 수 있는 패키지다. 이렇게 하면 같은 조직 내 다른 팀도 같은 SEO 정책을 일관되게 적용할 수 있다. "모든 서비스가 동일한 메타 규칙을 따르되, DB에서 값만 다르게 가져온다"는 철학이다.

Astro와의 통합 방식:
Astro의 빌드 타임 vs 런타임 선택은 고민이 있었다. DB 쿼리를 빌드 타임에 할지, 런타임에 할지가 관건인데, 결국 런타임 쿼리를 택했다. 정적 빌드가 아니라 동적 콘텐츠를 다루는 페이지가 많기 때문이다. 물론 이 선택은 응답 시간에 영향을 줄 수 있으니 나중에 캐싱이나 CDN 전략을 함께 고려해야 할 사항이다.

레이아웃 중앙화:
Base.astro 한 곳에서만 SEO 메타를 처리하도록 집중했다. 이렇게 하면 새로운 페이지가 추가돼도 자동으로 DB 기반 메타를 상속받는다. 다만 예외 케이스가 필요하면 props로 오버라이드할 수 있게 설계했다.

회고: 팀 관점에서

이 변경의 핵심은 "SEO 정책을 코드에서 분리한다"는 것이다. 앞으로 SEO 담당팀이 "메타 설명을 100자로 제한하자" 같은 정책을 세우면, 개발팀은 DB 스키마만 수정하면 되고 코드 배포는 필요 없다. 이런 느슨한 결합(decoupling)이 팀 간 협업을 훨씬 수월하게 만든다.

물론 처음 공용 라이브러리를 만드는 비용과 이후 유지보수 책임이 늘어나는 트레이드오프가 있다. 하지만 서비스가 증가하고 SEO 관리의 중요성이 커질수록 이 투자의 가치가 높아질 것 같다.

다음 단계는 이 DB 쿼리 응답을 캐싱하거나, SEO 메타 변경 시 자동 배포 파이프라인을 만드는 것 정도가 될 것 같다.

🛒 이 글과 어울리는 추천 상품

*위 링크는 쿠팡파트너스 활동의 일환이며, 일정액의 수수료를 제공받을 수 있습니다.

이어보기

댓글 0

첫 댓글 달아줘.