보험 섹션에 광고 게이트 모달 표준 패턴 적용 완료

광고 게이트 모달을 보험 섹션에 표준 패턴으로 붙이는 작업을 마무리했다.

왜 이 작업이 필요했나

사내 서비스 내 여러 섹션에 광고 게이트(ad-gate) 모달을 공통 표준으로 끌어올리는 작업이 한창 진행 중이었다. 이미 다른 섹션에 붙어 있던 hedvion 광고 게이트 모달을 이번엔 보험(insurance) 섹션에도 동일하게 적용하는 게 이번 커밋의 핵심이었음.

"이미 다른 데서 돌아가고 있는데 그냥 복붙 아닌가요?" 라는 시각도 있겠지만, 이 작업이 사소해 보여도 꼭 신경 써야 하는 이유가 있었다. 모달 하나를 섹션에 붙인다는 건 단순히 컴포넌트를 import 하는 수준이 아니라, 해당 섹션의 레이아웃 흐름과 DB 연동, 그리고 표준 패턴 준수 여부를 한꺼번에 검토해야 하는 일이기 때문이다.

세 파일이 각각 어떤 역할을 했나

변경된 파일을 보면 이 작업의 레이어가 꽤 명확하게 드러난다.

AdGateModal.astro 는 컴포넌트 자체가 이미 존재했지만, 섹션별로 다른 조건(어떤 유저에게 보여줄지, 어느 시점에 트리거할지)을 props 로 받아서 분기해야 했기 때문에 손을 댈 수밖에 없었다. 표준 패턴이라는 건 결국 "섹션이 달라져도 모달 컴포넌트의 인터페이스는 동일하게 유지한다"는 약속이라, 이 부분이 흔들리면 나중에 팀원들이 다음 섹션 붙일 때 또 제각각으로 만들어버린다.

Base.astro 는 레이아웃 레벨에서 모달이 어느 위치에, 어떤 조건으로 렌더링되는지를 결정하는 파일이라 변경에 신중했다. 레이아웃을 건드리면 해당 레이아웃을 상속받는 모든 페이지에 영향이 갈 수 있기 때문에, 보험 섹션에만 한정되도록 조건 분기를 명확히 했다.

db.ts 쪽은 보험 섹션의 광고 게이트 노출 조건을 DB에서 읽어오는 쿼리/함수를 추가하는 작업이었음. 이 부분은 이미 다른 섹션에서 쓰는 패턴을 그대로 따랐고, 함수 시그니처도 맞춰서 일관성을 유지했다.

// db.ts - 섹션별 광고 게이트 조건 조회 패턴 예시
export async function getAdGateCondition(section: string) {
  return await db.query(
    `SELECT * FROM ad_gate_conditions WHERE section = $1 AND is_active = true`,
    [section]
  );
}

이런 식으로 section 파라미터 하나로 섹션을 구분하면, 다음 섹션을 붙일 때 DB 레이어는 추가 코드 없이 재사용할 수 있다. 처음 설계할 때부터 이 확장성을 고려해두길 잘 했다는 생각이 들었음.

표준 패턴을 강제하는 것의 진짜 가치

솔직히 팀 리딩을 하다 보면 "왜 이걸 표준화하려고 하냐"는 질문을 종종 받는다. 빠르게 붙이면 되지 않냐고. 근데 광고 게이트 모달처럼 여러 섹션에 반복적으로 붙는 패턴일수록 표준화의 효과가 배로 나타난다.

• 다음 섹션에 붙일 팀원이 "이전 섹션 코드 보면 된다"는 확신이 생김
• 코드리뷰 시 "이 섹션은 왜 다르게 했어요?" 같은 토론이 사라짐
• 모달 동작 자체에 버그가 생겼을 때 한 곳만 수정하면 전체 반영됨
• 신규 입사자가 패턴을 파악하는 데 드는 시간이 확 줄어듦

반대로 표준 없이 섹션마다 제각각 붙이면 어떻게 되냐 하면, 세 달 뒤에 "A 섹션에서는 되는데 B 섹션에서는 광고가 안 뜬다"는 버그 리포트가 날아오고, 그때서야 두 코드를 비교하면서 "아 여기서 빠진 거였네" 하는 상황이 생긴다. 팀 사이즈가 작을수록 이런 부채가 빠르게 쌓인다.

이번에 보험 섹션에 표준 적용을 마무리하면서, 다음 섹션 적용은 훨씬 기계적으로 가능한 상태가 됐다. 이게 이 작업의 진짜 결과물이라고 본다.

다음은 나머지 섹션 순서 조율과 QA 체크리스트 정리 예정.

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

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

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