광고 슬롯 5종과 hero 영역을 한 번에 연동한 이유

광고 슬롯 5종을 새로 올리고, hero 영역까지 마커를 박아 넣은 작업이었다. 파일은 index.html 하나지만, 뒤에서 admin_db 매핑까지 연동되는 구조라 건드리는 지점이 생각보다 많았음.

배경 — 왜 이번에 한꺼번에 5종인가

광고 슬롯 작업은 보통 "하나만 추가해주세요" 식으로 들어오는데, 이번엔 달랐다. mobon 기반 슬롯을 한 번에 5종 + hero 영역 마커까지 묶어서 처리해달라는 요청이었다. 이런 경우 파편화해서 PR 나누는 것보다 한 번에 묶는 게 낫다고 판단했음.

이유는 간단하다. 광고 슬롯은 마커 위치, admin_db 매핑 키, 실제 렌더링 순서가 세 개가 동시에 맞아야 동작한다. 하나씩 올리면 중간 상태에서 매핑이 어긋난 채로 배포되는 리스크가 생긴다. 묶어서 가는 게 원자성 확보 측면에서 훨씬 안전하다.

팀원들한테도 이 부분을 코드리뷰 때 설명했다. "왜 5개를 한 커밋에?" 라는 질문이 들어올 걸 예상했고, 커밋 메시지에 의도를 명시한 것도 그래서다.

작업 내용 — 마커 박기와 admin_db 매핑 연동

index.html에 mobonslot 마커를 박는 작업 자체는 단순해 보이지만, 매핑 구조를 이해하고 있어야 실수 없이 넣을 수 있다.

<!-- mobonslot: slot_id 와 admin_db key 가 1:1 대응 -->
<div class="mobon-slot" data-slot-id="SLOT_KEY_A"></div>
<div class="mobon-slot" data-slot-id="SLOT_KEY_B"></div>
<!-- ... 5종 + hero -->
<div class="mobon-hero" data-slot-id="HERO_KEY"></div>

data-slot-id 값이 admin_db에 등록된 키와 정확히 일치해야 한다. 오타 하나, 대소문자 하나 틀리면 광고가 뜨지 않거나 엉뚱한 슬롯이 붙는다. 이게 QA에서 잘 안 잡히는 이유가, 렌더링은 되지만 슬롯이 비어 있는 것처럼 보이기 때문이다.

hero는 별도 마커 클래스를 쓰는 구조라 일반 슬롯이랑 혼용하면 안 된다. 이걸 통일하지 않으면 나중에 관리 포인트가 두 갈래로 쪼개진다.

회고 — index.html 한 파일인데 왜 이게 묵직한가

변경 파일이 index.html 단 하나라는 게, 어떻게 보면 이 작업이 가볍게 보일 수 있다. 실제로 stat 줄 수도 많지 않을 거다. 그런데 이 작업의 무게중심은 코드 줄 수가 아니라 매핑 정합성에 있다.

광고 슬롯 연동에서 내가 팀에 항상 강조하는 포인트는 세 가지다.

• 마커 키와 admin 등록 키를 반드시 동시에 작업하고, 리뷰어도 양쪽 다 확인해야 한다
• hero처럼 별도 클래스를 쓰는 영역은 일반 슬롯과 분리해서 관리 체계를 잡아야 나중에 덜 헷갈린다
• 광고 슬롯 추가는 "배포하고 끝"이 아니라 실제 노출 확인까지가 작업 범위다

이번엔 내가 직접 마커 위치 잡고 admin_db 매핑 키까지 대조해가면서 넣었는데, 이런 작업을 팀원이 처음 맡을 때 실수가 많이 나온다. 그래서 이번 PR을 일종의 레퍼런스 패턴으로 남겨두기로 했다. 다음 슬롯 추가 작업 때 이 커밋 보고 따라하면 되게끔.

작은 파일 하나지만, 제대로 박아야 제대로 뜬다. 그게 이 작업의 핵심이었음.

다음

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

• 모니터 쿠팡에서 보기 →
• 기계식키보드 쿠팡에서 보기 →
• 외장SSD 쿠팡에서 보기 →

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