배너 설정
배너 설정은 관리자가 iBoard 페이지 또는 HTML 레이아웃 안에서 사용할 배너를 생성, 수정, 예약 표시, 삭제, 출력할 수 있게 해주는 기능입니다. 배너는 HTML 콘텐츠를 포함할 수 있으며, 배너 숏코드를 사용해 페이지에서 호출할 수 있습니다.
프로모션 배너, 공지 영역, 홈페이지 Hero 영역, 이벤트 안내, 상단 알림, 재사용 HTML 블록을 관리할 때 사용합니다.
화면 개요
배너 기능은 크게 Banner List, Banner Usage Guide, Banner Information 영역으로 구성됩니다.
| 영역 | 설명 |
|---|---|
| Banner List | 등록된 배너 목록을 보여주고 수정, 삭제, 추가 작업을 할 수 있습니다. |
| Banner Usage Guide | HTML 안에서 배너 숏코드를 사용해 배너를 출력하는 방법을 설명합니다. |
| Banner Information | 배너 이름, 표시 기간, HTML 콘텐츠를 생성하거나 수정합니다. |
Banner List
Banner List 화면에서는 등록된 배너 목록을 확인할 수 있습니다. 배너 이름, 시작일, 종료일, 사용 가능한 작업을 확인할 수 있습니다.
주요 버튼
| 버튼 | 기능 |
|---|---|
| Guide | Banner Usage Guide 팝업을 엽니다. |
| Add Banner | 새 배너를 생성합니다. |
| Setting | 선택한 배너를 수정하는 화면으로 이동합니다. |
| Delete | 선택한 배너를 삭제합니다. |
목록 컬럼
| 컬럼 | 설명 |
|---|---|
| ID | 내부 배너 ID입니다. |
| Name | HTML에서 배너를 호출할 때 사용하는 배너 이름입니다. |
| StartDate | 배너가 표시되기 시작하는 날짜와 시간입니다. |
| EndDate | 배너 표시가 종료되는 날짜와 시간입니다. |
| Actions | 각 배너의 수정 및 삭제 작업을 제공합니다. |
Banner Usage Guide
Banner Usage Guide는 HTML 안에서 배너를 어떻게 출력하는지 설명합니다. 배너가 나타나야 하는 위치에 배너 숏코드를 넣으면 됩니다.
기본 배너 숏코드
[Banner, {Name:MainTopBanner}]
Name: 뒤의 값은 저장된 배너 이름과 정확히 일치해야 합니다.
구현 방식에 따라 배너 이름은 대소문자를 구분할 수 있습니다. Banner Information에 저장한 이름과 동일하게 입력하세요.
HTML 안에서 사용하는 예
배너 숏코드는 section, div, header, footer, 페이지 레이어, 사용자 정의 레이아웃 등 원하는 HTML 위치에 넣을 수 있습니다.
<section class="main-hero">
<div class="container">
[Banner, {Name:MainTopBanner}]
</div>
</section>배너 콘텐츠 예시
배너 콘텐츠 자체에는 HTML을 넣을 수 있습니다.
<div class="promo-banner">
<h2>Summer Promotion</h2>
<p>Special offer is available now.</p>
<a href="/ShowPage/Promotion" class="btn btn-primary">View Details</a>
</div>결과
페이지가 렌더링될 때 배너 숏코드는 해당 이름과 일치하는 배너 콘텐츠로 대체됩니다.
Banner Information
Banner Information 화면은 배너를 생성하거나 수정하는 화면입니다. 배너 기본 정보와 HTML 콘텐츠 편집 영역으로 구성됩니다.
Banner Preferences
| 항목 | 설명 |
|---|---|
| No. | 배너 번호입니다. 새 배너는 저장 전 AUTO로 표시될 수 있습니다. |
| Name | 배너 숏코드에서 사용하는 배너 이름입니다. 필수 입력값입니다. |
| Start Date | 배너가 표시되기 시작하는 날짜와 시간입니다. |
| End Date | 배너 표시가 종료되는 날짜와 시간입니다. |
Content
Content 영역에는 HTML 편집기가 있습니다. 이곳에 배너로 출력할 HTML 마크업을 작성하거나 수정합니다. 텍스트, 이미지, 버튼, 링크, Bootstrap 컴포넌트, 사용자 정의 HTML을 넣을 수 있습니다.
<div class="alert alert-info">
<strong>Notice:</strong> Our new service is now available.
</div>배너 생성 방법
- Admin > Site > Banner 메뉴로 이동합니다.
- Add Banner 버튼을 클릭합니다.
- 배너 이름을 입력합니다.
- 시작일과 종료일을 설정합니다.
- HTML 편집기에 배너 콘텐츠를 작성합니다.
- Save Page 버튼을 클릭합니다.
- 배너 숏코드를 복사해서 배너가 표시될 페이지 또는 레이아웃에 넣습니다.
배너 수정 방법
- Banner List를 엽니다.
- 수정할 배너를 찾습니다.
- Setting 버튼을 클릭합니다.
- 배너 이름, 표시 기간, HTML 콘텐츠를 수정합니다.
- Save Page 버튼을 클릭합니다.
- 배너가 사용된 페이지를 미리보기로 확인합니다.
배너 삭제 방법
- Banner List를 엽니다.
- 삭제할 배너를 찾습니다.
- 삭제 버튼을 클릭합니다.
- 확인 메시지가 나오면 삭제를 확정합니다.
배너를 삭제하기 전에는 해당 배너가 현재 페이지, 레이아웃, 헤더, 푸터, 캠페인 영역에서 사용 중인지 반드시 확인하세요.
표시 기간
Start Date와 End Date는 배너가 언제 표시될지 결정합니다. 공지, 시즌 프로모션, 이벤트 배너, 임시 알림을 관리할 때 유용합니다.
| 상황 | 권장 설정 |
|---|---|
| 항상 표시되는 배너 | 시스템이 지원한다면 날짜 제한을 비워 두거나 넓은 날짜 범위를 사용합니다. |
| 프로모션 배너 | 프로모션 기간에 맞게 Start Date와 End Date를 설정합니다. |
| 이벤트 공지 | 이벤트 종료일 이후 배너가 표시되지 않도록 End Date를 설정합니다. |
| 임시 점검 안내 | 짧은 날짜 범위를 사용하고 점검 완료 후 배너를 제거하거나 비활성화합니다. |
자주 사용하는 작업
| 작업 | 권장 방법 |
|---|---|
| 홈페이지 Hero 배너 | Hero HTML을 가진 배너를 만들고 Top Area 또는 메인 페이지에 숏코드를 넣습니다. |
| 프로모션 안내 | 프로모션 메시지와 활성 기간이 있는 배너를 생성합니다. |
| 사이트 전체 공지 | Top Area 또는 Header 같은 공통 레이아웃 영역에 배너 숏코드를 넣습니다. |
| 상품 캠페인 | 캠페인 배너를 만들고 상품 상세 또는 쇼핑몰 페이지에 배치합니다. |
| 재사용 HTML 블록 | 같은 HTML 블록을 여러 페이지에서 사용해야 할 때 배너로 관리합니다. |
권장 이름 규칙
배너 이름은 HTML에서 호출할 때 사용되므로 명확하고 예측 가능하게 작성하는 것이 좋습니다.
권장:
MainTopBanner
HomeHeroBanner
PromotionSummer2026
FooterNotice
ShopCouponBanner
피하는 것이 좋은 예:
banner1
test
new banner
Main Top Banner!!!주의사항
- 배너 이름은 배너 숏코드에서 사용하는 이름과 반드시 일치해야 합니다.
- 배너 콘텐츠에는 HTML을 넣을 수 있으므로 올바른 마크업인지 확인해야 합니다.
- 현재 운영 페이지에서 사용 중인 배너는 삭제하지 않도록 주의하세요.
- 여러 곳에서 재사용할 배너는 이름을 명확하게 작성하세요.
- 배너가 보이지 않을 경우 Start Date와 End Date를 확인하세요.
- 배너를 추가하거나 수정한 후에는 실제 페이지를 미리보기로 확인하세요.
문제 해결
| 문제 | 가능한 원인 | 해결 방법 |
|---|---|---|
| 배너가 보이지 않음 | 배너 이름이 숏코드 이름과 다르거나 표시 기간이 아닐 수 있습니다. | 배너 이름, 숏코드 문법, Start Date, End Date를 확인합니다. |
| 배너 화면이 깨짐 | HTML 마크업이 불완전하거나 잘못되었을 수 있습니다. | HTML 편집기에서 여는 태그와 닫는 태그를 확인합니다. |
| 이전 배너가 계속 보임 | 페이지 캐시가 남아 있거나 다른 배너를 호출하고 있을 수 있습니다. | 페이지를 새로고침하고 필요한 경우 캐시를 비우며 숏코드 이름을 확인합니다. |
| 예상 시간에 배너가 활성화되지 않음 | Start Date 또는 End Date가 잘못되었을 수 있습니다. | 날짜와 시간 값을 다시 확인합니다. |
| 삭제 후 필요한 배너가 사라짐 | 다른 페이지에서 아직 사용 중인 배너였을 수 있습니다. | 삭제 전 페이지나 레이아웃에서 해당 배너 숏코드를 검색합니다. |
관리 권장 사항
- 하나의 배너는 하나의 명확한 목적을 가지도록 관리하세요.
HomeHeroBanner,FooterNotice처럼 일관된 이름 규칙을 사용하세요.- 배너 HTML은 수정하기 쉽도록 깔끔하게 작성하세요.
- 배너 콘텐츠 안에는 너무 큰 스크립트를 넣지 않는 것이 좋습니다.
- 임시 캠페인에는 표시 기간을 설정하세요.
- 데스크톱과 모바일 화면에서 모두 테스트하세요.
- 큰 HTML 변경 전에는 기존 내용을 백업하세요.
배너는 재사용 가능한 HTML 블록입니다. 배너 이름, 표시 기간, 콘텐츠를 체계적으로 관리하면 여러 페이지의 디자인과 공지를 일관성 있게 유지할 수 있습니다.