UI/UX 디자인 작업을 마친 후, 개발자에게 전달할 수백 개의 아이콘과 버튼 이미지를 하나씩 수동으로 내보내는 반복 작업에 지치셨나요. 아이콘 하나를 Ctrl+Shift+Alt+S로 저장하고, 다시 다음 레이어를 켜서 저장하는 과정을 100번 넘게 반복하는 것은 끔찍한 시간 낭비입니다.
하지만 어피니티 디자이너 사용자라면 이 모든 과정을 단 1분 만에, 클릭 몇 번으로 끝낼 수 있습니다. 그 비결이 바로 앱 좌측 상단의 세 번째 아이콘, 익스포트 페르소나와 그 안의 강력한 슬라이스 자동 생성 기능에 숨어있습니다. 이 기능을 활용해 반복 작업을 끝내고 ‘칼퇴’하는 비결을 지금 바로 시작하겠습니다.
익스포트 페르소나와 슬라이스란 무엇인가요?
어피니티 디자이너는 세 가지의 전문 작업 공간, 즉 페르소나를 제공합니다.
- 디자이너 페르소나 (1번): 벡터 작업을 위한 공간 (일러스트레이터)
- 픽셀 페르소나 (2번): 픽셀(래스터) 편집을 위한 공간 (포토샵)
- 익스포트 페르소나 (3번): 오직 ‘내보내기’만을 위해 존재하는 공간
많은 입문자가 ‘파일 > 내보내기’ 메뉴와 익스포트 페르소나를 혼동합니다. ‘파일 > 내보내기’는 현재 작업 중인 문서 전체(대지)를 하나의 파일(PNG, JPG, PDF 등)로 저장하는 기능입니다.
반면, 익스포트 페르소나는 문서 전체가 아닌, 문서 내부의 특정 ‘부분’들, 즉 로고, 아이콘, 버튼, 배너 등 수십 수백 개의 개별 자산(Asset)을 각기 다른 포맷, 다른 크기, 다른 이름으로 동시에 내보내기 위해 설계된 전문 공간입니다.
이 익스포트 페르소나의 모든 작업은 슬라이스(Slice)라는 개념을 기반으로 작동합니다. 슬라이스는 ‘내보낼 영역을 지정하는 조각’을 의미합니다.
왜 ‘레이어 기반’ 자동 생성이 핵심인가요?
슬라이스를 만드는 방법은 두 가지가 있으며, 여기서 작업 효율이 100배 차이 납니다.
- 1. 수동 생성 (비효율적): 익스포트 페르소나 좌측 도구 모음의 ‘슬라이스 툴(Slice Tool)’로 내보낼 영역을 포토샵처럼 하나하나 사각형으로 그리는 방식입니다. 이 방법은 아이콘이 100개라면 100번의 드래그가 필요하며, 1픽셀이라도 잘못 그리면 이미지가 잘려나갈 수 있어 매우 비효율적이고 부정확합니다.
- 2. 레이어 기반 자동 생성 (핵심 비결): 이것이 우리가 배울 핵심입니다. 디자이너 페르소나에서 이미 작업해 둔 ‘레이어’ 또는 ‘그룹’을 기반으로 슬라이스를 자동으로 생성하는 방식입니다. 내보낼 아이콘이 100개의 레이어로 정리되어 있다면, 단 3초 만에 100개의 슬라이스를 완벽하게 생성할 수 있습니다. 각 레이어의 경계에 픽셀 단위로 완벽하게 맞는 슬라이스가 자동으로 만들어집니다.
슬라이스 100개 1분 만에 자동 생성하는 4단계 상세 절차
UI 디자인에 100개의 아이콘 레이어가 있다고 가정하고, 이 100개를 단 한 번의 클릭으로 100개의 슬라이스로 변환하는 과정을 상세히 설명합니다.
1단계: 익스포트 페르소나로 전환
작업을 마친 뒤, 좌측 상단의 세 번째 아이콘 익스포트 페르소나를 클릭합니다. 화면 전체가 내보내기 모드로 바뀌고, 우측에 ‘슬라이스(Slices)’ 패널이 나타납니다.
2단계: 레이어 패널에서 내보낼 개체 선택
우측 패널 중 ‘슬라이스’ 패널이 아닌, 그 옆에 있는 레이어(Layers) 패널을 엽니다. 이곳에서 디자이너 페르소나에서 작업한 모든 레이어 목록을 볼 수 있습니다.
- 내보내고자 하는 아이콘 레이어 또는 그룹 100개를 모두 선택합니다.
- 첫 번째 레이어를 클릭하고, Shift 키를 누른 채 마지막 레이어를 클릭하면 전체 선택이 됩니다.
- Ctrl (Mac: Cmd) 키를 누른 채 클릭하면 원하는 레이어만 골라서 다중 선택할 수 있습니다.
3단계: ‘슬라이스 생성’ 버튼 클릭 (가장 중요)
100개의 레이어가 모두 선택된 상태에서, 레이어 패널 하단(또는 우측 상단 메뉴)에 있는 슬라이스 생성(Create Slice) 버튼을 클릭합니다.
4단계: 슬라이스 패널 확인 및 내보내기
버튼을 누름과 동시에, 슬라이스(Slices) 패널로 자동 전환되거나, 직접 탭하여 확인해 봅니다. 방금 선택했던 100개의 레이어가 100개의 개별 슬라이스 목록으로 완벽하게 생성된 것을 볼 수 있습니다.
- 파일 이름 확인: 각 슬라이스의 이름이 내가 설정한 ‘레이어 이름’으로 자동 지정된 것을 확인합니다.
- 일괄 내보내기: 슬라이스 패널에서 Ctrl+A (Mac: Cmd+A)로 모든 슬라이스를 선택한 뒤, 우측 하단의 ‘내보내기 설정(Export Options)’에서 원하는 포맷(PNG, SVG 등)을 지정하고, 패널 하단의 슬라이스 내보내기 (100개) 버튼을 클릭하면 모든 파일이 한 번에 저장됩니다.
작업 효율 200% 올리는 전문가 꿀팁 3가지
팁 1. 파일명 자동화의 핵심은 ‘레이어 이름’
익스포트 페르소나는 슬라이스를 내보낼 때, 그 슬라이스의 이름을 파일명으로 사용합니다. 그리고 2단계에서 ‘레이어에서 슬라이스 생성’을 하면, 레이어 이름이 자동으로 슬라이스 이름이 됩니다.
즉, 처음부터 레이어 이름을 깔끔하게 정리하는 것이 핵심입니다.
- 나쁜 예: Layer 1, Rectangle 5, Group 3 (이렇게 저장하면 Layer 1.png, Rectangle 5.png로 저장됩니다)
- 좋은 예: icon_menu, icon_search, button_primary (이렇게 저장하면 icon_menu.png, icon_search.png로 저장됩니다)
저 역시 처음에는 ‘Slice 1’, ‘Slice 2’로 내보내다, 디자인 작업 단계에서부터 레이어 이름(예: icon_home)을 정확히 지정하는 습관을 들인 후 파일 관리 효율이 혁신적으로 변했습니다.
팁 2. 폴더 자동 생성 (슬래시 / 활용)
수백 개의 아이콘을 하나의 폴더에 쏟아내는 것은 정리 재앙입니다. 익스포트 페르소나는 레이어 이름의 ‘슬래시(/)’를 폴더 경로로 인식합니다.
- 레이어 이름 설정:
- icon/social/facebook
- icon/social/instagram
- icon/ui/menu
- icon/ui/close
- 내보내기 결과: 위와 같이 레이어 이름을 설정하고 슬라이스를 생성한 뒤 내보내면, 어피니티 디자이너가 ‘icon’ 폴더를 만들고, 그 안에 ‘social’ 폴더와 ‘ui’ 폴더를 자동으로 생성한 뒤, 각각의 폴더에 ‘facebook.png’, ‘instagram.png’, ‘menu.png’ 파일을 알아서 저장해 줍니다.
팁 3. ‘아트보드(대지)’ 단위로 슬라이스 생성하기
아이콘이나 UI 컴포넌트를 디자인할 때, 처음부터 ‘아트보드 툴’을 사용해 24×24, 32×32처럼 개별 대지에 작업하는 것이 좋습니다.
익스포트 페르소나의 ‘슬라이스 패널’ 상단에는 ‘자동(Auto)’ 버튼이 있습니다. 이 버튼을 클릭하면 레이어 패널에서 일일이 선택할 필요 없이, 문서 내의 모든 아트보드(대지)를 자동으로 슬라이스로 즉시 생성해 줍니다. 이는 가장 빠르고 정돈된 방식입니다.
자주 묻는 질문 (FAQ)
질문1. ‘슬라이스 툴’로 직접 그리는 건 언제 쓰나요?
‘레이어에서 슬라이스 생성’이 가장 좋지만, 가끔 여러 레이어에 걸쳐 있는 특정 영역(예: 웹사이트 헤더 배너의 일부)을 내보내야 할 때가 있습니다. 이럴 때만 익스포트 페르소나의 ‘슬라이스 툴'(좌측 도구 모음)을 이용해 수동으로 영역을 그려서 슬라이스를 만듭니다.
질문2. 실수로 슬라이스를 만들었습니다. 어떻게 삭제하나요?
아주 쉽습니다. 익스포트 페르소나의 슬라이스(Slices) 패널에서 삭제하고 싶은 슬라이스를 선택한 뒤, 키보드의 Delete 키를 누르거나, 패널 하단의 ‘휴지통’ 아이콘을 누르면 즉시 삭제됩니다.
질문3. 아이패드 버전 어피니티 디자이너에서도 이 기능이 있나요?
동일하게 작동합니다. 아이패드 화면 상단의 페르소나 아이콘 중 세 번째(내보내기 모양)가 익스포트 페르소나입니다. 탭하면 데스크톱과 동일하게 ‘슬라이스’ 패널과 ‘레이어’ 패널이 나타나며, ‘레이어’ 패널에서 내보낼 레이어들을 선택한 뒤 패널 하단의 ‘슬라이스 생성’ 아이콘을 탭하면 자동으로 슬라이스가 만들어집니다.
결론
어피니티 디자이너의 익스포트 페르소나는 단순한 편의 기능이 아니라, 디자이너의 작업 시간을 획기적으로 단축시켜주는 ‘워크플로우 혁신’ 그 자체입니다. 더 이상 디자인이 끝난 후, 수백 개의 파일을 수동으로 저장하고 리사이징하는 고통스러운 반복 작업에 시간을 낭비하지 마십시오.
지금 바로 익스포트 페르소나를 켜고, 레이어 패널에서 ‘슬라이스 생성’ 버튼을 누르십시오. 100개의 슬라이스가 1분 만에 300개의 파일로 변환되는 마법을 경험하는 순간, 당신의 디자인 작업은 완전히 새로운 차원으로 올라설 것입니다.