상단 배너 추가하기

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

관련 도움말