이번에 작업한 부분
포토샷 색조·채도에서 특정 색 범위를 고르고 바꾸는 부분을 정리했습니다.
Photoshot / Field notesNo. 06
파랑만 바꿀 때 경계가 끊기지 않도록
포토샷 색조·채도에서 특정 색 범위를 고르고 바꾸는 부분을 정리했습니다.
개발 기록 재구성 · 공개 코드 v0.16.0 기준 / 2026.10.13
구현 과정 읽기 ↓
Development journal / 07
만드는 과정에서 결정한 것들
기존 개발 기록과 공개 코드를 바탕으로 구현 과정을 정리했습니다. 아래 인물 사진은 2026.10.13에 새로 제작한 동작 예시입니다.
어떻게 구성했나
색 범위를 중심 색상각·폭·페더로 저장하고, 범위 안팎에 따라 조정 강도를 다르게 줍니다.
풀어야 했던 문제
색상환에서는 359°와 1°가 가깝습니다. 숫자 차이만 계산하면 이웃한 빨강이 멀리 떨어진 색으로 처리됩니다. 범위 끝에서 효과가 갑자기 끊기는 것도 피해야 합니다.
무엇을 참고하고 어떻게 적용했나
360°를 도는 원형 거리를 계산하고, 중심 범위에서는 전부 적용하되 바깥 페더에서는 조금씩 줄였습니다.
외부 GitHub 코드를 가져온 기록은 확인되지 않았습니다. 이 편은 포토샷의 색상 범위 계산과 입력 도구를 직접 보여줍니다.
포토샷에서 작성한 구현
현재 결과와 확인 범위
실제 사진의 파랑 범위에 Hue −25, Saturation +15를 적용했습니다. 같은 파랑인 다른 물체도 영향을 받으므로 피사체 하나만 고르려면 마스크가 필요합니다.
Actual screen / 실제 동작 확인색조·채도
AFTERBEFORE파란 옷만 바꾸고 싶을 때
새 인물 사진의 파랑 계열을 포토샷 색조·채도에서 조절했습니다. 전체 사진의 색조 변경과 특정 색 범위 변경이 어떻게 다른지 공개 코드와 함께 정리했습니다.
THIS SESSIONBlue 범위 · Hue −25 / Saturation +15
사진 위를 좌우로 움직여 비교하세요. 키보드로는 비교 막대에 초점을 맞춘 뒤 방향키를 사용하면 됩니다.
인물 사진은 새로 생성한 AI 이미지입니다. 편집 결과는 실제 Photoshot에서 적용하고 내보냈습니다. 아래 값은 이 사진의 실습값이며 모든 사진에 맞는 권장값은 아닙니다.
STEP 01 / 도구 찾기
Hue / Saturation 열기
사진을 연 뒤 상단 Add Adjustment에서 Hue / Saturation를 선택합니다. 아래는 실제 편집기에서 해당 도구의 위치를 확인한 화면입니다.
STEP 02 / 직접 조절
사진을 보며 값을 조절합니다
Target Color Range에서 Blue를 선택합니다. 아래쪽 범위별 Hue −25, Saturation 15를 입력합니다. 위의 전체 색상 조절값은 0으로 유지합니다.
STEP 03 / 레이어 표시를 껐다 켜거나 Hold to Compare로 원본을 비교한 뒤 File → Export As… → Download로 결과를 저장합니다. 위 전후 비교의 AFTER는 이 편집기에서 직접 내보낸 이미지입니다. 화면을 누르면 원본 크기로 확대됩니다.
계산식·소스 설명 자세히 보기
02 / Behind the tool
화면 뒤의 구현 이야기
아래는 기존 작업기의 공개 코드 v0.16.0 기준 설명과 계산 예제입니다. 2026.10.01 기록의 수치·검증 설명을 보존했습니다. 위의 2026.10.13 새 사진 실습과 설정값은 다를 수 있으며, 현재 편집기의 모든 기능을 이 버전의 코드와 동일하다고 설명하는 것은 아닙니다.
파랑 선택을 세 숫자로 저장하기
예제에서는 파랑 범위를 선택하고 색조 −45, 채도 −10, 명도 +12로 조절했습니다. 범위는 중심 240°, 폭 30°, 페더 30°입니다. 화면의 배경처럼 파란 계열이 다른 색으로 이동하는 예입니다.
기본 색상 범위는 빨강·노랑·초록·시안·파랑·마젠타의 여섯 개입니다. 각 범위가 중심각과 폭, 페더, 조정값을 별도로 가집니다. 전체 조정값에 선택한 범위의 조정량을 더해 최종 값을 구합니다.
이 선택은 색을 기준으로 합니다. 같은 파랑이 옷에도 있다면 함께 바뀔 수 있습니다. 배경만 바꾸려면 색상 범위 외에 마스크로 공간도 제한해야 합니다.
폭 안에서는 전부, 페더에서는 조금씩
중심 240°에서 폭이 30°라면 양쪽 15°씩, 225°~255°가 100% 적용 구간입니다. 그 바깥의 페더 구간에서는 적용량이 서서히 줄어 195°와 285°에서 0이 됩니다.
예를 들어 원래 색상각이 210°이면 중심에서 30° 떨어져 있습니다. 완전 적용 폭의 절반인 15°를 빼고 페더 30°로 나누면 적용량은 0.5입니다. 색조 −45° 중 −22.5°만 더해지는 식입니다.
Adobe 문서도 색상 범위와 완만한 경계 적용을 구분합니다. 포토샷은 원래 픽셀의 색상각과 중심 사이 거리로 가중치를 계산합니다. 여러 범위가 겹치면 각 기여량을 합칩니다.
360° 경계를 넘는 거리 계산
색상각은 0°와 360°가 이어집니다. 빨강 근처에서 359°와 1°를 358° 떨어진 색으로 취급하면 범위가 끊깁니다. 그래서 원을 따라 짧은 쪽의 거리를 구하도록 식을 만들었습니다.
const d = Math.abs(((h * 360 - band.center + 540) % 360) - 180),
w = clamp(1 - (d - band.width / 2) / band.feather);
hue += band.hue * w;
sat += band.saturation * w;
light += band.lightness * w;이 코드는 원래 색상각 h를 사용해 각 범위의 가중치 w를 구합니다. 색조를 바꾼 결과로 다음 범위를 다시 선택하는 구조가 아닙니다. 페더는 분모에 쓰이므로 0을 허용하지 않습니다.
표는 예제의 파랑 설정을 RGB에 적용한 결과입니다. 파란 표본은 변하고, 범위 밖의 갈색과 회색은 그대로 남는 것을 확인할 수 있습니다.
| 입력 RGB | 출력 RGB |
|---|---|
| 40 · 85 · 155 | 62 · 153 · 160 |
| 170 · 130 · 110 | 170 · 130 · 110 |
| 80 · 80 · 80 | 80 · 80 · 80 |
명도를 먼저 바꾸고 채도를 계산합니다
새 방식에서는 RGB 각 채널에 명도를 먼저 적용한 뒤 HSL로 바꿉니다. 명도가 음수이면 기존 채널값에 비율을 곱하고, 양수이면 흰색까지 남은 차이의 일부를 더합니다. 이후 색조 이동과 채도를 적용하고 RGB로 돌아갑니다.
const lit = (x: number) =>
light < 0
? x * (1 + light / 100)
: x + ((1 - x) * light) / 100;
[inputH, inputS, inputL] =
hsl(lit(r), lit(g), lit(b), scratch);채도는 양수와 음수의 식이 다릅니다. revision 2에서 +50은 채도를 2배로, −50은 절반으로 만듭니다. 0~1 범위를 넘는 결과는 제한합니다. 여기서 쓰는 채도는 명도를 적용한 뒤 얻은 inputS입니다.
| 설정 | 채도 계수 | 입력 S=0.2 |
|---|---|---|
| −50 | 1 − 0.5 | 0.1 |
| 0 | 1 | 0.2 |
| +50 | 1 ÷ (1 − 0.5) | 0.4 |
스포이드와 색상화는 따로 만들었습니다
색상 범위 스포이드는 클릭한 색의 색상각을 구하고, 가장 가까운 기본 범위를 찾아 중심각을 옮깁니다. RGB 차이가 너무 작은 회색은 색상각이 불안정하므로 선택 대상에서 제외합니다. 사진 속 물체의 윤곽을 찾는 기능은 아닙니다.
색상화(Colorize)를 켜면 여섯 범위의 조정을 건너뛰고, 지정한 색조와 채도를 사용합니다. 따라서 원래 채도가 0인 회색에도 색을 넣을 수 있습니다. 기존 색조를 이동하는 기능과는 목적이 다릅니다.
테스트에서는 빨강 범위 조정이 관계없는 파랑을 바꾸지 않는지, 빨강의 360° 경계가 이어지는지 확인했습니다. 회색의 색상화, 초기화 시 범위 조정 제거, 잘못된 페더값 거부도 함께 검사했습니다.
- 범위 스포이드클릭한 색의 색상각으로 범위의 중심을 설정합니다.
- 색상화원래 색조 대신 지정한 색조·채도로 통일합니다.
- 검증과 초기화무관한 색 유지, 색상 경계, 회색, 잘못된 범위값을 확인합니다.
구현 코드와 참고 자료
- 색상 범위 가중치·명도·채도·색상화 계산
Photoshot v0.16.0 · 실제 구현과 테스트 - 색상 범위 UI와 컨트롤
Photoshot v0.16.0 · 실제 구현과 테스트 - 색상 범위 스포이드
Photoshot v0.16.0 · 실제 구현과 테스트 - 범위 조정·색상화·초기화 테스트
Photoshot v0.16.0 · 실제 구현과 테스트 - Adobe · 색조·채도와 색상 범위 경계의 기능 설명
기능 의미를 비교하기 위한 참고 문서입니다. Adobe의 내부 구현 코드 출처는 아닙니다.