Mac에서 Affinity 스프라이트 시트를 내보낼 때 행이나 열이 하나 더 생기는 문제를 해결하려면 내보내기 사각형의 위치와 크기, 출력 배율을 확인하세요. 이미 배치된 시트에는 정확한 크기의 슬라이스를 사용한 다음, 아트워크를 변경하기 전에 내보낸 PNG를 확인하세요.

이 가이드에서는 현재 Affinity 데스크톱 인터페이스와 슬라이스 스튜디오를 다룹니다. 목표는 기존 스프라이트 그리드를 의도한 픽셀 크기로 내보내는 것입니다. Affinity의 최신 도움말에는 사용자 지정 내보내기 사각형과 개별 슬라이스 출력 기능이 안내되어 있습니다. 아래 단계에서는 해당 컨트롤을 직접 사용합니다.

여분의 픽셀로 파일 크기가 달라지는지 확인하기

먼저 파일이 가로 또는 세로로 1픽셀 더 큰 경우와, 크기는 올바르지만 가장자리에 원치 않는 픽셀이 있는 경우를 구분하세요. 두 경우에는 서로 다른 점검이 필요합니다. 의도한 너비와 높이를 기록한 다음 내보낸 파일을 별도로 열어 크기를 확인하고 가장 바깥쪽 행과 열을 살펴보세요.

간단한 크기 계산을 해보세요. 예를 들어 여백이나 간격 없이 64 × 64 프레임 네 개를 한 줄로 배치한 시트라면 목표 크기는 256 × 64픽셀입니다. 256 × 65로 내보냈다면 크기가 맞지 않습니다. 256 × 64로 내보냈지만 아래쪽에 원치 않는 색상 행이 있다면 크기는 맞고 내용이나 배치를 살펴봐야 합니다.

확인된 사항 먼저 확인할 항목 다음으로 할 일
너비 또는 높이가 1픽셀 더 큼 내보내기 경계와 위치 슬라이스 사각형을 정확한 크기로 설정
크기가 상당히 다름 내보내기 배율과 문서 DPI 슬라이스의 실제 출력 해상도 확인
크기는 맞지만 가장자리가 잘못되어 보임 아트워크 위치와 보이는 내용 시트 크기를 조정하지 말고 가장자리 확인
내보내기에 예상하지 못한 아트워크가 포함됨 슬라이스 유형 또는 내보내기 영역 의도한 콘텐츠 경계 선택

Affinity는 직접 그린 슬라이스와 레이어에서 만든 슬라이스를 구분합니다. 직접 그린 슬라이스에는 사각형 안에 있는 모든 표시 레이어가 포함되고, 레이어에서 만든 슬라이스에는 원본 레이어의 콘텐츠만 포함됩니다. 주변 오브젝트나 배경이 내보낸 시트에 나타나는 경우 이 차이가 중요합니다. 슬라이스 스튜디오를 사용한 내보내기를 참조하세요.

너비와 높이뿐 아니라 픽셀 위치도 확인하기

너비가 정수라고 해서 사각형의 시작점이 픽셀 경계에 맞춰진 것은 아닙니다. 기하학적 예시에서 너비가 256픽셀인 사각형이 X = 10.5에서 시작하면 X = 266.5에서 끝납니다. 양쪽 가장자리가 모두 픽셀 경계 사이에 놓입니다. 이 예시는 너비만 확인하면 정렬 문제를 놓칠 수 있는 이유를 보여줍니다. Affinity의 정확한 래스터화 공식을 설명하는 것은 아닙니다.

Mac에서 수치를 확인하려면 Window > General > Transform을 여세요. 패널에는 X, Y, W, H와 기준점 선택기가 있습니다. 사각형 내보내기 영역의 왼쪽 위 위치를 확인할 때는 왼쪽 위 기준점을 선택하세요. 측정값은 현재 눈금자 단위를 사용하며 눈금자 원점을 기준으로 합니다. 이 컨트롤은 변형 패널에 설명되어 있습니다.

필요하면 View > Show > Rulers를 선택해 눈금자를 표시한 다음 눈금자가 만나는 지점을 Control-클릭하고 픽셀을 선택하세요. 눈금자 원점을 이전에 옮겼다면 좌표를 진단하기 전에 교차점을 더블 클릭해 초기화하세요. Affinity 도움말의 눈금자에서 두 작업을 모두 안내합니다.

스프라이트 아트워크 전체를 선택해 모든 값을 반올림하는 대신 내보내기 경계의 위치와 크기를 확인하세요. 예시의 프레임 네 개 시트에서는 의도한 사각형이 X = 0, Y = 0, W = 256, H = 64일 수 있습니다. 기존 시트는 다른 위치에서 시작할 수 있으므로 프레임 그리드를 실제로 둘러싸는 위치를 사용하세요.

숫자 표시에서 작은 소수 부분이 보이지 않는다면 변형 도움말에서 Settings > User Interface를 통해 소수 자릿수를 조정할 수 있다고 안내합니다. 확인하는 동안 표시 정밀도를 높이세요. 숫자를 깔끔하게 보이게 하려고 아트워크 크기를 변경하지 마세요. 크기 조정으로 프레임 내용이 달라질 수 있습니다.

