이미지 그레이스케일 변환 도구

이미지 흑백 변환은 컬러 이미지를 그레이스케일 이미지로 변환하는 과정입니다. 이 도구는 전문 그레이스케일 알고리즘 (가중 평균법)을 사용하여 이미지 세부 정보를 유지하면서 색상 정보를 제거합니다. 변환된 흑백 이미지는 예술적 효과, 증명 사진 처리, 빈티지 스타일 디자인 등에 적합합니다. 흑백 변환 후에는 대비와 명암 단계가 특히 중요합니다. 문서 스캔, 증명사진, 제품 이미지처럼 정보 전달이 필요한 자료는 확대해서 글자와 경계가 선명한지 확인해야 합니다.

이미지 그레이스케일 변환은 각 픽셀을 RGB 색상 공간에서 인지 밝기를 나타내는 단일 휘도 값으로 변환합니다. 이 도구는 표준 텔레비전용 ITU-R BT.601 표준에 정의된 휘광도 방법(가중 평균법이라고도 함)을 사용합니다: Gray = R × 0.299 + G × 0.587 + B × 0.114. 이 계수는 인간 시각 시스템의 감도를 반영합니다. 망막의 원뿔세포는 대략 64% 적색 감지(L 원뿔), 32% 녹색 감지(M 원뿔), 2% 청색 감지(S 원뿔)이며, 가중치는 각 채널이 인지 밝기에 기여하는 휘도를 근사합니다. 인간의 시각이 스펙트럼의 녹색-노란 영역(~555nm)에서 가장 예민하기 때문에 녹색이 58.7%로 지배적입니다. 비교를 위해, 다른 일반적인 그레이스케일 방법은 다른 결과를 생성합니다. 평균법(Gray = (R + G + B) / 3)은 모든 채널을 동등하게 취급하여 부자연스럽게 어두운 빨간색과 부자연스럽게 밝은 파란색을 생성합니다. HSL/HSV 색상 공간의 채도 제거 방법은 채도를 0으로 설정하며, 이는 평균보다 지각적으로 더 정확하지만 휘광도 가중치보다는 덜 정확합니다. ITU-R BT.709(HDTV 표준)의 Luma 방법은 다른 백색점을 가진 현대 디스플레이에 대해 더 정확한 약간 다른 계수(0.2126, 0.7152, 0.0722)를 사용합니다. 여기서 사용되는 BT.601 계수는 가장 널리 구현되어 있으며 가장 광범위한 입력 이미지에서 자연스러운 결과를 생성합니다. 처리 파이프라인은 브라우저에서 완전히 실행됩니다. 업로드된 이미지는 브라우저의 네이티브 이미지 디코더(JPEG, PNG, WebP, BMP, GIF 지원)에 의해 HTMLImageElement로 디코딩됩니다. 이미지는 ctx.drawImage()를 통해 Canvas 요소에 그려지며, 이는 브라우저의 GPU 가속 합성기가 색상 공간 변환과 스케일링을 수행하도록 트리거합니다. getImageData()는 원시 RGBA 픽셀 버퍼를 Uint8ClampedArray로 읽어옵니다. 각 픽셀은 4개의 연속 바이트(R, G, B, A)를 차지하므로 배열 길이는 너비 × 높이 × 4입니다. 그레이스케일 루프는 stride 4(i += 4)로 반복하고, 가중 합산을 계산한 뒤, 원본 알파 채널을 보존하면서 동일한 회색 값을 모든 RGB 채널에 기록합니다. putImageData()는 수정된 버퍼를 캔버스에 다시 씁니다. 마지막으로, canvas.toBlob('image/png')는 결과를 무손실 PNG로 인코딩하고, URL.createObjectURL()는 다운로드 링크용 blob: URL을 생성합니다. 일괄 처리의 경우, 메인 스레드 포화를 방지하기 위해 각 이미지가 순차적으로 처리됩니다. 루프는 각 변환 프라미스가 완료될 때까지 await한 다음 다음 이미지를 시작합니다. 캔버스는 이미지 간에 재사용되어 GPU 텍스처 할당 변동을 피합니다. 원본 File 객체는 그레이스케일 Blob과 함께 보존되어 다운로드 파일명이 원본 파일명에 '_grayscale'을 붙여 파생될 수 있습니다.

• ITU-R BT.601 휘도 계수: R × 0.299 + G × 0.587 + B × 0.114 — CIE 1931 표준 관찰자의 광도휘도 함수에서 유도된 이 가중치는 인간 망막의 원뿔세포 분포(L:M:S ≈ 64:32:2)와 555nm(녹색-노란색)에서의 피크 감도를 모델링합니다.
• 방법 비교: 평균 (R+G+B)/3은 어두운 빨간색과 밝은 파란색을 생성하고, 채도 제거(HSL S=0)는 더 낫지만 지각적으로 균일하지 않으며, BT.709 Luma(0.2126R + 0.7152G + 0.0722B)는 HDTV 디스플레이에 더 정확하지만 여기서 사용되는 BT.601 가중치가 브라우저와 이미지 도구 전반에서 가장 널리 지원됩니다.
• 캔버스 픽셀 파이프라인: drawImage() → GPU 합성기가 디코딩 및 스케일링 → getImageData()가 RGBA Uint8ClampedArray 읽기 → 픽셀별 가중 합산 루프(stride 4, i += 4) → putImageData()로 다시 쓰기 → toBlob('image/png')로 무손실 PNG 인코딩 → createObjectURL()로 다운로드.
• 알파 채널 보존: 알파 바이트(인덱스 i+3)는 읽히지만 수정되지 않습니다. 투명 픽셀은 투명하게 유지되고, 원본 알파 값은 변경 없이 통과합니다. 이는 투명도가 있는 PNG 이미지나 안티앨리어싱된 가장자리에 중요합니다.
• 순차 일괄 처리: 메인 스레드 포화를 방지하기 위해 각 이미지가 await를 통해 한 번에 하나씩 처리됩니다. 캔버스 요소는 이미지 간에 재사용되고, File 객체가 보존되어 다운로드 파일명이 원본 이름에 '_grayscale'을 붙여 파생될 수 있습니다.
• 감마 고려사항: BT.601 계수는 선형 광 강도가 아닌 감마 인코딩된 sRGB 값에 적용됩니다. 이는 표준 접근 방식이며 표시에 대해 시각적으로 올바른 결과를 생성하지만, 물리적 광 측정이 필요한 애플리케이션(과학 이미지, 광도 측정)은 먼저 sRGB 값을 선형화해야 합니다.
• 메모리 관리: 각 그레이스케일 Blob은 이미지가 제거되거나 페이지가 닫힐 때까지 객체 URL을 통해 메모리에 보존됩니다. 제거 시 URL.revokeObjectURL()을 호출하면 메모리 누수가 방지되고, 참조가 남아 있지 않으면 Blob의 메모리가 해제됩니다.