예제

Image Cropper 도구를 실제로 활용하는 예제와 대표적인 사용 시나리오입니다.

기본 예제

프로필 사진 만들기

어떤 이미지에서든 정사각형 프로필 사진을 만드는 방법입니다.

사진 업로드
- 인물 사진이나 단체 사진을 선택합니다
- JPEG, PNG 등 일반적인 형식을 사용할 수 있습니다
가로세로 비율을 1:1로 설정
- 비율 설정에서 1:1 버튼을 선택합니다
- 크롭 영역이 정사각형으로 바뀝니다
크롭 영역 배치
- 피사체의 얼굴이 중앙에 오도록 맞춥니다
- 원하는 요소가 포함되도록 크기를 조정합니다
내보내기 설정
- 형식: PNG(투명 배경이 필요할 때 적합)
- 크기: 대부분의 플랫폼에서는 400x400
- 품질: JPEG를 사용할 경우 90%

결과: SNS 프로필에 어울리는 깔끔한 정사각형 아바타를 만들 수 있습니다.

소셜 미디어 최적화

Instagram 게시물 (1:1)

비율: 1:1
권장 크기: 1080x1080
형식: JPEG
품질: 85%

Instagram 스토리 (9:16)

비율: 9:16
권장 크기: 1080x1920
형식: JPEG
품질: 80%

Twitter 헤더 (16:9)

비율: 16:9
권장 크기: 1500x500
형식: JPEG
품질: 90%

전자상거래 상품 이미지

일관된 상품 사진을 만드는 예제입니다.

표준 크롭 규격 정하기
- 대표 상품 이미지는 1000x1000
- 상세 이미지는 800x600
- 흰색 배경이 일반적으로 가장 무난합니다
일괄 처리 워크플로
- 출력 형식을 JPEG로 설정합니다
- 품질을 85%로 설정합니다
- 일관성을 위해 1:1 비율을 사용합니다
- 모든 상품 이미지를 같은 설정으로 처리합니다

고급 예제

웹 디자인 에셋

히어로 섹션 이미지

비율: 16:9 또는 21:9
크기: 1920x1080 또는 2560x1080
형식: WebP(대체 형식: JPEG)
품질: 75%(화질과 로딩 속도의 균형)

블로그 썸네일

비율: 4:3
크기: 800x600
형식: WebP
품질: 80%
최적화: 주요 피사체가 잘 보이도록 설정

카드 이미지

비율: 3:2
크기: 600x400
형식: WebP
품질: 85%

사진 편집 워크플로

큰 사진에서 디테일 추출하기

고해상도 이미지 불러오기
- 원본: 6000x4000
- 목표: 특정 디테일만 추출
정밀 크롭
- 자유 비율을 사용합니다
- 확대해서 정확하게 선택합니다
- 관심 있는 디테일에 맞춰 크롭합니다
출력 최적화
- 높은 품질(95%)을 유지합니다
- 원본이 PNG라면 형식을 유지합니다
- 웹에 적합한 크기로 축소합니다

사진 시리즈 만들기

비율 통일
- 클래식한 느낌은 4:3
- 현대적인 느낌은 16:9
크기 통일
- 4:3 시리즈는 1200x900
- 16:9 시리즈는 1200x675
품질 기준 통일
- 사진은 JPEG 형식 사용
- 전시용은 90%
- 웹 갤러리는 80%

워크플로 예제

여러 이미지를 일괄 처리하기

준비 단계

- 원본 이미지를 한 폴더에 정리합니다
- 목표 사양을 결정합니다
- 일관된 파일명 규칙을 정합니다

처리 단계

- 첫 번째 이미지를 불러옵니다
- 비율과 출력 형식을 설정합니다
- 품질과 출력 크기를 설정합니다
- 크롭 후 다운로드합니다
- 나머지 이미지에도 같은 절차를 반복합니다

품질 확인

- 처리된 모든 이미지를 검토합니다
- 파일 크기가 적절한지 확인합니다
- 크기가 일관적인지 확인합니다
- 실제 사용 환경에서 표시를 테스트합니다

하나의 원본 이미지로 여러 버전 만들기

한 장의 원본 이미지에서 여러 용도의 버전을 만들 수 있습니다.

버전 1: 원본 해상도

용도: 고품질 인쇄
설정: 원본 크기, PNG, 100% 품질
크롭: 최소한만 자르고 원래 구도를 유지

버전 2: 웹 표시용

용도: 웹사이트 갤러리
설정: 최대 변 1200px, JPEG, 85%
크롭: 웹에서 보기 좋게 구도 조정

버전 3: 썸네일

용도: 미리보기 그리드
설정: 300x300, JPEG, 75%
크롭: 주요 피사체에 집중

버전 4: 모바일 최적화

용도: 모바일 앱
설정: 최대 변 800px, WebP, 80%
크롭: 작은 화면에서도 중요한 요소가 보이도록 유지

문제 해결 예제

대용량 파일 처리

문제: 50MB RAW 변환 이미지를 처리해야 합니다.
해결 방법:

메모리가 충분한 브라우저를 사용합니다
다른 탭을 닫아 메모리를 확보합니다
필요하면 먼저 파일 크기를 줄입니다
가능하다면 점진적 로딩을 사용합니다

품질과 파일 크기 균형

상황: 파일 크기는 작아야 하지만 화질도 좋아야 합니다.

시험해 볼 설정:

WebP는 보통 JPEG보다 약 30% 더 작습니다
75% 품질은 균형이 좋은 편입니다
실제 사용 목적에 맞춰 크기를 최적화합니다
적절한 비율을 선택해 불필요한 픽셀을 줄입니다

비교 결과:

원본 JPEG (90%): 2.1MB
최적화 JPEG (75%): 1.2MB
WebP (75%): 800KB
WebP (60%): 450KB

모바일 기기 호환성

과제: 스마트폰이나 태블릿에서 이미지를 처리합니다.

고려 사항:

사용 가능한 메모리가 적습니다
터치로 크롭 영역을 조정해야 합니다
처리 속도가 더 느릴 수 있습니다
다운로드 방식이 제한될 수 있습니다

권장 방법:

모바일에서는 더 작은 원본 이미지를 사용합니다
속도를 위해 품질을 약간 낮춥니다
터치 제스처로 조정이 쉬운지 확인합니다
명확한 시각적 피드백을 제공합니다

통합 예제

WordPress 플러그인 통합

// Example: Add crop functionality to WordPress media library
function add_image_cropper_to_media() {
    // Enqueue Image Cropper assets
    wp_enqueue_script('image-cropper', '/path/to/cropper.js');
    wp_enqueue_style('image-cropper', '/path/to/cropper.css');
}
add_action('admin_enqueue_scripts', 'add_image_cropper_to_media');

React 컴포넌트 통합

import ImageCropper from "./ImageCropper";

function MyComponent() {
  const handleCropComplete = (result) => {
    // Handle cropped image
    console.log("Cropped image:", result);
  };

  return (
    <ImageCropper
      aspectRatio={1}
      outputFormat="jpeg"
      quality={85}
      onCropComplete={handleCropComplete}
    />
  );
}

전자상거래 플랫폼 통합

// Example: Shopify app integration
function setupProductImageCropper() {
  const cropper = new ImageCropper({
    container: "#product-image-editor",
    aspectRatio: 1,
    outputFormat: "jpeg",
    quality: 90,
    onCrop: (result) => {
      uploadProductImage(result.blob);
    },
  });
}

이 페이지가 도움이 되었나요?

On this page

기본 예제 고급 예제 워크플로 예제 문제 해결 예제 통합 예제