휴대폰에서 보는 당신의 썸네일

전제가 거꾸로다

모바일 기준으로 만들라고들 한다. 거기서는 모든 것이 작으니까. 절반은 맞는데, 그 절반이 더 쓸모 있는 절반을 가린다. 휴대폰에 전달되는 파일은 실제로 작다. 그러나 당신의 썸네일이 거기서 차지하는 *시청자 화면의 몫*은 어디서보다도 크다.

측정할 수 있다. 이 도구의 목업이 실제 뷰포트 크기에서 유튜브 레이아웃을 재현하기 때문이다. 흔한 휴대폰 크기 셋과 데스크톱 크기 둘로 불러와, 표면마다 썸네일이 얼마나 크게 렌더링되는지, 그것이 화면의 몇 퍼센트인지, 한 화면에 항목이 몇 개 들어가는지를 쟀다.

한 화면이 실제로 담는 것

화면 몫은 뷰포트 전체 대비 썸네일의 면적이다. 화면당 항목 수는 브라우저 막대 아래에 들어가는 것을 센다. 온전한 것과 잘린 것 모두 — 반쯤 보이는 카드도 다음 스크롤을 두고 경쟁하는 카드이기 때문이다.

휴대폰 수치는 크기가 달라도 유지된다. 폭 375의 iPhone SE에서 16.0%, 폭 390의 iPhone 14에서 14.7%, 폭 412의 안드로이드에서 16.5%. 특정 기기의 별난 점이 아니라 단일 열 피드가 하는 일이다.

화면의 서너 배

휴대폰 피드 카드는 화면의 14.7%를 가져간다. 같은 카드가 데스크톱 격자에서는 노트북에서 5.2%, 폭 1920 모니터에서 3.3%다. 대부분의 시청자가 쓰는 기기에서 당신의 디자인은 서너 배, 많게는 네 배 반의 시야를 얻는다.

같은 방향의 차이가 하나 더 있다. 휴대폰에서 검색 결과는 피드와 같은 카드다. 같은 폭, 같은 높이, 한 줄에 하나. 반면 데스크톱에서는 검색이 넓은 행으로 바뀌고 홈은 격자로 남는다. 그러니 모바일에서는 세 표면 중 둘이 큰 쪽이다.

그리고 이웃은 3분의 1

휴대폰 화면에는 피드 카드가 3.6개 들어간다. 노트북에는 8.5개, 폭 1920 데스크톱에는 10.3개가 한 줄에 셋씩 들어간다. 같은 피드, 같은 영상, 완전히 다른 경쟁 상황이다. 데스크톱에서 시청자는 열 개를 한꺼번에 비교하고, 휴대폰에서는 셋을 만나고, 다시 셋, 다시 셋을 만난다.

동시와 순차의 차이다. 데스크톱 격자는 비교다. 열 개가 놓인 줄에서 눈이 다른 하나를 고른다. 휴대폰 피드는 결정의 연속이고, 각 결정은 그 순간 화면에 있는 것과 시청자가 1초 전에 기억하는 것에 대고 내려진다.

그래서 “튄다”의 뜻이 달라진다

썸네일 조언의 대부분은 이름표 없는 데스크톱 조언이다. 줄에서 튀어라, 어두운 것들 사이의 밝은 칸이 되라, 니치와 달라라. 전부 줄이 한꺼번에 보인다는 가정인데, 휴대폰에서는 그렇지 않다.

같은 목표의 모바일 버전은 이쪽에 가깝다. 혼자서도 읽히고 완결되어 있으라. 이웃과의 대비로만 작동하는 썸네일은 시간의 4분의 3 동안 대비할 상대가 없다. 자기 주제를 분명히 말하는 썸네일은 두 상황 모두에서 작동한다. 튀는 법 가이드의 측정이 전략이 아니라 바닥값인 이유가 그것이다. 다르다는 것은 격자에서는 필요조건이고, 연속에서는 불충분하다.

모바일이 정말로 작은 쪽인 곳

휴대폰의 한 표면은 정말로 작고, 그건 피드가 아니다. 재생 중인 영상 아래의 추천 목록은 143 × 80으로 렌더링된다. 화면의 3.5%, 한 화면에 여덟 개. 절대 크기로는 데스크톱의 추천 열을 빼면 데스크톱의 무엇보다도 작다.

단단한 바닥값이 거기서 나온다. 썸네일–제목 짝 가이드에서 측정한 제목 61자 한계가 거기이고, 얼굴 가이드의 머리 크기 규칙이 프레임 높이의 절반 이상을 요구하는 곳도 정확히 이 두 열이다. 휴대폰 피드는 넉넉하고, 휴대폰 추천 목록은 시청자가 당신을 올려놓을 가장 가혹한 표면이다.

