이미지 오버레이

이미지 오버레이 노드는 바탕 이미지 위에 레이어를 내가 놓은 위치에 정확히 배치합니다. 레이어는 로고나 누끼 같은 이미지, 내장 글꼴로 그리는 실제 텍스트, QR 코드, 단색 도형이 될 수 있습니다. AI가 다시 그리는 부분이 없으므로 브랜드 에셋은 내가 넣은 파일 그대로 나옵니다. 워터마크, 로고, 헤드라인, 가격 배지, 플랫폼별 크기의 배너에 이 노드를 사용하세요.

사용 시기

• 생성한 모든 이미지에 게시 전에 워터마크나 브랜드를 넣습니다.
• AI로 생성한 배경 위에 실제 로고 파일을 얹어 YouTube, LinkedIn, X 배너와 동영상 커버를 만듭니다.
• 배경 제거로 만든 누끼를 그림자와 함께 새 배경에 배치합니다.
• 제품 사진에 “NEW”, 가격표, 평점 같은 배지나 스티커를 붙입니다.
• 전단지에 QR 코드를 넣거나, 일괄 처리로 제품마다 코드를 하나씩 넣습니다.
• 두 결과로 비포 앤 애프터 카드나 비교 카드를 구성합니다.

빠른 시작

입력

노드는 처음에 레이어 입력 4개를 표시합니다. + 레이어와 − 레이어로 1~12개를 표시할 수 있으며, 더 높은 번호의 레이어를 연결하면 개수가 자동으로 늘어납니다. 모든 실행에는 연결한 이미지나 텍스트, QR, 도형 레이어가 하나 이상 있어야 합니다.

레이어 배치

모든 레이어는 기준점에서 바탕 이미지에 고정되며, 모든 거리는 바탕 이미지에 대한 퍼센트입니다.

퍼센트를 쓰는 이유는 바탕 이미지의 크기가 앞 단계에서 정해지기 때문입니다. 오늘은 2K 렌더링이고 내일은 4K 포스터일 수 있습니다. “너비 12%, 오른쪽에서 안쪽으로 4%”로 설정한 레이어는 두 경우 모두 같은 위치에 놓이지만, 픽셀 위치로는 그렇지 않습니다. 바탕 이미지를 연결하면 설정 패널의 각 퍼센트 옆에 픽셀 값이 표시됩니다.

바탕 밖으로 일부가 나간 레이어는 바탕의 가장자리에서 잘립니다. 바탕 밖에 완전히 있는 레이어는 건너뛰며, 이는 오류가 아닙니다. SVG 로고는 최종 픽셀 크기로 그려지므로 선명하게 유지됩니다.

프리셋에서 시작

프리셋(레이어 1에 적용)은 클릭 한 번으로 레이어 1을 설정합니다. 모든 값은 나중에 다시 편집할 수 있습니다.

예: 워터마크

사진을 바탕에, 로고를 레이어 1에 연결한 다음, 레이어 1을 다음 값으로 설정하세요.

2000 × 1000픽셀 바탕에서 로고의 너비는 240픽셀입니다. 로고의 오른쪽 가장자리는 오른쪽에서 80픽셀, 아래쪽 가장자리는 아래에서 60픽셀 떨어집니다. 4000 × 2000 바탕에서는 이 숫자가 모두 2배가 되며, 노드는 바꿀 필요가 없습니다.

레이어 종류

텍스트, QR, 도형 레이어를 다시 이미지 레이어로 바꾸려면 이미지 슬롯으로 되돌리기를 사용하세요.

텍스트 레이어

• 글꼴: Inter, Montserrat, Space Grotesk, Playfair Display, Oswald, Bebas Neue, Anton, Pacifico, Rubik, Heebo입니다. Rubik과 Heebo는 히브리어를 지원합니다. 가변 글꼴은 100~900 사이의 모든 굵기를 받습니다.
• 레이아웃: 정렬, 자간, 행간, 모두 대문자입니다. 오른쪽에서 왼쪽으로 쓰는 텍스트는 각 줄에서 오른쪽에서 왼쪽으로 배치됩니다.
• 외곽선: 글자 둘레의 외곽선으로, 외곽선 두께와 외곽선 색상으로 조정합니다.
• 배경 상자(알약형 / 배지): 텍스트 뒤의 상자로, 상자 색상, 불투명도, 안쪽 여백, 모서리 반경으로 조정합니다. 반경을 크게 하면 알약 모양이 됩니다.

