UI 디자인 작업이 끝난 후, 개발자에게 전달할 수백 개의 아이콘과 버튼 이미지를 하나씩 수동으로 내보내는 반복 작업에 지치셨나요. 아이콘 하나를 PNG로 저장하고, 다시 @2x, @3x 해상도별로 리사이징한 뒤 ‘icon_menu@2x.png’처럼 일일이 파일명을 바꾸는 데 작업 시간의 절반을 낭비하고 있을지도 모릅니다.
하지만 어피니티 디자이너 사용자라면 이 모든 과정을 단 1분 만에, 클릭 한 번으로 끝낼 수 있습니다. 그 비결이 바로 앱 좌측 상단의 세 번째 아이콘, 익스포트 페르소나(Export Persona)에 숨어있습니다. 이것은 단순한 ‘내보내기’ 기능이 아닌, 수백 개의 자산을 동시에 처리하는 강력한 ‘수출 공장’입니다.
익스포트 페르소나란 정확히 무엇인가요?
어피니티 디자이너는 세 가지의 전문 작업 공간, 즉 페르소나를 제공합니다.
- 디자이너 페르소나 (1번): 벡터 작업을 위한 공간 (일러스트레이터)
- 픽셀 페르소나 (2번): 픽셀(래스터) 편집을 위한 공간 (포토샵)
- 익스포트 페르소나 (3번): 오직 ‘내보내기’만을 위해 존재하는 공간
많은 입문자가 ‘파일 > 내보내기’ 메뉴와 익스포트 페르소나를 혼동합니다. ‘파일 > 내보내기’는 현재 작업 중인 문서 전체를 하나의 파일(PNG, JPG, PDF 등)로 저장하는 기능입니다.
반면, 익스포트 페르소나는 문서 전체가 아닌, 문서 내부의 특정 ‘부분’들, 즉 로고, 아이콘, 버튼, 배너 등 수십 수백 개의 개별 자산(Asset)을 각기 다른 포맷, 다른 크기, 다른 이름으로 동시에 내보내기 위해 설계된 전문 공간입니다.
익스포트 페르소나의 핵심: 슬라이스(Slice)란?
익스포트 페르소나의 모든 작업은 슬라이스(Slice)라는 개념을 기반으로 작동합니다. 슬라이스는 ‘내보낼 영역을 지정하는 조각’을 의미합니다.
예를 들어, UI 디자인 문서 안에 아이콘 100개와 버튼 50개가 있다면, 150개의 슬라이스를 만들어 각각을 개별 파일로 추출할 수 있습니다. 이 슬라이스를 만드는 방법은 두 가지가 있으며, 여기서 작업 효율이 100배 차이 납니다.
- 1. 수동 생성 (비효율적): 익스포트 페르소나 좌측 도구 모음의 ‘슬라이스 툴(Slice Tool)’로 내보낼 영역을 포토샵처럼 하나하나 사각형으로 그리는 방식입니다. 비효율적이고 정확하지 않습니다.
- 2. 레이어 기반 자동 생성 (핵심 비결): 레이어 패널에서 내가 디자인한 레이어 또는 그룹을 기반으로 슬라이스를 자동으로 생성하는 방식입니다. 100개의 아이콘 레이어가 있다면, 100개의 슬라이스를 만드는 데 3초면 충분합니다.
슬라이스 100개 1분 만에 동시 내보내기 (4단계 상세 절차)
UI 디자인에 100개의 아이콘 레이어가 있다고 가정하고, 이 100개를 @1x, @2x, @3x 크기의 PNG 파일로, 총 300개의 파일로 한 번에 내보내는 과정을 상세히 설명합니다.
1단계: 익스포트 페르소나로 전환
작업을 마친 뒤, 좌측 상단의 세 번째 아이콘 익스포트 페르소나를 클릭합니다. 화면 전체가 내보내기 모드로 바뀌고, 우측에 ‘슬라이스(Slices)’ 패널이 나타납니다.
2단계: 레이어에서 슬라이스 자동 생성 (가장 중요)
이것이 90%의 작업을 끝내는 핵심입니다.
- 우측의 레이어(Layers) 패널을 엽니다. (슬라이스 패널이 아닙니다)
- 내보내고자 하는 아이콘 레이어 또는 그룹 100개를 모두 선택합니다. (Shift 키나 Ctrl/Cmd 키로 다중 선택)
- 레이어 패널 하단에 있는 슬라이스 생성(Create Slice) 버튼을 클릭합니다.
- 이 순간, 레이어 패널이 아닌 슬라이스(Slices) 패널을 확인해 보십시오. 방금 선택한 100개의 레이어가 100개의 슬라이스 목록으로 완벽하게 생성된 것을 볼 수 있습니다.
3단계: 내보내기 설정 일괄 적용하기
이제 100개의 슬라이스에 ‘어떻게’ 내보낼지 규칙을 정해줘야 합니다.
- 슬라이스(Slices) 패널에서 방금 생성된 100개의 슬라이스를 모두 선택합니다. (Ctrl+A 또는 Cmd+A)
- 화면 우측 하단의 내보내기 설정(Export Options) 패널을 봅니다.
- + 아이콘을 클릭하여 첫 번째 설정을 추가합니다.
- 크기 입력란에 1x를 입력합니다.
- 파일명 접미사(Suffix)에 @1x를 입력합니다.
- 포맷을 PNG로 설정합니다.
- 다시 + 아이콘을 클릭하여 두 번째 설정을 추가합니다.
- 크기 입력란에 2x를 입력합니다.
- 파일명 접미사(Suffix)에 @2x를 입력합니다.
- 포맷을 PNG로 설정합니다.
- 다시 + 아이콘을 클릭하여 세 번째 설정을 추가합니다.
- 크기 입력란에 3x를 입력합니다.
- 파일명 접미사(Suffix)에 @3x를 입력합니다.
- 포맷을 PNG로 설정합니다.
이제 100개의 슬라이스 각각에 @1x, @2x, @3x 설정이 모두 일괄 적용되었습니다. 총 300개의 파일이 준비된 것입니다.
4단계: 원클릭 동시 내보내기
- 슬라이스 패널 하단의 슬라이스 내보내기 (X개) 버튼을 클릭합니다. (X는 100)
- 저장할 폴더를 선택하고 ‘내보내기’를 누릅니다.
- 탐색기에서 해당 폴더를 확인해 보십시오.
‘icon_home@1x.png’, ‘icon_home@2x.png’, ‘icon_home@3x.png’, ‘icon_settings@1x.png’, ‘icon_settings@2x.png’… 등 300개의 파일이 완벽한 이름과 크기로 한 번에 생성된 것을 볼 수 있습니다.
작업 효율 200% 올리는 전문가 꿀팁 3가지
팁 1. 파일명 자동화의 핵심은 ‘레이어 이름’
익스포트 페르소나는 슬라이스를 내보낼 때, 그 슬라이스의 이름을 파일명으로 사용합니다. 그리고 2단계에서 ‘레이어에서 슬라이스 생성’을 하면, 레이어 이름이 자동으로 슬라이스 이름이 됩니다.
즉, 처음부터 레이어 이름을 깔끔하게 정리하는 것이 핵심입니다.
- 나쁜 예: Layer 1, Rectangle 5, Group 3
- 좋은 예: icon_menu, icon_search, button_primary
저 역시 처음에는 ‘Slice 1’, ‘Slice 2’로 내보내다, 레이어 이름 자체를 잘 정리하는 습관을 들인 후 파일 관리 효율이 혁신적으로 변했습니다.
전문가 팁: 레이어 이름에 슬래시(/)를 사용하면(예: icon/social/facebook), 내보낼 때 ‘icon’ 폴더와 그 안의 ‘social’ 폴더를 자동으로 생성하고 그 안에 ‘facebook.png’ 파일을 저장해 줍니다.
팁 2. ‘내보내기 프리셋’으로 설정 저장하기
@1x, @2x, @3x PNG 설정은 매번 반복하는 작업입니다. 이 설정을 ‘프리셋(Preset)’으로 저장해 둘 수 있습니다.
- 내보내기 설정(Export Options) 패널 우측 상단의 햄버거 메뉴를 클릭합니다.
- 프리셋 생성을 선택합니다.
- 현재 설정된 3가지(@1x, @2x, @3x PNG)를 포함하는 프리셋을 만듭니다. (예: ‘iOS PNG 3-Set’)
- 다음 작업부터는 슬라이스 패널에서 프리셋 드롭다운을 열어 ‘iOS PNG 3-Set’을 선택하기만 하면, 3단계의 복잡한 과정이 1초 만에 끝납니다.
팁 3. SVG, PDF, JPG 동시 내보내기
내보내기 설정은 PNG에만 국한되지 않습니다. 개발팀이 PNG 파일과 함께 SVG 원본 아이콘도 요청할 수 있습니다. 이 경우, 3단계에서 + 아이콘을 한 번 더 눌러 4번째 설정을 추가하면 됩니다.
- 크기: 1x, 포맷: SVG (접미사 불필요) 이렇게 설정하면 100개의 슬라이스를 내보낼 때, 300개의 PNG 파일과 100개의 SVG 파일, 총 400개의 파일이 동시에 생성됩니다.
자주 묻는 질문 (FAQ)
질문1. ‘파일 > 내보내기’와 익스포트 페르소나는 정확히 뭐가 다른가요?
‘파일 > 내보내기’는 문서 전체(대지)를 하나의 파일로 저장합니다. 반면 ‘익스포트 페르소나’는 문서 내의 특정 부분(아이콘, 버튼 등)을 ‘슬라이스’라는 단위로 지정하여, 수백 개의 조각을 각기 다른 포맷과 크기로 동시에 내보내는 ‘일괄 수출’ 전용 기능입니다.
질문2. 슬라이스 툴로 직접 그리는 건 언제 쓰나요?
‘레이어에서 슬라이스 생성’이 가장 좋지만, 가끔 여러 레이어에 걸쳐 있는 특정 영역(예: 배너의 일부)을 내보내야 할 때가 있습니다. 이럴 때만 익스포트 페르소나의 ‘슬라이스 툴'(좌측 도구 모음)을 이용해 수동으로 영역을 그려서 슬라이스를 만듭니다.
질문3. 아이패드 버전 어피니티 디자이너에도 이 기능이 있나요?
네, 100% 동일하게 작동합니다. 아이패드 화면 상단의 페르소나 아이콘 중 세 번째(내보내기 모양)가 익스포트 페르소나입니다. 탭하면 데스크톱과 동일하게 ‘슬라이스’ 패널과 ‘레이어’ 패널이 나타나며, 레이어에서 슬라이스를 생성하고 내보내기 설정을 일괄 적용하는 모든 과정이 같습니다.
결론
어피니티 디자이너의 익스포트 페르소나는 단순한 편의 기능이 아니라, 디자이너의 작업 시간을 획기적으로 단축시켜주는 ‘워크플로우 혁신’ 그 자체입니다. 더 이상 디자인이 끝난 후, 수백 개의 파일을 수동으로 저장하고 리사이징하는 고통스러운 반복 작업에 시간을 낭비하지 마십시오.
지금 바로 익스포트 페르소나를 켜고, 레이어 패널에서 ‘슬라이스 생성’ 버튼을 누르십시오. 100개의 슬라이스가 1분 만에 300개의 파일로 변환되는 마법을 경험하는 순간, 당신의 디자인 작업은 완전히 새로운 차원으로 올라설 것입니다.