상단 배너 추가하기 : 애드리빙

디자인상단 배너 추가하기

도움말

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

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

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

참고: 템플릿 수정에는 Adobe 포토샵 또는 PSD를 편집할 수 있는 그래픽 소프트웨어가 필요합니다.

상단 배너 템플릿 파일을 내려받습니다. 템플릿 다운로드
내려받은 파일의 압축을 풀고, 폴더 3개(PNG, PSD, Reference)를 확인합니다.
PSD 폴더를 더블-클릭해 열어줍니다.
top_ban_pc_by_imwebcampus.psd 파일을 열어줍니다.
레이어 창을 열어 각 레이어에 포함되어야 할 내용을 확인합니다.
- 타이틀 레이어: 제목 타이틀 텍스트를 변경할 수 있습니다.
- 서브-타이틀 레이어 : 부제목 타이틀 텍스트를 변경할 수 있습니다.
- 배경 레이어 : 배경이미지를 더하거나 색상을 변경할 수 있습니다.
가로 길이는 1280px, 1440px, 1920px, 2560px 정도로 설정하고, 세로는 자유입니다. 템플릿의 경우 1280x88픽셀(px)로 설정되어 있습니다. (참고: 사실 정해진 크기는 없습니다. 사이트의 본문폭 및 콘셉트에 따라 자유롭게 지정해 주세요.)
배너 이미지 제작을 완료하면, 웹용 이미지로 저장합니다. (파일 형식: JPG, JPEG, PNG)

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

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

내 사이트 관리자 페이지에 접속합니다. 접속방법
왼쪽 메뉴에서 [환경설정 > 팝업/배너 관리]를 클릭합니다.
오른쪽 상단의 팝업 추가 버튼을 클릭합니다.
팝업 옵션을 설정합니다.
- 제목: 제목을 입력합니다. 방문자에게는 보이지 않으며, 배너 구분을 위해 입력합니다.
- 기간: 배너가 표시되는 기간을 설정합니다.
- 대상기기: 상단 배너가 표시될 기기를 선택합니다. 지금은 데스크톱만 선택합니다. 모바일용 상단 배너는 이 도움말 하단의 '모바일 상단 배너 만들기'를 참고해 주세요.
- 노출 페이지: 상단 배너를 표시할 페이지(들)를 선택합니다.
- 적용 조건: 모든 방문자 또는 로그인한 회원에게만 표시하도록 선택할 수 있습니다.
- 위치/형태: 상단 배너를 선택합니다.
- 이미지: 제작한 이미지 파일을 업로드합니다.
- 이미지 링크: 상단 배너 클릭 시 이동할 주소(URL)를 입력합니다.
- PC 높이: PC 배너가 표시될 영역의 높이를 설정합니다. 템플릿 크기를 그대로 사용하는 경우 88로 입력합니다.
- 배경색: 배너 이미지와 같은 색상값을 입력하여, 이미지가 닿지 않는 바깥 영역의 배경색을 입력합니다. 템플릿을 사용하는 경우 #eeeeee 색상값을 입력합니다.
  주의: 배경색을 설정하지 않는 경우 상단 배너 좌우로 공백이 생겨날 수 있습니다.
- 닫기 버튼색: '1일 동안 보지 않음' 텍스트 및 닫기 아이콘 색상을 변경합니다.
저장 버튼을 클릭해 적용합니다.
디자인 모드 오른쪽 상단의 미리보기 아이콘을 클릭합니다.
상단 배너가 적절하게 표시되는지 확인합니다.
문제가 없다면 디자인 모드로 돌아가 게시하기 버튼을 클릭해 적용합니다.

모바일 상단 배너 만들기

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

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