← Photoshot · 사용법과 개발기↗편집기 열기
Photoshot / Field notesNo. 10

출력 빨강을 원본의 어떤 색으로 만들까

포토샷 채널 혼합에서 출력 R·G·B마다 원본 채널의 비율을 지정하도록 구성했습니다.

개발 기록 재구성 · 공개 코드 v0.16.0 기준 / 2026.10.13

구현 과정 읽기 ↓
채널 혼합 편 전용 AI 인물 사진
PORTRAIT STUDY / 11AI-generated image

Development journal / 11

만드는 과정에서 결정한 것들

기존 개발 기록과 공개 코드를 바탕으로 구현 과정을 정리했습니다. 아래 인물 사진은 2026.10.13에 새로 제작한 동작 예시입니다.

01

이번에 작업한 부분

포토샷 채널 혼합에서 출력 R·G·B마다 원본 채널의 비율을 지정하도록 구성했습니다.

02

어떻게 구성했나

각 출력 채널을 원본 R·G·B의 가중합과 상수로 계산합니다. 단색 모드에서는 같은 계산 결과를 세 채널에 넣습니다.

03

풀어야 했던 문제

채널의 혼합 비율과 레이어 전체의 불투명도를 혼동하면 색 계산을 설명하기 어렵습니다. 가중합이 범위를 넘는 경우도 처리해야 합니다.

04

무엇을 참고하고 어떻게 적용했나

채널 계산을 먼저 하고 결과 범위를 제한한 뒤, 공통 레이어 합성에서 불투명도를 적용하도록 나눴습니다.

별도의 외부 GitHub 코드를 도입한 기록은 확인되지 않았습니다. 포토샷 자체 채널 계산과 패널 구현을 연결합니다.

포토샷에서 작성한 구현

05

현재 결과와 확인 범위

이번 사진은 단색 모드에서 Red 21·Green 72·Blue 7을 적용했습니다. 채널 교환과 단색 변환을 같은 구조에서 다루는 예입니다.

Actual screen / 실제 동작 확인채널 혼합
편집 전 원본실제 Photoshot에서 내보낸 편집 결과AFTERBEFORE

흑백으로 바꾸는 또 다른 방법

포토샷의 Monochrome Luminance 프리셋으로 새 사진을 편집했습니다. 단색 혼합과 RGB 채널 교환의 계산을 작업기에서 함께 살펴봅니다.

THIS SESSIONMonochrome · Red 21 / Green 72 / Blue 7

사진 위를 좌우로 움직여 비교하세요. 키보드로는 비교 막대에 초점을 맞춘 뒤 방향키를 사용하면 됩니다.
인물 사진은 새로 생성한 AI 이미지입니다. 편집 결과는 실제 Photoshot에서 적용하고 내보냈습니다. 아래 값은 이 사진의 실습값이며 모든 사진에 맞는 권장값은 아닙니다.

Photoshot에서 직접 해보기 ↗

STEP 01 / 도구 찾기

Channel Mixer 열기

사진을 연 뒤 상단 Add Adjustment에서 Channel Mixer를 선택합니다. 아래는 실제 편집기에서 해당 도구의 위치를 확인한 화면입니다.

01 · Add Adjustment에서 Channel Mixer의 위치 확인
01 · Add Adjustment에서 Channel Mixer의 위치 확인

STEP 02 / 직접 조절

사진을 보며 값을 조절합니다

Monochrome을 켜고 Red 21, Green 72, Blue 7, Constant 0으로 조절합니다. 초록색 의상과 붉은 배경의 밝기 차이를 봅니다.

02 · 실제 Channel Mixer 패널과 적용값 / Monochrome · Red 21 / Green 72 / Blue 7
02 · 실제 Channel Mixer 패널과 적용값 / Monochrome · Red 21 / Green 72 / Blue 7

STEP 03 / 레이어 표시를 껐다 켜거나 Hold to Compare로 원본을 비교한 뒤 File → Export As… → Download로 결과를 저장합니다. 위 전후 비교의 AFTER는 이 편집기에서 직접 내보낸 이미지입니다. 화면을 누르면 원본 크기로 확대됩니다.

계산식·소스 설명 자세히 보기

02 / Behind the tool

화면 뒤의 구현 이야기

