사진 편집기

이 사진 편집기가 하는 일

브라우저에서 사진을 편집하는 방법

1. 1
   사진을 드롭하세요

   JPG, PNG 또는 WebP 파일을 업로드 영역에 드래그하거나 클릭하여 장치에서 선택하세요. 이미지는 즉시 실시간 미리보기로 열립니다.

2. 2
   시작 필터 선택

   프리셋 행을 사용하여 흑백, 세피아, 빈티지, 따뜻한 색조 또는 차가운 색조로 한 번의 클릭으로 이동하세요. 언제든지 원본을 선택하여 프리셋을 지우고 처음부터 시작할 수 있습니다.

3. 3
   조정 세부 조정

   밝기, 대비, 채도, 색조, 흐림, 세피아, 그레이스케일 및 반전의 슬라이더를 드래그하세요. 미리보기가 실시간으로 업데이트되므로 원하는 모양을 조정할 수 있습니다.

4. 4
   회전, 뒤집기 또는 자르기

   90도 회전 및 수평 또는 수직 뒤집기를 위해 도구 모음 버튼을 사용하세요. 자르기를 클릭한 후 이미지에서 사각형을 드래그하고 자르기를 적용하여 사진에 반영하세요.

5. 5
   출력 형식 및 품질 선택

   JPEG는 사진에 대한 안전한 기본값입니다. WebP는 동일한 시각적 품질에서 더 작은 파일을 제공합니다. PNG는 손실이 없으므로 품질 손실을 감수할 수 없는 경우 유용합니다.

6. 6
   결과 다운로드

   편집된 사진 다운로드를 클릭하여 조정이 반영된 전체 해상도 결과를 저장하세요. 아무것도 업로드되지 않으며 — 파일은 귀하의 장치에서 완전히 생성되고 다운로드됩니다.

브라우저 사진 편집 작동 방식

1. createImageBitmap()으로 파일을 디코드하여 오프스크린 ImageBitmap으로 변환합니다.
2. ctx.filter를 CSS 필터 문자열로 설정하여 비트맵을 2D 캔버스에 렌더링합니다.
3. 각 조정은 하나의 필터 함수에 매핑됩니다: brightness(), contrast(), saturate(), hue-rotate(), blur(), sepia(), grayscale(), invert().
4. 변환(회전, 뒤집기, 자르기)은 새 캔버스에 그려서 반영된 후 다시 ImageBitmap으로 변환됩니다.
5. canvas.toBlob('image/jpeg' | 'image/webp' | 'image/png', quality)는 결과를 다시 인코딩합니다.
6. 결과 Blob은 객체 URL을 통해 다운로드로 노출됩니다 — 업로드 단계는 포함되지 않습니다.

참조: MDN — CanvasRenderingContext2D.filter

작동 예시

빠른 사진 편집기를 사용할 때

• 전체 편집기를 실행하지 않고 게시하기 전에 어두운 전화 사진을 밝게 하기.
• 블로그나 뉴스레터를 위해 컬러 사진을 흑백 또는 세피아로 변환하기.
• 업로드하기 전에 실제로 중요한 부분으로 이미지를 자르기.
• 모바일 카메라에서 옆으로 들어온 사진을 회전하기.
• 리스트에서 더 잘 읽히도록 제품 사진의 채도와 대비 조정하기.
• 업로드 한도를 넘지 않도록 낮은 품질로 WebP로 사진 재인코딩하기.
• 데스크탑 도구를 배우지 않고 헤더 이미지에 빈티지 또는 따뜻한 필터 적용하기.
• 제3자 클라우드 서비스에 신뢰하지 않고 개인 사진을 빠르게 편집하기.

관련 도구

자주 묻는 질문