이번에 작업한 부분
포토샷 포스터화에서 색 채널을 정해진 단계로 줄이는 계산을 정리했습니다.
포토샷 포스터화에서 색 채널을 정해진 단계로 줄이는 계산을 정리했습니다.
개발 기록 재구성 · 공개 코드 v0.16.0 기준 / 2026.10.13
구현 과정 읽기 ↓
Development journal / 14
기존 개발 기록과 공개 코드를 바탕으로 구현 과정을 정리했습니다. 아래 인물 사진은 2026.10.13에 새로 제작한 동작 예시입니다.
포토샷 포스터화에서 색 채널을 정해진 단계로 줄이는 계산을 정리했습니다.
각 RGB 입력을 구간 번호로 바꾸고, 그 번호에 대응하는 출력값으로 치환합니다.
이전 반올림 방식과 새 구간 분할 방식은 경계가 달랐습니다. 단계 수가 같아도 계산을 교체하면 저장한 사진의 색이 달라질 수 있었습니다.
프로젝트에 저장된 revision을 읽어 예전 계산과 새 계산을 구분했습니다. 같은 설정을 읽는 것뿐 아니라 같은 결과를 유지하는 쪽으로 호환성을 잡았습니다.
외부 GitHub 코드 도입 기록은 확인되지 않았습니다. 포토샷의 두 계산 경로와 저장 호환 검사를 연결합니다.
이번 사진은 5단계로 직접 편집해 내보냈습니다. 공개본에는 기존 프로젝트의 픽셀 결과를 비교하는 검사도 포함돼 있습니다.

AFTERBEFORE포토샷에서 새 인물 사진에 5단계를 적용했습니다. 단계 수와 전체 색상 수가 같은 뜻은 아니라는 점, 계단 형태의 톤 변화를 코드와 함께 정리했습니다.
사진 위를 좌우로 움직여 비교하세요. 키보드로는 비교 막대에 초점을 맞춘 뒤 방향키를 사용하면 됩니다.
인물 사진은 새로 생성한 AI 이미지입니다. 편집 결과는 실제 Photoshot에서 적용하고 내보냈습니다. 아래 값은 이 사진의 실습값이며 모든 사진에 맞는 권장값은 아닙니다.
STEP 01 / 도구 찾기
사진을 연 뒤 상단 Add Adjustment에서 Posterize를 선택합니다. 아래는 실제 편집기에서 해당 도구의 위치를 확인한 화면입니다.

STEP 02 / 직접 조절
Levels를 5로 설정합니다. 피부와 배경에서 연속적인 색이 몇 개의 면으로 나뉘는지 확인합니다.

STEP 03 / 레이어 표시를 껐다 켜거나 Hold to Compare로 원본을 비교한 뒤 File → Export As… → Download로 결과를 저장합니다. 위 전후 비교의 AFTER는 이 편집기에서 직접 내보낸 이미지입니다. 화면을 누르면 원본 크기로 확대됩니다.
02 / Behind the tool
아래는 기존 작업기의 공개 코드 v0.16.0 기준 설명과 계산 예제입니다. 2026.10.01 기록의 수치·검증 설명을 보존했습니다. 위의 2026.10.13 새 사진 실습과 설정값은 다를 수 있으며, 현재 편집기의 모든 기능을 이 버전의 코드와 동일하다고 설명하는 것은 아닙니다.
단계 수는 2~256, 기본값은 6입니다. 예제에서는 8에서 6을 거쳐 4로 줄였고, 위의 사진에는 최종 4단계를 적용했습니다. 불투명도는 100%입니다.
256단계에서는 각 입력값에 대응하는 출력이 그대로 유지됩니다. 단계 수를 줄일수록 이웃한 여러 입력이 같은 출력값에 모이므로, 피부나 배경의 부드러운 변화가 넓은 색면으로 보입니다.
슬라이더의 단계 수와 사진에 실제 나타나는 색의 개수는 다릅니다. 사용하지 않는 채널 조합은 사진에 나타나지 않고, 합성이나 다른 레이어를 추가하면 새로운 중간값이 생길 수 있습니다.
입력 채널값 i에 단계 수를 곱하고 256으로 나눈 뒤 소수점을 버립니다. 이렇게 얻은 번호를 단계 수 − 1로 나누면 0~1 출력값이 됩니다.
const bucket = Math.min(
steps - 1, Math.floor(i * steps / 256)
);
const output = bucket / (steps - 1);4단계라면 입력을 64개씩 묶습니다. 각 구간은 최종적으로 0·85·170·255 중 하나가 됩니다. 아래 표는 경계의 양쪽 값을 실제 함수에 넣어 확인했습니다.
| 입력 구간 | 출력 | 경계 확인 |
|---|---|---|
| 0~63 | 0 | 63 → 0 |
| 64~127 | 85 | 64 → 85 / 127 → 85 |
| 128~191 | 170 | 128 → 170 / 191 → 170 |
| 192~255 | 255 | 192 → 255 |
그림은 0~255 회색 띠를 실제 포스터화 함수에 통과시킨 결과입니다. 사진보다 단순한 입력을 사용하면 단계 경계가 어디서 바뀌는지 바로 볼 수 있습니다.
계산은 각 채널에 독립적으로 적용합니다. 4단계면 가능한 RGB 조합은 최대 4³, 즉 64가지입니다. 입력 사진에 따라 실제 사용되는 조합은 이보다 적을 수 있습니다.
검정·흰색 두 값만 남기는 임계값과도 다릅니다. 포스터화를 2단계로 설정하면 각 채널에 0과 255가 남아 빨강·초록·파랑 같은 색도 나올 수 있습니다.
기존 revision 1은 0~1 값을 단계 수에 맞춰 반올림했습니다. revision 2는 256개 입력을 구간으로 나누는 방식입니다. 두 식은 구간 경계가 달라 같은 설정에서도 결과가 달라질 수 있습니다.
// 예전 프로젝트
Math.round(x * (steps - 1)) / (steps - 1)
// 새 조정 레이어
Math.min(steps - 1, Math.floor(i * steps / 256))
/ (steps - 1)저장된 프로젝트의 revision을 읽어 해당 계산을 선택합니다. 알고리즘을 바꿔도 예전에 저장한 작업이 다른 색으로 열리지 않게 하기 위한 분기입니다. 기존 16종 프로젝트의 픽셀 유지 테스트도 통과했습니다.