이미지 필터
이미지에 다양한 필터와 효과를 적용하는 도구입니다. 예술적인 사진, 빈티지 스타일, 소셜 미디어 콘텐츠 제작에 유용합니다.
💡 Tips for Best Results
- Grayscale: Classic black and white, great for artistic photos
- Sepia: Vintage brown tone, perfect for nostalgic feel
- Brightness: 100% is original, lower for darker, higher for brighter
- Contrast: Increase for more dramatic images, decrease for softer look
- Saturation: 0% is grayscale, 200% is very vivid
- Blur: Great for backgrounds or soft focus effects
- Privacy: All processing happens in your browser - no uploads to server
주요 기능
- 9가지 프리셋 효과
- 수동 조절: 밝기, 대비, 채도, 블러
- 실시간 미리보기
- 고품질 출력
- 여러 효과 동시 적용 가능
- 브라우저에서 직접 처리
프리셋 효과
기본 효과
None (효과 없음)
- 원본 이미지 상태
- 다른 효과 제거
- 기본 설정으로 복원
Grayscale (흑백)
- 컬러를 제거하여 흑백 사진으로 변환
- 용도: 클래식 사진, 예 술적 표현
- 분위기: 모던, 시크, 감성적
Sepia (세피아)
- 갈색톤의 빈티지 느낌
- 용도: 레트로 사진, 옛날 느낌
- 분위기: 따뜻한, 향수를 불러일으키는
Invert (색상 반전)
- 모든 색상을 반대로 변환
- 용도: 예술적 효과, 특수 효과
- 분위기: 독특한, 실험적인
블러 효과
Blur (블러)
- 이미지 전체를 흐리게 처리
- 용도: 배경 흐림, 부드러운 느낌
- 강도: 중간 (5px)
선명도 효과
Sharpen (선명)
- 이미지를 더 선명하게 처리
- 용도: 디테일 강조, 텍스트 선명도 향상
- 효과: 가장자리 강조
분위기 효과
Vintage (빈티지)
- 낮은 대비 + 세피아 톤
- 용도: 레트로 느낌, 옛날 사진 스타일
- 분위기: 따뜻한, 클래식한
Cool (쿨톤)
- 파란색 톤 강조
- 용도: 차갑고 모던한 느낌
- 분위기: 시원한, 프로페셔널한
Warm (웜톤)
- 주황색/노란색 톤 강조
- 용도: 따뜻하고 포근한 느낌
- 분위기: 아늑한, 친근한
수동 조절
Brightness (밝기)
- 범위: 0% ~ 200%
- 기본값: 100%
- 0%: 완전히 어둡게 (검은색)
- 100%: 원본
- 200%: 매우 밝게 (흰색에 가깝게)
- 용도: 어두운 사진 밝게, 과다 노출 보정
Contrast (대비)
- 범위: 0% ~ 200%
- 기본값: 100%
- 0%: 대비 없음 (회색)
- 100%: 원본
- 200%: 매우 강한 대비
- 용도: 선명도 향상, 색상 강조
Saturation (채도)
- 범위: 0% ~ 200%
- 기본값: 100%
- 0%: 흑백 (Grayscale)
- 100%: 원본
- 200%: 매우 선명한 색상
- 용도: 색상 강도 조절, 생동감 추가
Blur (블러)
- 범위: 0px ~ 20px
- 기본값: 0px
- 0px: 원본
- 5px: 약간 흐림
- 10px: 중간 흐림
- 20px: 매우 흐림
- 용도: 배경 흐림, 부드러운 효과
사용 시나리오
1. Instagram 감성 사진
프리셋: Vintage 또는 Warm
밝기: 110%
대비: 110%
채도: 90%
용도: 감성적인 피드 사진
2. 프로페셔널 포트폴리오
프리셋: Cool
밝기: 105%
대비: 120%
채도: 95%
용도: 모던하고 세련된 느낌
3. 흑백 예술 사진
프리셋: Grayscale
밝기: 100%
대비: 130%
채도: 0%
용도: 클래식한 흑백 사진
4. 빈티지 레트로
프리셋: Sepia 또는 Vintage
밝기: 95%
대비: 85%
채도: 80%
용도: 옛날 사진 느낌
5. 배경 흐림 효과
프리셋: Blur
블러: 10-15px
용도: 피사체 강조, 배경 흐림
참고: 전체 이미지가 흐려짐
6. 선명한 제품 사진
프리셋: Sharpen
밝기: 105%
대비: 115%
채도: 105%
용도: 제품 디테일 강조
지원 형식
- 입력: PNG, JPG, JPEG, WebP
- 출력: PNG (고품질)
- 최대 크기: 50MB
- 처리 속도: 실시간
효과 적용 팁
조합 추천
자연스러운 보정
밝기: 105-110%
대비: 105-110%
채도: 100-105%
강렬한 색감
밝기: 100-105%
대비: 120-130%
채도: 120-140%
부드러운 느낌
밝기: 110-115%
대비: 90-95%
채도: 90-95%
블러: 1-2px
흑백 강조
프리셋: Grayscale
밝기: 100-105%
대비: 130-150%
채도: 0%
용도별 추천
인물 사진
- Warm 효과 + 밝기 105% + 채도 95%
- 피부 톤이 자연스럽고 따뜻하게
풍경 사진
- 대비 120% + 채도 110%
- 하늘과 자연이 선명하게
음식 사진
- Warm 효과 + 밝기 110% + 채도 115%
- 맛있어 보이는 따뜻한 색감
제품 사진
- Sharpen 효과 + 대비 115% + 밝기 105%
- 디테일이 살아있고 선명하게
건축/인테리어
- Cool 효과 + 대비 110%
- 모던하고 깔끔한 느낌
기술 정보
필터 적용 방식
- CSS Filter: CSS filter 속성 사용
- Canvas API: 고급 효과는 Canvas로 처리
- 실시간 렌더링: 슬라이더 조절 시 즉시 반영
- 고품질 출력: PNG 형식으로 저장
지원하는 CSS 필터
brightness()- 밝기 조절contrast()- 대비 조절saturate()- 채도 조절blur()- 블러 효과grayscale()- 흑백 변환sepia()- 세피아 효과invert()- 색상 반전hue-rotate()- 색조 회전
프라이버시
- ✅ 모든 처리가 브라우저에서 진행
- ✅ 서버로 이미지 업로드되지 않음
- ✅ 100% 클라이언트 사이드 처리
- ✅ 인터넷 연결 없이도 작동 (페이지 로드 후)
효과 적용 알고리즘
- 이미지 로드: FileReader API로 원본 이미지 읽기
- Canvas 생성: 원본 크기의 Canvas 생성
- 필터 적용: CSS filter 속성으로 효과 적용
- 실시간 미리보기: 슬라이더 조절 시 즉시 반영
- 이미지 렌더링: Canvas에 필터가 적용된 이미지 그리기
- 출력 생성: toBlob()으로 PNG 파일 생성
자주 묻는 질문
Q: 여러 효과를 동시에 적용할 수 있나요?
A: 네, 프리셋 효과와 수동 조절을 함께 사용할 수 있습니다. 예: Vintage + 밝기 조절.
Q: 효과를 적용하면 화질이 떨어지나요?
A: PNG 형식으로 저장하므로 화질 손실이 최소화됩니다. 여러 번 저장/로드하면 약간의 품질 저하가 있을 수 있습니다.
Q: 이미지가 너무 어둡거나 밝아요.
A: 밝기 슬라이더를 조절하세요. 어두우면 110-120%로, 밝으면 80-90%로 설정하세요.
Q: 색상이 너무 선명하거나 탁해요.
A: 채도 슬라이더를 조절하세요. 선명하면 80-90%로, 탁하면 110-130%로 설정하세요.
Q: 프리셋 효과를 제거하고 싶어요.
A: "None" 프리셋을 선택하면 모든 효과가 제거되고 원본으로 돌아갑니다.
관련 도구
브라우저 지원
- ✅ Chrome 50+
- ✅ Firefox 50+
- ✅ Safari 11+
- ✅ Edge 79+
- ✅ 모바일 브라우저 (iOS Safari, Chrome Mobile)