더미 이미지 크기는 왜 하필 640×480, 1200×630일까
디자인 시안을 짤 때, 레이아웃을 테스트할 때 임시 이미지가 필요합니다. 그런데 크기 목록을 보면 늘 비슷한 숫자가 나옵니다. 640×480, 800×600, 1280×720, 1920×1080.
이 숫자들은 누군가 보기 좋게 고른 값이 아닙니다. 각각 출처가 있습니다. 그리고 그 출처를 알면 내 화면에 무엇을 넣어봐야 하는지도 정해집니다.
640×480은 모니터 규격의 흔적이다
앞쪽 크기들은 옛날 모니터 해상도에서 왔습니다. 640×480, 800×600, 1024×768. 컴퓨터 화면이 점점 커지면서 차례로 표준이 된 값들입니다.
공통점이 하나 있습니다. 전부 4 대 3입니다. 초창기 모니터가 텔레비전 화면 비율을 그대로 물려받았기 때문입니다. 화면이 커져도 모양은 그대로 두고 픽셀만 늘린 셈입니다.
그러다 방송이 와이드로 바뀌면서 화면도 옆으로 길어졌습니다. 1280×720과 1920×1080이 그 결과이고, 둘 다 16 대 9입니다. 지금 쓰는 모니터, 노트북, 텔레비전이 거의 이 비율입니다.
| 크기 | 비율 | 계보 |
|---|---|---|
| 100×100 | 1:1 | 정사각형 |
| 150×150 | 1:1 | 정사각형 |
| 300×200 | 3:2 | 일반 사진 |
| 640×480 | 4:3 | 옛 모니터 |
| 800×600 | 4:3 | 옛 모니터 |
| 1024×768 | 4:3 | 옛 모니터 |
| 1280×720 | 16:9 | 와이드 화면 |
| 1920×1080 | 16:9 | 와이드 화면 |
작은 정사각형 두 개는 성격이 다릅니다. 100×100과 150×150은 프로필 사진이나 아이콘 자리를 채우는 용도입니다. 목록이 큰 것부터 작은 것까지 고르게 있는 이유도 여기 있습니다. 큰 배너와 작은 아이콘은 레이아웃에서 전혀 다른 문제를 일으킵니다.
왜 하필 이 크기들이 남았는지도 설명이 됩니다. 당시 화면 전체를 채우는 이미지가 이 크기였고, 그 시절에 만들어진 문서·소프트웨어·인쇄물이 그 규격을 그대로 물려받았습니다. 지금은 그만한 모니터를 쓰는 사람이 거의 없지만, "기본 크기"라는 자리에는 여전히 이 숫자들이 앉아 있습니다. 프리셋 목록이 옛 규격부터 시작하는 이유이기도 합니다.
SNS 규격은 계보가 끊긴다
플랫폼별 이미지 크기로 넘어가면 규칙성이 사라집니다. 각 회사가 자기 화면에 맞춰 정한 값이라 서로 참고하지 않았기 때문입니다.
| 용도 | 크기 | 비율 | 가로세로 배 |
|---|---|---|---|
| Facebook 커버 | 820×312 | 205:78 | 2.63배 |
| Instagram 포스트 | 1,080×1,080 | 1:1 | 1.00배 |
| Instagram 스토리 | 1,080×1,920 | 9:16 | 0.56배 |
| Twitter 헤더 | 1,500×500 | 3:1 | 3.00배 |
| Twitter 포스트 | 1,200×675 | 16:9 | 1.78배 |
| YouTube 썸네일 | 1,280×720 | 16:9 | 1.78배 |
| YouTube 배너 | 2,560×1,440 | 16:9 | 1.78배 |
| LinkedIn 커버 | 1,584×396 | 4:1 | 4.00배 |
| OG 이미지 | 1,200×630 | 40:21 | 1.90배 |
몇 가지가 눈에 띕니다. 유튜브는 썸네일과 배너가 크기는 두 배 차이인데 비율은 똑같이 16 대 9입니다. 영상 자체가 16 대 9이니 그 위아래를 통일한 것입니다.
반대로 커버 이미지들은 아주 납작합니다. 링크드인 커버는 1,584×396로 가로가 세로의 4배이고, 트위터 헤더도 3배입니다. 프로필 상단을 가로로 길게 채우는 자리라 이렇게 생겼습니다. 여기에 정사각형 이미지를 넣으면 위아래가 잘려 나갑니다.
페이스북 커버는 더 특이합니다. 820×312인데 약분해도 205:78이라 읽기 좋은 숫자가 나오지 않습니다. 가로 820이라는 값 자체가 옛 레이아웃 폭에서 나온 것이라 비율보다 픽셀 수를 먼저 정한 규격입니다.
OG 이미지만 16 대 9가 아닌 이유
가장 자주 틀리는 것이 링크 미리보기 이미지입니다. 카카오톡이나 메신저에 링크를 붙이면 뜨는 그 이미지입니다.
권장 크기는 1,200×630입니다. 가로가 1,200이니 16 대 9라면 세로가 675이어야 하는데 630입니다. 45픽셀 낮습니다.
비율로 보면 1.905 대 1이고, 16 대 9인 1.778 대 1보다 조금 납작합니다. 약분하면 40:21인데 이 숫자를 외우는 사람은 없고, 보통 약 1.91 대 1이라고 부릅니다.
차이가 작아 보이지만 결과는 다릅니다. 16 대 9로 만든 이미지를 올리면 위아래가 잘리거나 여백이 생깁니다. 로고나 글자를 가장자리에 붙여 놨다면 그 부분이 사라집니다. 미리보기에서만 어색해지는 문제라 만들 때는 알아채기 어렵습니다.
그래서 링크 미리보기용 이미지는 처음부터 이 크기로 만들고, 중요한 요소는 가운데 쪽으로 모으는 편이 안전합니다. 트위터 포스트용 1,200×675는 정확히 16 대 9라 두 규격을 하나로 쓰려다 실패하는 경우가 자주 생깁니다.
테스트할 때 무엇을 넣어봐야 하나
더미 이미지의 목적은 예쁜 그림이 아니라 레이아웃을 깨보는 것입니다. 그러려면 한 가지 크기만으로는 부족합니다.
- 가장 납작한 것과 가장 긴 것을 같이 넣는다 — 4배짜리 커버와 1,080×1,920짜리 세로 이미지를 같은 자리에 넣어보면 무너지는 지점이 바로 보입니다.
- 정사각형은 따로 확인한다 — 가로형만 보고 만든 레이아웃에 정사각형이 들어오면 높이가 갑자기 커지면서 아래 요소가 밀립니다.
- 실제 크기로 넣는다 — 1,920×1,080짜리를 작게 축소해 쓰는 것과 처음부터 작은 이미지를 쓰는 것은 화질과 로딩이 다릅니다.
- 포맷도 바꿔본다 — PNG·JPEG·WebP 세 가지가 있는데 투명 배경이 필요하면 PNG, 용량을 줄이려면 WebP가 유리합니다. JPEG은 투명을 지원하지 않아 배경이 흰색으로 채워집니다.
- 패턴을 섞어 구분한다 — 단색·그라데이션·격자·도트·빗금 다섯 가지가 있어서 여러 장을 늘어놓을 때 어느 이미지가 어느 자리인지 헷갈리지 않습니다.
더미 이미지를 쓰는 진짜 이유는 내용이 없기 때문입니다. 실제 사진을 넣으면 눈이 그림 쪽으로 쏠려서 간격이 어긋난 것도, 글자가 밀린 것도 잘 안 보입니다. 단색이나 격자로 채운 상자를 넣으면 레이아웃의 뼈대만 남아 문제가 그대로 드러납니다. 크기와 비율만 정확하면 그림이 뭔지는 상관없다는 뜻이기도 합니다.
일괄 생성 기능을 쓰면 SNS 규격 여러 개를 한 번에 만들 수 있습니다. 콘텐츠 하나를 여러 채널에 올릴 때 각 규격에서 어떻게 잘리는지 미리 보는 용도로 쓸 만합니다.
정리하면 규격 숫자에는 이유가 있습니다. 640×480 계열은 옛 모니터, 1,920×1,080은 와이드 화면, SNS 크기는 각 플랫폼이 자기 화면에 맞춰 정한 사정. 그중에서 1,200×630만 유독 어중간한 비율이라는 것만 기억해도 링크 미리보기가 잘리는 사고는 막을 수 있습니다. 규격을 외우기보다 어디서 온 숫자인지를 알아두는 편이 오래갑니다.
더미 이미지 생성기에서 크기·비율·패턴·포맷을 골라 바로 내려받을 수 있습니다. SNS 규격을 여러 개 체크해 한 번에 만드는 일괄 생성도 있습니다.
자주 묻는 질문
- 640 × 480, 800 × 600, 1024 × 768은 어디서 온 크기인가요?
- 옛 모니터 해상도(VGA·SVGA·XGA)입니다. 전부 4 : 3으로, 초창기 모니터가 텔레비전 화면 비율을 그대로 물려받았기 때문입니다. 1280 × 720과 1920 × 1080은 방송이 와이드로 바뀐 뒤의 16 : 9 규격입니다.
- OG(링크 미리보기) 이미지는 왜 1200 × 630인가요?
- 16 : 9라면 세로가 675여야 하는데 630으로 45픽셀 낮습니다. 비율로는 약 1.91 : 1(약분하면 40 : 21)이라 16 : 9(1.778 : 1)로 만든 이미지를 올리면 위아래가 잘리거나 여백이 생깁니다. 처음부터 1200 × 630으로 만들고 중요한 요소는 가운데로 모으는 편이 안전합니다.
- 트위터 포스트용 1200 × 675와 OG 이미지를 한 장으로 쓸 수 있나요?
- 1200 × 675는 정확히 16 : 9고 OG는 1.91 : 1이라, 한 장으로 두 규격을 맞추려다 실패하는 경우가 자주 생깁니다. 가장자리에 로고나 글자를 붙여 놨다면 어느 한쪽에서 그 부분이 사라집니다.
- 레이아웃 테스트에는 어떤 크기를 넣어봐야 하나요?
- 가장 납작한 것(LinkedIn 커버 1,584 × 396, 가로가 세로의 4배)과 가장 긴 것(Instagram 스토리 1,080 × 1,920)을 같은 자리에 넣어 무너지는 지점을 보고, 정사각형은 따로 확인합니다. 투명 배경이 필요하면 PNG, 용량을 줄이려면 WebP가 유리하고 JPEG은 투명을 지원하지 않습니다.
함께 읽으면 좋은 글
크기와 비율은 도구에 들어 있는 프리셋 값을 그대로 정리한 것입니다. 플랫폼별 권장 크기는 서비스 정책에 따라 바뀔 수 있으므로 중요한 작업 전에는 해당 플랫폼의 최신 안내를 확인하시기 바랍니다. 비율은 가로와 세로를 최대공약수로 나눈 값입니다.
참고 자료
- The Open Graph protocol — og:image 등 링크 미리보기 메타 태그 규격
- Meta for Developers — 웹마스터 공유 가이드 — 링크 미리보기 이미지 권장 크기 1,200 × 630