팝업·상단 배너 추가하기

사이트에 팝업을 노출할 수 있습니다. 팝업의 형태, 크기, 노출할 페이지, 기간, 대상, 기기까지 다양한 옵션을 지원합니다.

중요: 여러 개의 팝업 노출은 방문자의 사이트 이용에 방해가 될 수 있으므로 꼭 필요한 만큼 추가하실 것을 권장합니다.

팝업 추가하기

  1. 사이트주소/admin/config/popup 링크로 이동합니다.
  2. 팝업 추가 버튼을 클릭합니다.
  3. 팝업을 설정합니다. 자세한 설정 옵션은 아래 추가 도움말을 참고해 주세요.
  4. 저장 버튼을 클릭합니다.
  5. 팝업/배너 관리 페이지 오른쪽 상단의 사이트 확인하기 버튼을 클릭해 정상적으로 표시되는지 확인합니다.

팝업 설정 옵션 살펴보기

  • 제목: 관리자용 팝업 배너 제목을 입력합니다. 회원에겐 표시되지 않습니다.
  • 기간: 팝업이 노출되는 기간을 설정합니다.
  • 대상 기기: 팝업이 노출될 기기를 선택합니다. 데스크톱(PC), 모바일 모두 선택할 수 있습니다.
  • 노출 페이지: 팝업을 노출할 페이지를 선택합니다.
  • 적용 조건: 팝업을 노출할 대상을 선택합니다. 모든 방문자 또는 회원에게만 노출할 수 있습니다.
  • 위치/형태: 팝업의 형태 및 노출될 위치를 설정합니다. 팝업 레이어 또는 상단 배너 중 하나를 선택할 수 있습니다. 형태 설정 후에는 팝업의 위치를 지정합니다.
  • 버튼 설정: 팝업 하단에 버튼 표시 여부를 선택합니다.
  • 우측 상단 닫기 설정: 팝업 배너 오른쪽 상단에 위치한 닫기 버튼을 설정합니다.
  • PC 팝업 위치: PC 버전에서 노출될 팝업의 위치를 설정합니다.
  • 모바일 팝업 위치: 모바일 기기에서 팝업의 위치를 설정합니다.
  • 이미지: 팝업 이미지를 업로드합니다. *파일 형식 : JPG, PNG, GIF
  • 이미지 링크: 팝업 클릭 시 이동할 페이지 주소(URL)를 입력합니다. 새 창에서 열기 선택 시 새 브라우저 탭으로 열립니다.
  • 너비: 팝업의 너비(가로)를 픽셀(px) 단위로 입력합니다. 너비에 따라 높이는 자동 설정됩니다.

상단 배너 추가하기

상단 배너도 같은 팝업 화면에서 만들어요. 팝업 설정에서 위치/형태를 '상단 배너'로 바꾸면 돼요.

웹사이트 상단에 디스플레이 배너를 표시할 수 있습니다. 기본적인 형태의 상단 배너를 제작하는 방법에 대해 안내드립니다.


1단계: 상단 배너 이미지 준비하기

상단 배너로 사용할 이미지를 준비합니다.

참고: 아임웹은 반응형 웹 제작 솔루션이므로 PC, 태블릿, 모바일 등 기기 해상도에 따라 이미지 크기가 달라집니다.
따라서 특정 이미지 크기를 고정하기보다, 사이트의 본문 폭과 디자인 콘셉트에 맞춰 자유롭게 제작해 주세요.
일반적으로 PC 버전은 1920px, 모바일 버전은 768~780px 사이의 크기를 권장드립니다.

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

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

  1. 사이트주소/admin/config/popup 링크로 이동합니다.
  2. 오른쪽 상단의 팝업 추가 버튼을 클릭합니다.
  3. 팝업 옵션을 설정합니다.

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

      주의: 배경색을 설정하지 않는 경우 상단 배너 좌우로 공백이 생겨날 수 있습니다.
    • 닫기 버튼색: '1일 동안 보지 않음' 텍스트 및 닫기 아이콘 색상을 변경합니다.

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

3단계: 모바일 상단 배너 설정하기

모바일 전용 상단 배너는 PC 배너와 동일한 방법으로 등록할 수 있습니다.
단, 아래 옵션들은 모바일 전용으로 설정해야 합니다.

참고: PC용으로 제작한 상단 배너 이미지는 모바일 화면에서 너무 작아, 그림이나 텍스트의 가독성이 떨어질 수 있습니다.
이 경우 모바일 전용 팝업을 하나 더 만들어 주는 것이 제작과 관리 측면에서 더 효과적일 수 있습니다.
  1. PC 상단 배너와 동일한 경로에서 팝업 추가 버튼을 클릭합니다.
  2. 팝업 설정 항목 중 다음 옵션을 아래와 같이 지정합니다.
  • 대상기기: 모바일만 선택합니다.
  • PC 높이: 대상기기를 모바일로만 선택했으므로 이 옵션은 무시하고 건너뜁니다.
  • MOBILE 높이: 모바일 배너 이미지의 세로 크기를 입력합니다.

설정을 마친 후 저장 버튼을 클릭하면 모바일 상단 배너가 적용됩니다.

참고: 모바일 배너는 화면 크기에 따라 자동으로 비율이 조정되므로, 이미지 내 텍스트나 버튼은 너무 작게 디자인하지 않는 것이 좋습니다.