디자인 감각 없이도 트래픽을 뺏기는 썸네일의 비밀
썸네일이 트래픽을 깎는 자리는 디자인이 아니라 공유 카드가 비는 순간이다. 이미지가 없는 글은 링크를 붙이는 곳마다 빈 상자로 나가고, 브라우저로 보면 멀쩡해 보여서 드러나지도 않는다.
이미지 툴을 열어보자마자 머리가 지끈거리는 경험, 다들 한 번쯤은 있을 거다. 포토샵이나 피그마 같은 전문 툴은 배우는 데만 몇 주가 걸리고, 캔바 같은 툴조차 템플릿 고르다 보면 어느새 한 시간이 사라진다. 나도 SaaS를 여러 개 운영하면서 이 디자인 병목에 정확히 막혔었다. 블로그 썸네일 제작 프롬프트를 써서 자동화하기 전에는, 글 쓰는 시간보다 표지 만드는 시간이 더 길 때도 많았다. 자동화 파이프라인을 돌리기 전 내 블로그 발행 속도는 말 그대로 구질구질했다.
디자인 감각 같은 건 필요 없다. 중요한 건 데이터와 규칙이다. 내가 한 달 반 동안 43편을 발행하며 겪은 시행착오는 디자인이 아니라 ‘설계’의 문제였다. 시각적 재능을 타고나지 않아도, 검색 결과 페이지에서 사람의 눈길을 사로잡는 루틴을 밟으면 된다. 그 루틴의 시작점은 바로 플랫폼별로 다른 ‘보이는 영역’을 계산하는 거다.
복잡한 툴 배우는 건 이제 그만
크롬 확장 프로그램 몇 개와 AI 이미지 생성 툴만 있어도 충분하다. 나는 직접 레이어를 깎고 합성하는 작업을 아예 포기했다. 대신 어떤 비율로 잘리는지 미리 계산해서 AI한테 도면을 던져주는 방식을 택했다. 이게 더 빠르다.
검색 결과에서 존재감을 잃지 않으려면
네이버 블로그나 카카오는 공유 카드에서 글자가 차지하는 자리가 넓다(대신 이미지는 좌우를 잘라낸다). 반면 구글은 이미지 중심이다. 이 두 환경을 다 만족시키려면 가로로 넓은 비율이 기본이지만, 중요한 요소를 어디에 둘지가 관건이다. 아무리 예쁜 그림이라도 검색 결과 미리보기에서 핵심 텍스트가 잘리면 조회수는 0에 수렴한다.
구글과 카카오에서 ‘절대 안 잘리는’ 픽셀 비율 설정
- 캔버스 기본값 설정 (1200 x 630px): OG 이미지의 사실상 표준인 1.91:1 비율이다(16:9 로 맞추려면 1200×675 다). 다만, 모바일에서 세로로 길게 보일 때를 대비해 양쪽 끝 여백 10%씩은 텍스트를 쓰지 않는 ‘노텍스트 존(No-Text Zone)’으로 남겨둔다.
- 중앙 집중형 안전 영역(Safe Zone) 정하기: 가로 60%, 세로 80%의 중앙 사각형 안에 핵심 제목과 CTA를 배치한다. 네이버와 카카오는 공유 링크 미리보기 시 좌우를 꽤 많이 잘라내기 때문이다.
- 크롭 테스트 자동화: 직접 그리면서 추측하지 말고, 실제 기기 시뮬레이터 돌려봐서 잘리는 지점에 가이드라인을 그어놓는다. 나는 이 과정을 수동으로 했더니 한 번씩 실수해서 썸네일이 망가지는 경우가 있었다.
내 포스팅 중 하나는 그림이 너무 화려해서 텍스트가 묻혀버린 적이 있다. 구글 서치 콘솔에서 조회수는 올라갔는데 클릭률(CTR)이 형편없이 낮았다. 원인을 분석해 보니, 모바일 검색 결과에서 핵심 키워드가 카카오톡 미리보기 박스 바깥으로 밀려나 있었다. 그때부터는 핵심 키워드를 중앙에 두는 원칙을 세웠다.
네이버/카카오와 구글, 미리보기 영역의 차이
구글은 썸네일 전체를 스몰 썸네일로 보여주는 경우도 있지만, 네이버와 카카오는 가로로 아주 긴 형태의 미리보기를 제공한다. 특히 카카오톡으로 공유될 때는 높이가 400px 안쪽으로 꽉 눌려 보이는 경우가 많아서, 상단 여백을 너무 주는 건 낭비다.
Safe Zone(안전 영역) 설정 가이드라인
도면(Safe Zone) 설정은 숫자 게임이다. 1200×630 캔버스라면 중앙 720×504 픽셀 정도가 안전지대다(가로 60%·세로 80%). 여기에 벗어나는 곳에 장식용 요소나 두꺼운 브랜드 로고를 배치하고, 사람이 읽어야 할 글자는 절대 밖으로 내보내지 말자.
조회수를 보장하는 색상과 폰트 조합 공식
이론적인 색상환 가이드는 당장 써먹기 어렵다. 실제 모바일 화면은 빛 반사와 화면 밝기가 제각각이라서, 미묘한 색상 차이는 그냥 회색으로 보인다. 그래서 나는 극단적인 대비를 쓴다. 블로그 트래픽 증가를 위해서는 눈이 시큰거리더라도 보이는 게 낫다.
눈이 가는 핵심 색상 팔레트 (데이터 기반)
가장 무난한 조합은 ‘어두운 바탕 + 형광색 포인트’다. 검은색(#000000)이나 진한 네이비(#0a192f) 위에 라임 그린이나 밝은 사이언 핑크를 얹는다. 이 조합은 지하철이나 버스 같은 어수선한 환경에서도 잘 보인다. 반대로 흰 바탕에 파란 글씨 같은 콤비는 정보성이 강해 보이지만, 빠르게 스크롤을 내리는 요즘 유저의 눈에는 걸리지 않는다.
가독성을 높이는 폰트 굵기와 자간 규칙
폰트는 굵기(Font Weight) 700 이상을 기본으로 쓴다. 400이나 500은 썸네일에서 너무 얇아 보인다. 자간은 글자 크기의 5~10% 정도 벌려준다. 붙어 있는 글자는 작은 화면에서 히라가나처럼 보일 때가 있어서다. 나는 폰트 고르느라 허비하는 시간을 줄이려고 산세리프 계열의 굵은 폰트 두 개만 번갈아 쓴다.
복붙만 하면 끝나는 썸네일 전용 AI 프롬프트 모음
이제 실전으로 들어간다. 프롬프트를 짤 때는 ‘여백을 달라고’ 먼저 요청해야 한다. AI는 배경을 꽉 채워 그리는 걸 좋아해서, 텍스트 넣을 곳이 없는 이미지를 뚝딱 만들어버린다. 그래서 명확히 공간을 비워두라고 시켜야 한다.
배경 이미지 생성용 프롬프트 (여백 확보 중심)
미드저니나 달리 같은 툴을 쓸 때는 아래 패턴을 활용하자. Negative Space라는 단어를 꼭 넣어야 한다.
Minimalist background, abstract 3d shapes, soft lighting, dark blue theme, massive negative space in the center for text, high quality, 8k resolution
--ar16:9--v6.0--styleraw
이 프롬프트는 중앙에 텍스트를 넣을 수 있는 깨끗한 공간을 확보해 준다. 나는 이걸로 썸네일 베이스를 만들고, 레이어를 덧씌운다. 처음에는 ‘복잡한 배경’을 요청했는데, 나중에 텍스트를 넣으려니 보정할 게 너무 많아서 이 방식으로 고정했다.
제목 텍스트 스타일용 프롬프트
텍스트를 직접 AI한테 그리라고 하면 오타가 나온다. 그래서 이미지는 배경만 담당하게 하고 텍스트는 포토샵이나 캔바에서 따로 입힌다. 하지만 ‘어떤 느낌의 텍스트’를 쓸지 정할 때 AI의 도움을 받을 수는 있다. 단, 이건 참고용으로만 쓰자.
AI 이미지 위에 텍스트, 깔끔하게 올리는 레이아웃 기술
AI가 만든 이미지는 노이즈가 많다. 막 레이어를 합성하면 글자가 배경 속으로 쏙 들어가버린다. 이걸 해결하려면 물리적인 가림막이 필요하다.
복잡한 배경을 잡는 오버레이(Overlay) 처리
이미지와 텍스트 사이에 투명도 30~40% 정도의 검은색 레이어를 하나 깐다. 수치로 따지면 RGB(0, 0, 0)에 Opacity 0.4 정도면 딱 좋다. 이 ‘어두운 레이어’ 하나만 덮어도 텍스트 가독성이 크게 올라간다. 아니면 그라데이션 오버레이를 써서 아래쪽은 어둡고 위쪽은 밝게 처리하는 방법도 있다.
시선의 흐름을 만드는 Z형 레이아웃 배치
사람의 눈은 보통 왼쪽 위에서 시작해서 오른쪽 아래로 끝난다. 이 Z자 경로를 따라 제목-이미지-부제 혹은 CTA를 배치하자. 단순히 가운데만 보는 게 아니라, 자연스럽게 클릭하고 싶게 만드는 유도선을 깔아주는 거다. 이게 디자이너가 아니어도 적용할 수 있는 가장 확실한 레이아웃 기술이다.
AI와 함께라면 썸네일은 ‘설계’하는 것이다
나는 매일 이 과정을 손으로 반복하지 않는다. 블로그 글이 발행되면 자동으로 썸네일 초안이 생성되는 시스템을 만들었다. 물론 아직 AI가 만든 결과물을 100% 믿고 바로 쓰지는 않는다. 가끔 텍스트가 잘리거나 색상이 터무니없을 때가 있어서다.
오늘 적용해 볼 썸네일 제작 루틴
내부 크론 63개를 돌리며 겪은 한계가 있다. AI는 ‘아름다운’ 그림은 그려도 ‘클릭하는’ 그림은 잘 모른다. 그래서 사람인 우리가 프롬프트라는 설계도를 짜줘야 한다. 오늘 공유한 Safe Zone과 오버레이 수치만 적용해도 트래픽 반응은 달라질 것이다. 디자인 고민을 코드나 프롬프트로 넘기고, 우리는 콘텐츠의 본질에 집중하자.
디자인 고민을 코드로 넘기기
자동화의 끝은 ‘재능의 민주화’다. 내 포트폴리오에 있는 것처럼, 혼자서 여러 SaaS를 운영할 수 있는 건 내 손이 빠른 게 아니라 이런 고민을 시스템에 묻어버렸기 때문이다. 썸네일 폰트 추천이나 색상 조합 이론 따질 시간에 프롬프트 하나를 잘 만드는 게 훨씬 생산적이다.
이 블로그에서 실제로 재본 것 (2026년 8월 28일 기준)
썸네일 이야기를 하면 보통 색과 글자 크기로 가는데, 내 사이트를 실제로 재보니 더 앞에서 새는 곳이 있었다. 공개 글 45편 중 6편은 공유용 이미지 태그가 아예 없었다. 대표 이미지를 지정하지 않은 글이었고, 본문에는 사진이 멀쩡히 있는데도 링크로 공유되는 순간에는 아무 그림도 따라가지 않았다.
더 나쁜 조합도 있었다. 그 글들이 큰 이미지 카드로 보여달라는 선언은 그대로 달고 있었다. 큰 카드를 약속해놓고 채울 그림이 없는 상태였다는 뜻이다. 소개·처리방침·문의·편집방침 같은 고정 페이지 네 개도 같은 상태였다.
고친 방법은 순서를 정한 것뿐이다. 대표 이미지가 있으면 그걸 쓰고, 없으면 본문 첫 이미지를 쓰고, 그것도 없으면 브랜드 기본 이미지를 쓰게 했다. 그렇게 해서 45편 전부와 고정 페이지까지 공유 이미지를 갖게 됐고, 태그가 두 번 나가는 글은 하나도 없다.
확인은 도구가 필요 없다. 주소 하나를 받아 curl -s 주소 | grep og:image 한 줄이면 끝난다. 이 검사를 안 하면 영원히 안 보이는 이유는, 브라우저로 열었을 때는 본문 사진이 잘 나와서 아무 문제가 없어 보이기 때문이다.
참고한 공식 문서
이 글은 문체·사실성 두 가지 자동 검사를 통과했습니다. 초안을 쓰는 건 제가 만든 AI 파이프라인이고, 검사에 걸리면 공개하지 않습니다. 만드는 과정