ThumbProof
모든 썸네일에 프레임의 약 25–45%를 차지하는 초점 하나를 두세요. 얼굴이라면 이미지의 최소 10–15%를 채우도록 바짝 자르고, 분명한 표정 하나를 보여 주고, 눈과 입 주변의 대비를 잘 유지하세요. 왼쪽이나 가운데 3분의 1에 두고 오른쪽 아래 모서리는 피하세요. 그리고 스퀸트 테스트와 디테일 히트맵으로 그것이 눈이 가장 먼저 찾는 대상인지 확인하세요.
하나의 초점이 중요한 이유
피드는 서로 경쟁하는 이미지의 격자입니다. 눈은 짧은 응시로 이미지 사이를 건너뛰다가 무언가 분명히 돋보이는 곳에서만 멈춥니다. 지배적인 형태 하나가 있는 썸네일은 눈이 내려앉을 지점을 주지만, 똑같은 비중의 요소 다섯 개가 있는 썸네일은 붙잡을 것이 없어 눈이 그냥 지나갑니다.
사람들이 웹 페이지를 훑어보는 방식에 대한 연구가 이 패턴을 설명합니다. 사람들은 모든 요소를 읽지 않고 신호를 찾아 훑어보며 나머지는 건너뜁니다. 168×94픽셀에서는 작은 디테일이 사라지고 가장 크고 대비가 높은 형태만 남기 때문에 이 효과가 더 강해집니다.
“사용자는 웹 페이지를 F자 패턴으로 읽는 경우가 많습니다”
F-Shaped Pattern of Reading on the Web — Nielsen Norman Group · 영어 원문을 번역한 인용
얼굴이나 주제는 얼마나 커야 하나
크기가 가장 중요한 요소입니다. 프레임의 3%를 차지하는 얼굴은 사이드바 크기에서 너비가 몇 픽셀이 되어 표정을 읽기에는 너무 작습니다. ThumbProof는 감지된 얼굴이 프레임의 4% 미만이면 경고하고, 가장 복잡한 영역이 5–60%이면 건강한 주요 주제로 봅니다.
| 얼굴 면적(프레임 대비) | 168×94에서 | 표정이 읽히나? | 판정 |
|---|---|---|---|
| < 4% | 얼굴 너비 ~12px | 아니요 | 너무 작음 |
| 4–10% | 너비 ~20px | 가끔 | 경계선 |
| 10–25% | 너비 ~30–45px | 예 | 좋음 |
| 25–45% | 너비 ~45–60px | 분명히 | 강함 |
| > 60% | 카드를 가득 채움 | 예, 하지만 맥락을 넣을 공간이 없음 | 신중하게 사용 |
제품, 요리, 결과처럼 얼굴이 아닌 주제라면 같은 범위가 사물의 실루엣에 적용됩니다.
작은 크기에서 읽히는 표정
미묘한 표정은 이미지가 축소되면 사라집니다. 크게 뜬 눈, 벌린 입, 치켜 올린 눈썹, 강하게 기울인 고개는 살아남지만, 옅은 미소나 생각에 잠긴 표정은 그렇지 않습니다. 모든 썸네일에 과장된 얼굴이 필요하다는 뜻은 아니지만, 표정은 사이드바 크기에서 읽혀야 하고 동영상의 분위기와 맞아야 합니다.
조명은 표정만큼 중요합니다. 얼굴이 배경보다 밝고, 눈과 입을 또렷하게 해 주는 분명한 그림자가 생기도록 촬영하거나 편집하세요. 평평한 정면 조명을 쓰면 작아졌을 때 얼굴이 텅 빈 타원처럼 보입니다.
- 또렷한 눈과 입
- 배경보다 밝은 얼굴
- 동영상 분위기에 맞는 표정
- 얼굴 하나가 셋보다 강하다
배치: 3분할, 시선, 모서리
초점은 프레임의 왼쪽이나 가운데 3분의 1에 두세요. 그러면 오른쪽 아래의 재생 시간 배지를 피하고, 위쪽에는 두세 단어를 둘 공간이 남습니다. 인물이 사물, 텍스트, 결과 같은 무언가를 바라보면 시청자의 눈도 그 시선을 따라가는 경향이 있으므로, 주제가 프레임 바깥이 아니라 안쪽을 향하게 하세요.
진행률 표시줄과 둥근 모서리가 잘라 내는 맨 아래쪽에 얼굴을 두지 말고, 눈이나 입 위에 텍스트를 올리지 마세요.
| 위치 | 적합한 경우 | 주의할 점 |
|---|---|---|
| 왼쪽 3분의 1 | 얼굴 + 오른쪽 위 텍스트 | 텍스트를 배지 모서리 밖에 두기 |
| 가운데 | 사물 하나, 대칭 구도 | 텍스트는 위나 아래에 둬야 함 |
| 오른쪽 3분의 1 | 텍스트에서 얼굴로 이어지는 읽기 흐름 | 얼굴이 배지와 겹칠 수 있음 |
다섯 단계로 초점 만들고 확인하기
- 01
주제 고르기
동영상의 이야기를 전하는 얼굴, 사물, 결과 하나를 고르세요.
- 02
바짝 자르기
프레임의 25–45%를 차지할 때까지 키우세요. 얼굴은 최소 10–15%.
- 03
조명과 분리
주제를 배경보다 밝게 하고 가장자리 빛이나 림 라이트를 더하세요.
- 04
3분할 선에 배치
왼쪽이나 가운데에, 프레임 안쪽을 향하게, 오른쪽 아래 모서리를 피해 두세요.
- 05
검증하기
스퀸트 테스트를 실행하고, 디테일 히트맵을 열고, 점검 분석의 주제 행을 읽으세요.
ThumbProof가 얼굴과 주제를 감지하는 방법
일부 브라우저는 Shape Detection API를 통해 내장 얼굴 감지 기능을 제공합니다. 이 기능을 쓸 수 있으면 ThumbProof는 로컬에서 이를 사용해 얼굴 수를 세고 얼굴이 프레임에서 차지하는 비율을 측정합니다. 쓸 수 없으면 가장자리 밀도로 주요 주제를 추정합니다. 이미지를 16×9 격자로 나누고, 디테일이 높은 가장 큰 연결 영역을 찾아 프레임 대비 비율을 보고합니다.
두 방법 모두 브라우저 안에서만 실행되며 이미지는 어디로도 전송되지 않습니다. 추정치는 판결이 아니라 안내입니다. 복잡한 배경은 가장자리 감지기에게 큰 주제처럼 보일 수 있는데, 그래서 디테일이 정확히 어디에 있는지 보여 주는 히트맵 보기가 유용합니다.
얼굴이 없을 때
사람이 전혀 없는 강한 썸네일도 많습니다. 완성된 제품, 극적인 전후 비교, 지도, 인상적인 숫자 하나가 있는 차트 같은 것들이죠. 규칙은 같습니다. 주제 하나를, 크게, 대비를 주어 보여 주는 것입니다. 다만 감정은 표정 대신 구도, 색, 단어로 만들어야 합니다. 전후 분할은 168×94의 흑백에서도 차이가 보일 때 가장 효과적입니다.
초점을 잃지 않는 보조 요소
하나의 초점이 하나의 요소를 뜻하지는 않습니다. 강한 썸네일 대부분은 지배적인 주제 하나에 보조 요소 하나를 더합니다. 단어, 사물, 화살표, 또는 더 작은 두 번째 얼굴입니다. 보조 요소는 주요 주제의 약 3분의 1에서 절반 크기로 분명히 작아야 하며, 시선, 위치, 색을 통해 주제를 다시 가리켜야 합니다.
배경도 중요합니다. 흐리거나 어둡게 한 배경은 주제를 앞으로 밀어내고, 선명하고 디테일이 많은 배경은 주제와 경쟁합니다. 직접 촬영한다면 조리개를 넓게 열거나 편집에서 흐림을 더하고, 배경 밝기를 주제보다 20–40% 낮추세요.
| 요소 | 상대 크기 | 역할 |
|---|---|---|
| 주요 주제 | 100% | 눈이 가장 먼저 내려앉는 곳 |
| 보조 요소 | 30–50% | 맥락이나 반전을 더함 |
| 배경 | 부드럽고 더 어둡게 | 경쟁하지 않고 틀을 잡아 줌 |
시리즈 전반의 일관성
시리즈나 정기 포맷을 공개한다면 구도를 재사용하세요. 얼굴은 같은 쪽에, 텍스트는 같은 위치에, 강조색은 같은 색으로. 재방문 시청자는 패턴을 익혀 붐비는 피드에서 여러분의 동영상을 더 빨리 알아봅니다. 표정, 사물, 단어는 동영상마다 바꾸되 뼈대는 유지하세요.
동시에 같은 얼굴 컷을 반복해서 쓰지는 마세요. 모든 썸네일이 같은 놀란 표정이라면 시청자는 그것을 더 이상 신호로 보지 않습니다. 촬영할 때마다 여러 표정을 찍어 두고 각 동영상의 이야기에 맞는 것을 고르세요.
- 시리즈에는 같은 레이아웃 뼈대
- 표정과 사물은 다양하게
- 동영상마다 여러 후보 촬영
실전 예시: 단체 사진 대 클로즈업
한 브이로그 썸네일은 해변에 선 친구 네 명을 프레임 안에 작게 담았고, 뒤로 노을이 집니다. 얼굴 하나가 프레임의 약 1%를 차지합니다. 히트맵은 디테일이 수평선을 따라 고르게 퍼져 있음을 보여 주고, 주제 추정치는 68%로 하나의 초점이 없다는 뜻입니다.
다시 디자인한 버전은 웃고 있는 친구 한 명으로 잘라 얼굴이 프레임의 18%를 차지하게 하고, 왼쪽에 배치하고, 노을은 부드러운 배경으로 둡니다. 주제 추정치는 31%로 내려가고 사이드바 크기에서도 얼굴이 읽힙니다.
| 측정 항목 | 단체 사진 | 클로즈업 |
|---|---|---|
| 가장 큰 얼굴 | 프레임의 ~1% | 프레임의 18% |
| 주제 추정치 | 68% (퍼져 있음) | 31% (분명함) |
| 스퀸트 테스트 | 분명한 형태 없음 | 얼굴이 돋보임 |
| 168×94에서 읽힘 | 아니요 | 예 |
초점에서 흔한 실수
너무 작은 얼굴
와이드 샷은 원본 크기에서는 멋지지만 피드에서는 읽을 수 없습니다.
비중이 같은 주제 여러 개
같은 크기의 얼굴 셋은 주의를 분산시킵니다. 하나를 지배적으로 만드세요.
얼굴 위의 텍스트
가장 잘 읽히는 요소를 가립니다. 텍스트를 옆으로 옮기세요.
배지 모서리의 얼굴
재생 시간 배지가 턱이나 눈을 가릴 수 있습니다.
평평한 조명
그림자가 없으면 작은 크기에서 얼굴이 텅 빈 형태가 됩니다.
어울리지 않는 표정
차분한 튜토리얼에 충격받은 얼굴은 잘못된 기대를 줍니다.
동영상 썸네일 크기, 해상도, 파일 한도와 세이프 존
클릭률 높은 썸네일 체크리스트: 눈에 띄는 7가지 시각 원칙
기기별 제목 잘림: 글자 수가 아니라 픽셀 너비
썸네일 색상과 대비: 어두운 피드와 밝은 피드에서 돋보이기
썸네일 텍스트: 몇 단어를, 얼마나 크게, 어디에 둘까