XIV Frame은 포토샵처럼 파일을 복잡하게 관리하는 편집 프로그램이 아니라, 브라우저에서 스크린샷을 배치하고 바로 PNG로 저장하는 도구입니다. 먼저 프레임의 형태를 정하고, 그 안에 사진과 필요한 오버레이를 채워 나갑니다.
시작하기 전에 알아둘 것
- 한 번에 최대 4장의 이미지를 사용할 수 있습니다.
- 이미지 한 장의 파일 크기는 50MB 이하입니다. 큰 원본은 업로드 후 브라우저에서 편집에 맞게 자동 최적화됩니다.
- 작업 중인 사진과 설정은 브라우저 안에서 처리되며, 서버에 원본 이미지를 업로드하지 않습니다.
- 화면에서 보는 캔버스 확대/축소는 미리보기 배율입니다. 저장되는 이미지의 실제 크기를 바꾸는 기능은 아닙니다.
1. 레이아웃을 선택합니다
- 데스크톱에서는 왼쪽 레이아웃을, 모바일에서는 하단 레이아웃을 엽니다.
- 가로 분할은 사진을 좌우로 나란히 배치합니다. 앞모습과 뒷모습처럼 비교해서 보여줄 때 적합합니다.
- 세로 분할은 사진을 위아래로 쌓습니다. 전신과 얼굴 클로즈업처럼 위아래 흐름이 필요할 때 사용합니다.
- 바둑판 배치는 사진이 3장 이상이면 2×2 칸을 채울 수 있습니다. 3장 미만이어도 선택한 레이아웃은 유지됩니다.
2. 사진을 추가합니다
- 왼쪽 또는 모바일 하단의 사진을 열고 사진 추가 영역을 찾습니다.
- 비어 있는 사진 추가 1 카드를 클릭하고 파일을 선택합니다.
- 두 장 이상 사용할 때는 다음 카드가 나타날 때까지 같은 방법으로 추가합니다. 이미지가 추가된 순서가 기본 배치 순서가 됩니다.
- 이미지를 잘못 올렸다면 카드 위에 마우스를 올린 뒤 변경으로 파일을 다시 선택하거나, 오른쪽 위의 X 버튼으로 삭제합니다.
- 카드의 순서 이동 버튼으로 인접한 이미지의 순서를 한 칸씩 조정할 수 있습니다.
3. 합성 이미지를 추가합니다
- 사진 메뉴 아래의 캐릭터 영역을 펼칩니다. 캐릭터뿐 아니라 햇빛, 이펙트, 장식 같은 PNG 요소에도 사용할 수 있습니다.
- 합성 이미지 추가를 누르고 PNG/JPG/WebP 파일을 선택합니다. 투명 배경 PNG는 바로 사용할 수 있고, 배경이 있는 이미지는 다음 단계에서 배경을 제거할 수 있습니다.
- 원본과 배경 제거 결과 미리보기를 확인한 뒤 배경 제거를 누릅니다. 첫 실행에는 브라우저에서 모델을 준비하므로 시간이 더 걸릴 수 있습니다.
- 결과에 불필요한 영역이 남으면 가장자리 보정에서 지우기를 선택하고 미리보기를 드래그합니다. 필요한 부분이 지워졌다면 복원으로 되살릴 수 있습니다.
- 캔버스 배치에서 이미지를 직접 드래그하고 이미지 크기, 불투명도, 좌우 반전, 자연스러운 그림자를 조정합니다.
- 합성 이미지를 빼고 싶을 때는 합성 제거를 누릅니다. 사진과 시그니처 설정은 그대로 유지됩니다.
4. 캔버스 비율을 정합니다
- 데스크톱 레이아웃 패널의 비율에서 자동, 16:9, 2:1 중 하나를 선택합니다.
- 자동은 현재 레이아웃에 맞춰 캔버스 크기를 정합니다. 처음에는 이 설정으로 결과 비율을 확인하면 됩니다.
- 16:9는 일반적인 가로형 화면 구성을 만들 때 사용합니다.
- 2:1은 여러 장을 길게 이어 보여주는 배너형 결과물에 적합합니다.
- 모바일에서는 하단 저장 메뉴를 연 뒤 비율 설정에서 같은 옵션을 선택할 수 있습니다.
5. 사진마다 위치와 배율을 조정합니다
- 이미지 카드 중 하나를 클릭해 편집할 사진을 선택합니다. 선택된 카드는 강조된 테두리로 표시됩니다.
- 사진 메뉴의 선택한 이미지 영역에서 배율 슬라이더를 움직입니다. 입력 칸에는 50~300% 범위의 값을 직접 입력할 수도 있습니다.
- 캔버스 위의 사진을 마우스로 드래그해 보이는 위치를 바꿉니다. 모바일에서는 손가락으로 드래그합니다.
- 캔버스 위에서 마우스 휠을 움직이면 선택된 사진만 확대하거나 축소할 수 있습니다.
- 정확한 수평 또는 수직 이동이 필요하면 데스크톱에서 Shift를 누른 채 드래그합니다.
- 위치를 다시 맞추려면 초기화를 누릅니다. 배율과 위치가 해당 이미지의 기본값으로 돌아갑니다.
- 위치를 정한 뒤 실수로 움직이지 않게 하려면 캔버스 이미지 위치 잠금을 켭니다.
캔버스 자체를 크게 확인하려면 캔버스 아래 보기 독의 화면에 맞춤과 확대/축소를 사용합니다. 100%보다 크게 본 뒤 캔버스를 옮길 때는 스페이스를 누른 채 드래그합니다.
6. 여백과 연결 효과를 다듬습니다
- 레이아웃 메뉴의 연결 효과에서 없음 또는 부드럽게 잇기를 선택합니다.
- 없음을 선택하면 이미지 간격 슬라이더로 사진 사이의 여백을 0~100px 범위에서 조정합니다.
- 부드럽게 잇기를 선택하면 인접한 이미지가 겹쳐지는 연결 영역 너비를 조정합니다.
- 테두리 두께로 캔버스 가장자리의 여백을 0~50px 범위에서 조정합니다.
7. 배경과 마감을 설정합니다
- 표면 마감 영역에서 배경을 화이트, 연한 회색, 투명 중 하나로 선택합니다.
- 투명 배경은 PNG로 저장할 때 사진 외부를 투명하게 유지하고 싶을 때 사용합니다.
- 필름 노이즈는 0%에서 시작해 아주 낮은 값부터 올립니다. 값이 높으면 사진 위에 질감이 강하게 보일 수 있습니다.
8. 시그니처를 추가합니다
- 데스크톱 왼쪽 또는 모바일 하단의 시그니처를 엽니다.
- 텍스트 영역을 펼쳐 상단 텍스트에 캐릭터 이름, 하단 텍스트에 서버 이름이나 계정명을 입력합니다.
- 각 텍스트의 굵게·기울임과 자간을 따로 조정합니다.
- 글꼴, 전체 크기, 색상, 불투명도, 위치, 정렬을 결과물을 보면서 조정합니다.
- 시그니처가 사진의 얼굴이나 의상 디테일을 가리면 위치를 바꾸거나 불투명도를 낮춥니다.
- 시그니처 설정 아래 저작권 오버레이에서 저작권 표시를 켜거나 끌 수 있습니다. 이 문구는 직접 입력하는 텍스트가 아니라 서비스에서 제공하는 고정 저작권 문구입니다.
- 표시를 켠 뒤 저작권 위치에서 좌측·중앙·우측을 선택하고, 저작권 색상에서 검정색·흰색·회색 중 하나를 고릅니다. 배경과 겹치지 않는 조합을 미리보기에서 확인하세요.
9. PNG로 저장합니다
- 데스크톱에서는 상단 오른쪽 저장 PNG 버튼을 누릅니다.
- 모바일에서는 하단 저장 메뉴를 열고 비율을 확인한 뒤 PNG 저장을 누릅니다.
- 저장된 파일은
ffxiv-screenshot-날짜시간.png형식으로 브라우저 다운로드 폴더에 저장됩니다. - 다른 결과물을 만들 때는 상단 초기화 또는 모바일 저장 화면의 기본값으로 초기화를 사용합니다. 초기화는 현재 편집값을 모두 기본값으로 되돌리므로 필요한 결과물은 먼저 저장하세요.
작업이 저장되는 방식
XIV Frame은 설정값을 브라우저의 로컬 저장소에 보관합니다. 같은 브라우저에서 다시 열면 레이아웃과 시그니처 설정이 남아 있을 수 있지만, 완성된 결과물은 반드시 PNG로 저장해 두는 것이 안전합니다.