홈페이지 팝업, 사이즈표와 조건·문구 예시 6개

홈페이지 팝업은 PC와 모바일 크기를 따로 만들고, 닫기 버튼을 크게 두고, 오늘 하루 안 보기를 넣고, 첫 화면 내용을 가리지 않게 띄우는 시점(몇 초 뒤 · 스크롤 뒤)을 정하면 완성됩니다. 모바일에서 화면을 가득 덮는 팝업은 방문자가 내용을 보기 어렵게 만들고, Google 검색 센터 문서도 이런 대화상자를 피할 것으로 안내합니다. 아래에 유형별 크기표, 띄우는 조건표, 오늘 하루 안 보기가 동작하는 방식, 문구 예시 6개, 빌더에서 확인할 설정 일곱 칸을 정리했습니다. 공식 문서 내용은 2026년 10월 15일에 확인한 기준입니다.

홈페이지 팝업 — 사이즈는 얼마로 하나요

팝업은 모양에 따라 크기를 정합니다. 아래 크기는 예시 규격이고, 쓰는 빌더나 테마가 권장값을 주면 그 값을 먼저 씁니다. 이미지는 표의 크기보다 2배로 만들어 저장하면 해상도가 높은 화면에서도 흐려지지 않습니다(예: 480 × 600px 자리에 960 × 1,200px 이미지).

폭 360px 화면을 기준으로 시안을 한 번 더 확인합니다. 그 폭에서도 닫기 버튼이 화면 안에 있고 좌우 여백이 남으면 더 넓은 화면은 대개 문제가 없습니다. 모바일에서만 화면이 깨질 때 원인을 찾는 순서는 모바일 화면 깨짐 글에 있습니다.

홈페이지 팝업은 언제 띄우나요

띄우는 시점은 팝업의 목적에 맞춰 고릅니다. 수치는 예시이고, 한 페이지에서 동시에 뜨는 팝업은 하나로 둡니다.

오늘 하루 안 보기는 어떻게 동작하나요

오늘 하루 안 보기 버튼을 누르면 브라우저에 기록이 남고, 다음에 페이지를 열 때 그 기록을 확인해 팝업을 건너뜁니다. 기록 방식은 두 가지입니다.

• 쿠키 — 만료 시각(Expires)이나 남은 초(Max-Age)를 정합니다. 둘 다 없으면 브라우저를 닫을 때 지워지는 세션 쿠키가 되어, 다음 날이 아니라 브라우저를 다시 열면 팝업이 뜹니다.
• 로컬 스토리지(localStorage) — 만료 시간이 없어 누른 날짜를 함께 저장하고, 다음 방문 때 날짜를 비교하게 만들어야 합니다. 시크릿 창의 기록은 마지막 시크릿 탭을 닫을 때 지워집니다.

기록은 브라우저마다 따로 남으므로, 같은 사람이라도 다른 기기나 브라우저로 오면 팝업이 다시 뜹니다. "오늘 하루"를 자정까지로 할지 누른 때부터 24시간으로 할지 정하고, 24시간이면 버튼 문구를 "24시간 동안 보지 않기"로 맞춥니다.

닫기 버튼은 누르기 쉬운 크기로 둡니다. 웹 접근성 기준 WCAG 2.2는 누르는 대상의 크기를 최소 24 × 24 CSS 픽셀(AA 수준)로 정하고, 손가락으로 누르는 모바일에서는 그보다 넉넉하게 잡습니다. 키보드로 쓰는 사람을 위해 팝업이 열리면 초점이 팝업 안으로 옮겨 가고, Esc 키로 닫히며, 닫으면 원래 자리로 돌아오게 만듭니다.

모바일 팝업에서 주의할 점은 무엇인가요

Google 검색 센터의 "방해가 되는 전면 광고 및 대화상자 방지" 문서는 페이지 전체를 덮는 전면 광고와, 페이지 일부를 덮어 아래 콘텐츠를 알아보기 어렵게 만드는 대화상자를 피할 예로 듭니다. 이런 대화상자는 검색엔진이 콘텐츠를 인식하기 어렵게 만들 수 있고, 이용이 불편하면 방문자가 다시 오지 않을 수 있다고 설명합니다. 대안으로는 화면의 작은 부분만 차지하는 배너를 권하고, 연령 확인처럼 법으로 필요한 대화상자는 예외로 둡니다.

• 모바일에서는 가운데 레이어 대신 하단 시트나 띠 배너를 먼저 고릅니다.
• 첫 화면의 제목 · 가격 · 주요 버튼이 팝업 뒤에 가려지지 않게 위치를 정합니다.
• 팝업이 열린 동안 뒤 페이지가 같이 스크롤되지 않게 하고, 닫으면 보던 위치로 돌아오게 합니다.

홈페이지 팝업 문구는 어떻게 쓰나요

제목 한 줄 · 본문 한두 줄 · 버튼 하나가 기본입니다. 괄호 안만 바꿔 쓰는 예시 6개입니다(날짜 · 금액은 예시).

