그라데이션 만드는 방법
이 도구는 위쪽 버튼으로 고르는 두 가지 방식으로 동작합니다. 처음에는 내 이미지에 적용 모드로 열리며 업로드 영역이 바로 준비되어 있습니다. 사진 한 장 또는 여러 장을 끌어다 놓으면 — JPG, PNG, WEBP, GIF, BMP를 지원합니다 — 각 사진 위에 그라데이션이 그려집니다. 사진이 두 장 이상이면 미리보기 위에 파일 이름이 붙은 탭이 생겨 서로 오갈 수 있습니다. 두 번째 버튼인 배경 새로 만들기를 고르면 아무것도 올릴 필요 없이 색과 그라데이션 종류, 크기만 정하면 이미지가 바로 만들어집니다.
그라데이션 종류는 네 가지입니다. 선형은 직선으로 색이 변하며, 각도는 슬라이더로 조절하는데 CSS와 같은 기준을 따라 0도가 위쪽을 가리킵니다. 원형은 가운데에서 시작해 동그랗게 퍼집니다. 원뿔형은 중심점을 축으로 색이 돌아가면서 요즘 배경에서 자주 보이는 부챗살 같은 효과를 냅니다. 없음은 그라데이션을 끕니다. 사진 위에서는 이미지가 그대로 남고 마무리 효과만 적용되며, 배경 만들기 모드에서는 첫 번째 색이 단색 배경이 됩니다. 색은 바로 아래에 있습니다. 각 줄마다 색상 선택기와 백분율 위치 조절, 삭제 버튼이 있습니다. 색은 두 개부터 여섯 개까지 쓸 수 있고, 색 추가 버튼을 누르면 기존 색들 사이에 새 색이 들어갑니다. 처음부터 만들기가 부담스럽다면 팔레트 목록에 검증된 조합 열두 가지가 준비되어 있고, 무작위 그라데이션 버튼은 누를 때마다 색과 각도를 새로 뽑아 줍니다.
여섯 가지 질감은 그라데이션 위에 얹히며 강도를 조절할 수 있습니다. 필름 그레인은 흑백 결을 더합니다. 색은 건드리지 않고 픽셀의 밝기만 흔들기 때문에, 매끈한 그라데이션에 생기는 색 띠를 없애는 데 가장 많이 쓰입니다. 컬러 노이즈는 그 반대로 밝기는 그대로 두고 색만 흔들어 고감도로 찍은 사진 같은 느낌을 냅니다. 선은 사선 무늬를, 점은 일정한 점 무늬를 그려 패턴이 있는 배경에 쓰기 좋습니다. 종이는 부드러운 결에 가장자리를 살짝 어둡게 더해 인쇄된 종이를 흉내 냅니다. 질감과 별개로 마무리 효과가 둘 있습니다. 비네팅은 네 가장자리를 서서히 어둡게 해 시선을 가운데로 모읍니다. 한쪽 그라데이션은 같은 일을 위·아래·왼쪽·오른쪽 중 한 곳에만 하며, 밝은 글자를 올리기 위한 어둡게, 어두운 글자를 위한 밝게, 그라데이션의 첫 번째 색 쓰기, 가장자리를 투명하게 지우기의 네 가지 방식이 있습니다. 범위와 강도 조절로 띠가 어디까지 오는지, 얼마나 진한지를 정합니다. 두 효과 모두 맨 마지막에 그려지므로 두 모드에서 똑같이 동작하고 혼합 모드의 영향을 받지 않습니다. 사진 위에 적용하는 모드에서는 불투명도 조절과 여섯 가지 혼합 모드가 더 있어, 아래 사진과 그라데이션이 어떻게 섞일지 정할 수 있습니다.
배경 만들기 모드에서는 미리 준비된 여섯 가지 크기 가운데 하나를 고르십시오. Full HD, 정사각형, 스토리, 썸네일, 오픈 그래프, 배경화면이 있습니다. 다른 치수가 필요하면 직접 입력란에 가로와 세로를 넣으면 되고 한 변당 6000px까지 가능합니다. CSS 코드 상자에는 지금 그라데이션에 해당하는 선언이 표시되며, 버튼을 누르면 통째로 복사되어 스타일시트에 바로 붙여 넣을 수 있습니다. 마지막으로 PNG, JPG, WEBP 중에서 고르고 이미지를 내려받으십시오. 사진 여러 장에 적용한 경우에는 전체 내려받기 버튼이 하나의 .zip 파일로 묶어 줍니다.
자주 묻는 질문
올린 이미지가 어딘가에 저장됩니까?
아닙니다. 그라데이션은 브라우저 안에서 그려지고, 사진 위에 적용하는 모드에서 쓰는 이미지도 인터넷으로 나가지 않습니다. 서버에 남는 것은 없습니다.
이 도구를 쓰려면 이미지를 꼭 올려야 합니까?
그렇지 않습니다. 배경 새로 만들기 모드에서는 색과 크기만 정하면 파일이 바로 만들어집니다. 이미지를 올리는 것은 사진 위에 그라데이션을 얹는 모드에서만 필요합니다.
이미지를 내려받는 것과 CSS를 복사하는 것은 무엇이 다릅니까?
CSS는 방문자의 브라우저에서 그라데이션을 그 자리에서 그리기 때문에 내려받을 파일이 아예 없습니다. 트래픽 비용이 들지 않는 가장 가벼운 방법이라 섹션 배경이나 버튼에 알맞습니다. PNG나 JPG 이미지는 CSS를 해석하지 못하는 곳, 즉 스토리 표지나 영상 썸네일, 발표 슬라이드, 배경화면에 쓸 때 필요합니다. 다만 질감은 내보낸 이미지에만 남습니다. CSS 그라데이션에는 필름 결이 들어가지 않습니다.
용도별로 어떤 크기를 써야 합니까?
준비된 크기가 흔한 경우를 거의 다 덮습니다. 인스타그램·페이스북 정사각형 게시물은 1080×1080, 스토리와 릴스는 1080×1920, 유튜브 썸네일은 1280×720, 카카오톡이나 링크드인에서 링크를 공유할 때 보이는 오픈 그래프 이미지는 1200×630, 발표 슬라이드는 1920×1080, 배경화면은 2560×1440입니다. 다른 치수가 필요하면 직접 입력란에 가로와 세로를 넣으시면 되고 한 변당 6000px까지 가능합니다.
그라데이션에 필름 결 질감은 왜 넣습니까?
8비트 화면에서 매끈한 그라데이션은 색 띠가 눈에 띄기 쉬운데, 이를 밴딩이라고 부릅니다. 두 색이 서로 가까울수록 더 잘 보입니다. 20~40% 정도의 옅은 필름 결을 얹으면 이 띠가 깨지면서 색이 이어져 보입니다. 게다가 결이 들어가면 인쇄물 같은 마감이 생겨, 요즘 브랜드 디자인이나 프로젝트 표지에서 흔히 쓰는 느낌이 납니다.
사진 내용이 묻히지 않게 그라데이션을 얹으려면 어떻게 합니까?
사진 위에 적용하는 모드를 고르고 불투명도를 40~60%에서 시작하십시오. 혼합 모드에 따라 결과가 크게 달라집니다. 곱하기는 어둡게 만들어 밝은 글자를 올리기 좋고, 스크린은 밝게 만들며, 색상은 원본 대비를 유지한 채 사진에 색조만 입혀 디테일을 가장 잘 살립니다. 제목이 들어가는 표지라면 아래쪽에 어두운 그라데이션을 곱하기로 얹는 것이 이미지를 가리지 않으면서 글자를 읽히게 하는 방법입니다.
그라데이션 없이 질감이나 비네팅만 쓸 수 있습니까?
가능합니다. 첫 번째 항목인 그라데이션 종류에서 없음을 고르십시오. 사진 위에 적용할 때는 이미지가 그대로 남고 이후에 켠 효과만 적용되므로 — 필름 그레인, 비네팅, 한쪽 그라데이션 — 사진의 색을 건드리지 않고 필름 같은 마감만 더할 수 있습니다. 배경 새로 만들기 모드에서 없음을 고르면 첫 번째 색이 단색 배경이 되어, 결이 살짝 들어간 단색 이미지를 만들 때 유용합니다.
필름 그레인과 컬러 노이즈는 무엇이 다릅니까?
둘 다 픽셀에 무작위 변화를 뿌리지만 건드리는 축이 반대입니다. 필름 그레인은 색은 그대로 두고 밝기만 바꿔 필름의 결을 재현하며, 매끈한 그라데이션의 색 띠를 깨는 것이 바로 이쪽입니다. 컬러 노이즈는 밝기를 유지한 채 색만 바꿔, 고감도로 찍은 사진처럼 색색의 점이 흩어진 모습을 만듭니다. 실제로는 마감과 밴딩 보정에는 필름 그레인을, 아날로그 사진이나 오래된 화면 느낌을 원할 때는 컬러 노이즈를 쓰시면 됩니다.
비네팅은 어디에 쓰고 강도는 얼마가 적당합니까?
비네팅은 가장자리를 서서히 어둡게 해 시선을 화면 가운데로 모읍니다. 사진과 영상 표지에서 오래 쓰인 방법으로, 얼굴이나 제품이 배경에 묻히지 않게 할 때 요긴합니다. 30~50% 사이면 티가 나지 않을 만큼 은근해서 대개 이 범위가 알맞고, 70%를 넘기면 효과가 확연해지며 극적인 분위기가 됩니다. 비네팅은 그라데이션 다음에 맨 마지막으로 그려지므로 어떤 혼합 모드를 골라도 결과가 달라지지 않습니다.
제목을 넣으려고 사진 아래쪽만 어둡게 하려면 어떻게 합니까?
한쪽 그라데이션을 켜고 글자가 들어갈 쪽 가장자리를 고르되 종류는 어둡게로 두십시오. 기본값은 왼쪽인데, 제목이 왼쪽에 있고 이미지가 오른쪽에 오는 배너에 가장 자주 쓰이기 때문입니다. 제목이 아래에 오는 영상 표지라면 아래쪽으로 바꾸십시오. 범위 35~50%에 강도 75% 정도면 사진의 주된 내용을 가리지 않으면서 흰 글자에 충분한 대비를 줍니다.
같은 그라데이션을 여러 사진에 한꺼번에 적용할 수 있습니까?
가능합니다. 사진 위에 적용하는 모드에서 원하는 만큼 이미지를 올리면 같은 색과 질감, 불투명도, 혼합 모드가 전부에 적용되고 .zip으로 한 번에 내려받을 수 있습니다. 블로그 표지나 채널 썸네일의 톤을 맞추는 가장 빠른 방법입니다.