클릭을 부르는 배너 만드는 방법

얼마 전 온라인 쇼핑몰에서 세일 상품을 찾다가 배너 하나에 눈길이 멈췄어요. 할인율을 크게 외치는 배너는 그냥 지나쳤는데, 상품 사진과 짧은 문장만 담긴 배너는 눌러 보게 되더라고요. 배너는 화면을 화려하게 채우는 그림보다, 보는 사람이 다음 행동을 쉽게 결정하도록 돕는 안내판에 가깝습니다.

배너를 만들기 전에 목적부터 한 줄로 적기

배너 안에 신상품 소개, 할인 행사, 회원 가입 혜택을 한꺼번에 넣으면 무엇을 눌러야 할지 흐려집니다. 먼저 ‘이 배너를 본 사람이 무엇을 하면 좋을까?’를 한 문장으로 적어두면 문구와 사진을 고르기 쉬워져요. 예를 들어 목적이 봄 신상품 둘러보기라면 할인율보다 상품의 분위기와 ‘신상품 보기’ 버튼이 앞에 와야 합니다.

누가 볼지도 함께 생각하면 좋습니다. 처음 방문한 사람에게는 브랜드 내부에서만 쓰는 행사 이름보다 ‘첫 구매 10% 할인’처럼 바로 이해되는 말이 편해요. 이미 상품을 살펴본 사람에게는 ‘장바구니에 담은 상품 다시 보기’가 더 구체적인 안내가 될 수 있고요. 같은 상품이라도 보는 사람의 상황에 따라 필요한 문장이 달라집니다.

문구를 쓸 때는 제목 한 줄, 설명 한 줄, 행동을 알려주는 버튼 한 개부터 시작해 보세요. ‘역대급 혜택’, ‘놓치면 손해’처럼 뜻이 넓은 표현보다 ‘이번 주말까지 운동화 20% 할인’이 내용을 빨리 전달합니다. 다만 할인 조건이 있다면 작은 글씨에 숨기지 말고 배너에서 확인할 수 있게 써야 기대와 실제 혜택이 어긋나지 않습니다.

첫눈에 읽히는 배너 배치하기

사람이 배너를 오래 들여다본다는 전제로 만들면 글자가 쉽게 늘어납니다. 화면에 올린 뒤 한두 걸음 물러나서 제목과 버튼이 먼저 보이는지 확인해 보세요. 상품 사진, 제목, 버튼이 서로 비슷한 크기로 경쟁하면 시선이 어디에 머물러야 할지 애매해집니다. 가장 중요한 정보 하나를 크게 두고 나머지는 그 정보를 받쳐주는 편이 읽기 편해요.

사진 위에 글자를 얹을 때는 사진의 밝고 복잡한 부분을 피하는 게 좋습니다. 어두운 사진에는 밝은 글자, 밝은 사진에는 어두운 글자를 쓰면 읽기가 한결 수월하죠. 사진 때문에 글자가 묻힌다면 반투명한 색을 뒤에 깔거나, 처음부터 글자를 놓을 빈 공간이 있는 사진을 고르면 됩니다. 예쁜 사진이어도 문장이 보이지 않으면 배너 역할을 하기 어렵습니다.

• 제목은 한 번에 읽을 수 있을 만큼 짧게 씁니다.
• 버튼 문구는 ‘자세히’보다 ‘상품 보기’, ‘예약하기’처럼 행동을 분명히 적습니다.
• 중요한 날짜나 가격은 제목 근처에 둡니다.
• 장식 요소를 더할 때는 제목과 버튼이 여전히 눈에 들어오는지 확인합니다.

색을 많이 쓰는 것보다 역할을 나눠 쓰는 것도 효과적입니다. 배경색 하나, 글자색 하나, 버튼에 쓸 강조색 하나로 시작하면 화면이 덜 산만해져요. 예를 들어 연한 베이지색 배경에 짙은 갈색 글자와 선명한 주황색 버튼을 두면, 버튼이 자연스럽게 눈에 띕니다.

휴대폰 화면에서도 뜻이 통하는지 확인하기

가로로 긴 배너를 컴퓨터 화면에서만 맞추면 휴대폰에서는 양옆이 잘리기 쉽습니다. 가령 1200×400픽셀로 만든 배너의 가장자리에 행사 기간을 넣었다면, 좁은 화면에서 그 정보가 사라질 수 있어요. 제목과 상품, 버튼처럼 꼭 필요한 요소는 가운데에 여유를 두고 배치하는 편이 안전합니다. 이 숫자는 제작 예시일 뿐이니 실제 게시 위치의 크기와 잘림 방식을 먼저 확인해야 합니다.

작게 줄였을 때 읽히는지도 중요합니다. 큰 화면에서 보기 좋은 긴 문장을 그대로 축소하면 휴대폰에서는 글자가 빽빽해 보이거든요. 그럴 때는 글자 크기만 줄이기보다 문장을 덜어내는 게 낫습니다. ‘가벼운 소재로 편하게 신는 봄 운동화 컬렉션’ 대신 ‘가볍게 신는 봄 운동화’처럼 바꾸면 같은 뜻을 더 빨리 읽을 수 있어요.

배너를 누른 뒤의 화면도 이어서 살펴봐야 합니다. ‘운동화 20% 할인’ 배너를 눌렀는데 할인 대상 상품을 다시 찾아야 한다면 불편하겠죠. 배너에서 약속한 내용이 연결된 화면의 첫 부분에 보이면 방문자가 헤매지 않습니다. 기간이 끝난 행사라면 배너와 연결 화면을 함께 바꾸는 것도 잊지 않는 게 좋아요.

게시 전에는 실제 크기로 한 번 더 보기

작업 화면에서 배너가 완성돼 보여도 게시 위치에 올리면 느낌이 달라질 수 있습니다. 주변에 다른 사진과 글이 많으면 강조색이 묻히기도 하고, 버튼처럼 보였던 모양이 실제로는 눌리지 않는 장식일 수도 있어요. 그래서 게시 전에는 컴퓨터와 휴대폰에서 각각 제목을 읽고, 버튼을 누르고, 연결 화면까지 열어보는 간단한 확인이 필요합니다.

가능하다면 문구나 사진을 한 가지씩 바꿔 반응을 비교해 보는 것도 좋습니다. 같은 기간에 비슷한 위치에 놓인 배너라면 어느 쪽이 더 많이 눌렸는지 살펴볼 수 있어요. 다만 클릭 수만 높고 실제 상품 확인이나 신청으로 이어지지 않았다면 문구가 지나치게 기대를 키운 건 아닌지도 봐야 합니다. 숫자는 다음 배너를 고칠 실마리로 쓰는 편이 유용합니다.

제가 다시 누르게 되는 배너는 대체로 단순합니다. 무엇을 볼 수 있는지 바로 알 수 있고, 글자가 편하게 읽히고, 누른 뒤에도 약속한 내용이 이어져요. 배너를 만들 때도 그 세 장면을 차례로 떠올리면 불필요한 장식을 덜어내기가 쉬워집니다.