개발 slecs

홈 페이지 title을 CMS 데이터에서 읽도록 배선

목차

홈 페이지의 <title> 태그가 하드코딩되어 있던 것을 CMS 데이터베이스(cms_site.meta.seo.title)에서 동적으로 가져오도록 변경했다. Base.astro 하나의 파일 수정이었지만, 이건 꽤 중요한 SEO 배선의 문제였다.

왜 이 수정이 필요했나

SEO는 마케팅 팀과 개발팀이 함께 고민해야 하는 부분인데, title 태그가 개발자 손으로만 수정되는 상황이 얼마나 불편한지 그동안 눈여겨보지 못했다. 홈페이지 title은 검색 결과에 가장 먼저 노출되는 텍스트고, 계절 캠페인이나 마케팅 전략에 따라 수시로 바뀌어야 한다. 매번 코드를 수정 → 배포해야 하는 구조라면, 빠른 대응이 어렵다.

더 근본적인 문제는 설정 관리의 집중화였다. 우리 시스템에는 이미 cms_site 라는 중앙 설정 테이블이 있어서, 사이트의 주요 메타데이터(로고, 헤더 메뉴, 푸터 정보 등)를 관리하고 있었다. 그런데 title은 왜 코드에만 있었나? 일관성이 없었다.

어떻게 구현했나

Astro의 Base 레이아웃 파일에서 처리했다. Base.astro는 모든 페이지의 기초가 되는 레이아웃이므로, 여기서 title을 동적으로 설정하면 홈뿐 아니라 다른 페이지들도 이 로직을 활용할 수 있다.

변경 포인트 Before After
title 출처 코드 하드코딩 DB (cms_site.meta.seo.title)
수정 권한 개발자만 CMS 관리자 가능
배포 필요 매번 필요 불필요

기본 패턴은 다음처럼:

---
// Base.astro
import { getCMSSiteSettings } from '../lib/cms'

const settings = await getCMSSiteSettings()
const pageTitle = settings?.meta?.seo?.title || 'Default Title'
---

<html>
  <head>
    <title>{pageTitle}</title>
    <!-- ... -->
  </head>
  <body>
    <slot />
  </body>
</html>

CMS에서 cms_site.meta.seo.title 필드를 관리하면, 그 변경사항이 자동으로 모든 페이지(특히 홈)에 반영된다.

비슷한 패턴들로의 확장

이 수정 이후로 다른 메타 태그들도 같은 방식으로 정리할 필요성을 느꼈다. description, og:image, canonical 같은 것들도 사실 CMS에서 관리하는 게 훨씬 낫다.

  • description: 검색 결과의 부제 텍스트. 마찬가지로 캠페인별로 변해야 함
  • og:image: SNS 공유 시 노출되는 이미지. 계절 이벤트나 프로모션마다 갱신
  • canonical: 홈 도메인 구조가 변하면 업데이트 필요

이들을 하나씩 수정하는 것보다, CMS 구조를 meta.seo 아래에 통합하고 Base.astro에서 한 번에 처리하는 게 훨씬 깔끔하다.

회고: 팀 협업 관점

이 건은 작은 버그 수정처럼 보이지만, 설정 관리와 개발 권한에 대한 생각을 정리하는 계기가 되었다. 개발자 입장에서는 "title이 고정값이어도 괜찮지 않나?"라고 생각할 수 있지만, 마케팅이나 운영팀은 그렇지 않다.

앞으로 비슷한 수정을 할 때는:
1. 코드 하드코딩 vs DB 관리 중 선택할 때, "이게 운영 중에 바뀔 가능성은?"을 먼저 묻기
2. 레이아웃이나 기초 컴포넌트에 변경을 가할 때 수정 범위 예측하기
3. CMS 구조와 코드의 일관성 유지하기

작은 수정이지만 팀 전체의 운영 효율성을 높이는 변경이었다.

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

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

이어보기

댓글 0

첫 댓글 달아줘.