파일을 절대 업로드하지 않는 무료 네거티브 이미지 변환기를 만들었습니다
Source: Dev.to
대부분의 온라인 이미지 인버터가 가진 문제점
대부분의 온라인 도구는 같은 일을 합니다: 사진을 서버에 업로드하고, 광고를 보여주며, 회원가입을 요구하고, 파일이 어디로 가는지 걱정하게 만들면서 기다리게 합니다. 단순한 수학 연산에 이런 과정은 전혀 필요하지 않습니다.
색을 반전시키는 공식은 하나뿐입니다: 원본 픽셀 값에서 255를 빼는 것. 브라우저는 이를 밀리초 단위로 처리합니다—서버가 필요 없습니다.
내가 만든 것
나는 stackflowtools.com 에서 무료 네거티브 이미지 변환기를 만들었습니다.
HTML Canvas API를 사용해 100 % 브라우저 내에서 동작하므로 이미지가 절대 기기를 떠나지 않습니다.
기능
- JPG, PNG, WebP, GIF 파일을 최대 20 MB까지 반전
- 업로드 즉시 이미지 처리
- 투명 PNG의 알파 채널 보존
- 밝기, 대비, 채도 조정 가능
- PNG(무손실) 또는 JPG(용량 작게)로 내보내기
- 회원가입 전혀 필요 없음
수학이 작동하는 방식
각 픽셀은 빨강, 초록, 파랑 세 가지 색 채널을 가집니다. 각 채널은 0 ~ 255 사이의 값을 가집니다.
픽셀을 반전시키려면 각 채널 값을 255에서 빼면 됩니다.
예시
- 흰색 픽셀
(255, 255, 255)→ 검정(0, 0, 0) - 빨간색 픽셀
(255, 0, 0)→ 청록색(0, 255, 255)
모든 색은 색상 휠에서 반대쪽으로 뒤집힙니다. 이 계산은 이미지의 모든 픽셀에 한 번에 적용되며, 최신 브라우저에서는 파일 크기에 관계없이 몇 밀리초 안에 끝납니다.
클라이언트‑사이드 처리의 중요성
도구가 서버에서 이미지를 처리하면 파일이 인터넷을 통해 이동하고, 다른 사람의 머신에 저장된 뒤(가능하면) 나중에 삭제됩니다.
브라우저에서 직접 처리할 경우:
- 파일이 절대 이동하지 않음
- 다른 사람이 볼 수 없음
- 저장소, 로그, 위험 요소 전무
- 페이지가 로드된 뒤에는 오프라인에서도 사용 가능
특히 사람 사진, 문서, 개인적인 모든 자료에 대해 중요합니다.
실제 사용자
네거티브 이미지 변환은 생각보다 많이 사용됩니다:
- 디자이너가 흰 로고를 어두운 배경에 맞게 뒤집을 때
- 사진작가가 레트로 필름‑네거티브 효과를 사진에 적용할 때
- 학생이 의료용 X‑ray를 공부하면서 반전된 대비가 더 많은 디테일을 보여줄 때
- 접근성 테스터가 시각 장애를 위한 대비를 확인할 때
사용 방법
- 도구 페이지에 들어가 이미지를 업로드하거나 끌어다 놓습니다.
- 반전된 이미지가 자동으로 나타나며, 필요하면 밝기·대비를 조정합니다.
- PNG 또는 JPG를 선택하고 Download 버튼을 클릭합니다.
전체 과정은 10초 이내에 완료됩니다.
기술적 구현
도구는 HTML Canvas API를 사용합니다:
// Get pixel data
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data;
// Invert colors
for (let i = 0; i {
// trigger download
}, 'image/png');처리 부분에서는 라이브러리나 프레임워크를 전혀 사용하지 않았으며, 순수 브라우저 API만 활용했습니다.
사용해 보기
Free Negative Image Converter – 회원가입 없이, 업로드 없이, 광고 없이.
이미지 도구를 만들거나 브라우저 기반 파일 처리를 다루는 분들은 아래에 자유롭게 질문을 남겨 주세요.