개발 slecs

파비콘·OG 이미지·광고 슬롯 전 페이지 일괄 적용

목차

파비콘, OG 이미지, 웹 매니페스트, 그리고 광고 슬롯 전 페이지 일괄 적용까지 — 한 번에 묶어서 배포한 작업이다.

왜 이 타이밍에 묶었나

사실 파비콘/OG/manifest 작업은 진작에 처리됐어야 할 것들이었다. 서비스 초기에는 기능 구현에 밀려서 브라우저 탭에 기본 아이콘이 뜨고, SNS 공유 시 썸네일도 없는 상태로 방치되는 경우가 많다. 이번에도 비슷한 상황이었다. 기능 개발이 어느 정도 안정되면서 "이제 진짜 서비스처럼 보이게 만들자"는 판단이 섰고, 마침 광고 슬롯 전 페이지 적용 작업과 타이밍이 맞았다.

두 작업을 하나의 배포로 묶은 이유는 단순하다. 둘 다 Layout.astro를 건드려야 했다. 전 페이지에 공통으로 영향을 주는 레이아웃 파일을 두 번 수정하고 두 번 배포하는 건 괜히 리스크만 늘리는 짓이다. 변경을 한 커밋으로 응집시키는 게 리뷰어 입장에서도 훨씬 맥락을 파악하기 쉽다.

변경 파일별 역할 정리

파일 역할
public/favicon.svg 브라우저 탭 아이콘
public/apple-touch-icon.svg iOS 홈 화면 추가 시 아이콘
public/og-image.svg SNS 공유 시 미리보기 썸네일
public/manifest.webmanifest PWA 매니페스트 (앱 이름/아이콘/테마컬러 등)
src/layouts/Layout.astro <head> 메타태그 + 광고 슬롯 공통 삽입
deploy/admin-db-update-mobon-pagescope.sql 광고 슬롯 페이지 범위 DB 설정 업데이트

Layout.astro 하나에서 메타태그 선언과 광고 슬롯 삽입을 동시에 처리했기 때문에, 이 파일이 이번 작업의 핵심 허브였다.

Layout.astro에서 처리한 것들

Astro 기반 프로젝트에서 공통 레이아웃은 이런 구조로 <head>를 관리하게 된다.

---
// Layout.astro
const { title, description } = Astro.props;
const ogImage = '/og-image.svg';
---
<html lang="ko">
  <head>
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <link rel="apple-touch-icon" href="/apple-touch-icon.svg" />
    <link rel="manifest" href="/manifest.webmanifest" />

    <meta property="og:image" content={ogImage} />
    <meta property="og:title" content={title} />
    <meta property="og:description" content={description} />

    <!-- 광고 슬롯 스크립트 -->
    <script src="https://ad.mobon.net/..." async></script>
  </head>
  <body>
    <slot />
  </body>
</html>

전 페이지에 동시 적용되는 구조라 레이아웃 파일 하나만 수정하면 모든 페이지에 반영된다. 이게 공통 레이아웃의 장점인데, 동시에 실수 하나가 전 페이지에 영향을 준다는 양날의 검이기도 하다. 이번엔 파비콘/메타/광고가 전부 전역 적용 대상이었으니 오히려 맞는 위치였다.

DB 배포가 같이 들어간 이유

admin-db-update-mobon-pagescope.sql 파일이 함께 들어간 게 포인트다. 광고 슬롯을 단순히 코드에 하드코딩해서 박는 게 아니라, 어느 페이지에 어떤 슬롯을 노출할지를 DB로 관리하는 구조였다. 즉 광고 노출 범위(pagescope)가 관리자 설정으로 제어된다는 얘기고, 이번 배포에서 전 페이지로 범위를 확장하는 설정값을 DB에 밀어넣은 것이다.

이런 구조는 나중에 특정 페이지에서 광고를 끄거나, A/B 테스트로 일부 페이지에만 노출할 때 코드 배포 없이 처리할 수 있어서 운영 유연성이 확실히 올라간다. 다만 코드와 DB 설정이 같이 맞춰져야 동작하는 구조이기 때문에, SQL 배포 순서를 코드 배포와 맞추는 게 중요하다. 이번엔 SQL 먼저, 코드 배포 후 확인하는 순서로 처리했다.

회고

이런 작업은 티가 잘 안 난다. 기능 개발이 아니니까. 근데 팀장 입장에서 이게 은근히 중요하다는 걸 경험으로 안다. 파비콘 없는 서비스는 내부 이해관계자한테도 "아직 덜 만든 것 같다"는 인상을 준다. OG 이미지 없으면 SNS에 공유했을 때 텍스트만 뜨고 클릭률 차이가 확연히 난다. 작은 것들이 신뢰감을 만드는 거다.

광고 슬롯 전 페이지 적용은 수익화 관점에서 직접적인 영향을 주는 작업이라 더 신중하게 봤다. 슬롯이 레이아웃을 깨뜨리진 않는지, 로딩 성능에 영향을 주진 않는지 — 이 부분은 배포 후 몇 페이지 직접 돌아보면서 육안으로 확인했다. 자동화 테스트로 커버하기 어려운 영역이라 사람이 봐야 한다.

끝.

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

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

이어보기

댓글 0

첫 댓글 달아줘.