SLOHERO
15

PHOTOSHOT / DEVELOPMENT JOURNAL

어두운 곳과 밝은 곳에
다른 색 넣기

그레이디언트 맵은 사진의 위치가 아니라 밝기를 기준으로 색을 고릅니다. 어두운 픽셀은 왼쪽 색, 밝은 픽셀은 오른쪽 색에 대응시키는 방식입니다.

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

15편에서는 남색·주황·밝은 노랑을 밝기에 대응시켰습니다. 상단 결과는 세 색상 정지점, 중간점 50, 매끄러움 100, 반전·디더링 끔, 불투명도 100%입니다.

  1. 01색상과 위치를 한 쌍으로 저장했습니다
  2. 02밝기로 두 정지점 사이의 위치를 구합니다
  3. 03중간점은 두 색이 섞이는 비율을 바꿉니다
  4. 04매끄러움과 디더링은 서로 다른 단계입니다
  5. 05프로젝트를 다시 열어도 같은 설정을 읽습니다
01

색상과 위치를 한 쌍으로 저장했습니다

예제는 0%에 #071c32, 50%에 #ef7648, 100%에 #ffeebc를 놓았습니다. 색상마다 위치와 중간점 값을 함께 저장합니다.

내부 정지점은 추가하거나 옮길 수 있습니다. 처음과 마지막 위치는 0과 100으로 고정하고, 중간 위치가 겹치거나 순서가 뒤집힌 데이터는 검증 단계에서 거부합니다. 정지점은 2~32개를 허용합니다.

패널의 미리보기 띠와 실제 픽셀 계산은 역할이 다릅니다. 아래 본문의 색상 띠는 CSS 그라데이션을 그린 것이 아니라 실제 함수에 회색 256개를 넣어 만든 결과입니다.

세 색상 정지점과 매끄러움100 그레이디언트 맵 패널
색과 위치를 편집하는 부분까지 표시했습니다. 공통 저장 메뉴는 전체 패널에서 확인할 수 있습니다. · 그림을 누르면 전체 패널을 볼 수 있습니다.
02

밝기로 두 정지점 사이의 위치를 구합니다

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를 섞습니다. 이 과정은 인물이나 배경의 종류를 구분하지 않습니다.

회색 밝기에 대응한 남색 주황 밝은 노랑의 실제 그레이디언트 출력
위는 원래 회색, 아래는 포토샷 계산 결과입니다. 숫자는 색상 정지점의 위치입니다.
03

중간점은 두 색이 섞이는 비율을 바꿉니다

기본 중간점 50에서는 구간의 절반 지점에 두 색이 절반씩 들어갑니다. 중간점을 옮기면 같은 위치에서도 어느 색이 더 많이 들어가는지가 달라집니다.

f = f ** (
  Math.log(0.5) / Math.log(low.midpoint / 100)
);

이 식은 지정한 중간점 위치에서 혼합 비율이 0.5가 되도록 지수를 구합니다. 정지점 자체의 색이나 위치를 옮기는 옵션과는 다릅니다.

예를 들어 매끄러움 0에서 중간점 25라면, 구간의 25% 지점에서 혼합 비율이 0.5가 됩니다. 기본 중간점 50이면 같은 위치의 비율은 0.25입니다.

지수 식만 비교한 표 · 매끄러움0. 왼쪽 정지점의 중간점 값을 해당 구간에 사용합니다.
구간 내 위치중간점50중간점25
25%0.2500.500
50%0.5000.707
75%0.7500.866
04

매끄러움과 디더링은 서로 다른 단계입니다

매끄러움은 색을 섞는 비율을 곡선 형태로 바꿉니다. 현재 코드는 선형 비율과 smoothstep 곡선의 차이에 매끄러움 값을 반영합니다.

f += ((f * f * (3 - 2 * f) - f)
  * v.smooth) / 200;

분모가 200이므로 매끄러움 100에서도 곡선으로 전부 바뀌지는 않습니다. 선형 비율과 smoothstep의 중간값이 됩니다. 이 설명은 현재 포토샷 구현에 대한 것이며 Photoshop의 내부 식이라고 주장하는 것은 아닙니다.

디더링은 색 계산 뒤에 미세한 값을 더하는 별도 옵션입니다. 반전은 색 목록의 순서를 다시 저장하는 대신 입력 밝기 y를 1−y로 바꿉니다.

  1. 중간점거듭제곱으로 구간 내 혼합 비율을 바꿉니다.
  2. 매끄러움계산한 비율에 곡선 성분을 섞습니다.
  3. 두 RGB 혼합선택한 두 정지점의 채널값을 보간합니다.
  4. 디더링·합성미세한 변화와 레이어 강도를 적용합니다.
05

프로젝트를 다시 열어도 같은 설정을 읽습니다

색상 정지점, 중간점, 반전, 디더링을 조정 정보와 함께 저장합니다. 테스트에서는 중간 정지점을 포함한 설정이 저장·불러오기 후에도 유지되는지 확인했습니다.

현재 색 보간은 RGB 채널의 수치 사이에서 이루어집니다. Lab 같은 지각 색 공간에서 두 색 사이를 고르게 나누는 방식은 아닙니다. 색 조합에 따라 중간색이 어둡거나 탁하게 보일 수 있으므로 중간 정지점으로 직접 조절할 수 있게 했습니다.

실제 입력 검증과 저장 검사는 adjustments.ts와 upgrade-render.mjs에 있습니다.
저장 값의미
position밝기 위치 0~100
color해당 위치의 HEX 색상
midpoint다음 정지점까지의 혼합 중간점
smooth / reverse / dither혼합 곡선·방향·미세 변화

구현 코드와 참고 자료

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