■ 움직이는 배너 등록
- 별도의 개발을 하지 않고 간단한 설정으로 움직이는 배너(롤링 배너)를 생성할 수 있습니다.
- 배너는 이미지 혹은 이미지와 링크를 쇼핑몰 방문자에게 노출시켜 정보를 제공하거나 페이지 이동을 유도하는데 활용됩니다.
- 움직이는 배너 등록 시 치환코드가 생성되며, 생성된 치환코드를 디자인 페이지에 삽입하여 노출할 수 있습니다.
- 이미지를 서버에 등록하고 HTML로 직접 코딩하는 별도의 과정 없이도,
등록한 움직이는 배너의 치환코드를 디자인 페이지에 삽입하는 방식으로 배너 이미지 노출 및 링크 연결이 가능합니다.
▶ 기본 설정
- 움직이는 배너의 기본 정보를 설정합니다.
- 움직이는 배너 등록 시 "배너 제목 / 구분 / 디자인 스킨"은 필수 항목입니다.
· 배너 제목
: 움직이는 배너의 제목을 입력할 수 있습니다.
- 배너 제목은 필수 항목이며, 입력 문자 제한없이 최대 50자까지 등록가능합니다.
- 쇼핑몰 화면에 노출되지 않으며 등록된 움직이는 배너의 관리를 위해 설정하는 항목입니다.
· 구분
: PC와 모바일쇼핑몰 중 노출하고자 하는 쇼핑몰을 선택합니다.
- 쇼핑몰은 하나만 선택할 수 있으며, PC와 모바일쇼핑몰에 모두 노출하고자 하는 경우 움직이는 배너를 각각 등록하셔야 합니다.
ㆍ 디자인 스킨
: 움직이는 배너를 어떤 스킨에 등록할 지 선택할 수 있습니다.
- 등록된 이미지는 선택한 스킨의 Web FTP 폴더에 저장됩니다.
- 적용 스킨 선택은 필수 항목으로 선택하지 않을 경우 등록이 불가능합니다.
ㆍ 노출 여부
: 움직이는 배너의 쇼핑몰 노출 여부를 설정할 수 있습니다.
- 노출 : 등록된 움직이는 배너가 노출됩니다.
- 미노출 : 움직이는 배너가 노출되지 않습니다.
- "노출 기간" 설정이 "기간 노출"일 경우, 노출 여부 설정과 무관하게 종료일 이후에는 배너가 노출되지 않습니다.
ㆍ 노출 기간
: 쇼핑몰에 노출될 움직이는 배너의 노출 기간을 설정할 수 있습니다.
- 상시 노출 : 기간에 상관없이 움직이는 배너를 항상 노출합니다.
- 기간 노출 : 일자와 시간을 설정하여 특정 기간동안 움직이는 배너를 노출합니다.
ㆍ 전환 속도 선택
: 움직이는 배너의 이미지가 다음 이미지로 전환되는 속도를 설정할 수 있습니다.
- "전환 속도 선택"은 다음 순서의 이미지로 전환되는 속도를 의미하며, 이미지별 노출 시간은 "전환 시간 설정"에서 설정할 수 있습니다.
- "빠르게, 보통, 느리게" 중 선택할 수 있습니다.
ㆍ 전환 시간 설정
: 움직이는 배너의 이미지가 다음 이미지로 넘어가기 전 노출되는 시간을 설정할 수 있습니다.
- 시간은 "1초~10초" 중 선택할 수 있으며, "수동" 선택 시 사용자가 마우스로 클릭하는 경우에만 이미지가 전환됩니다.
ㆍ 효과 선택
: 움직이는 배너의 이미지가 다음 이미지로 전환 시의 효과를 설정할 수 있습니다.
- "슬라이드, 페이드" 중 선택할 수 있습니다.
① "슬라이드" 설정 시 각 이미지가 좌우로 넘어가는 듯한 효과를 줄 수 있습니다.
② "페이드" 설정 시 이전 순서 이미지가 서서히 사라지고 다음순서 이미지가 노출됩니다.
ㆍ 좌우 전환 버튼
: 움직이는 배너의 이미지를 좌우로 전환하는 버튼 노출 여부와 색상을 설정할 수 있습니다.
- "노출" 설정 시 버튼의 색상을 설정할 수 있습니다.
- 기본값은 흰색(#ffffff)으로 설정되어 있습니다.
ㆍ 네비게이션 설정
: 움직이는 배너에 등록된 이미지의 네비게이션 버튼의 노출 여부를 설정할 수 있습니다.
- "노출" 설정 시 네비게이션의 "종류, 활성 색상, 비활성 색상, 크기"를 설정할 수 있습니다.
- "미노출" 설정 시 사용자가 원하는 이미지로 쉽게 이동할 수 있는 네비게이션 버튼이 노출되지 않습니다.
- "직접 등록" 설정 시 하단의 "배너이미지 설정"에서 각 이미지별로 네비게이션 활성 버튼을 설정할 수 있습니다.
① 움직이는 배너에 등록된 이미지를 좌우로 넘길 수 있는 "좌우 전환 버튼" 입니다.
② 움직이는 배너에 등록된 이미지를 좌우 전환 없이 선택하여 확인할 수 있는 "네비게이션 버튼" 입니다.
▶ 배너이미지 설정
- 등록할 움직이는 배너의 사이즈를 설정하고, 배너 이미지의 이미지 설명(alt와 title 값)을 등록할 수 있습니다.
- 웹 접근성 준수 의무화에 따라 배너 이미지 설명을 입력하여 배너를 생성하는 것을 권장합니다.
* alt : HTML의 img 태그에서 쓰이고, 브라우저에서 이미지를 표시할 수 없을 경우 이미지를 대신해 표시할 문자를 지정하기 위한 값입니다.
* title : 이미지 위에 마우스 커서를 올려 놓을 때 출력되는 메세지 값으로 활용합니다.
- 시각장애인 등 이미지를 보지 못하는 사람을 위해 문서의 내용을 목소리로 변환해주는 음성 합성 기술을 이용하는 소프트웨어에서 사용됩니다. 예시) 스크린 리더
- 2013년 4월 11일부터 시행하는 장애인 차별금지 및 권리구제 등에 관한 법률이 시행되면서 웹 접근성 준수가 의무화되었습니다.
이에 따라 이미지를 보지 못하는 사람을 위해 이미지를 글로 설명해주는 alt 값 설정을 위해 배너 이미지 설명은 필수항목 입니다.
ㆍ 배너 사이즈
: 움직이는 배너의 사이즈를 설정합니다.
- 가로 사이즈를 %로 설정할 경우, 세로 사이즈는 가로 사이즈에 따라 비율이 자동으로 조정됩니다.
- 이미지는 동일한 사이즈로 등록하시는 것을 권장합니다.
(이미지별로 사이즈가 다른 경우 배너가 틀어져 보일 수 있습니다.)
- 모바일쇼핑몰에서는 설정된 배너 사이즈에 상관없이 가로 사이즈가 100%로 노출됩니다.
ㆍ 배너 이미지
: 쇼핑몰에서 노출할 움직이는 배너의 이미지를 등록합니다.
- 등록한 이미지 사이즈대로 노출되므로 등록 시 유의하시기 바랍니다.
- 이미지는 최소 1개 이상 등록되어 있어야 저장이 가능합니다.
- [찾아보기] : 버튼 클릭 시 이미지를 등록할 수 있습니다.
- 링크 주소 : 배너 클릭 시 연결되는 페이지 주소를 등록할 수 있습니다. 기본값은 "현재창"으로 설정되어 있습니다
- 현재창 : 이미지 클릭 시 현재 창에서 링크 주소로 이동합니다.
- 새창 : 이미지 클릭 시 새탭에서 링크 주소가 열립니다.
- 이미지 설명 : 배너 이미지의 alt와 title 값을 등록할 수 있습니다.
- 노출여부 : 배너 이미지별로 노출 여부를 설정할 수 있습니다.
- 노출기간 : 배너 이미지별로 노출 기간을 설정할 수 있습니다.
* 웹 접근성 준수 의무화에 따라 배너 이미지 설명을 입력하여 배너를 생성하는 것을 권장합니다.
① 순서 설정 버튼 : 배너 이미지가 노출되는 순서를 설정할 수 있습니다. 각 버튼의 화살표 방향대로 배너 이미지의 순서가 조정됩니다.
② [배너 추가] : 버튼 클릭 시 배너 이미지를 등록할 수 있는 행이 추가됩니다.
③ [선택 삭제] : 삭제할 배너 이미지 선택 후 버튼 클릭 시 등록된 배너 이미지를 삭제할 수 있습니다.
④ 배너이미지 노출일괄설정 : 배너 이미지의 노출여부 및 노출기간을 일괄로 설정할 수 있습니다.
- 배너 이미지 선택 후 [적용] 버튼 클릭 시 설정한 노출여부 및 노출기간으로 일괄로 적용됩니다.