이미지 레이어

모든 레이어에는 드롭 섀도와 둥근 모서리를 줄 수 있습니다. 이미지 레이어에는 마무리 효과가 네 가지 더 있습니다.

• 자르기는 이미지를 원 모양으로 자릅니다.
• 가장자리 흐리게는 가장자리를 지정한 픽셀 수만큼 서서히 투명하게 만듭니다.
• 외곽선은 실루엣 둘레에 선을 그립니다.
• 글로우는 둘레에 색이 있는 빛을 더합니다.

QR 레이어

QR 코드 내용(URL 또는 텍스트)에 링크를 입력하세요. 언제든지 바꿀 수 있으며, 그러면 코드가 업데이트됩니다. QR 코드 색상, QR 코드 배경, 주변 여백으로 모양을 정합니다.

대신 워크플로에서 링크를 가져오려면 워크플로 출력 사용을 켜세요. 노드에 QR 링크 입력이 생깁니다. 여기에 텍스트 노드, 목록의 열, 또는 텍스트 출력을 연결하세요. 목록의 열을 연결하면 한 번 실행으로 행마다 코드가 하나씩 만들어집니다. 예를 들어 제품 페이지 50개에 대해 코드 50개가 만들어집니다. 워크플로 출력 사용을 켜고 아무것도 연결하지 않은 실행은 거부되며, 메시지에 해당 입력의 이름이 표시됩니다.

플랫폼 크기와 안전 영역

플랫폼 크기는 출력을 플랫폼의 픽셀 크기로 바꿉니다.

기본값은 바탕 이미지 크기 유지입니다. 플랫폼을 선택하면 미리 보기가 그 플랫폼의 안전 영역을 점선 상자로 그립니다. 안전 영역은 모든 기기에서 표시되는 부분입니다. 플랫폼을 선택하면 바탕 맞춤도 채우기로 설정되어 이미지가 캔버스를 가득 채웁니다. YouTube 채널 배너의 경우 미리 보기에 영역 세 개가 겹쳐 표시됩니다. TV에서 보이는 영역, 데스크톱에서 보이는 영역, 모든 기기에서 보이는 영역입니다.

드래그하는 동안 레이어는 중앙선, 가장자리, 안전 영역에 맞춰집니다. 자유롭게 드래그하려면 Shift 키를 누른 채로 드래그하세요.

다른 플랫폼용으로도 내보내기는 같은 실행에서 같은 구성을 다른 플랫폼 캔버스에도 렌더링합니다. 필요한 만큼, 최대 12개 플랫폼까지 모두 체크할 수 있습니다. 추가 파일은 결과에 칩으로 표시됩니다. 체크한 각 플랫폼은 노드의 출력이기도 합니다. 예를 들어 같은 실행에서 X / Twitter 헤더 렌더링은 X 게시물 노드로, LinkedIn 회사 커버는 LinkedIn 게시물 노드로 보낼 수 있습니다. 크레딧에서 설명하듯이, 플랫폼을 추가할 때마다 실행 가격이 늘어납니다.

전체 편집기 열기는 노드를 큰 편집 화면으로 엽니다. 머리글에 같은 플랫폼 선택기가 있으며, 작업 영역이 그 플랫폼의 캔버스와 안전 영역으로 바뀝니다.

출력 크기와 형식

마스크 출력

마스크 출력은 흑백 이미지입니다. 흰색은 AI 편집이 바꿔도 되는 영역을 표시합니다. 마스크 출력에서 흰색으로 표시할 영역을 고르세요.

마스크를 이미지 수정의 마스크 입력에 연결하세요.

이미지에 자연스럽게 어우러지게

이 노드는 레이어를 절대 다시 그리지 않습니다. 그것이 핵심이지만, 장면이 레이어에 반응하기를 원할 때도 있습니다. 배치한 제품 아래의 접지 그림자, 로고에 맞춘 조명, 바닥의 반사 같은 것입니다.

AI 마무리 추가(이미지에 자연스럽게 어우러지게)를 클릭하세요. 이 노드 뒤에 이미지 수정 노드가 추가됩니다. 새 노드는 합성 이미지와 레이어 둘레의 마스크 링에 연결되며, 프롬프트가 정확히 그 작업을 요청합니다. 모델은 링 안에서만 칠할 수 있으므로 요소 둘레에 그림자와 조명을 더합니다. 마스크 바깥의 모든 픽셀은 합성 이미지에서 그대로 유지되므로 요소는 픽셀 단위로 정확하게 남습니다. 분위기를 조정하려면 컴포지션 효과 피커를 그 이미지 수정 노드에 연결하세요.

