이미지 오버레이/블렌드이란?
이미지 오버레이/블렌드는 곱하기, 스크린, 오버레이 등 블렌드 모드를 사용하여 두 이미지를 합성합니다. 이중 노출, 텍스처 오버레이, 아티스틱 효과를 만들 수 있습니다. 모든 처리는 사용자의 기기에서 비공개로 이루어집니다.
Canvas2D의 16가지 블렌드 모드를 모두 사용할 수 있습니다. 표준, 곱하기, 스크린, 오버레이, 어둡게, 밝게, 컬러 닷지, 컬러 번, 하드 라이트, 소프트 라이트, 차이, 제외, 색조, 채도, 색상, 광도가 포함됩니다. 불투명도는 0~100%까지 미세하게 조절할 수 있습니다. 미리보기 위에서 오버레이를 드래그해 자유롭게 위치를 잡거나 9개 정렬 포인트로 한 번에 스냅한 뒤, 크기 조절, 회전, 좌우/상하 뒤집기까지 모두 처리할 수 있습니다. 결과물은 PNG(투명도 유지), JPEG(품질 슬라이더로 더 가벼운 파일), WebP 중에서 선택해 내보내거나, 버튼 하나로 클립보드에 복사할 수 있습니다.
사용 방법
- 기본 이미지와 오버레이 이미지를 업로드합니다. 두 이미지가 나란히 표시되며 블렌드 결과의 실시간 미리보기가 함께 나타납니다.
- 블렌드 모드(곱하기, 스크린, 오버레이, 어둡게, 밝게, 컬러 닷지 등)를 선택하고 슬라이더로 오버레이 불투명도를 조절합니다.
- 빠른 정렬 그리드로 위치를 한 번에 잡고, 방향이 반대라면 오버레이를 뒤집은 뒤 PNG, JPEG, WebP로 다운로드하거나 클립보드에 복사해 어디든 붙여 넣습니다.
사용 시기
- 사진 위에 그레인이나 종이 질감을 올려 필름 느낌이나 인쇄 목업으로 마무리할 때.
- 제품 사진에 곱하기나 스크린 모드로 로고나 워터마크를 얹을 때.
- 얼굴과 풍경을 블렌딩해 빠르게 이중 노출 인물 작업을 만들 때.
결과
사진작가가 인물 사진을 기본 이미지로, 도시 스카이라인을 오버레이로 업로드하고, '스크린' 블렌드 모드를 60% 불투명도로 선택하여 몽환적인 이중 노출 효과를 만든 뒤 최종 합성 이미지를 다운로드합니다.
자주 묻는 질문
- 곱하기와 스크린은 픽셀에 실제로 어떤 계산을 하나요?
- 곱하기는 두 이미지의 RGB 채널을 서로 곱한 뒤 255로 나누어 전체를 어둡게 만듭니다. 검정은 그대로, 흰색은 투명으로 바뀝니다. 스크린은 그 반대로 작용해 두 슬라이드 프로젝터가 겹친 듯 밝아지고, 흰색은 그대로, 검정은 투명으로 변합니다.
- 왜 출력이 베이스 이미지 크기에 맞춰 잘리나요?
- 캔버스 크기를 베이스 이미지에 맞춥니다. 오버레이가 더 크면 넘친 픽셀은 내보낸 PNG에 포함되지 않습니다. 오버레이를 먼저 줄이거나 베이스를 더 크게 만들어 두 이미지가 같은 영역을 덮도록 하세요.
- 오버레이를 베이스 위에 놓은 뒤 이동, 크기 조정, 뒤집기를 모두 할 수 있나요?
- 네. 미리보기 위에서 자유롭게 드래그하거나 빠른 정렬 그리드를 사용해 9개 위치(네 모서리, 네 변, 중앙) 중 어디든 스냅할 수 있습니다. 슬라이더는 크기 10~300%와 회전 -180°~180°를 지원하며, 두 개의 토글로 좌우 또는 상하로 뒤집을 수 있습니다. ‘변형 초기화’를 누르면 오버레이가 중앙에 100% 크기로 돌아갑니다.
- 차이나 제외 모드에서 형광색이 나오는 건 버그인가요?
- 버그가 아니라 정상 동작입니다. 차이는 각 채널을 빼서 절댓값을 취하고, 제외는 비슷하지만 대비가 더 낮습니다. 두 모드 모두 반전된 듯한 결과를 내며, 거의 똑같은 두 이미지를 비교하거나 아트적 효과를 줄 때 유용합니다.
- PNG로 내보냈더니 투명이 아니라 검은 배경이 남아요. 왜죠?
- JPEG는 투명도를 저장하지 못하므로 JPEG를 선택하면 알파가 흰색 배경 위에 평탄화됩니다. 투명한 결과가 필요하면 PNG나 WebP를 선택하세요. 블렌드 모드도 영향을 줍니다. 곱하기는 불투명도 100%일 때만 순백이 투명해지고, 표준 모드는 100% 미만일 때 항상 베이스가 비쳐 보입니다.