어피니티 디자이너의 익스포트 페르소나는 ‘레이어에서 슬라이스 생성’이라는 강력한 자동화 기능으로 유명합니다. 100개의 아이콘 레이어를 클릭 한 번에 100개의 슬라이스로 만들어내는 이 기능은 정말 편리합니다.
하지만 이 자동화 기능에만 의존하다 보면, 정작 ‘슬라이스 툴’ 본연의 강력함을 놓치게 됩니다. 웹 디자인 목업의 특정 ‘영역’만 잘라내거나, 게임 스프라이트 시트에서 개별 프레임을 추출해야 할 때, 레이어 기반 자동화는 무력해집니다. 이때 필요한 것이 바로 픽셀 단위의 완벽한 제어를 제공하는 수동 ‘슬라이스 툴’입니다.
익스포트 페르소나의 두 가지 슬라이스 방식
어피니티 디자이너에서 내보낼 영역(슬라이스)을 만드는 방법은 두 가지입니다. 이 둘의 용도를 정확히 아는 것이 고급 활용의 첫걸음입니다.
1. 레이어에서 슬라이스 생성 (자동화/신속성)
- 방법: 익스포트 페르소나의 ‘레이어’ 패널에서 내보낼 레이어(그룹)를 모두 선택하고 ‘슬라이스 생성’ 버튼을 누릅니다.
- 장점: 100개의 아이콘을 100개의 슬라이스로 만드는 데 3초면 충분합니다. 레이어 경계에 완벽하게 맞춰집니다.
- 단점: 반드시 레이어(그룹) 단위로만 생성이 가능합니다. 여러 레이어에 걸친 특정 ‘영역’만 잘라낼 수는 없습니다.
2. 슬라이스 툴 (수동/정밀성)
- 방법: 익스포트 페르소나의 좌측 도구 모음(면도칼 모양)에서 ‘슬라이스 툴’을 선택하고, 마우스로 직접 내보낼 영역을 드래그하여 그립니다.
- 장점: 레이어 구조와 상관없이, 내가 원하는 ‘영역’을 픽셀 단위로 정확하게 지정할 수 있습니다.
- 단점: 100개의 아이콘을 만들려면 100번 드래그해야 하므로 단순 반복 작업에는 비효율적입니다.
결론은 명확합니다. 개별 아이콘 대량 수출은 ‘레이어 기반 자동화’로, 복잡한 레이아웃이나 특수 영역 수출은 ‘슬라이스 툴’로 작업해야 합니다.
슬라이스 툴 고급 활용이 필요한 3가지 결정적 순간
‘레이어에서 슬라이스 생성’ 버튼이 해결해 주지 못하는, 오직 ‘슬라이스 툴’만이 빛을 발하는 3가지 결정적인 순간이 있습니다.
1. 웹디자인 목업(Mockup)의 특정 영역 분할 시
하나의 거대한 아트보드에 웹사이트 시안 전체를 디자인했다고 가정해 봅시다. 개발자에게 ‘Header 영역’, ‘Footer 영역’, ‘Main_Banner 영역’을 각각의 파일로 전달해야 합니다.
이 영역들은 수십 개의 자잘한 레이어(로고, 메뉴, 배경 등)가 겹쳐진 복합적인 ‘구역’입니다. 이때는 ‘슬라이스 툴’을 꺼내 들어, 레이어 구조와 상관없이 Header 영역에 사각형 하나, Footer 영역에 사각형 하나를 그려주는 것이 100배 더 빠르고 정확합니다.
2. 게임 스프라이트 시트(Sprite Sheet) 분할 시
게임 개발에서 흔히 쓰이는 ‘스프라이트 시트’는 하나의 커다란 이미지 파일에 캐릭터의 달리기, 점프 등 수십 개의 동작 프레임이 격자 형태로 모여있는 파일입니다.
이 파일을 어피니티 디자이너로 불러왔을 때, 이는 ‘단 하나의 이미지 레이어’일 뿐입니다. 여기서 ‘레이어에서 슬라이스 생성’을 누르면 800×800 픽셀짜리 슬라이스 1개만 생성될 뿐입니다.
이때 ‘슬라이스 툴’을 사용하여 64×64 픽셀 크기로 각 프레임(달리기_01, 달리기_02…) 영역을 수동으로 그려 20개의 슬라이스를 만들어야 합니다. 스프라이트 시트 작업에서 슬라이스 툴은 선택이 아닌 필수입니다.
3. 여백(Padding)을 포함한 영역 내보내기
디자이너는 24×24 픽셀 크기로 아이콘을 디자인했지만, 개발자는 터치 영역(Hit Area)을 고려하여 44×44 픽셀 크기(상하좌우 10px 여백 포함)로 파일을 요청할 수 있습니다.
‘레이어에서 슬라이스 생성’을 하면 24×24 픽셀로 딱 맞게 슬라이스가 따집니다. 이때 ‘슬라이스 툴’을 선택하고, 24×24 아이콘을 중심으로 44×44 크기의 사각형을 직접 그려주면, 여백이 포함된 완벽한 규격의 파일을 만들 수 있습니다.
픽셀 단위 완벽 제어를 위한 슬라이스 툴 4단계 활용법
슬라이스 툴을 그저 ‘대충 그리는’ 도구로 사용하면 안 됩니다. 픽셀 단위로 완벽하게 제어하는 4단계 상세 절차입니다.
1단계: 익스포트 페르소나 전환 및 스냅 켜기
익스포트 페르소나(3번째 아이콘)로 전환하고, 좌측 도구 모음에서 슬라이스 툴(Slice Tool)을 선택합니다. 가장 중요한 작업은, 상단 툴바에서 스냅 켜기(Snapping)(자석 아이콘)를 활성화하는 것입니다. 이렇게 하면 슬라이스를 그릴 때 레이어의 경계, 가이드라인, 그리드에 자동으로 달라붙어 픽셀 오류가 사라집니다.
2단계: 슬라이스 드래그 및 이름 지정
내보내고 싶은 영역(예: 웹사이트 Header) 위로 마우스를 드래그하여 사각형을 그립니다. 그리는 즉시 우측 슬라이스(Slices) 패널에 ‘Slice 1’이라는 항목이 생성됩니다. 이 이름을 즉시 더블 클릭하여 ‘Header’ 또는 ‘main_banner’처럼 의미 있는 이름으로 변경합니다. 이 이름이 곧 저장될 파일명이 됩니다.
3단계: 변형(Transform) 패널로 픽셀 단위 제어 (핵심)
슬라이스 툴로 대충 그렸더라도, 픽셀 단위로 완벽하게 제어할 수 있습니다. 화면 우측 하단(또는 상단)의 변형(Transform) 패널을 엽니다.
- X, Y: 슬라이스의 X, Y 좌표 (시작 위치)
- W, H: 슬라이스의 가로(Width), 세로(Height) 크기
여기에 원하는 값을 키보드로 직접 입력합니다. 예를 들어 W: 1920, H: 100이라고 입력하면, 방금 그린 슬라이스가 1920×100 픽셀 크기로 즉시 변경됩니다.
저 역시 처음엔 감으로 드래그하다가 1픽셀씩 어긋나는 고통을 겪었지만, 이 변형 패널에서 좌표와 크기를 직접 입력한 뒤로 모든 문제가 해결되었습니다.
4단계: 내보내기 설정(프리셋) 적용 및 일괄 추출
방금 생성한 ‘Header’ 슬라이스를 ‘슬라이스 패널’에서 선택합니다. 우측 하단의 내보내기 설정(Export Options) 패널에서 원하는 포맷(예: 1x PNG, WebP)을 지정합니다. 만약 여러 개의 슬라이스를 수동으로 그렸다면, Ctrl+A로 모두 선택한 뒤 설정을 일괄 적용할 수 있습니다. 마지막으로 패널 하단의 슬라이스 내보내기 버튼을 클릭하면 됩니다.
자주 묻는 질문 (FAQ)
질문1. 레이어에서 생성한 슬라이스를 수동으로 수정할 수 있나요?
가능합니다. ‘레이어에서 슬라이스 생성’으로 만들어진 슬라이스도, 익스포트 페르소나에서 ‘슬라이스 툴’을 선택하면 모서리에 조절 핸들이 나타납니다. 이 핸들을 드래그하여 크기나 위치를 수동으로 자유롭게 수정할 수 있습니다. 자동 생성과 수동 편집은 완벽하게 호환됩니다.
질문2. 슬라이스끼리 겹쳐도 되나요?
네, 100% 가능하며 이것이 매우 강력한 기능입니다. 예를 들어, 웹사이트 전체를 Full_Page라는 큰 슬라이스(JPG 저장용)로 하나 만들고, 그 위에 헤더 영역만 Header 슬라이스(PNG 저장용)로, 로고 영역만 Logo 슬라이스(SVG 저장용)로 겹쳐서 만들 수 있습니다. 내보내기 시 3개의 파일이 각기 다른 설정으로 완벽하게 추출됩니다.
질문3. 슬라이스 툴로 그린 영역의 배경이 투명하게 나오나요?
이는 슬라이스 툴이 아닌, 문서(아트보드)의 설정에 달려있습니다. 만약 아트보드 자체에 흰색 배경이 칠해져 있다면, 슬라이스도 흰색 배경을 포함하여 내보냅니다. 아이콘처럼 배경을 투명하게 내보내려면, 아트보드의 ‘배경색’을 투명(체크보드)으로 설정한 뒤 PNG나 SVG, WebP 포맷으로 내보내야 합니다.
결론
어피니티 디자이너의 익스포트 페르소나는 ‘레이어에서 슬라이스 생성’이라는 자동화 기능만으로도 훌륭합니다. 하지만 진정한 전문가는 여기에 ‘슬라이스 툴’이라는 수동 제어 기능을 더해, 어떤 복잡한 레이아웃이나 특수한 요구사항에도 완벽하게 대응합니다.
더 이상 스프라이트 시트 분할이나 복잡한 영역 내보내기를 위해 다른 프로그램을 켜지 마십시오. 익스포트 페르소나 안에서 ‘스냅’과 ‘변형 패널’을 켜고, 픽셀 단위로 완벽하게 제어되는 수동 슬라이스 툴의 강력함을 경험해 보시길 바랍니다.