개발 slecs

광고 게이트 모달 표준 패턴을 Base 레이아웃에 통합

목차

광고 게이트 모달 컴포넌트에 표준 패턴을 적용하고, Base 레이아웃에 연결하는 작업을 했다.

왜 "표준 적용"이 필요했나

AdGate 류의 모달은 서비스 전반에서 꽤 반복적으로 등장하는 UI 패턴이다. 광고 노출, 이탈 방지, 공지 팝업 등 다양한 맥락에서 비슷한 구조의 모달이 생겨나는데, 초기엔 각각 따로 짜다 보면 어느 순간 비슷하게 생긴 모달이 세 개, 네 개 제각각 다른 방식으로 동작하고 있는 걸 발견하게 된다. z-index 충돌, 접근성 속성 누락, 닫기 동작 불일치 같은 문제들이 슬금슬금 올라오기 시작하면 그때부터 리뷰 때마다 "이거 저 모달이랑 다르게 동작하는데요?"라는 코멘트가 반복된다.

이번 작업의 핵심은 AdGateModal.astro에 그 "표준"을 못 박은 것이다. 컴포넌트 수준에서 구조를 고정해두면, 이후에 모달이 추가되거나 수정될 때 팀원들이 따라야 할 레퍼런스가 생긴다. 리드 입장에서는 이런 작업이 단순 기능 추가보다 오히려 더 중요하게 느껴질 때가 많다. 기능 하나 추가하는 건 금방이지만, 잘못 퍼진 패턴을 나중에 걷어내는 건 두 배, 세 배 시간이 든다.

변경 파일별 역할 분석

파일 역할 이번 변경의 의미
AdGateModal.astro 광고 게이트 모달 컴포넌트 표준 마크업/동작 패턴 정착
Base.astro 전체 페이지 기반 레이아웃 모달을 레이아웃 레벨에서 마운트

Base.astro에 연결했다는 게 중요한 포인트다. 모달을 개별 페이지 컴포넌트에 끼워 넣지 않고 Base 레이아웃에서 관리하면, 어떤 페이지에서 진입하든 일관되게 동작한다. 반대로 말하면, Base에 잘못 얹으면 전체 페이지에 영향이 가기 때문에 이 연결 지점은 항상 신중하게 다뤄야 한다.

Astro 기반 프로젝트에서 레이아웃 컴포넌트는 보통 이런 구조를 갖는다.

---
// Base.astro
import AdGateModal from '../components/AdGateModal.astro';
---
<html>
  <body>
    <slot />
    <AdGateModal />
  </body>
</html>

<slot /> 아래에 모달을 두는 게 일반적인 패턴인데, 이렇게 하면 페이지 콘텐츠가 먼저 렌더링된 뒤 모달이 DOM에 올라오면서 레이아웃 시프트를 최소화할 수 있다. 물론 모달 표시 타이밍 제어는 JS 레벨에서 따로 처리해야 하지만, 마크업 위치 자체가 렌더링 순서에 영향을 주니 이 부분도 짚고 넘어가야 한다.

표준화 작업에서 챙겨야 할 것들

"표준 적용"이라는 작업은 겉보기엔 단순 리팩터링처럼 보이지만, 체크해야 할 항목이 꽤 된다.

  • 접근성(a11y): role="dialog", aria-modal="true", aria-labelledby 등 ARIA 속성이 빠지면 스크린리더 사용자가 모달 안에 갇히는 현상이 발생함
  • 포커스 트랩: 모달이 열렸을 때 Tab 키가 모달 내부에서만 순환해야 함. 이게 없으면 UX 이슈이기도 하고 접근성 지적 대상이기도 함
  • 닫기 트리거 통일: ESC 키, 배경 오버레이 클릭, 닫기 버튼 세 가지가 모두 동일하게 동작해야 함. 하나라도 빠지면 팀원들이 나중에 "이건 ESC가 안 되네요"라고 이슈 올림
  • z-index 관리: 프로젝트 전역에서 z-index를 토큰으로 관리하고 있다면 모달도 그 토큰을 따라야 함. 하드코딩하면 나중에 다른 오버레이와 충돌 남

이번에 AdGateModal.astro에 표준을 적용했다는 건, 위 항목들 중 적어도 일부를 컴포넌트 안에 기본값으로 내장했다는 의미로 읽힌다. 컴포넌트를 가져다 쓰는 것만으로 표준 동작이 보장되는 구조, 그게 표준화의 실질적인 목표다.

회고

리드로서 이런 작업은 사실 "내가 직접 짜야 하나" 고민이 드는 타입이기도 하다. 작업 자체가 어렵지 않으니 팀원한테 넘길 수도 있는데, 표준 패턴을 처음 정의하는 시점에는 내가 직접 레퍼런스 구현을 만들어두는 게 낫다고 판단했다. 나중에 "왜 이렇게 했어요?"라는 질문이 왔을 때 코드 자체가 답이 되도록.

AdGateModal.astro가 앞으로 팀 내 모달 구현의 레퍼런스가 되길 기대한다. 비슷한 모달이 생길 때 이 컴포넌트를 보고 따라 짜거나, 아니면 이걸 확장하는 방향으로 가면 된다. 코드리뷰에서도 "AdGateModal 패턴이랑 맞추면 돼요"라고 한 마디로 정리할 수 있으니 리뷰 비용도 줄어든다.

끝.

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

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

이어보기

댓글 0

첫 댓글 달아줘.