온라인에서 사진을 픽셀 정렬하는 방법
- 캔버스에 사진을 끌어다 놓거나, 클립보드에서 붙여넣거나, 클릭하여 선택하세요. 사진은 브라우저 외부로 절대 전송되지 않습니다.
- Pixel Sort(가로 행 정렬) 또는 Pixel Sort V(세로 열 정렬)를 선택한 뒤, 디테일(Detail) 슬라이더로 녹아내릴 영역의 범위를 조절합니다.
- 완성된 PNG 이미지를 내보냅니다. 계정 생성도, 워터마크도 없습니다.
픽셀 정렬의 작동 원리
픽셀 정렬(Pixel Sorting)은 이미지의 단일 행이나 열 내에서 픽셀을 밝기순으로 재배열하는 알고리즘입니다. 단, 정렬 조건을 만족하는 임계값(Threshold)을 넘는 연속된 픽셀 구간에서만 작동합니다. 임계값에 미치지 못하는 영역은 원본 그대로 유지됩니다. 바로 이 '흘러내리는 줄기'와 '그 옆의 선명한 디테일' 사이의 극명한 대비가 글리치 아트의 핵심 미학입니다. 전체 라인을 무작정 정렬하면 평범한 그라데이션으로 뭉개져 버립니다.
본 도구는 세 단계 패스로 연산합니다. 먼저 설정된 대비(Contrast) 곡선을 적용해 모든 픽셀의 휘도(Luminance) 값을 계산합니다. 이로써 슬라이더가 어떤 픽셀을 정렬 후보로 삼을지 결정합니다. 그 다음 각 라인을 순회하며 임계값을 통과한 연속 구간을 추출합니다. 각 구간은 어두운 픽셀부터 밝은 픽셀 순으로 정렬되어 제자리에 다시 기록됩니다. 이때 단일 정렬 구간의 최대 길이는 라인 전체 길이의 45%로 제한됩니다. 제한이 없으면 사진 전체가 단일 색상 띠로 붕괴되기 때문입니다.
| 슬라이더 | 제어 항목 | 권장 설정 범위 |
|---|---|---|
| 디테일 (Detail) | 픽셀 정렬 임계값 | 얇은 유선형 줄기는 20–40, 묵직한 멜트 효과는 60–80 |
| 강도 (Intensity) | 원본 이미지와의 블렌딩 비율 | 완전한 정렬은 100, 피사체 윤곽 유지는 50–70 |
| 대비 (Contrast) | 임계값 판정 전 휘도 곡선 | 평평하고 균일한 조명의 사진일수록 값을 높이세요 |
정렬 방향은 슬라이더 대신 개별 필터로 분리되어 있습니다. Pixel Sort는 가로 행을 따라 정렬하여 바람이나 질주하는 속도감을 연출합니다. Pixel Sort V는 세로 열을 따라 정렬하여 비, 흘러내리는 페인트, 혹은 녹아내리는 액체 효과를 연출합니다. 본 페이지에 함께 제공되는 CRT Scanlines는 정렬된 줄기 위에 아날로그 모니터 질감을 얹을 때 가장 이상적인 궁합을 이룹니다. 먼저 소팅된 PNG를 내보낸 뒤 다시 불러와 CRT를 적용해 보세요.
모든 과정은 브라우저 내부의 Canvas 2D 버퍼에서만 실행됩니다. 원본 이미지는 서버로 전송되지 않으며, 긴 변 기준 최대 1400px 해상도로 깨끗하게 내보낼 수 있습니다.
