배너·썸네일 사이즈 — 비율 한 표로 정리

배너와 썸네일은 걸리는 자리마다 픽셀이 다르지만, 실제로 관리할 것은 비율 네 가지뿐입니다. 16:9 · 1:1 · 4:5 · 9:16. 세로로 가장 긴 비율로 원본을 한 번 만들어 두고 거기서 잘라 내면 대부분의 자리에 들어갑니다. 픽셀 숫자는 매체가 화면을 고칠 때마다 바뀌지만 비율은 잘 바뀌지 않습니다.

왜 픽셀이 아니라 비율로 관리하나요

매체마다 권장 픽셀이 다르고, 화면이 개편되면 그 숫자도 바뀝니다. 픽셀을 기준으로 파일을 관리하면 숫자가 바뀔 때마다 전부 새로 만들어야 합니다. 비율이 같으면 픽셀이 달라져도 그대로 늘리거나 줄여 쓸 수 있습니다.

필요한 픽셀 값은 그 매체의 소재 등록 화면에 적혀 있습니다. 만들 때는 그 값의 2배로 그리고 절반으로 줄여 내보냅니다. 나중에 더 큰 자리에 걸게 되어도 다시 그리지 않습니다.

비율	모양	주로 걸리는 자리
16:9	가로로 넓음	동영상 썸네일 · 가로 배너 · 발표 화면
1:1	정사각형	목록 카드 · 피드 이미지 · 프로필
4:5	세로로 조금 김	화면을 크게 차지하는 피드 자리
9:16	세로로 김	세로 전체 화면 영상 · 세로 배너

비율은 가로:세로 순서로 씁니다. 16:9 는 가로가 길고 9:16 은 세로가 깁니다. 두 숫자의 순서만 바꾼 것이라 말로 주고받으면 헷갈리는데, 파일 이름에 16x9 · 9x16 으로 넣어 두면 열어 보지 않고도 구분됩니다.

원본은 어떤 크기로 만들어 두나요

세로로 가장 긴 비율부터 만듭니다. 9:16 으로 그려 두면 여기서 4:5 · 1:1 · 16:9 를 모두 잘라 낼 수 있습니다. 반대로 16:9 로 먼저 그리면 세로로 긴 자리에 걸 때 위아래가 비어 배경을 새로 그려야 합니다.

원본 픽셀은 짧은 변을 기준으로 잡습니다. 예를 들어 짧은 변을 2,160px 로 두면 9:16 원본이 2,160×3,840px 이 되고, 대부분의 자리에서 줄여 쓰는 쪽이 되어 화질이 남습니다. 이보다 작게 만들면 큰 자리에 걸 때 늘려야 하는데, 늘린 그림은 글자 테두리부터 흐려집니다.

원본에서 배경은 화면 끝까지 채워 둡니다. 잘라 내는 위치가 달라져도 흰 여백이 생기지 않습니다. 제품과 글자는 배경과 다른 층에 올려 두면 비율마다 자리를 옮길 수 있습니다. 9:16 에서 위쪽에 두었던 제품을 16:9 에서는 왼쪽으로 옮기는 식입니다.

안전 영역은 어떻게 잡나요

안전 영역 — 어떤 비율로 잘라도 살아남는 가운데 부분입니다. 글자 · 제품 · 로고는 전부 이 안에만 놓습니다. 원본 가운데에 가로세로 각각 80% 크기의 상자를 그려 두고 그 안에서만 작업하면 됩니다.

구간	무엇을 놓나
가운데 80%	글자 · 제품 · 로고
바깥 10%씩	배경과 색 면만
아래 15%	비워 둡니다 — 제목과 가격이 겹쳐 나오는 자리가 있습니다

아래쪽을 비워 두는 것을 자주 빠뜨립니다. 목록 화면에서는 이미지 아래에 제목과 가격이 겹쳐 나오는 자리가 있어서, 아래 15% 에 글자를 넣으면 가려집니다. 그 자리에 배경만 두면 무엇이 겹쳐도 그림이 망가지지 않습니다.

