✂️ 이미지 자르기 (크롭)
사진의 불필요한 영역을 잘라내고 1:1 정사각형, 4:3 표준, 16:9 와이드스크린 등 고정 비율 및 자유 영역 크롭을 지원하는 모바일 친화적 자르기 도구입니다.
❓ 이 도구는 무엇인가요?
이미지 자르기(Cropper)는 사진 전체 중 강조하고 싶은 핵심 피사체 영역만 선택하여 잘라내는 그래픽 편집 도구입니다. 인스타그램 피드용 1:1 정방형, 유튜브 썸네일용 16:9, 일반 카메라 4:3 비율 프리셋 버튼을 제공하며, 포인터 이벤트(Pointer Events API)를 통해 PC 마우스는 물론 스마트폰 터치 제스처로도 부드럽게 드래그하고 모서리를 조절할 수 있습니다.
🎯 언제 사용하면 좋은가요?
인스타그램 프로필 사진 등록 전 정사각형 1:1로 자를 때, 가로로 길게 찍힌 사진에서 인물 얼굴만 클로즈업 크롭할 때, 유튜브 동영상 썸네일(16:9) 규격으로 배경을 잘라낼 때, 캡처 화면에서 개인정보나 불필요한 여백을 도려내고 싶을 때 사용합니다.
📐 핵심 계산 공식 및 처리 원리
크롭 연산은 뷰포트 디스플레이 스케일과 원본 비트맵 픽셀 좌표 사이의 양방향 투영 방정식을 기반으로 수행됩니다.
Display_Scale = min(1.0, (Container_Max_Width - 40) / Img_Width)
DOM 박스 좌표 변환:
Left = Box_X × Display_Scale, Width = Box_W × Display_Scale
화면에는 모바일/모니터 크기에 맞추어 축소 표시되지만, 내부 연산 데이터는 원본 해상도 좌표계를 보존합니다.
Target_Ratio = Ratio_W / Ratio_H (예: 16/9 = 1.7777...)
리사이즈 조정:
New_H = New_W / Target_Ratio (높이가 원본 범위를 벗어날 시 역산 클램핑)
경계 제한(Boundary Clamping):
Box_X = clamp(0, Box_X, Img_Width - Box_W)
크롭 박스가 원본 사진 영역 바깥으로 벗어나지 않도록 좌표를 자동 제한합니다.
📝 상세 사용 방법
- [이미지 선택] 파일 업로더를 통해 자를 사진을 선택하면 작업 공간(Crop Workspace)이 열립니다.
- 상단 비율 버튼([자유 비율], [1:1], [4:3], [16:9]) 중 원하는 비율을 선택합니다.
- 사진 위에 표시된 파란색 점선 크롭 박스의 내부를 드래그하여 위치를 옮기고, 우측 하단 모서리 핸들을 잡아당겨 영역 크기를 조절합니다.
- 선택 영역 하단에 실시간으로 표시되는 픽셀 해상도(예: "1080 x 1080 px")를 확인합니다.
- [자르기 & 다운로드] 버튼을 클릭하면 선택된 직사각형 영역만 추출되어 무손실 PNG 파일로 즉시 저장됩니다.
💡 실제 활용 예시
· 사례 1: 4032 × 3024 여행 사진 ➔ 상단 [1:1] 버튼 클릭 ➔ 중앙 3024 × 3024 정사각형 영역 선택 ➔ 인스타그램용 완벽한 1:1 고화질 사진 추출 · 사례 2: 3840 × 2160 4K 풍경 사진 ➔ 상단 [16:9] 버튼 선택 ➔ 우측 하단 핸들 조절로 1920 × 1080 영역 크롭 ➔ 유튜브 썸네일용 이미지 생성 · 사례 3: 웹페이지 캡처 전체화면 ➔ [자유 비율] 선택 ➔ 특정 오류 메시지 창만 520 × 280 픽셀로 깔끔하게 잘라내어 버그 리포트 첨부
📊 결과 해석 및 심층 활용 가이드
플랫폼별 권장 크롭 종횡비 가이드
1. 1:1 정방형 (Square): 인스타그램 피드 포스트, 카카오톡 프로필, 네이버 블로그 퍼스나콘, 전자상거래 쇼핑몰 대표 상품 썸네일의 표준 비율입니다.
2. 16:9 와이드스크린 (Widescreen): 유튜브 동영상 썸네일(1280x720), 프레젠테이션 PPT 슬라이드, 블로그 메인 헤더 배너 이미지에 최적화된 시네마틱 비율입니다.
3. 4:3 표준 규격 (Standard): 마이크로 포서즈 및 중형 카메라의 전통적인 사진 비율이자 태블릿 디스플레이(iPad) 규격에 잘 맞습니다.
✨ 주요 기능 안내
- 자유 비율 및 SNS 표준 프리셋(1:1, 4:3, 16:9) 원클릭 전환
- PC 마우스 및 모바일 멀티 터치 제스처를 완벽 지원하는 포인터 캡처 시스템
- 선택 영역의 정확한 가로·세로 픽셀 해상도 실시간 수치 표시
- 원본 사진 해상도를 100% 무손실 유지하는 고화질 서브 비트맵 추출
⚠️ 주의사항 및 제약
화면에 축소 표시된 상태에서 작은 영역을 좁게 자르면 잘려 나온 결과 이미지의 픽셀 해상도(예: 80x80px)도 작아지므로 하단 "선택 영역"의 픽셀 수치를 확인하고 잘라내시기 바랍니다.
⚙️ 기술 사양 및 브라우저 환경 제약
- 서브픽셀 추출 엔진:
CanvasRenderingContext2D.drawImage(image, sx, sy, sWidth, sHeight, 0, 0, sWidth, sHeight) - 이벤트 시스템: W3C Pointer Events API (터치 액션
touch-action: none완벽 방어) - 출력 포맷: 무손실 PNG (알파 투명도 및 원본 픽셀 데이터 100% 보존)
- 화질 손실률: 0% (재압축 왜곡 없는 무손실 서브 이미지 슬라이싱)