이미지 가로세로 비율과 크기의 기본｜잘리지 않고 흐려지지 않는 이미지 만드는 법

이미지가 잘리는 것은 비율이 맞지 않기 때문

SNS나 블로그 대부분은 올린 이미지를 정해진 틀에 끼워 표시합니다. 이때 이미지의 가로세로 비율과 틀의 비율이 다르면, 틀에 맞추느라 남는 부분이 잘려 나갑니다. 이것이 트리밍(잘라내기)입니다.

중요한 것은 잘리는 곳이 대개 “위아래” 또는 “좌우” 끝이라는 점입니다. 즉 세로로 긴 이미지를 가로로 긴 틀에 넣으면 위아래가 사라지고, 가로로 긴 이미지를 정사각형 틀에 넣으면 좌우가 사라집니다. 끝에 둔 글자나 로고가 가장 먼저 희생됩니다.

자주 쓰는 가로세로 비율과 용도

실무에서 쓰는 비율은 그리 많지 않습니다. 다음 5가지만 알아 두면 대부분의 상황에 대응할 수 있습니다.

표의 1.91:1은 URL을 공유할 때 나오는 미리보기 이미지에 자주 쓰이는 비율입니다. 프로필 카드 메이커가 1200×630px PNG로 내보내는 것도 이 용도에 그대로 쓸 수 있는 크기이기 때문입니다. SNS에 올려도, 블로그 대표 이미지로 써도 잘 어울리는 비율입니다.

각 서비스의 권장 크기는 바뀔 수 있으므로 정확한 수치는 공식 도움말에서 확인하세요. 다만 비율 자체는 크게 바뀌지 않으므로, 위의 5가지로 만들어 두면 나중에 약간만 조정해서 대응할 수 있습니다.

어디에 두어도 잘리지 않는 “세이프 에어리어”의 사고방식

같은 이미지를 여러 곳에서 쓸 때는 표시 틀을 하나로 정할 수 없습니다. 그래서 유효한 것이, 잘려도 곤란하지 않도록 정보를 가운데에 모은다는 사고방식입니다.

1. 1

   ① 가장 중요한 요소를 가운데에 둔다

   얼굴, 로고, 제목 글자는 가운데 정렬합니다. 네 모서리는 “잘릴 것을 전제로 한 장식”이라고 생각하면 어떤 틀에 넣어도 무너지지 않습니다.

2. 2

   ② 상하좌우에 10%씩 여백을 확보한다

   이미지 바깥 둘레 약 10%는 글자를 두지 않는 영역으로 비워 둡니다. 이것만으로 정사각형으로 잘렸을 때의 사고가 거의 없어집니다.

3. 3

   ③ 정사각형으로 잘라 확인해 본다

   가로로 긴 이미지라면 가운데를 정사각형으로 잘랐을 때 의미가 통하는지 봅니다. 여기서 성립하면 대부분의 틀에서 버틸 수 있습니다.

4. 4

   ④ 글자를 너무 작게 하지 않는다

   목록 표시에서는 이미지가 몇 분의 1로 축소됩니다. 원래 크기에서는 읽혀도 축소하면 뭉개지는 글자 크기는 피하세요. 기준은 이미지 높이의 5% 이상입니다.

흐려지는 원인은 “확대”에 있다

이미지는 작은 칸(픽셀)의 모음입니다. 축소할 때는 정보를 버리기만 하므로 무너지지 않지만, 확대할 때는 원래 없던 정보를 만들어 내야 하므로 반드시 흐려집니다. 흐린 이미지의 원인은 거의 모두 이 확대입니다.

게다가 스마트폰이나 노트북 대부분은 고해상도 화면을 갖추고 있어서, 표시상 100px인 자리에 실제로는 2배인 200px 분량을 표시할 수 있습니다. 표시 크기와 같은 픽셀 수로 만들면 이런 화면에서는 흐려 보입니다. 표시할 크기의 2배로 만들어 두는 것이 안전합니다.

• 블로그 본문 이미지: 가로 1600px 안팎으로 만들고 표시는 800px 정도로
• SNS 아이콘: 800×800px 이상으로 준비한다(표시는 수십 px~수백 px)
• 썸네일: 1280×720px(16:9)로 만든다
• 링크 카드용: 1200×630px(1.91:1)로 만든다
• 인쇄할 가능성이 있다면 위의 2~3배로 만들어 둔다

만들어서 공개하기까지의 흐름

1. 1

   ① 용도를 정한 뒤 비율을 고른다

   먼저 “어디에 쓸지”를 정합니다. 나중에 비율을 바꾸면 반드시 어딘가가 잘리거나 레이아웃이 무너집니다.

2. 2

   ② 권장 크기보다 크게 만든다

   축소는 열화되지 않습니다. 망설여지면 큰 쪽을 골라 두면 다른 용도로 돌려 쓰기도 쉽습니다.

3. 3

   ③ 가운데에 정보를 모아 마무리한다

   바깥 둘레 10%를 비우고, 글자는 이미지 높이의 5% 이상을 확보합니다. 프로필 카드 메이커처럼 여백을 미리 계산한 템플릿을 쓰는 것도 방법입니다.

4. 4

   ④ 용도에 맞는 형식으로 변환한다

   사진 위주라면 JPEG나 WebP, 글자나 로고, 투명이 필요하면 PNG입니다. 이미지 형식 변환 도구에서는 형식을 골라 변환할 수 있고, JPEG와 WebP는 화질도 조정할 수 있습니다.

5. 5

   ⑤ 변환 후 파일 크기를 확인한다

   변환 도구는 변환 후 용량과 줄어든 양을 보여 줍니다. 업로드할 곳에 상한이 있다면 이 수치를 보고 나서 화질을 미세 조정하세요.

이미지 형식 변환 도구의 처리는 브라우저 안에서 끝나며, 이미지는 서버로 전송되지 않습니다. 공개 전 자료나 프로필 사진을 다룰 때도 그대로 쓸 수 있습니다.

자주 묻는 질문

가로세로 비율(종횡비)이란 무엇인가요?

이미지의 가로와 세로 길이의 비입니다. 1200×630px라면 약 1.91:1, 1080×1080px라면 1:1입니다. 픽셀 수가 달라도 비가 같으면 확대·축소될 뿐 내용은 잘리지 않습니다.

이미지 위아래만 잘려 버립니다. 어떻게 하면 되나요?

표시 틀보다 세로로 긴 이미지를 쓰고 있는 것이 원인입니다. 표시할 곳의 비율(대개 1.91:1이나 16:9)에 맞춰 다시 만드는 것이 확실합니다. 바로 고칠 수 없다면 중요한 요소를 가운데로 모으기만 해도 피해를 줄일 수 있습니다.

작은 이미지를 크게 해도 깨끗하게 할 수 있나요?

기본적으로 불가능합니다. 확대는 존재하지 않는 정보를 추측으로 메우는 처리라서 윤곽이 흐려집니다. 원본 데이터가 남아 있다면 다시 만드는 것이 가장 빠르고, 남아 있지 않다면 그 크기로 들어가는 레이아웃으로 바꾸는 편이 결과적으로 깨끗해 보입니다.

스마트폰으로 찍은 사진을 그대로 써도 되나요?

해상도는 충분하지만 비율이 4:3이나 3:4인 경우가 많아, 그대로 쓰면 어디가 잘릴지 예상할 수 없습니다. 쓸 틀의 비율에 맞춰 먼저 트리밍하고, 그다음 형식과 용량을 조정한 뒤 업로드하는 것이 안전합니다.