1. 휴무 공지 — "연휴 휴무 안내" / "(10월 3일 ~ 5일) 상담과 출고를 쉽니다. (6일)부터 순서대로 처리합니다." / 버튼 "자세히 보기"
2. 정책 변경 — "배송비 변경 안내" / "(11월 1일) 주문부터 기본 배송비가 (3,500)원으로 바뀝니다." / 버튼 "변경 내용 보기"
3. 이벤트 — "오픈 이벤트 진행 중" / "(10월 30일 ~ 11월 5일) 첫 주문 (10)% 할인" / 버튼 "이벤트 보기"
4. 쿠폰 — "첫 주문 (3,000)원 쿠폰" / "가입 후 (7)일 안에 (2만)원 이상 주문 시 사용 · 1인 1회" / 버튼 "쿠폰 받기"
5. 상담 안내 — "견적이 필요하신가요" / "요청서를 남기시면 (1)영업일 안에 연락드립니다." / 버튼 "요청서 쓰기"
6. 점검 안내 — "시스템 점검 안내" / "(10월 20일 02:00 ~ 04:00) 주문과 결제가 잠시 멈춥니다." / 버튼 "확인"

버튼 아래에는 닫기와 오늘 하루 안 보기를 나란히 둡니다. 팝업 문구를 디자이너나 제작 쪽에 넘길 때는 홈페이지 요청서 양식의 화면별 칸에 팝업을 한 화면으로 따로 적으면 크기 · 조건 · 문구가 한곳에 모입니다.

빌더에서 팝업창은 어떻게 만드나요

아임웹 · 카페24 · 워드프레스 같은 빌더는 팝업 메뉴의 이름과 위치가 서로 다르므로, 각 빌더 도움말에서 "팝업"으로 찾아 아래 일곱 칸이 있는지 확인합니다.

1. PC · 모바일 이미지를 따로 넣는 칸
2. 노출 기간(시작 · 종료 일시)
3. 노출할 페이지(전체 · 첫 화면 · 특정 주소)
4. 위치와 크기
5. 다시 보지 않기 옵션과 그 기간
6. 클릭했을 때 이동할 주소와 새 탭 여부
7. 팝업이 여러 개일 때의 순서

빈칸이 있는 빌더나 테마는 플러그인 · 외부 스크립트로 기능을 붙이는데, 이때도 같은 일곱 칸을 기준으로 고릅니다. 종료 일시를 넣지 않은 팝업은 이벤트가 끝난 뒤에도 남기 쉬우므로 2번 칸은 비워 두지 않습니다. 빌더를 고르는 단계라면 아임웹 홈페이지 글의 요금제 비교표와 만드는 순서부터 봅니다.

자주 묻는 질문

팝업이 안 뜨는데 차단 해제는 어떻게 하나요?

먼저 어떤 팝업인지 가립니다. 페이지가 자동으로 여는 새 창 팝업은 Chrome이 기본으로 차단하고, 주소창에 팝업 차단됨 아이콘이 뜹니다. 방문자는 그 아이콘을 눌러 그 사이트의 팝업을 항상 허용으로 바꾸거나, 설정 → 개인 정보 및 보안 → 사이트 설정 → 팝업 및 리디렉션에서 바꿉니다. 운영하는 쪽이라면 공지를 페이지 안 레이어로 바꾸는 편이 낫습니다. 레이어가 안 뜬다면 오늘 하루 안 보기 기록이 남아 있는지 시크릿 창에서 열어 확인합니다.

팝업은 몇 개까지 띄워도 되나요?

한 화면에 하나를 기준으로 둡니다. 공지와 쿠폰이 겹치면 날짜가 급한 공지를 앞에 두고, 쿠폰은 띠 배너나 구석 레이어로 옮깁니다. 여러 장을 꼭 보여야 하면 한 팝업 안에서 넘겨 보는 슬라이드로 묶고, 닫기 버튼은 하나만 둡니다.

팝업 이미지에 글자를 넣어도 되나요?

넣어도 되지만 두 가지를 함께 합니다. 이미지의 대체 텍스트에 이미지 속 문구를 그대로 적고, 모바일용 이미지는 따로 만들어 글자를 키웁니다. PC 이미지를 모바일에서 줄여 보여 주면 본문 글자가 작아져 읽히지 않습니다. 날짜 · 금액처럼 자주 바뀌는 글자는 이미지 대신 빌더의 글 입력 칸에 넣으면 고칠 때 이미지를 다시 만들지 않아도 됩니다.

쿠폰 팝업 문구에는 무엇을 적나요?

할인 금액 · 최소 주문 금액 · 사용 기한 · 1인 사용 횟수를 한 줄에 적습니다. 공정위 고시는 "무료증정"이라 하고 실제로는 일정액 이상 구입해야 주는 경우, 수량 · 기간 제한을 적지 않고 증정을 거절하는 경우를 부당한 표시 · 광고의 예로 듭니다. 조건이 있으면 혜택 문구 바로 옆에 둡니다.

오늘 할 일

지금 띄우고 있거나 띄울 팝업을 휴대폰으로 열어 두 가지만 확인하십시오. 닫기 버튼이 엄지로 한 번에 눌리는지, 팝업 뒤로 첫 화면 제목이 보이는지입니다. 둘 중 하나라도 아니면 하단 시트나 띠 배너로 바꾸는 것부터 시작합니다.

이어서 읽기 — 랜딩페이지 제작, 10칸 구성표와 업종별 예시 · 메타태그 설정, 넣을 5가지와 제목·설명 길이