본문으로 건너뛰기
Mera News

퍼블리셔 가이드, 3장

팝업과 동의

마지막 검토: 2026년 11월

기사 위에 뜨는 모든 상자는 독자와 독자가 찾아온 이유 사이를 가로막습니다. 법으로 요구되는 것도 있지만, 그렇지 않은 것이 많습니다. 이 장에서는 Google이 요구하는 것, 유럽 규제 당국이 동의에 대해 밝힌 내용, 키보드와 스크린 리더로 사용할 수 있는 안내창을 만드는 방법을 다룹니다. 법률 자문이 아니므로, 배너는 직접 법률 전문가와 확인하세요.

Google이 요구하는 것

Google은 침해성 interstitial을 독자가 콘텐츠를 보지 못하게 가리는 페이지 요소로 설명하며, 검색 성과가 나빠질 수 있다고 경고합니다. 지침은 구체적입니다.

  • 페이지 전체를 덮지 마세요.
  • 동의나 입력을 위해 독자를 별도 페이지로 보내지 마세요. 모든 URL이 하나의 동의 페이지로 리디렉션되면, 그 페이지를 제외한 나머지는 검색 결과에서 빠질 수 있습니다.
  • 전체 페이지 interstitial 대신 화면의 작은 부분만 차지하는 배너를 사용하세요.
  • 뉴스레터 안내나 앱 설치 안내를 포함한 모든 종류의 프로모션 대화상자에 같은 주의를 기울이세요.

앱 설치의 경우 Google은 Safari의 Smart App Banner 같은 브라우저 지원 옵션이나, 해당 스토어로 연결되는 일반 HTML 배너를 안내합니다.

법적으로 요구되는 interstitial은 이 지침의 예외입니다. Google이 드는 예는 연령 확인입니다. 필요하다면 오버레이 아래에 콘텐츠를 페이지에 그대로 두어 색인될 수 있게 하세요.

Better Ads Standards는 광고를 다룹니다. 팝업 광고는 데스크톱과 모바일 모두에 해당합니다. 모바일에서는 카운트다운이 있든 없든 prestitial 광고가 해당합니다. 데스크톱에서는 카운트다운이 있는 prestitial이 해당하며, 바로 닫을 수 있는 것은 기준 미달로 보지 않습니다.

동의에 대해 유럽 규제 당국이 밝힌 내용

유럽 데이터 보호 이사회(EDPB)는 동의에 관한 지침과 쿠키 배너 태스크포스의 보고서를 발표했습니다. 태스크포스 보고서에는 민원 처리를 위해 합의된 최소 기준이 담겨 있습니다. 각국의 규정도 여전히 적용되므로, 아래 내용은 기본선으로 보세요.

  • 동의가 필요한 것은 먼저 실행하지 않습니다. 동의가 필요한 쿠키는 독자가 적극적인 행동으로 동의하기 전에는 설정할 수 없습니다.
  • 스크롤은 동의가 아닙니다. 지침은 스크롤이나 스와이프가 어떤 경우에도 명확하고 적극적인 행동으로 인정되지 않는다고 밝힙니다.
  • 미리 체크된 상자는 동의가 아닙니다. 침묵이나 서비스를 그냥 계속 이용하는 것도 마찬가지입니다.
  • 거부할 방법을 제공하세요. 태스크포스의 대다수 당국은 어느 단계에서든 동의 버튼은 있지만 거부 옵션이 없는 배너를 위반으로 보았습니다.
  • 거부를 숨기지 마세요. 문단 안에 묻혀 눈에 띄지 않는 거부 링크는 유효한 동의로 이어지지 않습니다. 버튼의 색상과 대비는 사안별로 판단됩니다.
  • 접근이 수락에 달려 있어서는 안 됩니다. 지침은 독자가 “쿠키 수락”을 클릭할 때까지 모든 콘텐츠를 막는 페이지를 자유롭게 주어지지 않은 동의의 예로 듭니다.
  • 철회는 동의만큼 쉬워야 합니다. 동의에 클릭 한 번이 필요했다면 철회도 그래야 합니다. 눈에 띄는 표준 위치에 두는 상시 링크가 한 가지 방법이며, 태스크포스는 작은 아이콘도 언급합니다.

