그라데이션 오버레이

사진 위에 반투명 그라데이션 색을 덧입혀 텍스트 가독성을 높이거나 분위기 있는 비주얼을 만드는 도구입니다. SNS 썸네일, 유튜브 배너, 프레젠테이션 배경 이미지처럼 사진 위에 글자를 올려야 할 때 배경색과 텍스트가 충돌해 읽기 힘든 상황을 해결해 줍니다. 별도 그래픽 프로그램 없이 브라우저에서 즉시 결과를 확인하고 내려받을 수 있습니다.

그라데이션 오버레이란

사진 위에 반투명한 색 그라데이션을 한 겹 덮어 전체 색감과 분위기를 바꾸는 도구입니다. 원본 픽셀을 지우는 게 아니라 색을 "겹쳐" 비추는 방식이라, 하늘의 밋밋한 사진에 노을빛을 입히거나, 사진 한쪽을 어둡게 눌러 자막이 잘 보이게 만드는 식으로 씁니다. 색 두 개와 투명도만 정하면 바로 결과가 보입니다.

사용 방법

먼저 사진을 끌어다 놓거나 '사진 선택'을 눌러 편집할 이미지를 불러옵니다. 그라데이션 시작 색과 끝 색을 색상 선택기로 지정하거나 준비된 색 조합 프리셋을 누르고, 투명도 슬라이더(0~90%)를 조절해 원본 이미지가 비치는 정도를 결정합니다. 값을 바꿀 때마다 미리보기에 즉시 반영되므로 마음에 들 때까지 조정하세요. 그라데이션이 흐르는 방향은 왼쪽 위에서 오른쪽 아래로 향하는 대각선으로 고정되어 있어, 어둡게 누르고 싶은 쪽에 맞춰 시작 색과 끝 색의 순서를 바꿔 쓰면 됩니다. 결과가 만족스러우면 '이미지 저장'을 눌러 JPG로 내려받습니다. 불러온 사진은 서버로 전송되지 않고 브라우저 안에서만 처리됩니다.

투명도를 20~40%로 두면 원본이 대부분 살아 있고, 60% 이상으로 올리면 색이 강하게 물들어 원본이 흐려집니다.

작동 원리

화면에서 보이는 색은 오버레이와 원본을 픽셀 단위로 알파 합성한 결과입니다. 투명도를 a(0~1)라 하면 각 픽셀은 결과 = 오버레이색 × a + 원본색 × (1 − a) 로 계산됩니다. 그라데이션은 이 오버레이색이 위치에 따라 시작색에서 끝색으로 선형 보간되는 것이라, 왼쪽 위 모서리는 시작색이 진하게, 오른쪽 아래 모서리는 끝색이 진하게 섞입니다. 즉 밝기를 곱하는 필터가 아니라 색을 위에 얹어 평균 내는 방식이므로, 밝은 부분은 색이 옅게, 어두운 부분은 색이 짙게 보이는 경향이 있습니다.

이럴 때 유용해요

유튜브 섬네일에서 제목 텍스트가 배경 사진과 색이 비슷해 잘 안 보일 때, 끝 색을 어두운 색으로 잡으면 오른쪽 아래로 갈수록 화면이 눌려 흰 글씨가 뚜렷하게 보입니다. 인스타그램 피드 커버 이미지를 통일된 색조로 맞추고 싶을 때도 같은 설정값을 사진마다 반복 적용하면 전체적인 톤앤매너가 정돈됩니다(한 번에 한 장씩 처리합니다). 블로그 헤더 이미지처럼 넓은 영역에 텍스트를 얹어야 하는 경우에도 어두운 색 조합을 낮은 투명도로 깔아 두면 글자가 안정적으로 읽힙니다.

알아두면 좋은 점

투명도를 너무 높이면 원본 사진이 거의 가려져 단색 배경처럼 보입니다. 일반적으로 30~60% 범위에서 텍스트 가독성과 사진 노출의 균형을 잡기 좋습니다. 한쪽 색을 완전한 검정(#000000)으로, 다른 쪽을 밝은 회색으로 두면 한쪽만 눌린 '영화 자막 배경' 느낌을 낼 수 있습니다. 브랜드 컬러를 오버레이에 적용하면 다양한 배경 사진을 사용하면서도 채널 특유의 시각적 정체성을 유지할 수 있습니다.

두 색을 원본 사진의 색과 가깝게 맞추면 변화가 은은해지고, 서로 멀수록 화면 양 끝의 색 차이가 뚜렷해집니다. 두 색을 보색(예: 파랑과 주황)으로 쓰면 대비가 강해져 화려해지고, 인접색으로 쓰면 차분해집니다. 글자를 얹을 자리는 그쪽 색을 진하게 잡아 대비를 확보한 뒤 텍스트를 올리세요. 투명도는 조금씩 올리며 원본 질감이 사라지지 않는 선을 찾는 것이 좋습니다.

자주 묻는 질문