12. 메인 배너 만들기

🖼️ 메인 배너란?

메인 배너는 페이지 상단에 크게 노출되어 쇼핑몰의 첫인상을 결정하는 중요한 영역이에요.

신상품, 기획전, 시즌 이벤트 등 방문자에게 가장 먼저 보여주고 싶은 소식을 큰 이미지로 강조할 수 있어요.

배너는 [섹션 추가] 패널의 '배너' 카테고리에서 만들 수 있으며, 총 세 가지 종류의 섹션이 준비되어 있어요.

섹션	설명
슬라이드 배너	여러 장의 이미지가 자동으로 넘어가는 형태의 배너예요. 여러 소식을 번갈아 보여주고 싶을 때 사용해요.
배너	한 장의 이미지로 구성된 단일 배너예요. 하나의 메시지를 강렬하게 전하고 싶을 때 사용해요.
이미지+텍스트	이미지와 텍스트를 함께 배치하는 배너예요. 이미지 곁에 설명 문구를 더해 상세히 소개하고 싶을 때 사용해요.

세 가지 섹션 모두 [섹션 추가] 메뉴를 통해 간편하게 넣을 수 있어요. 자세한 추가 방법은 06. 섹션 추가하고 편집하기를 참고해 주세요.

🎞️ 슬라이드 배너 만들기

슬라이드 배너는 여러 장의 슬라이드가 자동으로 넘어가는 배너예요. 먼저 섹션을 추가한 뒤, 개별 슬라이드를 하나씩 채워가며 완성해 보세요.

슬라이드 배너 크기 설정

설정	설명
너비	배너를 화면 전체 너비에 꽉 차게 보여줄지, 본문 너비에 맞춰 보여줄지 선택해요.
높이	높이를 지정된 크기로 고정할지, 화면 비율에 맞출지 선택해요. 데스크톱과 모바일 환경에 맞춰 각각 다르게 지정할 수도 있어요.

슬라이드 채우기

배너 내부는 [슬라이드] 위젯을 사용해 각 장을 채우게 돼요. 이 위젯은 슬라이드 배너 섹션 안에서만 추가할 수 있는 전용 위젯이랍니다.

설정	설명
정렬·위치	슬라이드 내부 콘텐츠의 정렬 방식과 위치를 조정해요.
콘텐츠	슬라이드에 들어갈 이미지나 동영상을 등록해요. 필요하다면 모바일 환경에 맞춰 다른 이미지를 적용할 수도 있어요.
노출 기간	슬라이드가 노출될 시작일시와 종료일시를 설정해요. 설정해 둔 기간에만 슬라이드가 자동으로 나타나요.

💡 TIP 슬라이드 배너 섹션에는 제목, 본문, 버튼 위젯이 기본적으로 포함되어 있어요. 위젯을 새로 추가할 필요 없이, 기존 위젯을 편집하여 이미지 위에 문구와 이동 버튼을 쉽게 배치해 보세요. 사용하지 않는 항목은 '미노출'로 설정하여 깔끔하게 정리할 수 있어요.

💡 참고 슬라이드 전환 속도, 좌우 이동 버튼, 페이징 버튼(점) 등의 디자인은 공통 스타일의 슬라이드 설정을 따라요. 이는 쇼핑몰 내 모든 슬라이드 배너에 동일하게 적용되며, 02. 공통 스타일 설정하기에서 한 번에 관리할 수 있어요.

🏞️ 단일 배너 만들기

단 한 장의 이미지로 쇼핑몰의 첫인상을 강렬하게 전달하고 싶다면 [배너] 섹션을 활용해 보세요.

설정	설명
이미지	배너에 띄울 이미지를 업로드해요. 모바일 전용 이미지를 따로 설정할 수도 있어요.
정렬·위치	배너 내부 콘텐츠의 정렬 방식과 위치를 조정해요.
너비·높이	너비와 높이(또는 화면 비율)를 설정해요.

💡 TIP 배너 섹션에는 제목, 본문, 버튼 위젯이 기본적으로 포함되어 있어요. 위젯을 새로 추가할 필요 없이, 기존 위젯을 편집하여 이미지 위에 문구와 이동 버튼을 쉽게 배치해 보세요. 사용하지 않는 항목은 '미노출'로 설정하여 깔끔하게 정리할 수 있어요.

🖼️ 이미지와 텍스트로 배너 만들기

이미지와 함께 상세한 설명 문구를 보여주고 싶다면 [이미지+텍스트] 섹션이 제격이에요.

이미지 곁에 텍스트를 나란히 배치할 수 있어서, 브랜드 스토리나 상품 소개 등 부가 설명이 필요한 콘텐츠를 전달하기에 무척 좋답니다.

설정	설명
정렬·위치	섹션 내부 콘텐츠의 정렬 방식과 위치를 조정해요.
너비·간격	섹션을 화면 전체에 꽉 차게 할지 본문 너비에 맞출지 선택하고, 내부 요소들 사이의 간격도 알맞게 설정해요.

💡 자주 묻는 질문

슬라이드 배너와 배너는 무엇이 다른가요?

슬라이드 배너는 여러 장의 이미지가 순차적으로 넘어가는 형태이고, 배너는 한 장의 이미지로만 구성된 단일 배너예요.

여러 가지 소식을 번갈아 노출하고 싶을 때는 슬라이드 배너를, 단 하나의 핵심 메시지를 강조하고 싶을 때는 배너를 사용해 보세요.

슬라이드 이미지 위에 글자나 버튼을 넣고 싶어요.

슬라이드 배너 섹션을 추가하면 제목, 본문, 버튼 위젯이 기본적으로 포함되어 나타나요.

따라서 위젯을 새로 추가할 필요 없이, 기본 제공되는 위젯의 내용만 수정해도 이미지 위에 문구와 버튼을 쉽게 올릴 수 있답니다.

만약 사용하지 않는 요소가 있다면 설정에서 '미노출'로 숨겨주세요.

특정 슬라이드를 정해진 기간에만 보여주고 싶어요.

슬라이드 설정에서 '노출 기간'의 시작일시와 종료일시를 지정해 보세요.

설정한 기간에만 슬라이드가 자동으로 나타나게 돼요.

시즌 이벤트나 기획전용 슬라이드를 미리 만들어 두고 노출 기간만 예약해 두면 쇼핑몰 관리가 한결 편리해져요.

PC와 모바일에서 배너 이미지를 다르게 보여줄 수 있나요?

네, 모든배너는 모바일 환경에 맞춰 다른 이미지를 적용할 수 있어요.

설정에서 "모바일에서 동일한 미디어 사용" 옵션을 끄고 모바일 전용 이미지를 등록하면, 접속하는 기기 화면에 꼭 맞는 배너를 보여줄 수 있답니다.