올바른 픽셀 정렬 설정 사용하기

View > Snapping을 열고 Force Pixel Alignment를 활성화하세요. Affinity 도움말에 따르면 이 기능은 벡터 오브젝트, 노드, 핸들, 픽셀 선택 영역을 만들거나 이동하거나 수정할 때 정수 픽셀에 맞춰 스냅합니다. 또한 픽셀에 맞지 않는 오브젝트, 안내선 또는 그리드에 스냅하면 결과도 픽셀에 맞지 않을 수 있다고 경고합니다. 수정하는 동안 충돌하는 스냅 모드는 잠시 끄세요. 픽셀 정렬 강제를 참조하세요.

기존의 소수점 위치를 수정할 때는 Move By Whole Pixels를 끄세요. 이 옵션은 이동 거리를 제한해 오브젝트의 소수점 오프셋을 유지할 수 있습니다. 예를 들어 X = 10.5에 10을 더하면 X = 20.5가 됩니다. Affinity는 같은 픽셀 정렬 설명서에서 이 동작이 픽셀 정렬 강제와 다르다고 명시합니다.

편집하는 동안 스냅 기능을 보조 수단으로 사용하세요. 관련 경계를 옮기거나 조정한 뒤 수치를 다시 확인하세요. 스냅 옵션을 켜는 것만으로 기존 오브젝트가 모두 수정되었다고 볼 수는 없습니다.

배치된 시트를 정확한 슬라이스 하나로 내보내기

기존 시트에는 사용자 지정으로 직접 그린 슬라이스를 사용하면 스프라이트 그룹의 변경되는 범위에 의존하지 않고 내보낼 사각형을 제어할 수 있습니다. Affinity는 정밀한 슬라이스 위치와 정확한 크기를 설정할 때 슬라이스 스튜디오 안의 변형 패널을 사용하도록 안내합니다. 슬라이스 내보내기를 참조하세요.

  1. Studio Manager를 열고 필요한 경우 Slice 스튜디오 항목을 활성화한 뒤 해당 스튜디오로 전환하세요. 스튜디오 항목 활성화 방법은 스튜디오 사용자 지정에 설명되어 있습니다.
  2. Slice Tool을 선택하고 이미 배치된 시트 주위에 사각형을 드래그하세요. 이 도구는 기본적으로 슬라이스 스튜디오에서 사용할 수 있으며 단축키는 S입니다. 슬라이스 도구를 참조하세요.
  3. 직접 그린 슬라이스를 선택한 상태에서 Transform을 사용해 의도한 위치와 너비, 높이를 설정하세요. 예시의 시트라면 네 프레임 위에 W = 256 px, H = 64 px로 설정합니다.
  4. Window > General > Slices를 열고 슬라이스 항목을 펼친 다음 파일 형식으로 PNG를 선택하세요. 크기 배율과 표시된 출력 해상도를 확인하세요.
  5. 필요한 크기의 내보내기 컨트롤을 사용하거나 의도한 슬라이스만 선택된 상태로 두고 Export Slices를 사용하세요. 대상 폴더를 선택하고 Export를 클릭합니다.

슬라이스 패널 설명서에서는 파일 형식 선택, 크기 배율, 선택된 내보내기 항목을 설명합니다. 별도의 슬라이스 내보내기 안내에서는 한 가지 크기, 한 가지 형식 또는 선택된 모든 슬라이스 출력을 내보내는 방법을 구분합니다. 첫 진단용 내보내기에서는 PNG 출력 하나를 선택해 검사할 파일을 명확히 하세요.

내보내기 전에 사각형 안에 표시된 레이어가 있는지 확인하세요. 직접 그린 슬라이스에는 해당 레이어의 콘텐츠가 포함됩니다. 그룹이나 레이어에서 슬라이스를 만들면 처음에는 해당 항목의 범위에 따라 경계가 정해지고 출력에는 해당 원본 항목만 포함됩니다. 슬라이스 스튜디오를 사용한 내보내기의 설명에 따라 의도한 시트에 맞는 슬라이스 유형을 사용하세요.

각 프레임 안의 의도적인 빈 공간은 유지하세요. 프레임 네 개 예시에서는 프레임 안의 그래픽이 훨씬 작더라도 각 프레임이 64 × 64 크기를 유지해야 합니다. 보이는 아트워크에 맞춰 내보내기 크기를 줄이면 전달하려는 그리드가 달라집니다.

1x가 예상 픽셀 크기를 뜻한다고 단정하기 전에 DPI 확인하기

Affinity 도움말에는 문서 DPI와 슬라이스 스튜디오의 1x, 2x, 3x 크기 사이의 관계가 설명되어 있습니다. 예시에서는 문서가 72 또는 96 DPI일 때 64 × 64 px 문서를 1x로 내보내면 64 × 64 크기가 됩니다. 144 DPI에서는 1x 출력이 32 × 32이고 2x 출력이 64 × 64입니다. 슬라이스 스튜디오를 사용한 내보내기의 표를 참조하세요.

