얼마 전 작은 행사 안내 이미지를 만들 일이 있었는데, 생각보다 배너 하나에 들어갈 결정이 많아서 꽤 오래 붙잡고 있었습니다. 문구를 크게 넣으면 답답해 보이고, 이미지를 강조하면 무슨 행사인지 잘 안 보이고, 버튼처럼 보이는 영역을 넣자니 너무 광고 같아 보이더라고요.
그런데 배너는 예쁘게 꾸미는 이미지라기보다, 짧은 시간 안에 사람의 시선을 붙잡고 다음 행동을 유도하는 작은 안내판에 가깝습니다. 블로그 상단 배너든, 쇼핑몰 이벤트 배너든, SNS 홍보 이미지든 기본 원리는 비슷합니다. 무엇을 보여줄지, 어디를 보게 할지, 클릭할 이유를 어떻게 만들지가 중요합니다.
배너의 목적부터 한 줄로 잡기
배너를 만들 때 가장 먼저 할 일은 디자인 프로그램을 여는 게 아니라 목적을 한 줄로 적는 것입니다. 예를 들어 “신규 회원에게 10% 할인 쿠폰을 알린다”, “봄맞이 기획전 페이지로 이동시킨다”, “무료 자료 다운로드를 유도한다”처럼 말이죠.
목적이 흐리면 배너 안에 자꾸 많은 내용을 넣게 됩니다. 할인율도 넣고, 브랜드 설명도 넣고, 후기 문구도 넣고, 기간도 넣고 싶어집니다. 하지만 사용자는 배너를 오래 읽지 않습니다. 보통 화면을 내리다가 1~3초 안에 볼지 말지를 결정합니다. 그래서 배너 하나에는 핵심 메시지 하나가 훨씬 강합니다.
- 이벤트 알림 배너: 혜택과 기간을 가장 크게 보여주기
- 상품 홍보 배너: 대표 상품 이미지와 장점을 먼저 보여주기
- 신청 유도 배너: 신청 대상과 얻는 이익을 분명히 쓰기
- 브랜드 안내 배너: 분위기보다 기억할 문장 하나를 남기기
예를 들어 “전 상품 최대 70% 할인”이라는 문구와 “가을 시즌 특별한 감성을 담은 라이프스타일 셀렉션”이라는 문구가 함께 있다면, 클릭을 만드는 쪽은 보통 전자입니다. 감성 문구가 나쁘다는 뜻은 아닙니다. 다만 배너에서는 사용자가 바로 이해할 수 있는 정보가 먼저 와야 합니다.
문구는 짧게, 숫자는 선명하게
배너 문구는 짧을수록 힘이 생깁니다. 특히 할인, 기간, 수량, 시간처럼 숫자로 표현할 수 있는 정보는 시선을 끌기 좋습니다. “특별한 혜택을 만나보세요”보다 “오늘 18시까지 20% 할인”이 훨씬 구체적입니다.
실제로 쇼핑몰이나 앱 이벤트 배너를 보면 큰 글씨는 대부분 숫자입니다. 1+1, 50%, 3일간, 선착순 100명 같은 표현이 자주 보이는 이유가 있습니다. 사용자가 빠르게 판단할 수 있기 때문입니다. 솔직히 “좋은 기회”라는 말만으로는 얼마나 좋은지 감이 잘 안 옵니다.
문구를 고를 때 피하면 좋은 방식
- 한 문장 안에 혜택을 여러 개 넣는 방식
- 브랜드 입장에서 멋있지만 독자에게 의미가 흐린 표현
- 너무 작은 글씨로 조건을 길게 넣는 방식
- 클릭 후 무엇이 나오는지 알 수 없는 문구
좋은 배너 문구는 대개 “누가”, “무엇을”, “얼마나”, “언제까지” 중 2~3가지를 담습니다. 예를 들어 “초보 판매자를 위한 무료 상세페이지 템플릿”은 대상과 혜택이 분명합니다. 여기에 “이번 주까지만”이 붙으면 긴급함도 생깁니다.
근데 긴급함을 너무 자주 쓰면 오히려 신뢰가 떨어질 수 있습니다. 매일 “오늘만 할인”이라고 말하는 배너를 보면 사람들은 금방 알아차립니다. 배너는 클릭도 중요하지만, 브랜드에 대한 인상도 같이 남깁니다.
디자인은 시선 순서대로 배치하기
배너 디자인에서 가장 중요한 건 예쁜 장식보다 시선의 순서입니다. 보통 사용자는 큰 글씨, 얼굴이나 상품 이미지, 대비가 강한 색, 버튼 형태의 요소를 먼저 봅니다. 그래서 중요한 내용일수록 크고 선명하게 배치하는 게 좋습니다.
예를 들어 가로형 배너라면 왼쪽에 핵심 문구, 오른쪽에 상품 이미지를 두는 방식이 많이 쓰입니다. 모바일에서는 위쪽에 문구, 아래쪽에 버튼이나 이미지를 두는 편이 읽기 편합니다. 화면이 작을수록 요소를 줄여야 합니다. PC에서 보기 좋은 배너가 모바일에서는 글자가 너무 작아지는 경우가 꽤 많습니다.
초보자가 쓰기 쉬운 배치 공식
- 상단 또는 왼쪽: 가장 중요한 한 줄 문구
- 중앙: 혜택, 상품, 행사명 등 핵심 정보
- 하단 또는 오른쪽: 클릭을 유도하는 짧은 문장
- 배경: 글자를 방해하지 않는 색이나 이미지
색은 2~3가지 안에서 맞추면 안정적입니다. 배경색, 강조색, 글자색 정도면 충분합니다. 빨강, 노랑, 파랑, 초록을 한 배너에 모두 넣으면 눈에 띄기는 해도 읽기 전부터 피곤해 보일 수 있습니다. 특히 버튼처럼 보이는 영역은 배경과 대비가 커야 합니다.
폰트도 비슷합니다. 제목용 굵은 글씨 하나, 설명용 기본 글씨 하나 정도가 무난합니다. 너무 다양한 글꼴을 섞으면 전문적으로 보이기보다 급하게 만든 느낌이 날 수 있습니다. 배너는 작기 때문에 작은 차이가 더 크게 보입니다.
클릭을 부르는 배너는 약속이 정확하다
배너에서 클릭을 유도하는 문구는 어렵게 쓸 필요가 없습니다. “쿠폰 받기”, “혜택 확인”, “무료 자료 받기”, “신청하기”처럼 다음 행동이 바로 보이면 충분합니다. 중요한 건 배너를 클릭했을 때 실제 페이지 내용이 배너의 약속과 맞아야 한다는 점입니다.
예를 들어 배너에는 “무료 다운로드”라고 적혀 있는데, 들어가 보니 회원가입과 결제 정보 입력이 먼저 나오면 사용자는 속았다고 느낄 수 있습니다. 반대로 배너에는 “신청하기”라고 쓰여 있고, 이동한 페이지에서 신청 조건과 절차가 바로 보이면 자연스럽게 이어집니다.
클릭률을 높이고 싶다면 배너 문구를 조금씩 바꿔 비교해보는 것도 좋습니다. 같은 디자인이라도 “10% 할인 받기”와 “첫 구매 쿠폰 받기”는 반응이 다를 수 있습니다. 블로그라면 상단 배너와 글 중간 배너의 반응도 다르게 나타납니다. 쇼핑몰에서는 메인 배너보다 상품 상세페이지 안의 작은 안내 배너가 더 좋은 성과를 내는 경우도 있습니다.
- 버튼 문구는 4~8글자 정도로 짧게 쓰기
- 클릭 후 페이지와 배너 메시지를 맞추기
- 혜택이 크다면 숫자를 버튼 주변에 배치하기
- 모바일에서 버튼 영역이 손가락으로 누르기 편한지 확인하기
사실 배너는 한 번에 완벽하게 만들기 어렵습니다. 처음에는 목적을 분명히 잡고, 문구를 줄이고, 시선이 가는 순서를 만들어보는 것만으로도 결과가 꽤 달라집니다. 예쁜 배너보다 좋은 배너가 더 오래 기억됩니다. 좋은 배너는 사람을 붙잡아 세우는 게 아니라, 필요한 순간에 자연스럽게 다음 길을 보여주는 쪽에 가깝다고 느낍니다.
