가이드 / Finipix / 공개하기

링크 공유 이미지(1200×630) 잘 보이게 만드는 법

Qorlize 팀 작성 · 마지막 검토

Finipix 가이드 · 웹용 이미지 줄이기 · 크기 바꾸기. Finipix 열기

링크가 채팅방이나 피드에 올라가면 가장 크게 보이는 것이 미리보기 이미지인데, 정작 가장 늦게 챙기게 되는 것도 이 이미지입니다. 페이지의 히어로 사진을 그대로 쓰다가 앱이 제멋대로 잘라 제목이 반쯤 날아간 채로 공유되는 일이 흔합니다. 휴대폰에서 실제로 보이는 크기는 파일보다 훨씬 작으니, 그 크기를 기준으로 몇 분만 계획하면 결과가 확 달라집니다.

이 글은 이미지 자체를 만드는 방법을 다룹니다. 이미지를 연결하는 og:image 같은 태그는 파비콘과 링크 미리보기 설정하기에 정리해 두었습니다.

캔버스는 1200×630으로 시작합니다

Meta의 링크 공유 문서는 1200×630픽셀 이상, 1.91:1에 가까운 비율을 권하고, 큰 미리보기로 보이려면 최소 600×315픽셀이 필요하다고 안내합니다. 오픈그래프 태그를 읽는 다른 앱들도 이 크기를 무난하게 처리하기 때문에 사실상 기본값이 되었습니다. 처음부터 캔버스를 1200×630으로 잡거나, 디자인 도구가 큰 크기에서 글자를 더 선명하게 내보낸다면 정확히 두 배인 2400×1260으로 만든 뒤 줄이십시오.

다른 비율로 만들어 놓고 알아서 잘 나오길 기대하지 않는 편이 좋습니다. 정사각형이나 세로 사진은 앱이 자르게 되고, 어디를 자를지는 내가 고를 수 없습니다.

앱마다 보여 주는 모양이 다릅니다

1.91:1 이미지를 넣어도 사람들이 보는 모양은 제각각입니다. 앱과 화면 배치, 화면 폭에 따라 넓은 직사각형 전체가 보이기도 하고, 위아래가 줄어든 띠 모양이 되기도 하고, 제목 옆에 작은 정사각형 썸네일로만 나오기도 합니다. 앱들은 이 배치를 수시로 바꾸고 정확히 어떻게 자르는지 공개하는 경우도 드물어서, 특정 앱 하나에 맞춰 디자인하지 않는 편이 안전합니다.

현실적인 해법은 안전 영역입니다. 꼭 살아남아야 하는 것(제목, 제품, 얼굴, 로고)은 캔버스 가운데에 두고, 바깥쪽은 잘려도 되는 배경으로 생각합니다.

  • 가장자리: 1200×630 캔버스의 네 변에서 최소 60~80픽셀은 비워 둡니다.
  • 정사각형으로 잘릴 때: 정사각형 썸네일로도 통하게 하려면 핵심 요소를 가운데 630×630 안에 넣습니다. 왼쪽에서 대략 285픽셀부터 915픽셀 사이입니다.
  • 배경: 좌우 3분의 1은 질감이나 단색, 사진의 덜 중요한 부분으로 채웁니다. 잘려도 잃는 것이 없게 합니다.

대부분의 디자인 도구에서 캔버스에 안내선을 끌어다 놓을 수 있습니다. 여백용 안내선 네 개와 285·915픽셀 위치에 두 개를 놓고 그 안에서 작업하십시오.

글자는 줄어들어도 읽혀야 합니다

가로 1200픽셀 이미지가 1200픽셀로 보이는 일은 거의 없습니다. 휴대폰 채팅방에서는 미리보기 폭이 몇백 픽셀에 그치는 경우가 많습니다. 폭 400픽셀로 보인다고 하면 모든 것이 3분의 1로 줄어듭니다. 48픽셀 제목은 본문 글자 정도인 16픽셀이 되고, 24픽셀 작은 글씨는 8픽셀이 되어 아무도 읽지 못합니다.

이 계산에서 나오는 실용적인 기준은 다음과 같습니다.

  • 제목은 1200×630 캔버스 기준 64픽셀 이상, 굵게(Bold) 또는 세미볼드로.
  • 꼭 읽혀야 하는 글자는 40픽셀 아래로 내리지 않기.
  • 한국어라면 열다섯 자 안팎, 많아도 두 줄. 태그의 제목과 설명이 이미지 아래나 옆에 따로 나오므로 이미지가 그 내용을 다 반복할 필요는 없습니다.

가장 빠른 확인 방법은 디자인 도구의 화면 배율을 줄여 캔버스가 휴대폰 미리보기만 해지게 보는 것입니다. 아니면 내보낸 파일을 휴대폰에 띄워 팔을 뻗은 거리에서 보십시오. 눈을 찡그려야 읽힌다면 글자가 너무 작거나 깁니다.

대비와 색