레이어 설정에 있는 배치 제안(AI)은 레이어를 어디에 놓아야 할지 비전 모델에 묻습니다. 얼굴, 주요 피사체, 복잡한 질감을 피하며, 플랫폼이 설정되어 있으면 안전 영역 안에 머뭅니다. 그런 다음 기준점과 오프셋을 채웁니다. 비용은 이미지 설명 실행 한 번과 같으며, 이후에도 평소처럼 레이어를 드래그할 수 있습니다.

크레딧

이미지 오버레이는 바탕 이미지 크기나 레이어 개수와 관계없이 합성 이미지와 마스크에 11크레딧이 듭니다. 다른 플랫폼용으로도 내보내기에서 플랫폼을 추가할 때마다 가격이 늘어납니다.

실행 버튼은 실행 전에 정확한 가격을 표시하며, 워크플로 예상 비용과 API도 같은 공식을 사용합니다. AI 마무리 추가로 만든 이미지 수정 노드는 해당 모델의 가격으로 별도 청구됩니다.

팁

• 투명한 파일을 사용하세요. 레이어에는 투명 PNG나 SVG를 넣으세요. 불투명한 JPG 로고는 직사각형으로 배치되므로 먼저 배경 제거를 거치세요.
• 브랜드 에셋은 파일로 유지하세요. AI 노드로 이미지를 그린 다음, 실제 로고는 여기서 배치하세요. 모델은 워드마크를 항상 조금씩 다르게 다시 그립니다.
• 마크를 이미지에 블렌드하세요. 밝은 사진 위의 어두운 마크에는 곱하기를, 어두운 사진 위의 밝은 마크에는 스크린을 사용하세요.
• 누끼를 띄워 보이게 하세요. 부드러운 드롭 섀도는 복잡한 배경에서 인물이나 제품을 분리해 줍니다. 흐림 24, 그림자 X 0, 그림자 Y 12, 불투명도 50%를 시도해 보세요.
• 더 넓은 렌더링으로 배너를 만드세요. 출력 크기 사용자 지정을 켜고 채우기를 선택하세요. 예를 들어 1500 × 500픽셀로 설정합니다. 로고는 캔버스가 아니라 바탕을 기준으로 배치된 상태로 유지됩니다.
• 바탕을 먼저 생성하세요. 각 퍼센트 옆의 픽셀 값은 크기를 알 수 있는 바탕 이미지가 연결되어야 표시됩니다.
• 회전한 다음 오프셋을 주세요. 회전은 레이어를 자체 중심을 기준으로 돌립니다. 회전한 마크를 모서리에 딱 붙이려면 오프셋을 더하세요.
• 문구는 텍스트 레이어로, 로고는 파일로 넣으세요. 헤드라인, 캡션, 가격, 하단 자막에는 텍스트 레이어를, 브랜드 워드마크에는 SVG나 PNG 파일을 사용하세요.

API에서 사용

POST /v1/image-overlay는 바탕 이미지와 레이어를 받습니다. 다음 호출은 위 예제의 워터마크를 배치합니다.

{
  "imageUrl": "https://example.com/photo.png",
  "layers": [
    { "imageUrl": "https://example.com/logo.svg", "anchor": "bottom-right", "width": 12, "x": -4, "y": -6, "opacity": 0.95 }
  ]
}

• 텍스트, QR, 도형 레이어는 layers[i].kind를 text, qr, shape 중 하나로 설정하고, text, qr, shape 객체를 함께 보냅니다. opacity는 0~1이며, zIndex는 쌓는 순서를 정합니다.
• canvas는 플랫폼 크기나 사용자 지정 출력 크기를 설정합니다. outputFormat은 png, jpg, webp 중 하나입니다.
• variants(예: ["youtube-thumbnail", "x-header"])는 플랫폼 렌더링을 추가합니다. 결과는 이를 variants로 나열하며, 각 항목에는 id, label, width, height, url이 있습니다.
• maskMode는 around, layers, outside, none 중 하나이고, maskSpread는 링 너비입니다. 작업의 출력은 마스크를 maskUrl로 전달합니다.
• qr.fromInput을 true로 설정한 QR 레이어는 최상위 qrText에서 링크를 가져옵니다.