LogoLogo
NHN커머스 메인개발자센터
  • 운영 가이드
    • 고도몰 시작하기
      • 관리자 화면 이해하기
      • 쇼핑몰 기본정보 입력하기
      • 도메인 등록 및 연결하기
      • 결제수단 연결하기
      • 배송비 조건 등록
      • 회원에 대한 조건 입력하기
      • 쇼핑몰 약관, 이용안내 입력하기
    • 기본 디자인 알아보기
      • 쇼핑몰 기본 꾸미기
        • 스킨 꾸미기
          • 메인 꾸미기
          • 상품 페이지 꾸미기
          • 검색 페이지 꾸미기
      • 디자인 관리
        • PC
        • 모바일
      • 배너 및 팝업창 관리
        • PC
        • 모바일
      • 쇼핑몰에 영상 추가하기
        • 앱 신청하기
        • 영상 업로드하기
        • 영상 추가하기
          • 메인 비쥬얼
          • 배너
      • 디자인 향상시키기
      • 무료스킨 디자인 수정 가이드
        • 🆙마이그릭(Mygreek)
          • 🖥️Mygreek_PC 스킨 가이드
          • 📱Mygreek_Mobile 스킨 가이드
        • 🆙바람숲(BaRamSoop)
          • 🖥️BaRamSoop_PC 스킨 가이드
          • 📱BaRamSoop_Mobile 스킨 가이드
        • 🆙위유위(Weyouwe)
          • 🖥️Weyouwe_PC 스킨 가이드
          • 📱Weyouwe_Mobile 스킨 가이드
        • 🆙소나루(Sonaru)
          • 🖥️Sonaru_PC 스킨 가이드
          • 📱Sonaru_Mobile 스킨 가이드
        • 🆙메이트앤코(Mate&Co)
          • 🖥️Mate&Co_PC 스킨 가이드
          • 📱Mate&Co_Mobile 스킨 가이드
        • 🆙퍼피레드(Puppyred)
          • 🖥️Puppyred_PC 스킨 가이드
          • 📱Puppyred_Mobile 스킨 가이드
        • 🆙글랜스(Glance)
          • 🖥️Glance_PC 스킨 가이드
          • 📱Glance_Mobile 스킨 가이드
        • 🆙케이스(Case)
          • 🖥️Case_PC 스킨 가이드
          • 📱Case_Mobile 스킨 가이드
        • 🆙아뜰리에(Atelier)
          • 🖥️Atelier_PC 스킨 가이드
          • 📱Atelier_Mobile 스킨 가이드
        • 🆙매치포인트(Matchpoint)
          • 🖥️Matchpoint_PC 스킨 가이드
          • 📱Matchpoint_Mobile 스킨 가이드
        • 🆙홍삶(Honglife)
          • 🖥️Honglife_PC 스킨 가이드
          • 📱Honglife_Mobile 스킨 가이드
        • 🆙베르데(Verde)
          • 🖥️Verde_PC 스킨 가이드
          • 📱Verde_Mobile 스킨 가이드
        • 🆙뽀끼(Bbokki)
          • 🖥️Bbokki_PC 스킨 가이드
          • 📱Bbokki_Mobile 스킨 가이드
        • 🆙쉐프초이스(Chef's Choice)
          • 🖥️Chef's Choice_PC 스킨 가이드
          • 📱Chef's Choice_Mobile 스킨 가이드
        • 🆙마카룸(Macaroom)
          • 🖥️Macaroom_PC 스킨 가이드
          • 📱Macaroom_Mobile 스킨 가이드
        • 🆙블리스(Bliss)
          • 🖥️Bliss_PC 스킨 가이드
          • 📱Bliss_Mobile 스킨 가이드
        • 🆙로스트리브(Roastrive)
          • 🖥️Roastrive_PC 스킨 가이드
          • 📱Roastrive_Mobile 스킨 가이드
        • 🆙띵(tting)
          • 🖥️tting_PC 스킨 가이드
          • 📱tting_Mobile 스킨 가이드
        • 🆙비키(Biki)
          • 🖥️Biki_PC 스킨 가이드
          • 📱Biki_Mobile 스킨 가이드
        • 🆙하나노떼(Hahanotte)
          • 🖥️Hahanotte_PC 스킨 가이드
          • 📱Hahanotte_Mobile 스킨 가이드
        • 🆙밥도둑
        • 🆙마이 플랜트(My Plant)
        • 🆙어반(URBAN)
        • 🆙어라운드(AROUND)
        • 럭스(Luxe)
        • 벤세르(VENCER)
        • 트렌디(TRENDY)
        • 해피애니멀(Happy Animall)
        • 니모(NIMO)
        • 클레마티스(clematis)
        • 어썸(Awesome)
        • 마임(MIME)
          • 🖥️MIME_PC 스킨 가이드
          • 📱MIME_Mobile 스킨 가이드
        • 투에이엠(2AM)
          • 🖥️2AM_PC 스킨 가이드
          • 📱2AM_Mobile 스킨 가이드
        • 해피키즈(Happy Kids)
          • 🖥️Happy Kids_PC 스킨 가이드
          • 📱Happy Kids_Mobile 스킨 가이드
        • 더 리빙(THE LIVING)
          • 🖥️THE LIVING_PC 스킨 가이드
          • 📱THE LIVING_Mobile 스킨 가이드
        • 퓨어(PURE)
          • 🖥️PURE_PC 스킨 가이드
          • 📱PURE_Mobile 스킨 가이드
        • 프레쉬(FRESH#)
          • 🖥️Fresh#_PC 스킨 가이드
          • 📱Fresh#_Mobile 스킨 가이드
        • 모먼트(Moment)
          • 🖥️Moment_PC 스킨 가이드
          • 📱Moment_Mobile 스킨 가이드
        • 스토리지(Storyg)
          • 🖥️Storyg_PC 스킨 가이드
          • 📱Storyg_Mobile 스킨 가이드
    • 상품 기본 관리
      • 상품 등록하기
      • 상품 진열하기
    • 주문/배송처리 알아보기
      • 주문/배송처리 과정 및 정책
    • 검색엔진 등록하기
      • 네이버 사이트 등록하기
      • 구글 사이트 등록하기
  • FAQ
    • 쇼핑몰 운영
      • 쇼핑몰 연장/복구
      • 쇼핑몰 해지
      • 소유권 이전
      • 트래픽
      • 디스크(스토리지) 용량 추가
      • 도메인 관리
        • 네임 서버
      • 패치&업그레이드
        • [23.12.06] 에디터 보안패치 이슈 케이스
        • [24.02.21] 상품등록/수정 성능(속도) 개선 건 패치 범위 안내
          • 자주 묻는 질문(FAQ)
      • 전자결제서비스
      • 이벤트 모니터링
      • 디자인센터
      • 튜닝센터
      • 쇼핑몰 기본정보
      • 부가서비스
    • 어드민 기능
      • 기본설정
        • 기본정책
        • 관리정책
        • 배송정책
        • 주문정책
        • 결제정책
        • 본인확인 인증서비스
        • 해외상점
        • 보안서버 관리
      • 상품관리
        • 상품 분류 관리
        • 상품 노출 형태 관리
      • 주문/배송
        • 주문관리
        • 취소/교환/반품/환불
        • 현금영수증
        • 세금계산서
        • 택배연동 서비스
        • 자동입금확인 서비스
      • 회원
        • 회원관리
        • 마일리지/예치금
        • 메일관리
        • SMS 관리
        • 간편로그인
          • 페이코 로그인 설정
          • 네이버 로그인 설정
          • 카카오 로그인 설정
          • 위메프 로그인 설정
        • 카카오 알림톡
        • CRM 그룹 관리
      • 게시판
      • 프로모션
        • 쿠폰관리
        • 페이퍼 쿠폰관리
        • 타임세일
        • SNS 관리
      • 디자인
        • 디자인 설정
        • 배너 관리
        • 팝업창 관리
      • 공급사
    • 신규창업
    • 쇼핑몰 이전
    • 커머스 회원/결제
  • 고도몰 성장 지원
  • 클래스
  • 고도몰 매뉴얼
  • NHN커머스 도움말
Powered by GitBook
LogoLogo

NHN COMMERCE

  • 공지사항
  • 회사소개

Partners

  • 서비스 제휴문의
  • 셀러어드민
  • 디자인 파트너

Developers

  • 스토어

©NHN COMMERCE Corp. All rights reserved.

On this page
  • Step 1. 배너 관리
  • 1-1. 배너 확인 및 수정하기
  • 1-2. 배너 등록(수정)하기
  • Step 2. 움직이는 배너 관리
  • 2-1. 움직이는 배너란?
  • 2-2. 움직이는 배너 확인 및 수정하기
  • 2-3. 움직이는 배너 등록(수정)하기 - (1) 기본설정
  • 2-4. 움직이는 배너 등록(수정)하기 - (2) 배너이미지 설정
  • Step 3. 팝업창 관리
  • 3-1. 팝업창이란?
  • 3-2. 팝업창 등록(수정)하기

Was this helpful?

  1. 운영 가이드
  2. 기본 디자인 알아보기
  3. 배너 및 팝업창 관리

모바일

PreviousPCNext쇼핑몰에 영상 추가하기

Last updated 6 months ago

Was this helpful?

Step 1. 배너 관리

  • 위치 : 모바일샵 > 모바일샵 디자인 설정 > 배너 관리

  • 기능설명

    • 주로 사용되는 배너 등을 스킨별로 등록하며, 배너 그룹을 생성하여 배너 관리를 할 수 있습니다.

    • 배너 이미지는 반드시 권상 사이즈에 맞춰 등록되어야 합니다.

1-1. 배너 확인 및 수정하기

  1. 신규 배너 등록을 원하는 경우 해당 버튼을 통해 배너 등록 페이지로 이동할 수 있습니다.

  2. 등록된 배너 이미지를 통해 쇼핑몰의 어느 위치에 적용되는 배너인지 확인할 수 있습니다.

  3. 배너가 적용되는 스킨을 확인할 수 있습니다.

  4. 배너가 소속된 배너 그룹이 표시됩니다.

  5. 수정 버튼을 통해 해당 배너를 수정할 수 있는 페이지로 이동할 수 있습니다.

치환코드란, HTML 편집을 진행할 경우, 보다 간편하게 수정 및 관리하기 위하여 해당 배너이미지와 관련된 HTML 태그를 간단한 코드로 변환한 값입니다.

1-2. 배너 등록(수정)하기

  1. 배너가 적용되어야 할 디자인 스킨을 선택합니다.

  2. 배너의 그룹을 선택합니다.

    • 배너 그룹을 추가하기 위해서는 배너관리에서 [배너 그룹 등록] 버튼을 이용하시면 됩니다.

  3. 해당 배너에 대한 URL 링크 연결이 필요하면 입력하며, 링크 타켓 연결방식을 지정할 수 있습니다. (현재창 혹은 새창)

  4. 웹 접근성 준수 의무화 법률에 따라 배너에 대한 설명은 반드시 입력해야 합니다.

  5. 배너 노출 기간을 선택하며, 기간 노출의 경우 시작일과 종료일 지정을 하여 노출 시기를 조절할 수 있습니다.


Step 2. 움직이는 배너 관리

  • 위치 : 모바일샵 > 모바일샵 디자인 설정 > 움직이는 배너 관리

  • 기능설명

    • 단순 이미지노출이 아닌 여러가지 이미지가 롤링되는 배너를 쉽게 꾸밀 수 있습니다.

    • 배너 이미지는 반드시 권상 사이즈에 맞춰 등록되어야 합니다.

2-1. 움직이는 배너란?

  1. 움직이는 배너란, 배너 안에서 여러가지 이미지가 롤링되면서 나오는 형태의 배너를 말합니다.

    • 주로 메인화면의 메인배너 등에서 사용되며, 다수의 배너 이미지를 노출하면서 보다 다양한 정보를 제공할 수 있습니다.

  2. 움직이는 배너 설정 중, [좌우 전환버튼]에 대해 노출 설정할 경우의 예시입니다.

    • 움직이는 배너의 등록된 이미지들은 설정된 시간에 따라 자동으로 이미지들이 전환되지만,

      고객이 직접 이미지전환을 할 수 있는 버튼 노출도 가능합니다.

  3. 움직이는 배너 설정 중, [네비게이션 설정]에 대해 노출 설정할 경우의 예시입니다.

    • 등록된 배너이미지가 총 몇 개며, 현재 보여지는 배너이미지가 몇 번째 이미지인지를 확인할 수 있습니다.


2-2. 움직이는 배너 확인 및 수정하기

  1. 움직이는 배너를 신규로 등록할 수 있는 페이지로 이동됩니다.

  2. 등록 및 수정하고자 하는 움직이는 배너가 적용되어 있는 스킨을 찾습니다.

  3. 움직이는 배너 제목이 표시됩니다.

  4. 움직이는 배너가 적용될 스킨명이 표시됩니다.

  5. 수정 버튼을 이용하여 움직이는 배너 수정창을 오픈한 후, 수정하려는 배너 정보를 수정하시면 됩니다.

치환코드란, HTML 편집을 진행할 경우, 보다 간편하게 수정 및 관리하기 위하여 해당 배너이미지와 관련된 HTML 태그를 간단한 코드로 변환한 값입니다.


2-3. 움직이는 배너 등록(수정)하기 - (1) 기본설정

  1. 배너의 제목을 입력합니다. (필수값)

    • 어드민 상에서 관리하기 편리한 배너명을 입력하시면 됩니다.

  2. 움직이는 배너를 적용할 스킨을 선택하셔야 정상적으로 노출됩니다.

  3. 해당 배너의 노출여부를 선택하며, 기간에 대해서도 항상 노출 및 특정기간에 노출여부를 설정 가능합니다.

  4. 이미지 전환과 관련된 설정입니다.

    • 전환 속도: 기존이미지에서 다음이미지로 바뀔 때의 속도입니다.

    • 전환 시간 설정: 이미지들이 노출되는 시간에 대한 설정입니다.

    • 효과 선택: 이미지들이 전환될 때의 효과로, 페이드란 기존이미지가 서서히 흐려지고 신규이미지가 서서히 진해지면서 나타나는 효과입니다.

  5. 좌우전환 버튼 및 네비게이션에 대한 노출여부 및 간단한 색상 설정 등을 할 수 있습니다.


2-4. 움직이는 배너 등록(수정)하기 - (2) 배너이미지 설정

  1. [추가]버튼을 이용하여 이미지들을 계속 추가할 수 있습니다.

  2. 움직이는 배너들에 사용되는 이미지들을 등록합니다.

    • 해당 배너에 대한 URL 링크 연결이 필요하면 입력하며, 링크 타켓 연결방식을 지정할 수 있습니다. (현재창 혹은 새창)

웹 접근성 준수 의무화 법률에 따라 배너에 대한 설명은 반드시 입력해야 합니다.

  1. 배너 이미지의 노출여부 및 노출기간을 일괄로 설정할 수 있습니다.

    • 배너 이미지 선택 후 [적용] 버튼 클릭 시 설정한 노출여부 및 노출기간으로 일괄로 적용됩니다.


Step 3. 팝업창 관리

  • 위치 : 모바일샵 > 모바일샵 디자인 설정 > 팝업창 관리

  • 기능설명 : 쇼핑몰에 정보제공을 위하여 새로 생성되는 새창인 팝업창을 등록, 관리할 수 있습니다.

3-1. 팝업창이란?

  1. 쇼핑몰화면에서 배너 혹은 기타 기존 디자인을 변경하지 않는 상태에서 새로운 정보를 제공할 필요가 있을 경우에는 팝업창 기능을 이용할 수 있습니다.

    • 메인화면 뿐만 아니라 [상품리스트 / 상품상세 / 장바구니 / 주문서 작성 / 주문완료 / 로그인 / 회원가입 / 회원완료] 등의 다양한 화면에서 노출될 수 있도록 등록이 가능합니다.

팝업창 형태는 크게 윈도우 팝업창 / 레이어 팝업창 형태로 나누어집니다.

  • 윈도우 팝업창의 경우, 윈도우 팝업창 차단 설정이 되어 있을 경우에는 노출되지 않으니 참고하시기 바랍니다.

  • 레이어 팝업창의 경우, 고객이 팝업창을 화면에서 움직임 가능여부를 선택할 수 있습니다.

    (고정 레이어 팝업 ­ 이동 불가 / 이동 레이어 팝업 ­ 이동 가능)


3-2. 팝업창 등록(수정)하기

  1. 팝업창의 제목을 입력합니다. (필수값)

    • 어드민 상에서 관리하기 편리한 팝업창명을 입력하시면 됩니다.

  2. 팝업창의 노출될 시간을 지정합니다. 설정된 기간만큼 자동을 노출됩니다.

    • 단, '오늘 하루 보이지 않음' 기능 사용 시에, 기간 내에 노출되지만 고객이 <오늘 하루 보이지 않음>을 선택하고 팝업창을 닫을 경우에는 해당일에는 더 이상 노출되지 않습니다.

  3. 팝업창 페이지란, 사용 중인 스킨의 팝업창 페이지 중 사용할 디자인 파일을 선택하는 항목입니다.

  4. 창크기란, 팝업의 크기를 지정하는 것이므로, 등록되는 팝업내용을 고려하여 사이즈를 지정하시기 바랍니다.

  5. 창위치란, 팝업창이 쇼핑몰에서 노출될 위치를 말하며, 위치의 기준점은 좌측 상단입니다.

(좌)윈도우팝업, (우)레이어팝업 예시