슬라이스에 표시된 해상도와 결과 파일의 크기를 확인하세요. 배율 때문에 크기가 맞지 않는다면 프레임 크기를 수정하기 전에 내보내기 설정을 조정하세요. 내보내기 배율 설정을 보정하려고 시트의 형상을 바꾸면 원본을 관리하기가 어려워집니다.

시트가 아트보드 하나를 이미 채운 경우 내보내기 대화 상자 사용하기

시트 전체가 아트보드 하나에 있다면 File > Export > Export를 선택하고 PNG 프리셋을 고른 다음 Area를 해당 아트보드 이름으로 설정할 수 있습니다. 미리보기와 출력 크기를 확인하고 Ask for Location을 선택한 뒤 내보내고 저장하세요. 나중에 Show in Finder로 저장 위치를 확인할 수 있습니다. 내보내기 대화 상자에 현재 Mac에서의 절차가 안내되어 있습니다.

영역을 신중하게 선택하세요. 최신 내보내기 설정 설명서에 따르면 아트보드가 포함된 문서에서 전체 문서를 출력하면 아트보드마다 별도의 이미지 파일이 생성됩니다. 이렇게 여러 아트보드를 내보내도 하나의 스프라이트 시트 이미지로 합쳐지지는 않습니다. 시트 하나를 만들려면 프레임을 하나의 의도한 사각형 안에 배치하고 그 사각형을 내보내세요.

내보내기 대화 상자에서는 종횡비 잠금 기능과 함께 출력 너비와 높이를 다르게 설정할 수도 있습니다. 이 필드로 의도한 크기를 확인하세요. 첫 번째 수정 방법으로 256 × 65 결과를 256 × 64로 강제하지 마세요. 출력 크기를 바꾸면 원래 경계를 바로잡는 대신 이미지가 리샘플링될 수 있습니다. Affinity의 내보내기 설정에서 크기 및 리샘플링 컨트롤을 설명합니다.

형식과 내보내기 제한 사항 확인하기

시트에 투명도가 필요하다면 PNG가 적합합니다. Affinity는 지원되는 파일 형식에서 PNG의 투명도 지원을 명시합니다. 가장자리가 선명한 픽셀 아트를 의도적으로 확대한다면 Affinity는 선명한 가장자리 이미지에 사용할 리샘플링 옵션으로 Nearest Neighbor를 안내합니다. 이는 배율을 조정하는 옵션이며 잘못 배치된 내보내기 사각형을 고치는 방법은 아닙니다. 내보내기 설정을 참조하세요.

사용할 수 있는 경우 Include bleed도 확인하세요. Affinity 도움말에서는 PNG에 이 옵션을 사용할 수 있으며, 활성화하면 문서에 설정된 재단 여백이 포함된다고 설명합니다. 출력이 스프라이트 그리드 사각형과 정확히 일치해야 한다면 이 옵션을 끄세요. 같은 설명서에서는 내보내기 크기가 형식의 최대 크기를 초과하면 경고가 내보내기 대화 상자에 표시되고 크기가 맞도록 조정된다고 안내합니다. 내보내기 설정을 참조하세요.

문서화된 슬라이스 작업 과정은 정의된 영역을 내보내는 기능을 다룹니다. 자동 프레임 패킹, 애니메이션 타이밍 또는 일반적인 스프라이트 아틀라스 메타데이터에 관한 안내는 없습니다. 특히 Batch builder는 Apple 아이콘 슬라이스에서 Xcode JSON 배치를 만드는 기능으로 명시되어 있습니다. 이 작업에서는 Batch builder를 아틀라스 생성기로 사용하지 말고 프레임을 직접 배치한 뒤 프레임이 함께 들어 있는 사각형을 내보내세요. 슬라이스 패널을 참조하세요.

다른 항목을 바꾸기 전에 수정한 PNG 확인하기

새 내보내기를 별도로 열어 픽셀 크기, 가장 바깥쪽 행과 열, 프레임 경계의 세 가지를 확인하세요. 예시의 256 × 64 시트라면 세로 프레임 경계는 왼쪽 가장자리에서 64, 128, 192픽셀 지점에 와야 합니다. 이 값은 명시된 프레임 네 개 레이아웃에서 직접 나온 것입니다.

파일 크기는 이제 맞지만 원치 않는 픽셀이 남아 있다면 해당 위치의 원본에서 보이는 콘텐츠를 확인하세요. 여전히 1픽셀 더 크다면 선택한 슬라이스와 X/Y/W/H 값, 출력 배율, 재단 여백 설정을 다시 확인하세요. 이렇게 하면 아트워크 크기를 반복해서 조정하지 않고 경계 문제와 콘텐츠 문제를 구분할 수 있습니다.

수정된 내보내기 사각형과 내보내기 설정을 문서와 함께 보관하세요. 목표는 의도한 레이아웃과 크기 및 프레임 그리드가 일치하는 PNG를 만드는 것입니다. 두 항목이 모두 맞으면 완성된 파일에서 감으로 행이나 열을 제거할 필요가 없습니다.

출처