아래는 기존 작업기의 공개 코드 v0.16.0 기준 설명과 계산 예제입니다. 2026.10.01 기록의 수치·검증 설명을 보존했습니다. 위의 2026.10.13 새 사진 실습과 설정값은 다를 수 있으며, 현재 편집기의 모든 기능을 이 버전의 코드와 동일하다고 설명하는 것은 아닙니다.

01

출력 채널마다 비율 네 개를 저장했습니다

출력 빨강은 R 0·G 0·B 100, 출력 파랑은 R 100·G 0·B 0으로 설정했습니다. 출력 초록은 기본값인 G 100을 유지했습니다. 상수는 세 채널 모두 0입니다.

화면에서 ‘조정 채널’을 바꾸면 편집할 출력 채널이 바뀝니다. 각 채널에 입력 R·G·B의 비율과 상수를 저장하므로 숫자 설정은 총 12개입니다. 범위는 각각 −200~200입니다.

예제 설정 · 상수 0 · 단색 끔. 패널은 출력 파랑을 편집하는 화면입니다.
출력입력 R입력 G입력 B
빨강00100
초록01000
파랑10000
02

한 채널의 결과를 RGB 가중합으로 구합니다

입력 R·G·B를 0~1로 바꾼 뒤 비율을 곱해 더합니다. 상수도 더하고 100으로 나눈 결과를 0~1로 제한합니다. 아래 코드는 출력 채널 하나를 계산하는 부분입니다.

out[c] = clamp(
  (r * v[key + 'R']
   + g * v[key + 'G']
   + b * v[key + 'B']
   + v[key + 'Constant']) / 100
);

따라서 상수 +10은 채널값에 0.1을 더합니다. 8비트로 보면 약 25.5에 해당하며, 이미 밝은 값은 최댓값에 걸릴 수 있습니다. 화면의 RGB 합계 표시는 안내용이고, 합계를 자동으로 100%에 맞추지는 않습니다.

  1. 출력 채널 선택R·G·B 중 계산할 채널의 설정을 읽습니다.
  2. 입력 채널 혼합원래 세 채널에 각 비율을 곱해 더합니다.
  3. 상수와 범위 제한상수를 반영한 결과를 0~1로 제한합니다.
03

채널 교환과 레이어 불투명도를 구분합니다

입력 RGB가 170·130·110이면 교환 결과는 110·130·170입니다. 이 결과를 원본과 70% 비율로 섞으면 128·130·152가 됩니다.

그림의 각 행은 설명용 색상 표본입니다. 사진 속 얼굴이나 배경에서 찍어 낸 값은 아닙니다. 중성 회색은 세 채널이 같으므로 교환해도 바뀌지 않습니다.

슬라이더를 줄이는 것과 레이어 불투명도를 줄이는 것은 계산 위치가 다릅니다. 최종 사진에는 채널 교환 설정을 그대로 두고 레이어 불투명도 70%를 적용했습니다.

채널 교환 100퍼센트와 불투명도70퍼센트의 RGB 출력
실제 adjustPixels 실행 결과 · 일반 합성 · 마스크 없음.
04

단색 모드는 같은 결과를 세 채널에 넣습니다

단색을 켜면 출력 채널에 관계없이 빨강 출력의 비율을 읽습니다. 이 한 묶음으로 계산한 값을 R·G·B에 똑같이 넣어 회색을 만듭니다.

const key = v.mono ? 'r' : 'rgb'[c];

R 30·G 59·B 11로 설정하면 세 입력을 다르게 반영한 흑백이 됩니다. 08편 흑백 레이어처럼 원래 색상각을 여섯 범위로 나누어 처리하는 방식은 아닙니다.

Adobe 문서는 채널 혼합의 기능과 옵션을 확인하는 데 참고했습니다. 이 글의 식과 숫자는 포토샷 소스 기준이며, Photoshop과의 전체 픽셀 일치율을 뜻하지 않습니다.

채널 선택과 단색 모드는 결과를 만드는 설정 묶음을 바꿉니다.
구분포토샷에서 사용하는 값
컬러각 출력 채널의 R·G·B·상수
단색빨강 출력 설정을 세 채널에 공통 적용
레이어 강도계산이 끝난 뒤 불투명도로 합성

구현 코드와 참고 자료

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

모든 사용법·개발기 보기 ↗↗직접 편집해 보기