이번에 작업한 부분
포토샷 그레이디언트 맵에서 밝기를 여러 색상 정지점에 대응시켰습니다.
Photoshot / Field notesNo. 15
그라데이션 띠와 실제 사진의 색이 이어지도록
포토샷 그레이디언트 맵에서 밝기를 여러 색상 정지점에 대응시켰습니다.
개발 기록 재구성 · 공개 코드 v0.16.0 기준 / 2026.10.13
구현 과정 읽기 ↓
Development journal / 16
만드는 과정에서 결정한 것들
기존 개발 기록과 공개 코드를 바탕으로 구현 과정을 정리했습니다. 아래 인물 사진은 2026.10.13에 새로 제작한 동작 예시입니다.
어떻게 구성했나
사진의 밝기로 위치를 구하고, 그 위치를 둘러싼 두 색상 정지점 사이를 보간합니다. 각 정지점에는 색·위치·중간점이 저장됩니다.
풀어야 했던 문제
정지점 순서가 뒤집히거나 위치가 겹치면 구간 계산이 성립하지 않습니다. 부드러움과 디더링도 역할이 다른데 같은 효과로 설명하기 쉽습니다.
무엇을 참고하고 어떻게 적용했나
잘못된 위치 데이터를 검증하고, 중간점·매끄러움·디더링을 각각 다른 단계로 처리했습니다. 설명용 색상 띠는 실제 변환 함수를 실행한 값으로 만들었습니다.
이 편의 별도 외부 GitHub 코드 도입 기록은 확인되지 않았습니다. 포토샷의 정지점 계산·검증·저장 코드를 보여줍니다.
포토샷에서 작성한 구현
현재 결과와 확인 범위
이번 사진은 어두운 곳의 차가운 색과 밝은 곳의 따뜻한 색을 연결했습니다. 프로젝트를 다시 열 때 색상과 위치를 함께 복원하는 구조입니다.
Actual screen / 실제 동작 확인그레이디언트 맵
AFTERBEFORE밝기에 따라 다른 색을 배치하기
포토샷에서 차가운 그림자와 따뜻한 밝은 영역을 가진 프리셋을 적용했습니다. 색상 위치·중간점·부드러움이 결과와 연결되는 과정을 정리했습니다.
THIS SESSIONCool Shadows · Warm Highlights / Smoothness 100
사진 위를 좌우로 움직여 비교하세요. 키보드로는 비교 막대에 초점을 맞춘 뒤 방향키를 사용하면 됩니다.
인물 사진은 새로 생성한 AI 이미지입니다. 편집 결과는 실제 Photoshot에서 적용하고 내보냈습니다. 아래 값은 이 사진의 실습값이며 모든 사진에 맞는 권장값은 아닙니다.
STEP 01 / 도구 찾기
Gradient Map 열기
사진을 연 뒤 상단 Add Adjustment에서 Gradient Map를 선택합니다. 아래는 실제 편집기에서 해당 도구의 위치를 확인한 화면입니다.
STEP 02 / 직접 조절
사진을 보며 값을 조절합니다
Cool Shadows / Warm Highlights 프리셋을 선택하고 Smoothness 100을 유지합니다. 그림자와 밝은 영역에 각각 어떤 색이 배정되는지 확인합니다.
STEP 03 / 레이어 표시를 껐다 켜거나 Hold to Compare로 원본을 비교한 뒤 File → Export As… → Download로 결과를 저장합니다. 위 전후 비교의 AFTER는 이 편집기에서 직접 내보낸 이미지입니다. 화면을 누르면 원본 크기로 확대됩니다.
계산식·소스 설명 자세히 보기
02 / Behind the tool
화면 뒤의 구현 이야기
아래는 기존 작업기의 공개 코드 v0.16.0 기준 설명과 계산 예제입니다. 2026.10.01 기록의 수치·검증 설명을 보존했습니다. 위의 2026.10.13 새 사진 실습과 설정값은 다를 수 있으며, 현재 편집기의 모든 기능을 이 버전의 코드와 동일하다고 설명하는 것은 아닙니다.
색상과 위치를 한 쌍으로 저장했습니다
예제는 0%에 #071c32, 50%에 #ef7648, 100%에 #ffeebc를 놓았습니다. 색상마다 위치와 중간점 값을 함께 저장합니다.
내부 정지점은 추가하거나 옮길 수 있습니다. 처음과 마지막 위치는 0과 100으로 고정하고, 중간 위치가 겹치거나 순서가 뒤집힌 데이터는 검증 단계에서 거부합니다. 정지점은 2~32개를 허용합니다.
패널의 미리보기 띠와 실제 픽셀 계산은 역할이 다릅니다. 아래 본문의 색상 띠는 CSS 그라데이션을 그린 것이 아니라 실제 함수에 회색 256개를 넣어 만든 결과입니다.
밝기로 두 정지점 사이의 위치를 구합니다
RGB를 0~1로 바꾸고 0.3·0.59·0.11의 가중합을 구합니다. 여기에 100을 곱하면 정지점과 같은 0~100 범위에서 위치를 찾을 수 있습니다.
let y = 0.3 * r + 0.59 * g + 0.11 * b;
if (v.reverse) y = 1 - y;
const position = y * 100;다음으로 위치를 둘러싼 두 정지점을 찾습니다. 구간 시작에서 끝까지 얼마나 왔는지를 0~1 값으로 구하고, 그 비율로 두 RGB를 섞습니다. 이 과정은 인물이나 배경의 종류를 구분하지 않습니다.
중간점은 두 색이 섞이는 비율을 바꿉니다
기본 중간점 50에서는 구간의 절반 지점에 두 색이 절반씩 들어갑니다. 중간점을 옮기면 같은 위치에서도 어느 색이 더 많이 들어가는지가 달라집니다.
f = f ** (
Math.log(0.5) / Math.log(low.midpoint / 100)
);이 식은 지정한 중간점 위치에서 혼합 비율이 0.5가 되도록 지수를 구합니다. 정지점 자체의 색이나 위치를 옮기는 옵션과는 다릅니다.
예를 들어 매끄러움 0에서 중간점 25라면, 구간의 25% 지점에서 혼합 비율이 0.5가 됩니다. 기본 중간점 50이면 같은 위치의 비율은 0.25입니다.
| 구간 내 위치 | 중간점50 | 중간점25 |
|---|---|---|
| 25% | 0.250 | 0.500 |
| 50% | 0.500 | 0.707 |
| 75% | 0.750 | 0.866 |
매끄러움과 디더링은 서로 다른 단계입니다
매끄러움은 색을 섞는 비율을 곡선 형태로 바꿉니다. 현재 코드는 선형 비율과 smoothstep 곡선의 차이에 매끄러움 값을 반영합니다.
f += ((f * f * (3 - 2 * f) - f)
* v.smooth) / 200;분모가 200이므로 매끄러움 100에서도 곡선으로 전부 바뀌지는 않습니다. 선형 비율과 smoothstep의 중간값이 됩니다. 이 설명은 현재 포토샷 구현에 대한 것이며 Photoshop의 내부 식이라고 주장하는 것은 아닙니다.
디더링은 색 계산 뒤에 미세한 값을 더하는 별도 옵션입니다. 반전은 색 목록의 순서를 다시 저장하는 대신 입력 밝기 y를 1−y로 바꿉니다.
- 중간점거듭제곱으로 구간 내 혼합 비율을 바꿉니다.
- 매끄러움계산한 비율에 곡선 성분을 섞습니다.
- 두 RGB 혼합선택한 두 정지점의 채널값을 보간합니다.
- 디더링·합성미세한 변화와 레이어 강도를 적용합니다.
프로젝트를 다시 열어도 같은 설정을 읽습니다
색상 정지점, 중간점, 반전, 디더링을 조정 정보와 함께 저장합니다. 테스트에서는 중간 정지점을 포함한 설정이 저장·불러오기 후에도 유지되는지 확인했습니다.
현재 색 보간은 RGB 채널의 수치 사이에서 이루어집니다. Lab 같은 지각 색 공간에서 두 색 사이를 고르게 나누는 방식은 아닙니다. 색 조합에 따라 중간색이 어둡거나 탁하게 보일 수 있으므로 중간 정지점으로 직접 조절할 수 있게 했습니다.
| 저장 값 | 의미 |
|---|---|
| position | 밝기 위치 0~100 |
| color | 해당 위치의 HEX 색상 |
| midpoint | 다음 정지점까지의 혼합 중간점 |
| smooth / reverse / dither | 혼합 곡선·방향·미세 변화 |
구현 코드와 참고 자료
- 정지점 검증
Photoshot v0.16.0 · 실제 구현과 테스트 - 밝기·중간점·매끄러움 계산
Photoshot v0.16.0 · 실제 구현과 테스트 - 정지점과 중간점 컨트롤
Photoshot v0.16.0 · 실제 구현과 테스트 - 다중 정지점·반전·디더링 저장 검사
Photoshot v0.16.0 · 실제 구현과 테스트 - Adobe · Gradient Map의 밝기와 색상 대응 기능
기능 의미를 비교하기 위한 참고 문서입니다. Adobe의 내부 구현 코드 출처는 아닙니다.