파일도 작은 쪽이 아니다

휴대폰 피드 카드는 CSS 기준 폭 293픽셀이고, 휴대폰이 실제로 쓰는 2×·3× 화면에서는 586에서 879 물리 픽셀이 된다. 유튜브는 자리에 맞춘 파일을 제공하므로, 거기 도착하는 것은 더 큰 크롭 중 하나다. 데스크톱 추천 항목이 받는 168 × 94가 아니다.

그러니 흐릿한 썸네일 가이드에서 측정한, 압축되고 디테일이 부족한 경우는 두 기기 모두에서 추천 열이다. 휴대폰 피드는 내보내기 품질이 가장 잘 드러나는 표면이고, 흐릿하거나 노이즈가 낀 원본이 가장 먼저 티가 나는 곳이다. 그것을 가능하게 하는 최소 가로 폭은 유튜브의 썸네일 요건에 있습니다.

한 화면은 한 번의 스크롤이다

폭 390 화면에서 휴대폰 카드 하나에서 다음 카드까지의 세로 간격은 220픽셀이고, 화면 높이는 844다. 카드 세 개 반. 평범한 스크롤 동작 한 번이 그것을 전부 갈아치운다.

기하학은 시청자가 얼마나 오래 보는지 말해주지 않는다. 레이아웃에서 그것을 잴 수 있는 사람은 없다. 다만 결정의 단위가 무엇인지는 말해준다. 데스크톱에서는 눈이 훑는 격자가 단위이고, 휴대폰에서는 도착해서 판정받고 사라지는 카드 하나가 단위다. 당신의 썸네일이 할 말이 무엇이든, 그 창 안에서 혼자, 폭 293픽셀로 말한다.

기하학이 보상하는 것

여기 어느 것도 다른 곳에서 측정한 바닥값을 부정하지 않는다. 우선순위만 바꾼다. 고립 상태의 가독성이 이웃과의 대비를 이긴다. 고립이 휴대폰의 기본 조건이기 때문이다. 비교 없이도 읽히는 크기의 글자, 스스로를 알리는 피사체, 옆 영상 없이도 의도적으로 보이는 팔레트.

그리고 같은 파일이 데스크톱 격자와 두 추천 열로도 가므로, 디자인은 두 상황을 동시에 견뎌야 한다. 타협이라기보다 순서다. 추천 목록의 143 × 80과 휴대폰의 293 × 165에서 되게 만들면, 크기가 그 사이에 있고 시청자에게 시간을 더 주는 데스크톱 격자는 저절로 해결된다.

정말로 모바일에만 해당하는 결정은 제목에 얼마나 기대는가다. 휴대폰에서 제목은 썸네일 바로 아래 같은 폭으로 놓인다. 데스크톱 추천 열에서는 옆의 폭 138픽셀짜리 띠다. 휴대폰에서는 그 짝이 다른 어디서와도 다르게 하나의 단위로 읽힌다.

확인은 중요한 기기에서

위의 모든 숫자는 이 가이드가 놓인 바로 그 도구에서 나왔고, 그 도구에 기기 전환이 있는 이유가 정확히 이것이다. 모바일 화면은 축소한 데스크톱 화면이 아니라 산수가 다른 별개의 레이아웃이다.

그러니 확인은 미리보기 도구에서 두 번의 클릭이다. 썸네일이 가장 크고 가장 외로운 휴대폰 피드, 그다음 가장 작은 휴대폰 추천 목록. 둘 다에서 버티면 데스크톱 표면은 이미 덮인 셈이다.

이 측정이 무엇이고 무엇이 아닌가

이 도구가 재현한 유튜브 웹 레이아웃을, 흔한 휴대폰의 뷰포트 크기에서 CSS 픽셀로 잰 값이다. 네이티브 앱은 자체 수치를 쓰고 몇 픽셀씩 다르다. 다만 결과의 모양 — 한 열, 화면의 6분의 1인 카드, 화면당 세 개 반 — 은 양쪽에서 같다.

기기의 픽셀 밀도는 전달되는 파일에 영향을 주고 레이아웃에는 주지 않는다. 3× 휴대폰은 같은 293픽셀 카드에 더 큰 파일을 받는다. 그리고 “화면당 항목”은 기하학적으로 보이는 것을 센 것이고, 그것은 레이아웃에 관한 사실이지 주의에 관한 사실이 아니다. 그 공간에서 시청자가 무엇을 알아차리는지는 인터페이스 측정으로 답할 수 있는 문제가 아니다.

모두가 묻는 질문