쇼핑몰 설정하기


팝업상단 배너 추가하기

웹사이트 상단에 디스플레이 배너를 표시할 수 있습니다. 이 튜토리얼에서는 템플릿 파일을 사용해 기본적인 형태의 상단 배너를 제작하는 방법에 대해 알아봅니다.


1단계: 상단 배너 이미지 만들기

상단 배너에 추가할 배너 이미지를 준비합니다. 필요에 따라 다음의 템플릿을 내려받아 수정해 사용할 수 있습니다. 배너 이미지가 이미 준비된 경우 이 단계는 건너뜁니다.

참고: 템플릿 수정에는 Adobe 포토샵 또는 PSD를 편집할 수 있는 그래픽 소프트웨어가 필요합니다.
  1. 상단 배너 템플릿 파일을 내려받습니다. 
  2. 내려받은 파일의 압축을 풀고, 폴더 3개(PNG, PSD, Reference)를 확인합니다.
  3. PSD 폴더를 더블-클릭해 열어줍니다.
  4. top_ban_pc_by_imwebcampus.psd 파일을 열어줍니다.
  5. 레이어 창을 열어 각 레이어에 포함되어야 할 내용을 확인합니다.

    • 타이틀 레이어: 제목 타이틀 텍스트를 변경할 수 있습니다.
    • 서브-타이틀 레이어 : 부제목 타이틀 텍스트를 변경할 수 있습니다.
    • 배경 레이어 : 배경이미지를 더하거나 색상을 변경할 수 있습니다.
  6. 가로 길이는 1280px, 1440px, 1920px, 2560px 정도로 설정하고, 세로는 자유입니다. 템플릿의 경우 1280x88픽셀(px)로 설정되어 있습니다. (참고: 사실 정해진 크기는 없습니다. 사이트의 본문폭 및 콘셉트에 따라 자유롭게 지정해 주세요.)

  7. 배너 이미지 제작을 완료하면, 웹용 이미지로 저장합니다. (파일 형식: JPG, JPEG, PNG)

2단계: 상단 배너 설정하기

데스크톱(PC) 전용 상단 배너를 설정합니다.

  1. 내 사이트 관리자 페이지에 접속합니다. 접속방법
  2. 왼쪽 메뉴에서 [환경설정 > 팝업/배너 관리]를 클릭합니다.
  3. 오른쪽 상단의 팝업 추가 버튼을 클릭합니다.
  4. 팝업 옵션을 설정합니다.

    • 제목: 제목을 입력합니다. 방문자에게는 보이지 않으며, 배너 구분을 위해 입력합니다.
    • 기간: 배너가 표시되는 기간을 설정합니다.
    • 대상기기: 상단 배너가 표시될 기기를 선택합니다. 지금은 데스크톱만 선택합니다. 모바일용 상단 배너는 이 도움말 하단의 '모바일 상단 배너 만들기'를 참고해 주세요.
    • 노출 페이지: 상단 배너를 표시할 페이지(들)를 선택합니다.
    • 적용 조건: 모든 방문자 또는 로그인한 회원에게만 표시하도록 선택할 수 있습니다.
    • 위치/형태: 상단 배너를 선택합니다.
    • 이미지: 제작한 이미지 파일을 업로드합니다.
    • 이미지 링크: 상단 배너 클릭 시 이동할 주소(URL)를 입력합니다.
    • PC 높이: PC 배너가 표시될 영역의 높이를 설정합니다. 템플릿 크기를 그대로 사용하는 경우 88로 입력합니다.
    • 배경색: 배너 이미지와 같은 색상값을 입력하여, 이미지가 닿지 않는 바깥 영역의 배경색을 입력합니다. 템플릿을 사용하는 경우 #eeeeee 색상값을 입력합니다.

      주의: 배경색을 설정하지 않는 경우 상단 배너 좌우로 공백이 생겨날 수 있습니다.

    • 닫기 버튼색: '1일 동안 보지 않음' 텍스트 및 닫기 아이콘 색상을 변경합니다.

  5. 저장 버튼을 클릭해 적용합니다.
  6. 디자인 모드 오른쪽 상단의 미리보기 아이콘을 클릭합니다.
  7. 상단 배너가 적절하게 표시되는지 확인합니다.
  8. 문제가 없다면 디자인 모드로 돌아가 게시하기 버튼을 클릭해 적용합니다.