미리보기 이미지는 햇빛 아래 밝은 휴대폰 화면에서도, 다크 모드에서도, 손톱만 한 썸네일로도 보입니다. 모니터에서는 멀쩡하던 글자가 이런 환경에서는 사라지기 쉽습니다.

  • 글자는 단색이거나 차분한 영역 위에 둡니다. 사진의 복잡한 부분을 가로지르지 않게 하고, 꼭 사진 위에 올려야 한다면 뒤에 단색 띠나 어두운 반투명 층을 깝니다.
  • 글자와 배경의 대비는 충분히 강하게 합니다. 웹 접근성 지침이 일반 글자에 요구하는 4.5:1은 여기서도 좋은 최소 기준입니다. 결국 글자가 작게 보이기 때문입니다. 대비 확인 방법은 HTML 페이지 색을 브랜드 색으로 바꾸기에 적었습니다.
  • 테두리 없는 순백색 배경은 피하십시오. 밝은 테마의 채팅방에서는 말풍선과 섞여 이미지가 빠진 것처럼 보입니다. 옅은 색을 깔거나 가장자리에 얇은 색을 두면 해결됩니다.
  • 빨강 글자에 초록 배경처럼 색상 차이에만 기대는 조합도 피합니다. 이 둘을 잘 구별하지 못하는 사람이 적지 않습니다.

로고는 어디에 둘까

로고는 누구나 구석에 넣고 싶어 하지만, 잘릴 때 가장 먼저 사라지는 것도 구석입니다. 브랜드가 알아보여야 한다면 로고를 안전 영역 안, 제목 위나 옆에 두고, 이미지가 3분의 1로 줄어도 모양을 알아볼 수 있는 크기로 넣으십시오. 캔버스 기준 폭 120~160픽셀이면 대개 충분하고, 화면을 압도할 필요는 없습니다. 긴 글자형 로고라면 심볼만 쓰는 편이 낫습니다. 작은 글자는 살아남지 못합니다.

기대면 안 되는 것들

  • 작은 글씨: 날짜, 조건이 붙은 가격, 주소(URL), 안내 문구를 작게 넣으면 읽히지 않습니다. 이런 내용은 og:description이나 페이지 본문에 넣습니다.
  • 가장자리에 둔 요소: 오른쪽 아래 구석의 "지금 신청" 문구가 바로 잘려 나가는 부분입니다.
  • 이미지가 반드시 보인다는 가정: 작은 썸네일만 보여 주는 앱도 있고, 설정이나 느린 연결 때문에 글자만 보이는 경우도 있습니다. 이미지 없이도 제목과 설명만으로 뜻이 통해야 합니다.
  • 세밀한 표현: 가는 선, 얇은 글꼴, 섬세한 일러스트는 썸네일 크기에서, 그리고 앱이 이미지를 다시 압축하고 나면 뭉개집니다.

만든 다음 Finipix로 맞추기

디자인 도구는 무엇이든 괜찮습니다. Figma, Canva, 슬라이드 크기를 직접 지정한 PowerPoint나 Keynote, Photoshop 모두 됩니다. 위의 안내선을 둔 1200×630 캔버스에서 만든 뒤 PNG나 고품질 JPEG로 내보내십시오. 사진 한 장만 쓸 거라면 디자인 도구를 건너뛰고 바로 자르기로 넘어가도 됩니다.

Finipix는 Qorlize가 만든 무료 도구로, 브라우저 안에서 동작하고 파일을 어디에도 올리지 않으며 가입도 필요 없습니다. 내보낸 이미지를 맞추고 압축하는 순서는 다음과 같습니다.

  1. Finipix를 열고 이미지를 창에 끌어다 놓습니다.
  2. 공유 이미지 프리셋을 고릅니다. 다른 프리셋은 원래 비율을 유지하지만, 이 프리셋은 1200×630 모양으로 잘라 냅니다.
  3. 원본이 1200×630 비율이 아니었다면 자를 위치 버튼을 누르고 남기고 싶은 부분(제목이나 얼굴 등)을 클릭합니다.
  4. 출력 형식은 JPEG를 고릅니다. 모든 미리보기 서비스가 기본으로 다루는 형식이고, 앱을 하나하나 다 시험해 볼 수는 없으니 가장 위험이 적습니다. 품질 슬라이더는 40~95 범위이고 기본값 80이면 대부분 충분합니다. 글자 가장자리가 흐려 보이면 조금 올리십시오.
  5. 전후 비교 화면으로 확인한 뒤 파일을 내려받습니다.

결과물에서는 EXIF와 GPS 정보가 지워지므로 휴대폰 사진으로 시작했어도 촬영 위치가 남지 않습니다. Finipix는 이미지에 글자나 로고를 넣거나 화소를 고치지는 못합니다. 디자인은 디자인 도구에서 끝내고, Finipix로는 마지막 크기와 용량만 맞추십시오. 원본은 가로 1200픽셀 이상에서 시작해야 합니다. 작은 이미지에서 없는 디테일이 생기지는 않습니다.

이미지를 고칠 때마다 share-spring-v2.jpg처럼 파일 이름을 새로 붙이십시오. 미리보기 이미지를 주소 기준으로 캐시하는 앱이 있어서, 이름을 바꾸는 것이 바뀐 이미지를 확실히 보이게 하는 방법입니다.

파일이 준비되면 페이지와 함께 올리고 og:image에 그 전체 주소를 적으면 됩니다. 자세한 방법은 링크 미리보기 설정 글을 참고하십시오.

내 이미지로 바로 해 보려면 Finipix를 여세요. 브라우저에서 돌아가고 이미지는 내 기기 밖으로 나가지 않습니다.