초보자를 위한 배너 만드는 방법, 클릭을 부르는 문구와 크기 잡기
배너는 예쁘기만 하면 생각보다 잘 안 눌립니다
얼마 전 지인 쇼핑몰 화면을 같이 보다가 배너 하나 때문에 한참 이야기를 나눈 적이 있습니다. 디자인은 깔끔했는데, 막상 무엇을 눌러야 하는지 바로 보이지 않았거든요. 할인인지, 신상품 안내인지, 이벤트 참여인지가 흐릿하니 손가락이 멈추지 않았습니다. 사실 배너는 작은 간판 같은 역할을 합니다. 지나가는 사람이 2~3초 안에 알아보고 움직일 수 있어야 제 역할을 합니다.
많은 분들이 배너를 만들 때 색감이나 이미지부터 고민합니다. 물론 중요합니다. 그런데 클릭을 만드는 배너는 순서가 조금 다릅니다. 먼저 목적을 정하고, 그다음 문구를 줄이고, 마지막에 시선이 가는 디자인을 얹는 쪽이 훨씬 안정적입니다. 특히 블로그, 스마트스토어, 카페, 랜딩 페이지처럼 사용자가 빠르게 훑고 지나가는 화면에서는 더 그렇습니다.
예를 들어 같은 여름 이벤트 배너라도 “여름맞이 특별 혜택”이라고만 쓰면 조금 밋밋합니다. 반면 “오늘 주문하면 20% 할인”처럼 숫자와 행동이 들어가면 훨씬 분명해집니다. 사용자는 예쁜 문장보다 자신에게 이득이 되는 정보를 먼저 봅니다.
배너 목적을 하나로 줄이는 방법
배너를 만들기 전에 가장 먼저 할 일은 “이 배너를 본 사람이 무엇을 하길 원하는가”를 정하는 것입니다. 구매, 신청, 다운로드, 문의, 쿠폰 받기처럼 행동은 하나면 충분합니다. 하나의 배너에 신상품 소개, 할인 안내, 브랜드 설명, 후기까지 모두 넣으면 정보는 많아지지만 클릭은 흐려집니다.
블로그 안에 넣는 배너라면 목적이 더 단순해야 합니다. 글을 읽던 사람이 중간에 잠깐 보는 것이기 때문에 긴 설명을 읽을 여유가 많지 않습니다. “무료 자료 받기”, “가격표 확인하기”, “이벤트 참여하기”처럼 바로 이해되는 표현이 좋습니다. 버튼 문구도 “자세히 보기”만 반복하기보다 사용자가 얻게 되는 결과를 보여주는 편이 낫습니다.
- 판매 목적: 할인율, 기간, 대표 상품을 먼저 보여주기
- 신청 목적: 대상, 혜택, 신청 마감일을 짧게 넣기
- 브랜드 홍보 목적: 브랜드명보다 사용자가 얻는 변화를 강조하기
- 블로그 내부 이동 목적: 다음에 읽을 글의 이득을 구체적으로 적기
근데 여기서 욕심을 조금 내려놓는 게 중요합니다. 배너 하나가 모든 설명을 대신할 필요는 없습니다. 배너는 관심을 여는 문이고, 자세한 이야기는 클릭한 뒤의 페이지에서 이어가면 됩니다.
문구는 짧게, 숫자는 또렷하게 쓰기
좋은 배너 문구는 대체로 짧습니다. 모바일 화면에서는 더 짧아야 합니다. 보통 제목은 10~16자 정도, 보조 문구는 20자 안팎이면 읽기 편합니다. 물론 업종에 따라 다르지만, 한눈에 읽히는 길이를 넘기면 디자인을 아무리 잘해도 전달력이 떨어집니다.
숫자는 배너에서 꽤 강한 힘을 가집니다. “많은 혜택”보다 “최대 30% 할인”이 빠르게 들어오고, “곧 종료”보다 “9월 10일 마감”이 더 분명합니다. “신규 회원 혜택”보다 “첫 구매 5천 원 쿠폰”이 행동을 만들기 쉽습니다. 숫자가 들어가면 사용자는 대략적인 가치와 긴급함을 동시에 판단할 수 있습니다.
문구를 바꾸면 느낌이 달라집니다
- 수정 전: 특별한 이벤트를 만나보세요
- 수정 후: 이번 주만 1+1 이벤트
- 수정 전: 다양한 강의를 준비했습니다
- 수정 후: 왕초보용 강의 7일 무료
- 수정 전: 지금 바로 확인하세요
- 수정 후: 내게 맞는 요금제 보기
솔직히 “지금 확인” 같은 문구가 나쁜 건 아닙니다. 다만 너무 자주 쓰이다 보니 사용자가 별다른 이유를 느끼지 못할 때가 많습니다. 버튼에는 행동을, 제목에는 이득을 넣는 식으로 역할을 나누면 훨씬 자연스럽습니다.
디자인은 시선의 순서를 만드는 일입니다
배너 디자인에서 가장 중요한 건 화려함보다 순서입니다. 사용자가 무엇을 먼저 보고, 그다음 무엇을 보고, 마지막에 어디를 누를지 흐름이 보여야 합니다. 일반적으로는 큰 제목, 핵심 이미지, 버튼 순서로 시선이 이동합니다. 이 세 가지가 서로 경쟁하면 배너가 복잡해 보입니다.
색상은 2~3개 정도로 제한하는 편이 좋습니다. 배경색, 강조색, 글자색이 서로 역할을 나누면 깔끔합니다. 특히 버튼은 배경과 확실히 구분되어야 합니다. 배경이 파란색이면 버튼은 흰색이나 노란색처럼 대비가 나는 색이 낫고, 배경이 밝다면 버튼은 진한 색으로 잡는 식입니다.
글자 크기도 차이가 필요합니다. 제목과 보조 문구가 비슷한 크기라면 무엇이 중요한지 알기 어렵습니다. 제목은 가장 크게, 혜택이나 기간은 중간 크기, 버튼은 짧고 선명하게 두면 됩니다. 모바일에서는 작은 글자가 쉽게 뭉개지니 지나치게 얇은 폰트는 피하는 편이 안정적입니다.
자주 쓰는 배너 크기 감각
- 블로그 상단형: 가로가 긴 형태라 제목과 버튼을 좌우로 배치하기 좋음
- 모바일 카드형: 정사각형이나 세로형이 읽기 편함
- 사이드바형: 문구를 매우 짧게 잡아야 눈에 들어옴
- 팝업형: 닫기 버튼과 혜택 문구가 함께 보여야 부담이 덜함
실무에서 많이 놓치는 부분이 여백입니다. 빈 공간이 아깝다고 글자와 이미지를 꽉 채우면 오히려 저렴해 보일 수 있습니다. 여백은 내용을 돋보이게 만드는 장치입니다. 배너 가장자리에는 최소한의 숨 쉴 공간을 두고, 버튼 주변도 너무 붙이지 않는 게 좋습니다.
클릭률을 높이고 싶다면 작은 테스트가 필요합니다
배너는 한 번 만들어 끝내기보다 조금씩 바꿔보는 쪽이 성과를 보기 쉽습니다. 같은 디자인이라도 문구 하나 때문에 반응이 달라집니다. 예를 들어 “무료 상담 신청”과 “내 상황에 맞는 상담 받기”는 비슷해 보여도 사용자가 느끼는 거리감이 다릅니다. 후자는 조금 더 개인적인 느낌을 줍니다.
테스트할 때는 한 번에 하나만 바꾸는 게 좋습니다. 문구, 색상, 버튼 위치, 이미지까지 동시에 바꾸면 무엇 때문에 결과가 달라졌는지 알기 어렵습니다. 일주일 정도 같은 조건으로 노출해보고 클릭 수를 비교하면 감이 잡힙니다. 방문자가 많지 않은 블로그라면 기간을 조금 더 길게 잡아도 됩니다.
- 제목만 바꿔보기: 혜택형 문구와 궁금증형 문구 비교
- 버튼 색만 바꿔보기: 배경 대비가 충분한지 확인
- 이미지만 바꿔보기: 제품 사진과 사용 장면 사진 비교
- 위치만 바꿔보기: 글 상단, 중간, 하단 반응 비교
사실 클릭률이 높은 배너는 대단한 비밀 공식으로 만들어지지 않습니다. 누가 보는지, 무엇을 원하는지, 왜 지금 눌러야 하는지가 또렷할수록 반응이 좋아집니다. 배너를 만들 때마다 “내가 독자라면 이걸 보고 바로 이해할까”를 한 번만 더 생각해도 결과물이 훨씬 달라집니다. 예쁜 배너보다 친절한 배너가 오래갑니다.
