SLOHERO
16

PHOTOSHOT / DEVELOPMENT JOURNAL

같은 파랑 안에서도
색 성분을 조절하기

선택 색상은 색상 계열마다 청록·자홍·노랑·검정 값을 따로 저장합니다. 어떤 계열에 얼마나 해당하는지 먼저 구한 뒤, 그 비율만큼 RGB를 바꾸도록 만들었습니다.

조정 레이어 16 · 선택 색상
2026.10.01 · SLOHERO · 공개 코드 v0.16.0 기준
보정 전선택 색상 보정 전 AI 생성 인물 예시
보정 후선택 색상 보정 후 AI 생성 인물 예시
AI 생성 인물 원본에 공개 코드 v0.16.0의 해당 조정만 적용한 결과입니다. 각 글에 설정과 불투명도를 적었습니다. 패널은 기존 릴스 제작 때 캡처한 실제 화면입니다.

16편은 조정 레이어 개발기의 마지막 글입니다. 선택 색상의 계산을 살펴보고, 16개 기능이 공통 렌더링과 저장 구조로 연결되는 방식까지 정리합니다.

  1. 01아홉 계열마다 네 가지 조정값을 저장합니다
  2. 02RGB의 크기 차이로 색상 가중치를 구합니다
  3. 03상대값은 원래 채널값에 따라 조정량이 달라집니다
  4. 04검정 조절도 선택한 계열 안에서 적용합니다
  5. 0516개 조정을 같은 레이어 구조에 넣었습니다
01

아홉 계열마다 네 가지 조정값을 저장합니다

빨강·노랑·초록·청록·파랑·자홍·흰색·중간색·검정을 고를 수 있습니다. 각 계열에 C·M·Y·K 네 값이 있으므로 조정값은 36개이며, 범위는 각각 −100~100입니다.

상단 사진은 파랑의 C +20·M −25·Y −20, 빨강의 C −20·M +10·Y +15, 검정의 K +10을 적용한 결과입니다. 나머지는 0, 상대값 켬, 불투명도 100%입니다.

색상 계열은 피사체 선택과 다릅니다. 같은 계열의 옷과 배경은 함께 영향을 받을 수 있습니다. 특정 부분에만 적용하려면 마스크를 사용합니다.

파랑 계열의 청록20 자홍-25 노랑-20 상대값 선택 색상 패널
파랑 계열 설정을 편집하는 실제 화면입니다. 다른 계열의 설정도 같은 레이어에 저장됩니다. · 그림을 누르면 전체 패널을 볼 수 있습니다.
02

RGB의 크기 차이로 색상 가중치를 구합니다

원래 픽셀의 가장 큰 채널값을 hi, 가장 작은 값을 lo, 나머지를 mid로 둡니다. 파랑이 가장 큰 채널이라면 hi−mid만큼 파랑 계열의 조정에 반영합니다.

weights[4] = b === hi ? hi - mid : 0;
weights[6] = clamp((lo - 0.5) * 2);
weights[7] = 1 - Math.abs(hi + lo - 1);
weights[8] = clamp((0.5 - hi) * 2);

뒤의 세 식은 흰색·중간색·검정의 가중치입니다. 중간색은 이름과 달리 무채색만 고르는 스위치가 아닙니다. 현재 식에 맞는 유채색도 영향을 받을 수 있습니다.

계열별 기여량을 더하므로 여러 계열의 조정이 한 픽셀에 겹칠 수 있습니다. 가중치의 합을 다시 1로 정규화하지는 않습니다.

r·g·b는 0~1로 바꾼 입력값입니다. 구체적인 식은 공개 코드에 있습니다.
계열가중치의 기준
빨강·초록·파랑해당 채널이 최댓값일 때 hi−mid
노랑·청록·자홍대응하는 채널이 최솟값일 때 mid−lo
흰색세 채널 중 가장 어두운 값도 밝은 정도
검정세 채널 중 가장 밝은 값도 어두운 정도
03

상대값은 원래 채널값에 따라 조정량이 달라집니다

C·M·Y는 각각 R·G·B에 대응하는 조절값으로 사용합니다. 원래 RGB를 인쇄용 CMYK 프로파일로 변환한 뒤 편집하는 구조는 아닙니다.

delta += weight * (
  ink * (relative ? 1 - input[c] : 1)
  + black * (relative ? input[c] : 1)
);
out[c] = clamp(input[c] - delta);

상대값에서는 잉크 성분에 1−입력값, 검정 성분에는 입력값을 곱합니다. 절대값에서는 이 두 계수가 1입니다. 두 방식 모두 해당 색상 계열의 가중치는 적용합니다.

같은 슬라이더값이라도 원래 채널값에 따라 상대값과 절대값의 차이가 달라집니다. 세부 계산은 이 프로젝트의 구현이며 Adobe의 비공개 알고리즘을 인용한 식이 아닙니다.

선택 색상 동일 설정의 상대값과 절대값 RGB 비교
상단 사진과 같은 3개 계열 설정 · 표본별 실제 함수 실행 · 일반 합성100%.
04

검정 조절도 선택한 계열 안에서 적용합니다

검정 계열의 K +10만 생각해 보면 동작이 더 분명합니다. 회색 64의 검정 가중치는 약 0.498입니다. 상대값에서는 여기에 원래 채널값과 0.1을 곱한 양을 뺍니다.

같은 설정을 절대값으로 바꾸면 원래 채널값을 곱하는 단계가 빠집니다. 그래서 어두운 회색에서는 변화량이 더 큽니다. 아래 표는 다른 계열의 조정값을 모두 0으로 둔 별도 실험입니다.

모든 계열의 변화량을 더한 뒤 0~1 범위를 제한합니다. 강한 설정에서는 서로 다른 값이 같은 검정이나 흰색에 걸릴 수 있으므로, 숫자를 크게 올리는 것이 항상 더 많은 디테일을 보여 주는 것은 아닙니다.

검정 계열 K+10만 적용한 실제 계산. 다른 8개 계열은 모두0입니다.
원래 회색K+10 상대값K+10 절대값
323013
646151
969490
160160160
05

16개 조정을 같은 레이어 구조에 넣었습니다

각 기능은 입력 RGB를 새로운 RGB로 바꾸는 계산을 맡습니다. 불투명도, 마스크, 합성 모드, 알파 보존은 공통 경로에서 처리합니다. 이 구분 덕분에 새 조정을 추가할 때 같은 합성 코드를 반복해서 만들지 않았습니다.

레이어별 설정을 저장하고, 예전 계산이 필요한 프로젝트는 revision으로 구분합니다. 이번에 실행한 기존 테스트에서는 16종 설정의 저장·불러오기, 이전 버전 결과 유지, 디더링의 일관성도 확인했습니다.

개발기 01~16편은 이렇게 기능별 계산과 공통 구조를 나눠 기록한 글입니다. Adobe 문서는 기능 의미를 확인하는 참고 자료로, GitHub 코드는 실제 구현의 근거로 연결했습니다.

  1. 설정 읽기레이어 종류·수치·버전·LUT 등을 확인합니다.
  2. 기능별 RGB 계산밝기부터 선택 색상까지 각 계산을 실행합니다.
  3. 공통 합성마스크·불투명도·합성 모드로 적용량을 정합니다.
  4. 결과 기록RGB를 기록하고 원래 알파를 유지합니다.

구현 코드와 참고 자료

공개 코드는 구현을 설명하기 위한 참조입니다. 사용·배포 조건은 저장소의 라이선스 표기를 확인하세요. 사진·패널은 자체 제작 자료, 장식 이미지는 AI 생성 이미지입니다.