아임웹 팝업·비주얼섹션·상단 배너 만들기
사이트 첫인상을 좌우하는 3가지 요소: 메인 비주얼섹션(Hero), 팝업, 상단 배너. 각각 언제 어떻게 사용하는지, 너무 많이 띄우면 안 되는 이유까지 정리.
시작하기 전에
- 디자인 모드 진입 필요.
- 3가지 도구의 차이를 알고 골라야 효과적:
- 비주얼섹션: 페이지 상단에 고정된 큰 슬라이드 (메인 콘텐츠)
- 팝업: 페이지 위에 띄우는 별도 창 (이벤트·공지)
- 상단 배너: 화면 최상단 띠 띄우기 (가벼운 알림)
1. 비주얼섹션 (Hero) 만들기
방문 후 첫 화면에 보이는 가장 중요한 영역. 브랜드 정체성·핵심 메시지를 여기에.
추가 방법
- 디자인 모드에서 메인 페이지 진입.
- 좌상단 + 위젯 추가 → 비주얼섹션 선택.
- 페이지 최상단(첫 섹션)에 배치.
설정 (슬라이드 추가)
비주얼섹션 우클릭 → 비주얼 설정.
- + 새로운 슬라이드: 슬라이드 추가
- 드래그: 순서 변경
- ⨂ 아이콘: 삭제
각 슬라이드별로:
- 배경: 이미지 / 색상 / 동영상 (단일 슬라이드만 동영상 가능)
- 텍스트: 헤드라인·서브카피·CTA 버튼
- 링크: 메뉴 선택 또는 URL
디자인 옵션
설정창 우측에서:
- 전환 효과: 페이드 / 슬라이드
- 자동 재생 시간: 슬라이드 머무는 시간
- 버튼 표시: 좌우 화살표 / 인디케이터 점
배경 이미지 권장
| 항목 | 권장 |
|---|---|
| 크기 | 1920 × 800px 이상 |
| 형식 | JPG (사진), PNG (그래픽) |
| 용량 | 500KB 이하 (속도 영향) |
| 텍스트 | 이미지에 텍스트 굽지 말고 비주얼섹션 텍스트 기능으로 분리 |
| 포커스 | 중앙에 인물·중요 요소 두지 말 것 (모바일에서 잘릴 수 있음) |
⚠️ 비주얼섹션은 브라우저 가로폭에 맞춰 꽉 차게 표시됩니다. 모바일·PC 양쪽 모두를 고려해 여유 공간 있는 풍경·패턴이 안전.
2. 팝업 (Popup) 만들기
이벤트·공지·쿠폰 등 방문자 주의를 끌어야 할 때.
추가 방법
- 관리자 → 환경설정 > 팝업.
- + 팝업 추가 버튼.
주요 설정
| 항목 | 설명 |
|---|---|
| 제목 | 관리용 이름 (방문자 비표시) |
| 기간 | 노출 시작·종료일 |
| 대상 기기 | PC / 모바일 / 둘 다 |
| 노출 페이지 | 메인만 / 전체 / 특정 페이지 |
| 적용 조건 | 전체 방문자 / 회원 한정 |
| 위치/형태 | 레이어 팝업 / 상단 배너 |
| 이미지 | JPG·PNG·GIF |
| 이미지 링크 | 클릭 시 이동 URL |
| 너비 | px 단위 |
레이어 팝업 vs 상단 배너
| 레이어 팝업 | 상단 배너 | |
|---|---|---|
| 위치 | 화면 중앙 | 화면 최상단 |
| 강도 | 강함 (방문자 시선 강제) | 약함 (스크롤하면 안 보임) |
| 닫기 버튼 | 있음 | 있음 |
| 활용 | 이벤트·쿠폰 | 단순 공지·일정 |
한 번 닫으면 안 보이게
팝업 설정에서 다시 보지 않기 옵션 활성화 → 방문자가 “오늘 하루 안 보기” / “다시 안 보기” 선택 가능.
💡 같은 팝업이 방문할 때마다 뜨면 짜증입니다. 반드시 “다시 보지 않기” 옵션 ON.
3. 상단 섹션 배너 (가장 가벼움)
페이지 맨 위에 띠 형태로 항상 표시되는 정적 배너. 팝업과 달리 닫을 수 없고 페이지의 일부처럼 보입니다.
추가 방법
- 디자인 모드에서 메인 페이지 최상단으로.
- 첫 섹션 자리에 + 새 섹션 → 빈 섹션 추가.
- 그 안에 텍스트 위젯 + 이미지 위젯으로 배너 구성.
또는:
- 위젯 추가 → 이미지 위젯을 페이지 최상단에 배치.
- 이미지 클릭 시 링크 설정.
💡 비주얼섹션보다 가볍게 알릴 때 (예: “5월 한정 5% 할인”, “전국 무료배송”) 효과적.
어떤 걸 골라야 할까? — 판단 기준
| 상황 | 추천 도구 |
|---|---|
| 사이트 메인 비주얼·브랜드 메시지 | 비주얼섹션 |
| 특정 이벤트·쿠폰을 강하게 알림 | 레이어 팝업 |
| 항시 표시되는 가벼운 공지 | 상단 섹션 배너 |
| 영업시간·휴무일 안내 | 상단 섹션 배너 또는 상단 배너 팝업 |
| 신규 가입 유도 | 레이어 팝업 (다시 보지 않기 ON) |
⚠️ 자주 막히는 포인트
- 팝업을 동시에 여러 개 띄움 → 방문 경험 최악. 한 번에 1~2개 이내.
- 닫기 버튼이 너무 작음 → 방문자가 사이트 자체를 떠나버림. 닫기 X 버튼은 큼직하게.
- 비주얼섹션 배경에 텍스트 굽기 → 모바일에서 잘림. 텍스트는 비주얼섹션 텍스트 기능으로 분리.
- 모바일 배경 이미지가 너무 큼 → 로딩 느림. 모바일 전용 작은 이미지를 위젯 단위로 따로 설정.
- 팝업 노출 기간 설정 안 함 → 이벤트 끝났는데 계속 떠 있음. 종료일 필수 설정.
❓ FAQ
Q. 팝업을 슬라이드 형태로 만들 수 있나요? A. 기본 팝업은 단일 이미지. 슬라이드형 팝업이 필요하면 모달 메뉴 + 비주얼섹션 위젯으로 직접 구성 가능. 메뉴 설정 → 모달로 지정.
Q. 비주얼섹션 슬라이드 개수 제한은? A. 기술 제한은 없지만 5장 이내 권장. 많아질수록 방문자는 끝까지 안 봅니다.
Q. 팝업에 입력폼을 넣을 수 있나요? A. 가능합니다. 모달 메뉴를 만들어 입력폼 위젯을 안에 배치하고, 팝업처럼 띄우기. 단순한 이메일 구독 폼이라면 외부 서비스(메일침프 등) 임베드도 OK.
Q. 영상 배경을 비주얼섹션에 넣고 싶어요. A. 비주얼섹션 단일 슬라이드만 가능. 슬라이드 배경 설정에서 동영상 선택. MP4 권장, 5~10초 짧은 루프, 1MB 이하.
Q. 상단 배너만 영구 표시, 팝업은 첫 방문에만 띄울 수 있나요? A. 가능합니다. 팝업 설정에서 “다시 보지 않기 옵션” + 쿠키 24시간 설정. 상단 배너 자체는 닫기 기능이 없으니 영구 표시.
관련 가이드
- imweb-widget-section — 위젯·섹션 다루기
- imweb-design-customization — 공통 디자인 설정
- imweb-mobile-design — 모바일 편집
- imweb-menu-management — 메뉴·모달 다루기
출처 및 검증 본 가이드는 아임웹 공식 도움말(2026년 5월 확인)을 기반으로 언웹스가 실무 노하우를 더해 재구성했습니다. 최종 확인: 2026-05.