모바일 상단 배너 만들기

PC용으로 제작한 상단 배너 이미지는 모바일에서 너무 작기 때문에 그림 및 텍스트의 가독성이 떨어질 수 있습니다. 이 경우 모바일 전용 팝업을 하나 더 만들어 주는 것이 제작 및 관리에 더 효과적일 수 있습니다.

  1. 아래 그림을 참고해 모바일용 상단 배너 이미지를 제작합니다. 필요에 따라 위 1단계에서 내려받은 템플릿 중 reference_top_ban_mob_by_imwebcampus.psd 를 제작에 활용할 수 있습니다.

    참고: 아래 이미지에서 빨간 점선 영역은 닫기 아이콘이 표시되는 영역입니다.
  2. 내 사이트 관리자 페이지의 [환경설정 > 팝업/배너 관리]로 이동합니다.
  3. 오른쪽 상단의 팝업 추가 버튼을 클릭합니다.
  4. 위 2단계를 참고해 팝업 옵션을 설정합니다. 단, 아래의 옵션들은 다음과 같이 설정합니다.
    • 대상기기: 모바일만 선택합니다.
    • PC 높이: 대상기기를 모바일만 선택했으니 이 옵션은 무시하고 건너뜁니다.
    • MOBILE 높이: 모바일 배너 이미지 세로 크기를 입력합니다. 템플릿 크기를 그대로 사용하는 경우 200으로 입력합니다.
  5. 저장 버튼을 클릭해 적용합니다.


상단 배너 배포용 PSD 템플릿 파일

파일정보

  • 파일 크기 및 형식: 581KB, ZIP 압축
  • 파일 구성: PSD PC용, 모바일용

사용방법

아래 첨부파일을 내려받아 압축을 풀어주세요.
참고: PSD는 Adobe 포토샵 전용 파일입니다.


상단배너 만들기 파일 다운 받기


문의하기

홈페이지 및 쇼핑몰 제작에 대한 걱정 NO !!

처음 홈페이지나 쇼핑몰, 기업 홈페이지를 제작하시는 분들도 걱정하지 않으셔도 됩니다. 

푸시웹은 마치 내 집을 짓는 듯한 정성과 세심함으로 여러분의 아이디어와 비즈니스를 현실로 옮겨 드립니다. 

어떤 질문이든 부담 없이 문의해 주세요. 우리는 여러분의 성공적인 온라인 비즈니스 파트너가 되고자 합니다.

푸시웹(푸쉬웹)

2012년 모바일 앱 제작으로 첫발을 내딛은 이래, 2014년 PC 홈페이지, 모바일 웹, 앱 간의 원활한 연동 시스템 개발을 통해 기술적 기반을 다졌습니다. 이러한 경험을 바탕으로, 2016년 1월에는 다양한 업종을 위한 반응형 홈페이지, 쇼핑몰, 펜션 웹 솔루션을 선보이며 서비스 범위를 확장했습니다. 우리는 고객에게 최상의 사용 경험을 제공하고, 시대의 흐름에 맞춘 서비스 개발에 지속적으로 힘쓰고 있습니다.

대표자명 : 김형연

개인정보책임자: 허서윤

사업자등록번호:809-06-00700

통신판매업신고번호:제 2017-경기안산-0242호


서울 : 서울시 금천구 가산동 50-3 대륭포스트 6차 707호 가산디지털단지역 2번출구 바로 앞


경기: 경기도 안산시 상록구 수암길33, 101동 401호


호스트서버 소재지 : 서울시 강남구 논현로 508, GS타워 12층 

대표전화070-7517-8832
상담직통010-5264-8829
자료 전송pushweb@naver.com
국민은행
계좌: 666201-01-678489
예금주: 푸시웹
고객센터
070.7517.8832