소셜 이미지 리사이저 수식과 15대 소셜 미디어 크롭 가이드

직접 해보기 →

인스타그램, 유튜브, 페이스북, 트위터, 링크드인의 커버 배너나 피드 사진을 제작할 때 **각 소셜 미디어가 요구하는 정밀한 종횡비(Aspect Ratio) 규격으로 원본 이미지를 크롭하고 여백을 맞추는 필수 편집 도구가 바로 소셜 이미지 리사이저(Social Image Resizer)**입니다.

원본 이미지를 복잡한 전용 편집 프로그램 없이 브라우저 상에서 원하는 1:1, 4:5, 16:9, 9:16, 2:1 등 15가지 소셜 규격으로 즉각 잘라내거나, 부족한 여백 공간을 원하는 배경색 또는 블러 처리로 채워서 변환 다운로드할 수 있습니다. 본 글에서는 종횡비 크롭 수식과 여백 패딩 연산 알고리즘을 해설합니다.

---

1. 종횡비 크롭 및 캔버스 센터링 수식 공식

원본 이미지 규격 W_orig, H_orig와 목표 타겟 규격 W_target, H_target 간의 Crop 영역 (x, y, w, h) 산출 공식은 다음과 같습니다:

[ \text{Aspect}{\text{orig}} = \frac{W{\text{orig}}}{H_{\text{orig}}}, \quad \text{Aspect}{\text{target}} = \frac{W{\text{target}}}{H_{\text{target}}} ]

[ \text{If } \text{Aspect}{\text{orig}} > \text{Aspect}{\text{target}}: \quad w = H_{\text{orig}} \times \text{Aspect}{\text{target}}, \quad h = H{\text{orig}}, \quad x = \frac{W_{\text{orig}} - w}{2} ]

5대 대표 소셜 규격 파라미터:

• 인스타그램 피드 (1:1 & 4:5): 1080x1080px 정방형 및 1080x1350px 세로 인게이지먼트 최적화 규격.
• 유튜브 썸네일 (16:9): 1280x720px 데스크톱 및 TV 반응형 기준 뷰.
• 유튜브 배너 채널아트 (16:9): 2560x1440px 전체 대지 중 TV/PC/모바일 공통 안전영역(1546x423px) 가이드.

---

2. 순수 자바스크립트 소셜 리사이즈 캔버스 소스

다음은 타겟 종횡비에 맞춰 이미지를 중앙 기준으로 크롭하고 캔버스에 그리는 소스 코드입니다:

function cropToSocialRatio(imgObj, targetW, targetH, paddingColor = null) {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  canvas.width = targetW;
  canvas.height = targetH;

  const targetRatio = targetW / targetH;
  const imgRatio = imgObj.width / imgObj.height;

  let drawW, drawH, drawX, drawY;

  if (paddingColor) {
    // 여백 채우기 모드 (Fit inside with padding)
    ctx.fillStyle = paddingColor;
    ctx.fillRect(0, 0, targetW, targetH);

    if (imgRatio > targetRatio) {
      drawW = targetW;
      drawH = targetW / imgRatio;
      drawX = 0;
      drawY = (targetH - drawH) / 2;
    } else {
      drawH = targetH;
      drawW = targetH * imgRatio;
      drawX = (targetW - drawW) / 2;
      drawY = 0;
    }
  } else {
    // 꽉 차게 잘라내기 모드 (Cover crop)
    if (imgRatio > targetRatio) {
      drawH = targetH;
      drawW = targetH * imgRatio;
      drawX = (targetW - drawW) / 2;
      drawY = 0;
    } else {
      drawW = targetW;
      drawH = targetW / imgRatio;
      drawX = 0;
      drawY = (targetH - drawH) / 2;
    }
  }

  ctx.drawImage(imgObj, drawX, drawY, drawW, drawH);
  return canvas.toDataURL('image/png');
}

[!NOTE] 포토샵을 열어서 무거운 작업 환경을 띄울 필요 없이, 소셜 이미지 리사이저 도구를 활용하면 이미지를 로드하고 인스타, 유튜브, 트위터 규격 버튼을 클릭하여 즉시 완벽한 해상도로 잘라내거나 여백을 채워 다운로드할 수 있습니다.

---

3. 실무 소셜 콘텐츠 배너 제작 지침

1. 4:5 세로 비율 피드 우선 고려: 인스타그램 피드에서 1:1 정방형보다 4:5 세로 이미지(1080x1350px)가 모바일 스마트폰 화면을 25% 더 길게 차지하므로 피드 스크롤 시 시선을 멈추게 만드는 체류시간 향상 효과가 훨씬 뛰어납니다.
2. 유튜브 채널아트 안전 영역(Safe Area) 센터링: 유튜브 배너 채널아트(2560x1440px) 제작 시 중앙의 1546x423px 영역 안에 채널 로고와 주요 문구를 몰아넣어야 모바일과 TV 디바이스 모두에서 잘리지 않고 선명하게 노출됩니다.