공유 미리보기 이미지·파비콘 규격
링크를 붙였을 때 뜨는 카드 이미지는 가로 1,200 × 세로 630px 한 장, 탭에 뜨는 아이콘은 정사각 512px 한 장이면 대부분의 자리에서 맞습니다. 잘려도 남는 자리, 파비콘을 몇 벌 만드나, 바꿨는데 안 바뀔 때 하는 일을 표로 정리했습니다.

링크를 붙였을 때 뜨는 카드 이미지는 가로 1,200 × 세로 630px 한 장, 브라우저 탭에 뜨는 아이콘은 정사각 512px 한 장 — 이 두 파일이면 대부분의 자리에서 맞습니다. 크기보다 자주 어긋나는 것은 잘리는 자리와 글자 크기입니다. 카드를 정사각으로 잘라 쓰는 곳이 있고, 아이콘은 실제로 16~32px 까지 줄어들기 때문입니다.
공유 미리보기 이미지 — 홈페이지 주소를 채팅이나 사회관계망에 붙였을 때 제목 · 설명과 함께 뜨는 그림입니다. 파비콘 — 브라우저 탭과 즐겨찾기에 뜨는 작은 아이콘입니다.
미리보기 이미지는 어떤 크기로 만드나요
| 항목 | 값 | 이유 |
|---|---|---|
| 크기 | 1,200 × 630px | 가로가 세로의 약 1.9배 — 카드가 가장 널리 쓰는 비율입니다 |
| 가장 작은 크기 | 600 × 315px | 이보다 작으면 카드가 아니라 작은 네모로 뜹니다 |
| 용량 | 300KB 안팎, 1MB 이하 | 무거우면 그림이 빠지고 글자만 나갑니다 |
| 형식 | JPG 또는 PNG | 투명 배경은 검게 차는 곳이 있어 배경을 채웁니다 |
| 주소 | 홈페이지 전체 주소 | 파일 이름만 적으면 찾아오지 못합니다 |
대체로 통하는 기준입니다. 붙이는 곳마다 조금씩 다르게 잘라 쓰니, 자주 쓰는 링크는 실제로 한 번 붙여 보고 눈으로 확인합니다. 한 장을 만들어 두면 홈페이지 · 소개 자료 · 문의 답장에 붙이는 링크가 전부 같은 그림으로 뜹니다.
잘려도 남는 자리는 어디인가요
같은 이미지라도 어떤 곳은 가로로 긴 카드로, 어떤 곳은 정사각으로, 어떤 곳은 목록 옆 작은 네모로 자릅니다. 어디서 잘려도 남는 자리는 가운데입니다.
| 잘리는 모양 | 남는 자리 | 여기에 둘 것 |
|---|---|---|
| 가로로 긴 카드 | 1,200 × 630px 전체 | 배경 사진과 분위기 |
| 정사각 | 가운데 630 × 630px | 로고와 핵심 글자 한 줄 |
| 목록 옆 작은 네모 | 가운데 절반 | 심벌 하나 |
| 글자 없이 그림만 | 이미지 전체 | 그림만으로 무엇인지 알게 |
글자는 한글 15자 안쪽으로 크게 한 줄만 넣습니다. 문장을 여러 줄 넣으면 목록에서 작게 뜰 때 아무것도 읽히지 않습니다. 가장자리 사방 5% 는 비워 둡니다.
파비콘은 몇 벌을 만드나요
| 쓰임 | 크기 | 만드는 법 |
|---|---|---|
| 원본 | 512 × 512px | PNG 로 만들고, 있으면 SVG 도 함께 |
| 브라우저 탭 | 32 × 32px | 원본에서 줄여 뽑습니다 |
| 즐겨찾기 · 목록 | 48 × 48px | 같은 원본에서 뽑습니다 |
| 폰 홈 화면 아이콘 | 180 × 180px | 모서리가 둥글게 잘리니 안쪽 10% 를 비웁니다 |
기준은 하나입니다 — 32px 로 줄여 놓고 알아볼 수 있는가. 가로로 긴 로고를 통째로 넣으면 32px 에서는 회색 덩어리가 됩니다. 첫 글자 하나나 심벌만 남기고, 선은 굵게, 색은 두세 가지 안으로 줄입니다. 배경은 투명 대신 색을 채우는 편이 안전합니다 — 탭이 어두운 화면에서 검은 아이콘은 사라집니다.
파비콘은 한 번 만들면 오래 씁니다. 로고를 바꿀 때만 다시 만들면 되니, 512px 원본과 거기서 뽑은 크기들을 한 폴더에 모아 로고 폴더 옆에 둡니다. 나중에 다른 사람이 홈페이지를 손볼 때 그 폴더만 넘기면 됩니다.
페이지마다 다른 이미지를 넣어야 하나요
전부 다르게 만들 필요는 없습니다. 기본 한 장을 두고, 사람들이 실제로 링크를 붙이는 페이지에만 따로 만듭니다.
| 페이지 | 쓰는 이미지 | 넣을 글자 |
|---|---|---|
| 기본 · 그 밖의 모든 페이지 | 대표 이미지 한 장 | 회사 이름과 한 줄 소개 |
| 제품 · 서비스 소개 | 그 제품 대표 사진 | 제품 이름 |
| 글 · 소식 | 그 글의 대표 이미지 | 글 제목 앞부분 |
| 문의 · 찾아오는 길 | 기본 이미지 | 넣지 않습니다 |
글이 계속 늘어나는 자리는 글마다 이미지를 새로 만들기 어렵습니다. 대표 이미지가 없으면 기본 한 장이 대신 뜨도록 해 두면 빈 카드로 나가는 일은 막을 수 있습니다.
카드에 함께 뜨는 제목과 설명은 몇 자로 적나요
카드는 이미지 · 제목 · 설명 세 덩어리로 뜹니다. 이미지만 맞춰 두고 나머지를 비워 두면 주소가 그대로 나가거나 페이지 첫 문장이 잘려 들어갑니다.
- 제목은 한글 20자 안쪽 — 넘으면 뒤가 잘립니다. 회사 이름은 앞이 아니라 뒤에 붙입니다
- 설명은 한글 40자 안쪽 한두 문장 — 잘려도 말이 되도록 앞 문장에 결론을 담습니다
- 페이지마다 다르게 적습니다 — 전부 같으면 목록에서 어느 링크인지 구분되지 않습니다
- 느낌표와 특수문자는 넣지 않습니다 — 자리만 차지하고 뜻은 늘지 않습니다
사람이 먼저 보는 것은 이미지, 그다음이 제목입니다. 셋을 한 화면에서 같이 정하면 이미지에 넣은 글자와 제목이 같은 말을 반복하는 일이 줄어듭니다.
바꿨는데 안 바뀌면 어떻게 하나요
한 번 읽어 간 정보를 각 서비스가 얼마간 저장해 둡니다. 그래서 이미지를 새로 올려도 예전 그림이 계속 뜹니다. 가장 빠른 방법은 파일 이름을 바꿔 새 주소로 올리는 것입니다 — 주소가 달라지면 새로 읽어 갑니다.
그다음 확인할 것은 세 가지입니다. 이미지 주소가 전체 주소로 적혀 있는지 · 로그인해야 보이는 폴더에 있지 않은지 · 그 페이지가 수집을 막고 있지 않은지. 셋 다 아니면 저장해 둔 정보가 갱신되기를 기다리면 됩니다. 서비스마다 제공하는 미리보기 확인 도구에 주소를 넣으면 지금 어떤 그림을 읽어 가는지 그 자리에서 보입니다.
오늘 할 일
홈페이지 주소를 자기 자신에게 채팅으로 한 번 보내 봅니다. 카드가 아예 안 뜨거나, 그림 자리에 흰 네모가 뜨거나, 글자가 안 읽히면 미리보기 이미지가 없거나 규격이 어긋난 것입니다. 1,200 × 630px 한 장을 만들어 올리고 파일 이름을 새로 붙인 뒤 다시 보내 확인합니다. 40분이면 끝납니다.