웹사이트 운영

팝업을 확실히 닫을 수 있어야 블로그 유입이 이어진다

닫기 버튼의 위치·이름·초점 이동을 점검해 팝업이 본문 읽기와 다음 행동을 막지 않게 합니다.

애드온 편집팀

검색 결과에서 블로그 글로 들어온 사람에게 팝업이 먼저 보이면 콘텐츠를 읽기 전에 닫는 방법부터 찾아야 한다. 닫기 아이콘이 작거나 배경과 구별되지 않고, 닫은 뒤 키보드 초점이 사라지면 유입은 있어도 정보 이용이 중단된다. 팝업은 알릴 내용의 중요성뿐 아니라 사용자가 즉시 거절하거나 나중에 볼 권리를 포함해 설계해야 한다.

닫기 동작을 눈과 키보드로 찾게 하기

우측 상단의 작은 기호만 두지 말고 ‘닫기’라는 접근 가능한 이름을 제공한다. 아이콘 주변의 클릭 영역을 충분히 확보하고 본문 및 배경과 대비되는지 살핀다. 키보드의 Esc 키와 닫기 버튼으로 종료할 수 있는지, 화면읽기 도구가 대화상자의 제목과 닫기 기능을 알리는지 확인한다. 팝업이 열리면 초점이 내부로 이동하고 닫으면 사용자가 누르던 원래 요소로 돌아가야 한다. 배경 스크롤이 잠겼다면 닫은 뒤 반드시 다시 움직여야 한다.

필수 안내와 홍보 노출을 구분하기

서비스 이용에 꼭 필요한 오류·동의 안내와 단순 이벤트 배너를 같은 방식으로 강제하지 않는다. 홍보 팝업은 닫기를 지연하거나 화면 밖으로 숨기지 않으며 ‘오늘 보지 않기’가 실제로 어느 기간 적용되는지 알려준다. 여러 팝업이 연속으로 뜨지 않게 우선순위를 정하고 모바일 화면에서 키보드가 올라왔을 때 닫기 버튼이 가려지지 않는지 시험한다. 닫기만 해도 외부 페이지가 열리거나 동의로 처리되는 예기치 않은 행동은 없어야 한다.

닫은 뒤 본문 이용까지 측정하기

팝업 노출 횟수와 클릭률만 보지 말고 닫기 실패, 즉시 이탈, 닫은 뒤 첫 문단 이동, 같은 팝업의 반복 노출을 확인한다. 특정 기기에서만 종료가 안 되는지 오류 로그와 문의를 함께 살핀다. 새 캠페인마다 팝업을 추가하기 전에 기존 항목과 충돌하지 않는지 검수한다. 기간이 끝난 팝업은 화면에서 숨기는 데 그치지 말고 관련 스크립트와 초점 동작이 남지 않았는지 확인한다. 블로그 유입을 지키는 가장 기본적인 조건은 방문자가 알림을 원하지 않을 때 방해 없이 원래 글로 돌아가는 것이다.

‘닫기 동작을 눈과 키보드로 찾게 하기’와 관련 문서의 경계 정하기

‘팝업을 확실히 닫을 수 있어야 블로그 유입이 이어진다’와 연결된 문서가 많더라도 모든 페이지에 ‘닫기 동작을 눈과 키보드로 찾게 하기’의 전체 설명을 반복할 필요는 없습니다. 대표 문서에는 공통 기준과 최신 조건을 두고, 개별 글에서는 ‘필수 안내와 홍보 노출을 구분하기’처럼 그 글에서만 해결할 질문을 설명한 뒤 대표 문서로 연결합니다. ‘닫은 뒤 본문 이용까지 측정하기’의 세부 내용이 다른 문서의 핵심 답이라면 짧은 요약과 이동 이유만 남겨 독자가 같은 문단을 여러 번 읽지 않게 합니다. 반대로 현재 페이지에서 반드시 알아야 할 제한까지 링크 뒤로 숨기지 말고 ‘닫기 동작을 눈과 키보드로 찾게 하기’의 적용 범위를 이해할 정도는 본문 안에서 설명합니다.

참고: W3C WAI: Understanding SC 2.4.3 Focus Order

전체 글 보기

CONSULTATION

어떤 정보를, 어디에 전할지
함께 정리해보세요.

병원의 현재 운영 채널과 필요한 작업을 알려주세요.
원고·이미지·홈페이지 중 필요한 업무 범위부터 확인합니다.

LOCATION

애드온 오시는 길

서울특별시 강서구 공항대로 194, 1동 6층 610·611호 (마곡동, 문영 퀸즈파크12차)