로고는 네 귀퉁이 가운데 한 곳으로 정해 두고 모든 소재에서 같은 자리에 둡니다. 소재마다 자리가 바뀌면 여러 장을 나란히 걸었을 때 흔들려 보입니다. 안전 영역 안쪽 모서리에서 로고 높이의 절반만큼 띄우면 어느 비율로 잘라도 잘리지 않습니다.

글자는 몇 자까지 넣나요

썸네일은 만든 크기 그대로 보이지 않습니다. 목록에서는 4분의 1 정도로 줄어든 상태로 지나갑니다. 그래서 글자 기준은 읽히는가 하나뿐입니다.

항목	기준
한 장에 담는 문장	1개 — 두 가지를 말하면 둘 다 안 읽힙니다
글자 수	12자 이내 · 두 줄까지
글자 높이	짧은 변의 1/12 이상 — 1,080px 이면 90px 이상
확인 방법	4분의 1 크기로 줄여 놓고 읽히는지 봅니다

완성한 파일을 화면에서 4분의 1 크기로 줄여 놓고 한 걸음 물러나 봅니다. 그 상태에서 안 읽히는 글자는 실제 자리에서도 안 읽힙니다. 읽히지 않으면 글자를 키우기보다 문장을 줄이는 쪽이 빠릅니다 — 키우면 제품이 들어갈 자리가 없어집니다.

글자는 사진 위에 바로 얹지 말고 어두운 판이나 밝은 판을 한 겹 깔고 올립니다. 사진의 밝은 부분과 만나는 순간 흰 글자가 사라지기 때문입니다.

내보낼 때 형식과 용량은 어떻게 맞추나요

형식과 용량 한도는 그 매체의 소재 등록 화면에 적혀 있습니다. 한도만 확인하면 되고 나머지는 아래 세 줄로 고정해 두면 매번 다시 정하지 않아도 됩니다.

• 형식 — 사진이 많으면 JPG, 글자와 단색 면이 많으면 PNG
• 용량 — 한도의 절반 안쪽으로. 여유가 있어야 나중에 글자를 한 줄 더해도 다시 줄이지 않습니다
• 색 — 화면에 걸리는 것이므로 RGB 로 내보냅니다. 인쇄용 색으로 내보내면 화면에서 탁해집니다

내보낸 파일은 실제로 걸릴 화면에서 한 번 열어 봅니다. 작업하던 화면과 밝기가 다르게 맞춰져 있는 경우가 많습니다.

파일 이름과 폴더는 어떻게 정리하나요

소재는 금방 수십 개가 됩니다. 이름 규칙을 처음에 정해 두면 어떤 소재가 어느 자리에 걸렸는지 나중에 되짚을 수 있습니다. 주제_비율_버전 세 칸이면 충분합니다.

• 주제 — 무엇을 알리는 소재인지 영문 소문자로. 예를 들어 spring
• 비율 — 9x16 · 4x5 · 1x1 · 16x9
• 버전 — a · b. 같은 자리에 번갈아 걸어 보는 안을 구분합니다
• 합치면 spring_1x1_a.jpg 처럼 됩니다

폴더는 비율별로 나눕니다. 매체에 올릴 때 그 비율 폴더만 열면 되기 때문입니다. 원본 파일은 따로 한 폴더에 모아 두고, 잘라 낸 파일만 비율 폴더에 둡니다. 원본이 남아 있으면 새 비율이 필요해져도 다시 그리지 않습니다.

오늘 할 일

지금 쓰고 있는 광고 소재 한 장을 열어 가운데에 가로세로 80% 크기의 상자를 그려 보십시오. 상자 밖으로 나간 글자와 로고를 안으로 옮긴 다음, 그 파일을 9:16 · 4:5 · 1:1 · 16:9 네 개로 저장하십시오. 30분이면 네 자리에 그대로 걸 수 있는 한 벌이 생깁니다.