누구나 쓸 수 있는 안내창 만들기

페이지를 막지 않는 배너

작은 배너는 독자가 계속 읽을 수 있게 하며, Google이 선호하는 방식입니다. 그래도 WCAG 2.2를 충족해야 합니다. 성공 기준 2.4.11 Focus Not Obscured (Minimum)은 고정 배너가 키보드 포커스를 받은 항목을 완전히 가리면 실패합니다. 배너 높이와 같은 scroll padding을 추가하세요.

html {
  scroll-padding-bottom: 96px; /* the banner's height */
}

배너를 겹쳐 띄우거나 공간을 확보해, 기사를 밀어내 레이아웃 이동을 일으키지 않게 하세요.

모달 대화상자

안내창이 독자를 멈춰 세워야 한다면, W3C 패턴에 따라 진짜 모달 대화상자로 만드세요.

<div role="dialog" aria-modal="true"
     aria-labelledby="consent-title" aria-describedby="consent-text">
  <h2 id="consent-title">Your privacy choices</h2>
  <p id="consent-text">Choose whether this site may use cookies for advertising.</p>
  <button type="button">Reject all</button>
  <button type="button">Accept all</button>
  <button type="button">Choose settings</button>
</div>
  • 대화상자가 열리면 포커스를 그 안으로 옮기세요.
  • Tab과 Shift + Tab은 대화상자 안의 컨트롤을 순환하며, 양 끝에서 처음과 끝으로 이어집니다.
  • Escape는 대화상자를 닫습니다. 이를 선택하지 않은 것으로 처리하고, 수락으로 처리하지 마세요.
  • 닫을 때는 포커스를 대화상자를 연 요소로 되돌리세요. 페이지가 로드될 때 열린 대화상자라면 포커스를 콘텐츠의 시작 부분으로 옮기세요.

모바일에서

  • 배너는 화면 아래쪽에 고정하고, 그 위로 헤드라인이 보이게 유지하세요.
  • 버튼은 전체 너비로 쌓아 누르기 쉽게 하고, 수락과 거부는 같은 크기로 만드세요.
  • 텍스트는 짧게 유지하고 자세한 내용은 두 번째 단계로 옮기세요.
  • 320 CSS 픽셀 너비와 텍스트를 200%로 키운 상태에서 레이아웃을 확인하세요. 가로로 스크롤하지 않아도 버튼에 닿을 수 있어야 합니다.

데스크톱에서

  • 하단 바나 구석 패널을 사용하고, 기사는 가리지 않게 두세요.
  • 모든 컨트롤이 키보드로 작동하게 하고, 포커스 표시가 보이게 하세요.
  • 텍스트 대비는 4.5:1 이상, 큰 텍스트는 3:1 이상을 유지하세요.

체크리스트

  • 새 브라우저 프로필로 홈페이지와 기사 페이지를 휴대폰과 데스크톱에서 불러와, 콘텐츠 위에 나타나는 것을 세어 보세요.
  • 법이 요구하지 않는 전체 페이지 오버레이는 모두 제거하세요.
  • 별도 동의 페이지로 가는 리디렉션을 모두 제거하세요.
  • 독자가 동의하기 전에 동의가 필요한 태그가 실행되지 않는지 확인하세요.
  • 수락 옵션이 있는 곳에는 같은 비중의 버튼으로 거부 옵션을 두세요.
  • 미리 체크된 상자와 스크롤을 동의로 간주하는 로직을 제거하세요.
  • 모든 페이지에 개인정보 선택을 바꿀 수 있는 상시 링크나 아이콘을 추가하세요.
  • 마우스 없이 배너를 Tab으로 이동하며, 포커스가 계속 보이고 배너 뒤로 사라지지 않는지 확인하세요.
  • 모달을 스크린 리더로 테스트하고, Escape와 포커스 복귀도 확인하세요.
  • 직접 만든 앱 설치 팝업을 작은 배너로 바꾸세요.

출처