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

반전 수식은 짧아도 레이어 연결은 따로 필요했습니다

포토샷의 색상 반전을 공통 조정 레이어에 연결했습니다.

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

구현 과정 읽기 ↓
반전 편 전용 AI 인물 사진
PORTRAIT STUDY / 13AI-generated image

Development journal / 13

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

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

01

이번에 작업한 부분

포토샷의 색상 반전을 공통 조정 레이어에 연결했습니다.

02

어떻게 구성했나

8비트 채널마다 255에서 원래 값을 뺀 결과를 변환표로 만들고, RGB에 적용합니다.

03

풀어야 했던 문제

반전 RGB를 구하는 것만으로 마스크·불투명도·저장까지 해결되지는 않습니다. 반투명 픽셀의 알파가 바뀌면 합성 결과도 달라집니다.

04

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

반전 전용 강도 슬라이더를 더하는 대신 공통 불투명도를 사용하고, RGB만 바꾸며 원래 알파를 유지하도록 했습니다.

이 편에 별도 외부 GitHub 코드 도입 기록은 없습니다. 짧은 반전 식과 이를 레이어에 연결한 포토샷 코드를 함께 제공합니다.

포토샷에서 작성한 구현

05

현재 결과와 확인 범위

불투명도 100%의 실제 반전 결과를 내보냈습니다. 마스크 없는 표준 합성에서는 반전을 두 번 적용하면 원래 RGB로 돌아가는 성질도 설명했습니다.

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

반전 버튼 하나에도 저장 방식이 필요합니다

포토샷에서는 반전도 조정 레이어로 다룹니다. 새 인물 사진으로 실제 결과를 다시 촬영하고 RGB 값과 투명도 처리의 차이를 작업기에 정리했습니다.

THIS SESSIONRGB 반전 · 레이어 불투명도 100%

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

Photoshot에서 직접 해보기 ↗

STEP 01 / 도구 찾기

Invert 열기

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

01 · Add Adjustment에서 Invert의 위치 확인
01 · Add Adjustment에서 Invert의 위치 확인

STEP 02 / 직접 조절

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

반전 조정 레이어를 추가하면 RGB 색이 즉시 반전됩니다. 별도 수치 입력이 없는 도구로, 레이어 표시를 껐다 켜 원본과 비교합니다.

02 · 실제 Invert 패널과 적용값 / RGB 반전 · 레이어 불투명도 100%
02 · 실제 Invert 패널과 적용값 / RGB 반전 · 레이어 불투명도 100%

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

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

02 / Behind the tool

화면 뒤의 구현 이야기

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

01

반전에는 별도 강도 슬라이더를 넣지 않았습니다

반전 레이어의 고유 컨트롤은 비어 있습니다. 사용자가 정할 임계값이나 기준색이 없기 때문입니다. 효과의 강도는 공통 레이어 불투명도로 조절합니다.

invert: {
  name: '반전',
  description: 'RGB 색상을 반전합니다.',
  controls: []
}

사진을 직접 덮어쓰지 않고 조정 정보로 저장합니다. 레이어를 숨기면 이 단계를 건너뛰어 원래 결과를 볼 수 있고, 다시 켜면 같은 계산이 적용됩니다.

02

256개의 출력값을 미리 계산합니다

8비트 RGB에서 입력이 0이면 출력은 255, 입력이 255이면 출력은 0입니다. 엔진에서는 채널을 0~1로 바꾼 값 x에 다음 식을 적용합니다.

if (t === 'invert') x = 1 - x;

밝기·레벨·곡선 등 채널별로 처리할 수 있는 조정은 0~255 입력에 대한 출력표를 만듭니다. 반전도 이 경로를 사용해, 각 픽셀에서는 채널값에 해당하는 칸을 읽습니다.

R·G·B를 서로 교환하는 채널 혼합과 달리, 각 채널은 자기 값만으로 계산됩니다. 알파 채널에는 반전 식을 적용하지 않습니다.

실제 함수 출력 · 8비트 · 불투명도 100%. 입력 128은 127로 바뀝니다.
입력 한 채널반전 결과
0255
32223
64191
128127
19263
2550
03

불투명도 50%에서 회색이 되는 이유

일반 합성에서 원래 값과 반전 값을 정확히 절반씩 섞으면, 두 값의 합이 항상 255이므로 127.5가 됩니다. 이론적인 반올림 결과는 RGB 128·128·128입니다. 실제 코드의 부동소수점 계산에서는 일부 입력이 127로 기록되어 1단계 차이가 날 수 있습니다.

result = original
  + (inverted - original) * opacity;

위 식은 일반 합성 부분을 줄여 쓴 것입니다. 마스크가 있으면 불투명도에 마스크 알파를 곱한 양만 적용합니다. 마스크가 일정하지 않거나 합성 모드를 바꾸면 거의 일정한 중성 회색이 되는 조건도 달라집니다.

반전100퍼센트와 불투명도50퍼센트의 색상 표본
50%는 0.5를 정확히 적용한 계산입니다. 최종 사진은 100%를 사용했습니다.
04

두 번 반전하면 원래 값으로 돌아옵니다

반전 레이어 두 개를 일반 합성·불투명도 100%·마스크 없음으로 쌓으면 255 − (255 − 값)이 됩니다. 두 번째 결과는 원래 RGB와 같습니다.

이 성질은 구현을 점검할 때도 쓸 수 있습니다. 반전 사이에 다른 보정을 넣거나 불투명도를 낮추면 이 등식이 성립하는 조건이 달라집니다.

Adobe의 반전 기능 설명을 참고하되, 여기서는 포토샷의 8비트 RGB 처리만 설명했습니다. 다른 색 공간과 비트 깊이까지 동일하게 동작한다는 의미는 아닙니다.

  1. 원래 값 40첫 번째 반전 → 215
  2. 두 번째 반전255 − 215 → 40
  3. 적용 조건두 레이어 모두 일반 합성 · 불투명도 100% · 마스크 없음

구현 코드와 참고 자료

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

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