본문으로 건너뛰기

[1.44.0] 챔피언스 M4 점검 + 애드센스 Phase 1 광고 정리/신규 도입

· 약 7분
jangsungyu
jangsungyu
Frontend Developer
Claude Code
Claude Code
AI Assistant

작업 기간: 2026-05-18 ~ 2026-05-20 루트 브랜치: feature/1.44.0 포함 PR: #135 (M4 점검), #136 (애드센스 Phase 1)

📋 작업 개요​

작업 유형: 문서 정합성 복구 + 애드센스 광고 정리/신규 도입 + UX 개선 담당: jsg3121 + Claude

본 릴리즈는 세 가지 트랙의 작업을 묶어 진행했습니다.

  1. 챔피언스 M4 체크리스트 정합성 복구 (PR #135) — 실제 구현된 코드와 기획 문서 사이의 불일치 해소
  2. 모바일 홈 화면 상단 배너 마진 추가 — UX 개선 fix
  3. 애드센스 Phase 1 (PR #136) — 무력 슬롯 6개 제거 + 챔피언스 페이지군 광고 6개 신규 도입

🎯 작업 목표​

1. 챔피언스 M4 정합성 복구​

champions-implementation-plan.md의 M1~M5 체크리스트가 실제 main 코드와 동기화되지 않아, M4 항목들이 모두 미체크 상태로 남아있었음. 실제 코드 점검 결과 라우트·티어 UI·메타 데이터 표시 모두 구현되어 있었으나 정합성이 깨진 상태였음. 또한 M4 외 발견된 개선 후보(티어 UI 색상 일관성, JSON-LD 강화, VP 계산기 등)는 임의 변경 누적을 피하기 위해 경쟁 서비스(Pikalytics, Smogon 등) 분석 기반의 별도 SPEC으로 분리할 필요가 있었음.

2. 모바일 홈 화면 상단 배너 UX 개선​

모바일 홈 화면의 상단 광고 배너가 콘텐츠와 너무 가까워 시각적으로 광고가 분리되어 보이지 않는 UX 이슈 해결.

3. 애드센스 Phase 1 광고 최적화​

5월 갱신 애드센스 데이터 + GA4 경로 탐색 결과 분석에 따라:

  • CTR 0%/극저조 슬롯 6개가 절대 수익이 미미하거나 만성 무력 상태로 페이지 노이즈만 발생시킴
  • 챔피언스 페이지군(/champions, /champions/list, /champions/tier)이 30일 누적 5,068 조회수 + 이탈률 58~77%의 종착점 성격을 보여 광고 도입 시 다른 페이지 수익 손실 우려 미미

이를 기반으로 무력 슬롯 정리와 챔피언스 광고 신규 도입을 일괄 진행.

✨ 주요 변경사항​

1. 챔피언스 M4 체크리스트 정합성 복구 (PR #135, 커밋 636fa31)​

.claude/specs/champions-implementation-plan.md

  • M1~M5 체크리스트 전수 갱신:
    • M1~M3, M5: 모두 [x] 완료 처리 (실제 코드 반영 확인)
    • M4: 라우트/티어 UI/메타 데이터 표시 [x], VP 계산기 [ ] 유지 (챔피언스 고도화 트랙 이관)
  • "최근 갱신 현황" 섹션 재작성: M4 점검 완료 결과 + 구현 위치/구성 요소(ChampionsTierGroup, ChampionsMetaSection 등) 명시
  • 챔피언스 고도화 트랙 분리 결정 섹션 신설:
    • 분리 사유 (시장 검증 패턴 적용 필요)
    • 신규 SPEC 작성 예정 파일명 (champions-competitive-analysis-and-enhancement.md)
    • 진행 방식 (/biz-strategy 스킬 → product-planner 에이전트)

2. 모바일 홈 화면 상단 배너 마진 추가 (커밋 4ad005a)​

src/components/adSlot/MobileHomeTopBanner.tsx

콘텐츠와 광고 사이 시각적 분리를 위해 마진 추가. 한 줄 변경의 작은 fix지만 모바일 홈 화면 첫인상 개선에 기여.

3. 애드센스 Phase 1 (PR #136)​

3-1. 무력 슬롯 6개 제거​

광고명슬롯 ID형식1년 누적 CTR5월 수익사유
데스크톱 상세 페이지 사이드 배너9075172521디스플레이0.03%$0.45부모 section 518px 고정 + 광고 600px 오버플로우, sticky 효과 미미
기술 상세 상단 배너 mobile7055393661디스플레이0%$0.20하단 인아티클(4353208706, CTR 1.84%) 검증되어 중복 불필요
PC 상성 계산기 하단 배너4978551745디스플레이0%$0.05Coverage 27%로 매칭 실패 빈번
PC 리스트 페이지 카드 사이 인피드1219493182인피드0.09%$0.074월 추가했으나 효과 없음
모바일 리스트 페이지 카드 사이 인피드8084284433인피드0.03%$0.204월 추가했으나 효과 없음
모바일 상세 기술 배너3916466104디스플레이0.03%$0.23인아티클 교체 시 height 가변 UX 영향 우려, 단순 제거 결정

3-2. 챔피언스 페이지군 광고 6개 신규 도입​

GA4 경로 탐색 결과 챔피언스 페이지군 이탈률 58~77%로 종착점 성격 강해, 광고 도입 시 다른 페이지 수익 손실 우려 미미하다고 판단.

광고명슬롯 ID디바이스형식배치 위치
챔피언스 메인 인아티클 PC8489469924PC인아티클/champions 상위 티어 섹션 종료 후, 푸터 직전
챔피언스 도감 인아티클 PC6177029135PC인아티클 (col-span-full)/champions/list 첫 행(5장) 직후
챔피언스 티어 인아티클 PC9171996209PC인아티클/champions/tier S 티어 직후, A 티어 직전
챔피언스 메인 모바일 배너6984816567Mobile디스플레이 320x100/champions 상위 티어 섹션 종료 후, 푸터 직전
챔피언스 도감 모바일 배너7758842187Mobile디스플레이 320x100 (col-span-full)/champions/list 첫 5장 직후
챔피언스 티어 모바일 배너4042958458Mobile디스플레이 320x100/champions/tier S 티어 직후, A 티어 직전

디바이스별 형식 차등화 결정 근거:

  • PC: 인아티클 형식 — 콘텐츠 폭에 맞춰 자동 조정, PC에서 검증된 패턴 (5817213746 상성계산기 상단 인아티클 CTR 0.49%)
  • Mobile: 디스플레이 320x100 고정 — 인아티클의 height 가변(~300px)으로 인한 모바일 UX 저해 우려 회피, 검증된 디스플레이 패턴 (5619127337 모바일 상세 하단 CTR 1.30% / 1180520963 모바일 상성 계산기 CTR 0.29%)

UX 가이드라인 적용: 모든 광고 컴포넌트에 mx-auto 가운데 정렬 + my-6/my-8 상하 여백 적용.

3-3. 발급만 진행, 미사용 보관 슬롯 2개​

슬롯명슬롯 ID미사용 사유
모바일 상세 페이지 상단 인아티클6928976245사용자 결정으로 상단 배너(2700260468) 유지 → 슬롯 활용 불필요
모바일 상세 기술 섹션 인아티클9401124123height 가변성 UX 우려로 단순 제거 결정 → 슬롯 활용 불필요

두 슬롯은 애드센스 콘솔에서 보관 처리 권장 (나중에 다른 위치 활용 가능).

3-4. 유지 결정 슬롯 1개 (당초 처리 대상이었으나 보존)​

슬롯명슬롯 ID유지 사유
모바일 상세 페이지 광고 상단 배너27002604681년 누적 노출 12,922 / 수익 $1.07로 절대 수익 자산 가치 큼. 인아티클/반응형 형식은 height 가변성으로 모바일 UX 저해 우려

📊 변경 통계​

코드 영향​

  • 제거된 광고 컴포넌트: 6개
  • 신규 광고 컴포넌트: 6개
  • 수정된 컨테이너 파일: 9개 (광고 사용처)
  • 광고 슬롯 순변화: -6 + 6 = 0 (유지 1, 미사용 2 별도)
  • 코드 라인: -114 + 145 = +31 (대부분 신규 컴포넌트 추가)

문서 영향​

  • champions-implementation-plan.md: +74 / -31
  • adsense-optimization-plan.md: +246 / -96 (정합성 복구) + 추가 갱신 (Phase 1 완료 반영)
  • 광고이름_id.txt (.gitignore 대상): 신규 슬롯 6개 + 미사용 2개 등록, 보관처리 표시 8개

🔧 기술적 세부사항​

광고 컴포넌트 구조​

신규 추가된 모든 광고 컴포넌트는 기존 useAdSlotEffect 훅 패턴을 그대로 사용:

// PC 인아티클 예시
const DesktopChampionsHomeBanner = () => {
  const { slotRef } = useAdSlotEffect()
  return (
    <div ref={slotRef} className="w-full max-w-[1280px] h-fit mx-auto my-8 px-5">
      <ins
        className="adsbygoogle block text-center mx-auto"
        data-ad-layout="in-article"
        data-ad-format="fluid"
        data-ad-client="ca-pub-6481622724376761"
        data-ad-slot="8489469924"
      ></ins>
    </div>
  )
}

// Mobile 디스플레이 예시
const MobileChampionsHomeBanner = () => {
  const { slotRef } = useAdSlotEffect()
  return (
    <div ref={slotRef} className="w-full h-fit text-center mx-auto my-6">
      <ins
        className="adsbygoogle w-[320px] h-[100px] block mx-auto"
        data-ad-client="ca-pub-6481622724376761"
        data-ad-slot="6984816567"
      ></ins>
    </div>
  )
}

Playwright 슬롯 점검 자산​

.claude/playwright/capture-adsense-phase1.js 신규 작성. 13개 페이지/슬롯 조합의 DOM 위치/크기/sticky 가능성 자동 측정 + 스크린샷 캡처. 결과는 .claude/playwright/screenshots/adsense-phase1/(gitignore 대상)에 저장.

📌 참고 사항​

사용자 후속 작업 안내 (애드센스 콘솔)​

배포 후 다음 작업이 필요:

  1. 보관 처리 권장 슬롯 8개:
    • 제거된 6개: 9075172521, 7055393661, 4978551745, 1219493182, 8084284433, 3916466104
    • 발급만 진행, 미사용 2개: 6928976245, 9401124123
  2. 신규 슬롯 6개 노출 모니터링: 매칭 학습에 1~24시간 소요 예상

효과 측정 (Phase 2 진입 전제)​

  • F-2 GA4 측정 기준값 수집(트래픽 증대 계획서 단계 F-2)이 별도 작업으로 필요. Phase 1 효과 측정을 위한 baseline 확보.
  • 1~2주 후 애드센스 + GA4 데이터로 효과 측정 → 데이터 기반으로 Phase 2 재설계.

다음 단계​

  • 챔피언스 고도화 트랙 신규 SPEC 작성 (M4 점검에서 분리 결정한 작업)
  • 애드센스 Phase 2: 레이아웃 최적화 (Phase 1 효과 측정 후 재설계)
  • 트래픽 증대 계획서 단계 E (E-1 Z-A, E-2 챔피언스 기술 섹션, E-3 OG 이미지)는 백엔드/이미지 서버 협업 일정 의존