배너 직접 만들어 붙여봤더니, 클릭은 크기보다 위치가 먼저였다

배너 직접 만들어 붙여봤더니, 클릭은 크기보다 위치가 먼저였다

얼마 전 블로그 글 사이에 작은 배너를 하나 넣어봤는데, 생각보다 일이 단순하지 않았다. 그냥 예쁜 이미지를 만들어서 올리면 될 줄 알았는데, 막상 넣어보니 글 흐름은 끊기고 모바일에서는 글자가 작아 보이고, 클릭도 거의 없었다. ‘배너가 원래 이런 건가?’ 싶어서 며칠 동안 위치와 문구를 바꿔가며 테스트해봤다.



처음 만든 배너가 어색했던 이유


처음에는 욕심이 많았다. 배너 하나에 할인 문구, 제품명, 장점, 버튼 느낌의 문장까지 다 넣었다. 가로로 긴 이미지였고 색도 눈에 띄게 만들었다. 그런데 실제 글 안에 넣어보니 너무 광고처럼 보였다. 특히 생활 정보 글을 읽다가 갑자기 큰 배너가 나오면, 나부터도 살짝 피하고 싶어지는 느낌이 있었다.


가장 크게 느낀 건 배너는 예쁘기만 해서는 부족하다는 점이었다. 블로그 안에서 배너는 혼자 튀는 포스터가 아니라, 글을 읽던 사람이 잠깐 고개를 돌릴 만한 안내판에 가까웠다. 그래서 너무 큰 문구보다 ‘지금 읽는 내용과 이어지는 말’이 훨씬 자연스러웠다.



배너 문구는 짧을수록 덜 부담스럽다


처음 배너 문구는 20자 넘는 문장이었다. 모바일에서 보니 두 줄로 꺾이고, 버튼처럼 보이던 부분도 답답했다. 그래서 문구를 줄였다. 예를 들면 ‘생활용품 할인 모음’보다 ‘자주 쓰는 생활템 보기’가 덜 딱딱했다. 광고 문장처럼 밀어붙이는 느낌보다, 글 옆에서 살짝 제안하는 느낌이 낫다.


내가 써보니 배너 안에 들어가는 문장은 8~14자 정도가 편했다. 물론 브랜드명이나 상품명이 길면 달라지지만, 기본적으로 한눈에 읽히는 길이가 좋았다. 이미지는 화려하게 만들 수 있어도, 사람은 글을 빠르게 훑는다. 이때 문구가 길면 읽기 전에 넘겨버린다.



내가 바꿔본 문구 예시



  • 너무 직접적인 문구: 지금 바로 구매하세요

  • 조금 부드러운 문구: 필요한 것만 골라보기

  • 정보 글과 이어지는 문구: 비교한 제품 다시 보기

  • 후기 글에 어울린 문구: 실제 사용 구성 보기


솔직히 ‘구매’라는 단어가 들어가면 클릭이 늘 줄 알았는데, 내 블로그에서는 오히려 반대였다. 생활 노하우 글을 읽는 사람은 당장 사러 온 사람보다 문제를 해결하러 온 경우가 많았다. 그래서 배너도 판매보다 탐색에 가까운 말투가 더 잘 어울렸다.



광고

위치는 생각보다 클릭에 크게 영향을 줬다


배너 위치도 꽤 중요했다. 글 맨 위에 넣으면 눈에는 잘 띄지만, 아직 독자가 내용을 읽기 전이라 반응이 약했다. 반대로 글 맨 아래에 넣으면 자연스럽긴 한데, 끝까지 내려오는 사람이 많지 않았다. 내가 체감한 가장 무난한 위치는 본문 중간이었다.


특히 문제가 설명된 직후, 해결 방법으로 넘어가기 전이 괜찮았다. 예를 들어 ‘습기가 계속 차서 불편했다’는 이야기를 한 뒤 관련 제품이나 체크리스트 배너를 넣으면 흐름이 덜 끊겼다. 읽는 사람이 이미 필요성을 느낀 상태라서 배너가 갑자기 끼어든 느낌이 적었다.


다만 한 글에 배너를 여러 개 넣는 건 조심할 만했다. 3000자 정도의 글에 배너를 3개 넣어본 적이 있는데, 내가 다시 읽어도 산만했다. 1개는 자연스럽고, 2개는 주제와 정확히 맞을 때만 괜찮았다. 그 이상은 정보 글보다 광고판처럼 보이기 쉬웠다.



크기와 색은 튀는 것보다 읽히는 쪽이 낫다


배너를 만들 때 가장 고민한 건 색이었다. 눈에 띄려면 강한 빨강이나 노랑을 써야 할 것 같았는데, 실제로는 블로그 전체 색감과 너무 다르면 금방 이질감이 생겼다. 글을 읽는 공간에서는 ‘튀는 색’보다 ‘구분되는 색’이 더 편했다.


내 기준으로는 배경은 밝게, 글자는 진하게, 강조색은 하나만 쓰는 방식이 가장 안정적이었다. 예를 들어 흰 배경에 짙은 회색 글자, 버튼 느낌의 작은 포인트 색 하나 정도면 충분했다. 배너 안의 요소도 3개를 넘기지 않는 게 좋았다. 제목, 짧은 설명, 행동 문구 정도면 된다.



  • 가로형 배너: 본문 중간에 넣기 좋지만 모바일 글자 크기를 꼭 확인해야 한다

  • 정사각형 배너: 카드처럼 보여서 후기 글에 잘 어울린다

  • 세로형 배너: 모바일에서는 괜찮지만 PC 본문에서는 답답해 보일 수 있다


특히 모바일 확인은 꼭 필요했다. PC에서는 멀쩡한 배너도 휴대폰에서는 글자가 뭉개져 보일 때가 있었다. 나는 배너를 올린 뒤 휴대폰으로 직접 열어보고, 엄지손가락으로 스크롤하면서 걸리는 느낌이 있는지 봤다. 생각보다 이 과정에서 많이 걸러진다.



광고

직접 써보니 배너는 작은 안내문에 가까웠다


배너를 며칠 바꿔보면서 느낀 건, 클릭을 부르는 배너는 소리치는 이미지가 아니었다. 글을 읽던 사람이 ‘아, 이건 이어서 봐도 되겠다’고 느끼는 작은 안내문에 가까웠다. 그래서 문구도 부드럽게, 위치도 흐름 안에, 디자인도 글보다 앞서 나가지 않게 만드는 편이 좋았다.


가장 만족스러웠던 조합은 본문 중간에 1개, 문구는 10자 안팎, 색은 블로그 본문과 비슷한 톤으로 맞춘 배너였다. 클릭 수가 폭발적으로 늘었다기보다는, 어색함이 줄고 체류 흐름이 덜 끊겼다. 사실 개인 블로그에서는 이게 꽤 큰 차이다. 읽는 사람이 불편하지 않아야 다음 글도 읽고, 배너도 자연스럽게 본다.


배너를 만들 때마다 아직도 욕심이 생긴다. 더 크게, 더 진하게, 더 눈에 띄게 만들고 싶은 마음이 올라온다. 그런데 막상 내가 독자 입장에서 읽어보면 답은 꽤 단순했다. 필요한 순간에 필요한 말만 있는 배너가 제일 오래 살아남았다.

배너 직접 만들어 붙여봤더니, 클릭은 크기보다 위치가 먼저였다 - 요약