주요 사용하는 위젯입니다.

    $widget_data) { echo '
  • '.$widget_data['cda_krStr'].'
  • '; } ?>
$data) { $widget_data = $data['manual']?>

  • 위젯 도움말
  • CSS 도움말
  • HTML 도움말

설명

해당 위젯의 HTML 가이드가 등록되지 않았습니다.

Tip 모두펼침

제공되는 팁이 없습니다.

설명

해당 위젯의 CSS 가이드가 등록되지 않았습니다.

Tip 모두펼침

제공되는 팁이 없습니다.

설명

해당 위젯의 가이드가 등록되지 않았습니다.

Tip 모두펼침

제공되는 팁이 없습니다.

설명

 

 

Tip 모두펼침

제공되는 팁이 없습니다.

움직이는 배너 등록

꼭 확인하세요!!

  • 본 메뉴는 PC/모바일 스킨을 사용 중인 경우에만 정상 지원됩니다.
  • 반응형 스킨을 사용하는 경우 본 메뉴의 기능은 지원되지 않으며, 디자인 수정이 필요한 경우 [디자인 > 디자인 관리 > 디자인 스킨 리스트]에서 디자인 에디터를 이용해주세요.

별도의 개발을 하지 않고 간단한 설정으로 움직이는 배너(롤링 배너)를 생성할 수 있습니다.

배너는 이미지 혹은 이미지와 링크를 쇼핑몰 방문자에게 노출시켜 정보를 제공하거나 페이지 이동을 유도하는데 활용됩니다.

움직이는 배너 등록 시 치환코드가 생성되며, 생성된 치환코드를 디자인 페이지에 삽입하여 노출할 수 있습니다.

이미지를 서버에 등록하고 HTML로 직접 코딩하는 별도의 과정 없이도, 등록한 움직이는 배너의 치환코드를 디자인 페이지에 삽입하는 방식으로 배너 이미지 노출 및 링크 연결이 가능합니다.

기본 설정

움직이는 배너의 기본 정보를 설정합니다.

움직이는 배너 등록 시 "배너 제목 / 구분 / 디자인 스킨"은 필수 항목입니다.

관리자 화면

배너 제목

움직이는 배너의 제목을 입력할 수 있습니다.

  • 배너 제목은 필수 항목이며, 입력 문자 제한없이 최대 50자까지 등록가능합니다.
  • 쇼핑몰 화면에 노출되지 않으며 등록된 움직이는 배너의 관리를 위해 설정하는 항목입니다.

구분

PC와 모바일쇼핑몰 중 노출하고자 하는 쇼핑몰을 선택합니다.

쇼핑몰은 하나만 선택할 수 있으며, PC와 모바일쇼핑몰에 모두 노출하고자 하는 경우 움직이는 배너를 각각 등록하셔야 합니다.

디자인 스킨

움직이는 배너를 어떤 스킨에 등록할 지 선택할 수 있습니다.

  • 등록된 이미지는 선택한 스킨의 Web FTP 폴더에 저장됩니다.
  • 적용 스킨 선택은 필수 항목으로 선택하지 않을 경우 등록이 불가능합니다.

노출 여부

움직이는 배너의 쇼핑몰 노출 여부를 설정할 수 있습니다.

  • 노출 : 등록된 움직이는 배너가 노출됩니다.
  • 미노출 : 움직이는 배너가 노출되지 않습니다.
  • "노출 기간" 설정이 "기간 노출"일 경우, 노출 여부 설정과 무관하게 종료일 이후에는 배너가 노출되지 않습니다.

노출 기간

쇼핑몰에 노출될 움직이는 배너의 노출 기간을 설정할 수 있습니다.

  • 상시 노출 : 기간에 상관없이 움직이는 배너를 항상 노출합니다.
  • 기간 노출 : 일자와 시간을 설정하여 특정 기간동안 움직이는 배너를 노출합니다.
관리자 화면

전환 속도 선택

움직이는 배너의 이미지가 다음 이미지로 전환되는 속도를 설정할 수 있습니다.

  • "전환 속도 선택"은 다음 순서의 이미지로 전환되는 속도를 의미하며, 이미지별 노출 시간은 "전환 시간 설정"에서 설정할 수 있습니다.
  • "빠르게, 보통, 느리게" 중 선택할 수 있습니다.

전환 시간 설정

움직이는 배너의 이미지가 다음 이미지로 넘어가기 전 노출되는 시간을 설정할 수 있습니다.

시간은 "1초~10초" 중 선택할 수 있으며, "수동" 선택 시 사용자가 마우스로 클릭하는 경우에만 이미지가 전환됩니다.

효과 선택

움직이는 배너의 이미지가 다음 이미지로 전환 시의 효과를 설정할 수 있습니다.

"슬라이드, 페이드" 중 선택할 수 있습니다.

관리자 화면
1. 슬라이드"슬라이드" 설정 시 각 이미지가 좌우로 넘어가는 듯한 효과를 줄 수 있습니다.
2. 페이드"페이드" 설정 시 이전 순서 이미지가 서서히 사라지고 다음순서 이미지가 노출됩니다.

좌우 전환 버튼

움직이는 배너의 이미지를 좌우로 전환하는 버튼 노출 여부와 색상을 설정할 수 있습니다.

  • "노출" 설정 시 버튼의 색상을 설정할 수 있습니다.
  • 기본값은 흰색(#ffffff)으로 설정되어 있습니다.

네비게이션 설정

움직이는 배너에 등록된 이미지의 네비게이션 버튼의 노출 여부를 설정할 수 있습니다.

  • "노출" 설정 시 네비게이션의 "종류, 활성 색상, 비활성 색상, 크기"를 설정할 수 있습니다.
  • "미노출" 설정 시 사용자가 원하는 이미지로 쉽게 이동할 수 있는 네비게이션 버튼이 노출되지 않습니다.
  • "직접 등록" 설정 시 하단의 "배너이미지 설정"에서 각 이미지별로 네비게이션 활성 버튼을 설정할 수 있습니다.
관리자 화면
1. 좌우 전환 버튼움직이는 배너에 등록된 이미지를 좌우로 넘길 수 있는 "좌우 전환 버튼" 입니다.
2. 네비게이션 버튼움직이는 배너에 등록된 이미지를 좌우 전환 없이 선택하여 확인할 수 있는 "네비게이션 버튼" 입니다.

배너이미지 설정

등록할 움직이는 배너의 사이즈를 설정하고, 배너 이미지의 이미지 설명(alt와 title 값)을 등록할 수 있습니다.

웹 접근성 준수 의무화에 따라 배너 이미지 설명을 입력하여 배너를 생성하는 것을 권장합니다.

주의

alt : HTML의 img 태그에서 쓰이고, 브라우저에서 이미지를 표시할 수 없을 경우 이미지를 대신해 표시할 문자를 지정하기 위한 값입니다.

title : 이미지 위에 마우스 커서를 올려 놓을 때 출력되는 메시지 값으로 활용합니다.

시각장애인 등 이미지를 보지 못하는 사람을 위해 문서의 내용을 목소리로 변환해주는 음성 합성 기술을 이용하는 소프트웨어에서 사용됩니다.

예시)

  • 스크린 리더

2013년 4월 11일부터 시행하는 장애인 차별금지 및 권리구제 등에 관한 법률이 시행되면서 웹 접근성 준수가 의무화되었습니다.

이에 따라 이미지를 보지 못하는 사람을 위해 이미지를 글로 설명해주는 alt 값 설정을 위해 배너 이미지 설명은 필수항목 입니다.

배너 사이즈

움직이는 배너의 사이즈를 설정합니다.

  • 가로 사이즈를 %로 설정할 경우, 세로 사이즈는 가로 사이즈에 따라 비율이 자동으로 조정됩니다.
  • 이미지는 동일한 사이즈로 등록하시는 것을 권장합니다.

(이미지별로 사이즈가 다른 경우 배너가 틀어져 보일 수 있습니다.)

모바일쇼핑몰에서는 설정된 배너 사이즈에 상관없이 가로 사이즈가 100%로 노출됩니다.

배너 이미지

쇼핑몰에서 노출할 움직이는 배너의 이미지를 등록합니다.

  • 등록한 이미지 사이즈대로 노출되므로 등록 시 유의하시기 바랍니다.
  • 이미지는 최소 1개 이상 등록되어 있어야 저장이 가능합니다.
  • [찾아보기] : 버튼 클릭 시 이미지를 등록할 수 있습니다.
  • 링크 주소 : 배너 클릭 시 연결되는 페이지 주소를 등록할 수 있습니다. 기본값은 "현재창"으로 설정되어 있습니다
  • 현재창 : 이미지 클릭 시 현재 창에서 링크 주소로 이동합니다.
  • 새창 : 이미지 클릭 시 새탭에서 링크 주소가 열립니다.
  • 이미지 설명 : 배너 이미지의 alt와 title 값을 등록할 수 있습니다.
  • 노출여부 : 배너 이미지별로 노출 여부를 설정할 수 있습니다.
  • 노출기간 : 배너 이미지별로 노출 기간을 설정할 수 있습니다.

주의

웹 접근성 준수 의무화에 따라 배너 이미지 설명을 입력하여 배너를 생성하는 것을 권장합니다.

관리자 화면
1. 순서 설정 버튼배너 이미지가 노출되는 순서를 설정할 수 있습니다. 각 버튼의 화살표 방향대로 배너 이미지의 순서가 조정됩니다.
2. [배너 추가]버튼 클릭 시 배너 이미지를 등록할 수 있는 행이 추가됩니다.
3. [선택 삭제]삭제할 배너 이미지 선택 후 버튼 클릭 시 등록된 배너 이미지를 삭제할 수 있습니다.
4. 배너이미지 노출일괄설정 배너 이미지의 노출여부 및 노출기간을 일괄로 설정할 수 있습니다.
  • 배너 이미지 선택 후 [적용] 버튼 클릭 시 설정한 노출여부 및 노출기간으로 일괄로 적용됩니다.