아임웹 팁&테크

다양한 활용법, 최신 기능을 알고 싶을 땐 아임웹 팁&테크

디자인아임웹 상단 배너 템플릿과 제작 팁


SECTION 1. 시작에 앞서

아임웹에는 팝업을 띄우거나 페이지 최상단에 디스플레이 배너를 표시할 수 있는 기능이 있습니다. 팝업 레이어의 경우 파워포인트 등을 이용해 비교적 쉽게 만들 수 있지만 상단 배너의 경우 브라우저 크기, 디스플레이 해상도까지 고려해줘야 하기 때문에 제작이 다소 까다로운 감이 있습니다.

이번 팁&테크에서는 아래 템플릿 파일과 함께 기본적인 형태의 상단 배너를 제작하는 방법을 알아보겠습니다.



SECTION 2. 템플릿 파일 다운로드

먼저 상단 배너 템플릿 파일을 다운로드해주세요.

*파일 정보 : 598KB, ZIP 압축



SECTION 3. 템플릿 구성 소개

1. 템플릿 구성 및 PSD 파일 레이어 설명

먼저 다운로드한 파일의 압축을 풀어주세요. 그럼 다음과 같이 PSD, Reference 폴더 2개, 이미지가 2개 있는 걸 보실 수 있습니다.

다음으로 포토샵을 켜고, PC용 상단 배너 PSD 파일을 열면 다음과 같은 레이어들이 나타납니다.

PC용 상단 배너 PSD 파일은 3개 레이어로 구성되어 있습니다.
각 레이어 설명을 보고 내용을 추가/변경해보세요.

1) Text 타이틀 레이어 : 제목 타이틀 텍스트를 변경할 수 있습니다.
2) Text 서브 타이틀 레이어 : 부제목 타이틀 텍스트를 변경할 수 있습니다.
3) Background 배경 레이어 : 배경이미지를 더하거나 색상을 변경할 수 있습니다.



SECTION 4. 상단 배너 제작 팁

1. 상단 배너 크기 2배로 제작하기

상단 배너는 기본적으로 여러분 마음대로 크기를 잡고 디자인해도 상관없습니다. 다만 레티나 디스플레이가 많은 요즘 여러 기기에서 테스트해본 결과 다음과 같은 크기로 이미지를 제작해야 결과물이 가장 좋았습니다.

- 가로 크기 : 2560px
- 세로 크기 : 140px

그 이유는 본문폭에 맞춰 배너 가로 크기를 지정하는 경우 고해상도 노트북에서는 배너 내 글자나 이미지가 깨지기 때문입니다. 가로 및 세로 크기에 대한 자세한 설명은 다음에서 이어집니다.



2. 상단 배너 가로/세로 크기 설정

상단 배너의 가로 크기는 본문폭의 2배로 놓고 작업해주세요. 본문폭은 [공통 디자인 설정 - 가로폭]에서 지정할 수 있습니다. 기본값은 1280px로 되어 있는데 이 값을 그대로 쓰시는 경우 템플릿 파일에서 캔버스 사이즈를 변경하지 말고 그대로 사용하시면 됩니다.

상단 배너 세로 크기 역시 지정한(또는 지정된) 가로 비율에 맞춰 2배로 제작해주세요. 


3. 상단 배너 적용하기

이제 제작완료한 배너 이미지를 아임웹에 적용해보겠습니다. 2배로 제작된 상단 배너 이미지는 그대로 쓰는 것이 아니라 [PC 높이]를 원본 배너 이미지 높이의 1/2로 줄여서 입력해줘야 합니다. *정확히 반으로 줄여야 깨짐이 덜합니다.

템플릿 파일처럼 배너 세로 크기가 140px인 경우 [PC 높이]는 70px로 입력해주세요. 그럼 브라우저 크기에 맞춰 배너 이미지가 자동으로 비율에 따라 줄어들거나 커지게 됩니다.

즉, 일반 모니터에서는 70px 높이의 이미지로 보이고, 레티나 디스플레이에서는 140px 정도로 표시됩니다.



SECTION 5. 모바일형 상단 배너 템플릿 사용법

일반적으로 아임웹은 PC용 상단 배너를 만들면, 모바일용으로 자동으로 축소시켜 표시해줍니다. 그러나 상단 배너의 비율, 디자인 형식에 따라 글자가 너무 작게 보이거나, 이미지가 잘 보이지 않는 경우가 있죠.


그런 경우 억지로 맞추려 하지 말고 상단 배너를 하나 더 생성한 다음 모바일에서 표시되게 하는 것이 더 편리합니다.

템플릿의 사용법은 기본적으로 위 PC용과 같습니다. 다만 모바일의 경우 PC보다 물리적인 디스플레이 크기가 작은 만큼 텍스트나 그림이 좀 더 커질 필요가 있습니다. 아래 PSD 템플릿 및 참조용 이미지를 사용해 상단 배너를 꾸며보세요. :)


캠퍼스 뉴스레터 구독하기

아임웹캠퍼스 뉴스레터를 구독하고 유용한 비즈니스 팁 및 교육정보를 받아보세요.