본문으로 바로가기

03 / 가이드 · 합성

XIV Frame 합성 가이드: 배경 제거부터 PNG 요소 배치까지

캐릭터·빛·이펙트 같은 이미지를 브라우저에서 배경 제거하고, 브러시 보정과 캔버스 배치로 자연스럽게 합치는 실전 가이드입니다.

목록으로 돌아가기
합성게시2026년 8월 22일수정

XIV Frame의 합성 기능은 캐릭터만을 위한 도구가 아닙니다. 배경이 없는 PNG, 빛이나 이펙트, 장식 오브젝트처럼 캔버스 위에 별도로 올리고 싶은 이미지를 같은 화면에서 준비하고 배치하는 기능입니다. 원본 사진을 다시 만들지 않고, 결과물에 필요한 요소만 독립 레이어로 조정할 수 있다는 점이 핵심입니다.

이 기능을 사용하기 좋은 경우

  • 배경이 다른 두 이미지를 한 장의 쇼케이스 안에서 자연스럽게 연결하고 싶을 때
  • 캐릭터, 빛, 파티클, 장식 프레임처럼 투명 PNG 요소를 사진 위에 올리고 싶을 때
  • 배경이 있는 이미지에서 필요한 대상만 남겨 기존 스크린샷과 겹치고 싶을 때
  • 외부 편집 프로그램을 열지 않고 결과를 바로 비교하며 위치를 맞추고 싶을 때

이미 원본이 투명한 PNG라면 배경 제거를 실행할 필요가 없습니다. 바로 합성 이미지로 추가한 뒤 크기와 위치만 조정하면 됩니다.

1. 합성할 원본을 준비합니다

  1. 파일 형식은 PNG, JPG, WebP처럼 브라우저가 읽을 수 있는 이미지로 준비합니다.
  2. 사진의 가장자리가 선명하고 대상과 배경의 명암이 크게 다를수록 자동 제거 결과를 확인하기 쉽습니다.
  3. 한 파일은 50MB 이하입니다. 큰 이미지는 선택 후 브라우저에서 편집용 크기로 최적화되지만, 제한을 넘은 파일은 최적화 전에 거부됩니다.
  4. 모바일에서 작업한다면 배경이 복잡한 원본을 여러 장 동시에 처리하지 말고, 한 장씩 결과를 확인하는 편이 안정적입니다.

2. 합성 이미지를 추가합니다

  1. 데스크톱에서는 상단 사진 탭을 연 뒤 오른쪽 이미지 소스 패널에서 합성을 엽니다. 모바일에서는 하단 사진 메뉴 안의 합성 영역을 엽니다.
  2. 합성 이미지 추가를 누르고 파일을 선택합니다.
  3. 원본 미리보기와 배경 제거 결과 영역을 확인합니다. 투명 PNG는 투명 영역이 유지된 상태로 바로 배치할 수 있습니다.
  4. 사진이 캔버스 위에 보이지 않으면 이미지가 추가되었는지보다 먼저 결과 미리보기와 선택 상태를 확인합니다. 투명도가 너무 낮거나 대상이 캔버스 바깥에 놓인 경우에도 보이지 않을 수 있습니다.

3. 자동 배경 제거를 실행합니다

  1. 배경 제거를 누르면 모델이 브라우저에서 실행됩니다. 첫 실행은 모델 준비 때문에 다음 실행보다 오래 걸릴 수 있습니다.
  2. 준비 중에는 탭을 닫거나 새로고침하지 말고, 진행 상태가 끝날 때까지 기다립니다.
  3. 작업 중인 이미지는 서버로 보내지지 않고 현재 브라우저에서 처리됩니다. 대신 기기의 메모리와 브라우저 성능에 따라 처리 시간이 달라집니다.
  4. 결과가 완벽하지 않아도 바로 삭제하지 말고 가장자리 보정으로 필요한 부분을 먼저 확인합니다. 작은 잔여물은 브러시로 고치는 편이 원본을 다시 준비하는 것보다 빠릅니다.

오류 문구별 확인 순서

배경 제거 실패 알림은 같은 원인을 하나의 문구로 뭉뚱그리지 않습니다. 화면에 표시된 유형을 먼저 확인한 뒤 해당 조치를 진행하세요.

화면에 표시된 안내의미먼저 할 일
모델을 준비하지 못함모델 파일을 내려받거나 준비하지 못함인터넷 연결을 확인하고 페이지를 새로고침한 뒤 다시 실행
현재 브라우저에서 실행할 수 없음WebGPU/WASM 실행 환경을 사용할 수 없음최신 Chrome 또는 Edge에서 다시 실행
메모리 부족이미지 디코드·모델 처리에 필요한 메모리 부족작은 이미지로 바꾸고 모바일에서는 한 장씩 처리
이미지를 읽거나 처리하지 못함파일 형식·디코드·캔버스 처리 문제PNG, JPG, WebP로 다시 저장해 재선택
처리 시간이 너무 오래 걸림Worker가 제한 시간 안에 끝나지 않음화면을 유지하고 이미지 크기를 줄여 한 장씩 재시도
일반 오류위 유형으로 분류되지 않은 일시적 문제다시 시도를 누르고 반복되면 브라우저·파일 형식·재현 순서를 문의에 전달

오류 문구가 없는 단순한 빈 결과라면 결과 미리보기와 선택 상태, 요소의 투명도와 캔버스 위치를 먼저 확인합니다.

4. 지우기와 복원 브러시로 가장자리를 보정합니다

  1. 지우기를 선택한 뒤 미리보기 위를 드래그하면 남아 있는 배경을 투명하게 만들 수 있습니다.
  2. 대상의 일부가 함께 사라졌다면 복원으로 바꿉니다. 자동 제거 결과에 남아 있는 원본 정보를 기준으로 필요한 영역을 다시 되살릴 수 있습니다.
  3. 브러시 크기는 작업 전에 슬라이더로 정합니다. 화면 위에 표시되는 원이 실제로 영향을 받는 범위이므로, 가는 선은 작게, 넓은 배경은 크게 시작하세요.
  4. 머리카락·무기·손가락처럼 경계가 복잡한 곳은 큰 브러시로 한 번에 지우지 말고 작은 브러시로 여러 번 나눠 처리합니다.
  5. 실수했을 때는 되돌리기를 사용합니다. 결과를 처음부터 다시 만들고 싶다면 보정 초기화로 자동 제거 결과로 돌아갑니다.

5. 캔버스에서 자연스럽게 겹칩니다

  1. 캔버스 배치에서 합성 이미지를 직접 드래그해 사진의 주제와 겹칠 위치를 찾습니다.
  2. 이미지 크기는 25%부터 500%까지 조정할 수 있습니다. 원본 대상이 작게 추출되어 사진과 맞지 않을 때는 먼저 크기를 키운 뒤 위치를 맞춥니다.
  3. 이동 중에는 이미지의 불투명도를 낮춰 뒤에 있는 사진을 확인하면 겹치는 지점을 찾기 쉽습니다. 최종값은 가장자리가 자연스럽게 보이는 수준으로 되돌립니다.
  4. 데스크톱에서는 합성 요소를 선택한 상태에서 방향키로 1px씩, Shift+방향키로 10px씩 이동합니다.
  5. 모바일에서는 위치 미세조정의 방향 버튼을 사용합니다. 가운데 버튼으로 1px과 10px 이동 단위를 바꾼 뒤 길게 눌러 연속 이동할 수 있습니다.
  6. 좌우 반전이 필요하면 좌우 반전을 켭니다. 기존 사진의 시선이나 빛 방향과 맞는지 확인한 뒤 사용하세요.

6. 그림자와 투명도를 마지막에 조정합니다

합성 요소를 사진 위에 올렸는데도 떠 보인다면 크기보다 먼저 위치와 투명도를 확인합니다. 발밑이나 접점이 있는 요소에는 자연스러운 그림자를 켜고, 빛·연기처럼 사진의 분위기를 보조하는 요소는 불투명도를 낮추는 것이 좋습니다. 그림자가 대상의 외곽선을 두껍게 만들면 끄고, 배경색과 대비되는 위치로 옮겨 결과를 비교하세요.

자주 생기는 문제와 확인 순서

증상먼저 확인할 것다음 조치
결과가 비어 보임결과 미리보기와 선택 상태배경 제거 완료 후 캔버스 배치를 확인
배경이 일부 남음가장자리 보정의 브러시 모드지우기로 작은 영역을 나눠 보정
대상의 일부가 사라짐자동 제거 결과와 브러시 크기복원으로 원본 영역을 되살린 뒤 작은 브러시 사용
처리 시간이 길어짐첫 모델 준비인지, 모바일인지화면을 유지하고 한 장씩 처리
사진보다 합성 요소가 작음이미지 크기 값최대 500% 범위에서 크기를 키워 위치 조정
빼고 싶음합성 편집 영역합성 제거를 눌러 사진과 텍스트 설정은 유지

저장 전 체크리스트

  • 가장자리 주변에 원래 배경의 색 테두리가 남아 있지 않은가
  • 합성 요소가 얼굴·무기·텍스트처럼 중요한 정보를 가리지 않는가
  • 100% 미리보기에서 불투명도와 그림자가 과하지 않은가
  • 모바일에서는 저장 전에 결과의 네 모서리와 투명 영역을 확인했는가
  • 합성 요소가 필요 없는 최종본이라면 합성 제거 후 저장했는가

완성한 결과는 데스크톱의 저장 PNG, 모바일의 저장 → 사진 저장하기로 내보냅니다. PNG를 우선 저장하지만, 5MB를 넘는 불투명 결과는 고화질 JPEG로 자동 저장됩니다. 투명 PNG를 5MB 이하로 만들 수 없으면 저장되지 않고 안내가 표시됩니다. 원본과 설정은 브라우저에 남는 방식이 서로 다르므로, 중요한 결과물은 저장 직후 다운로드 파일을 별도로 보관하세요.

다음 단계

당신의 스크린샷을 더 아름답게

복잡한 프로그램 없이 지금 바로 웹 브라우저에서 스크린샷을 보정하고 멋진 시그니처를 남겨보세요.

XIV Frame 시작하기

참고

자주 묻는 질문

파일 제한, 이미지가 보이지 않을 때의 확인 방법, 설정 저장 방식은 전체 FAQ에서 확인할 수 있습니다.

전체 FAQ 보기

RELATED GUIDES

지금 읽은 작업과 이어지는 다른 기능의 사용 순서를 확인하세요.