UI 디자인 작업이 모두 끝나고, 개발자에게 전달할 수백 개의 아이콘과 버튼 이미지를 하나씩 수동으로 내보내는 반복 작업에 지치셨나요. 아이콘 하나를 PNG로 저장하고, 다시 @2x, @3x 해상도별로 리사이징한 뒤 ‘icon_menu@2x.png’처럼 일일이 파일명을 바꾸는 데 작업 시간의 절반을 낭비하고 있을지도 모릅니다.
하지만 어피니티 디자이너 사용자라면 이 모든 과정을 단 1분 만에, 클릭 한 번으로 끝낼 수 있습니다. 핵심은 익스포트 페르소나의 1x, 2x, 3x 배율 설정을 ‘프리셋’으로 만들어 완벽하게 자동화하는 것입니다. 이 프리셋 설정법과 100개의 슬라이스를 동시에 내보내는 비결을 지금 바로 시작하겠습니다.
익스포트 페르소나, 1x 2x 3x 배율은 왜 필요한가요?
최신 웹과 앱 디자인은 다양한 해상도의 디바이스에 대응해야 합니다. ‘하나의 이미지를 만들면 끝’이던 시대는 지났습니다. 개발자는 디자이너에게 화면 밀도(DPI)에 따른 여러 배율의 이미지를 요구합니다.
- 1x (표준 배율): 기준이 되는 1배율 크기입니다. 예를 들어 24×24 픽셀의 아이콘입니다.
- 2x (레티나 배율): 애플의 레티나 디스플레이처럼 픽셀 밀도가 2배인 화면을 위한 크기입니다. 1x의 2배 크기(48×48 픽셀)로, 파일명 끝에 @2x 접미사(Suffix)를 붙여 구분합니다.
- 3x (고해상도 배율): 아이폰 Pro Max나 고해상도 안드로이드폰을 위한 3배율 크기입니다. 1x의 3배 크기(72×72 픽셀)이며 @3x 접미사를 붙입니다.
디자이너가 이 모든 규격의 파일을 수동으로 만들다 보면, 파일명을 잘못 적거나 1픽셀 크기 오류를 내는 등 휴먼 에러가 발생하기 쉽고 엄청난 시간을 낭비하게 됩니다. 익스포트 페르소나는 이 모든 배율의 파일 생성을 ‘동시에’ 자동화하여 이 문제를 근본적으로 해결합니다.
1x 2x 3x 내보내기 설정 5단계 상세 절차 (일괄 적용)
우선, 내보낼 모든 자산(아이콘, 버튼 등)이 ‘슬라이스(Slice)’로 만들어져 있어야 합니다. (디자이너 페르소나의 ‘레이어’ 패널에서 내보낼 레이어를 모두 선택한 뒤, 익스포트 페르소나로 전환 > ‘레이어에서 슬라이스 생성’ 버튼을 누르면 됩니다.)
100개의 슬라이스가 준비되었다고 가정하고, 이 100개에 1x, 2x, 3x 설정을 한 번에 적용하는 방법입니다.
1단계: 익스포트 페르소나 전환
작업이 완료되면, 앱 좌측 상단의 세 번째 아이콘 익스포트 페르소나를 클릭합니다. 화면이 내보내기 전용 모드로 전환됩니다.
2단계: 모든 슬라이스 선택
화면 우측의 슬라이스(Slices) 패널을 엽니다. 방금 생성한 100개의 슬라이스 목록이 보입니다. 이 목록에서 Ctrl+A (Mac: Cmd+A)를 누르거나, Shift 키를 이용해 목록 전체를 선택합니다.
3단계: 내보내기 설정 패널 열기
100개의 슬라이스가 모두 파랗게 선택된 상태에서, 화면 우측 하단의 내보내기 설정(Export Options) 패널을 봅니다.
4단계: 배율 및 접미사 설정 (핵심)
이 패널에서 우리가 원하는 수출 규격을 만듭니다.
- + 아이콘을 클릭하여 첫 번째 설정을 추가합니다.
- 크기 입력란에 1x를 입력합니다.
- 파일명 접미사(Suffix) 입력란에 @1x를 입력합니다. (이것이 파일명 자동화의 핵심입니다)
- 포맷을 PNG로 설정합니다.
- 다시 + 아이콘을 클릭하여 두 번째 설정을 추가합니다.
- 크기 입력란에 2x를 입력합니다.
- 파일명 접미사(Suffix) 입력란에 @2x를 입력합니다.
- 포맷을 PNG로 설정합니다.
- 다시 + 아이콘을 클릭하여 세 번째 설정을 추가합니다.
- 크기 입력란에 3x를 입력합니다.
- 파일명 접미사(Suffix) 입력란에 @3x를 입력합니다.
- 포맷을 PNG로 설정합니다.
이제 100개의 슬라이스 각각에 3가지 배율 설정이 모두 일괄 적용되었습니다. 총 300개의 파일이 수출 준비를 마친 것입니다.
5단계: 원클릭 동시 내보내기
- 슬라이스 패널 하단의 슬라이스 내보내기 (100개) 버튼을 클릭합니다.
- 저장할 폴더를 선택하고 ‘내보내기’를 누릅니다.
- 이제 탐색기에서 해당 폴더를 확인해 보십시오.
‘icon_home@1x.png’, ‘icon_home@2x.png’, ‘icon_home@3x.png’, ‘icon_settings@1x.png’, ‘icon_settings@2x.png’… 등 300개의 파일이 완벽한 이름과 크기로 한 번에 생성된 것을 볼 수 있습니다.
이 설정을 저장하는 ‘프리셋’ 활용법 (진짜 자동화)
위의 4단계 작업조차 매번 새로 하기는 번거롭습니다. 이 설정을 ‘프리셋(Preset)’으로 저장하여 1초 만에 불러오는 방법입니다.
저 역시 이 프리셋 기능을 모르던 시절에는, 프로젝트마다 1x, 2x, 3x 설정을 매번 수동으로 입력하는 비효율적인 작업을 반복했었습니다.
1단계: 프리셋 생성
1x, 2x, 3x PNG 설정이 모두 완료된 내보내기 설정(Export Options) 패널의 우측 상단 햄버거 메뉴(줄 3개)를 클릭합니다.
2단계: 프리셋 관리자 열기
드롭다운 메뉴에서 프리셋 관리자(Presets Manager)를 선택합니다.
3단계: 프리셋 저장
‘내보내기 프리셋’ 창이 뜹니다. 좌측 하단의 ‘프리셋 추가’ 아이콘을 클릭합니다. ‘내보내기 프리셋 추가’ 창이 뜨면, 현재 설정된 3가지(1x @1x, 2x @2x, 3x @3x PNG)가 목록에 있는지 확인합니다.
4단계: 이름 지정 및 저장
프리셋 이름을 iOS/Android PNG Set처럼 알아보기 쉽게 저장합니다.
1초 만에 활용하기
이제 다음 프로젝트부터는 100개의 슬라이스를 선택한 뒤, ‘내보내기 설정’ 패널 상단에 있는 프리셋 드롭다운 메뉴를 클릭합니다. 방금 저장한 iOS/Android PNG Set을 선택하기만 하면, 모든 설정이 1초 만에 완료됩니다.
100% 활용을 위한 꿀팁 및 유의사항
- 팁 1: 파일명 자동화는 레이어 이름이 결정합니다. 익스포트 페르소나는 슬라이스를 내보낼 때, 그 슬라이스의 이름을 파일명으로 사용합니다. 그리고 ‘레이어에서 슬라이스 생성’을 하면, 레이어 이름이 자동으로 슬라이스 이름이 됩니다. 따라서 처음부터 레이어 이름을 ‘Layer 1’이 아닌 ‘icon_home’처럼 깔끔하게 정리하는 것이 핵심입니다.
- 팁 2: 폴더 자동 생성 (슬래시 / 활용) 레이어 이름에 슬래시(/)를 사용하면(예: icon/social/facebook), 내보낼 때 ‘icon’ 폴더와 그 안의 ‘social’ 폴더를 자동으로 생성하고 그 안에 ‘facebook.png’ 파일을 저장해 줍니다.
- 팁 3: SVG, PDF도 프리셋에 동시 추가 개발팀이 PNG 파일과 함께 SVG 원본 아이콘도 요청할 수 있습니다. 프리셋을 만들 때, PNG 3종 세트 외에도 + 아이콘을 한 번 더 눌러 4번째 설정을 추가하면 됩니다.
- 크기: 1x, 포맷: SVG (접미사 불필요) 이렇게 프리셋을 저장하면, 버튼 클릭 한 번에 300개의 PNG 파일과 100개의 SVG 파일, 총 400개의 파일이 동시에 생성됩니다.
자주 묻는 질문 (FAQ)
질문1. ‘파일 > 내보내기’와 익스포트 페르소나는 뭐가 다른가요?
‘파일 > 내보내기’는 문서 전체(대지)를 하나의 파일로 저장합니다. 반면 ‘익스포트 페르소나’는 문서 내의 특정 부분(아이콘, 버튼 등)을 ‘슬라이스’라는 단위로 지정하여, 수백 개의 조각을 각기 다른 설정(1x, 2x, SVG…)으로 ‘동시에’ 내보내는 일괄 수출 전용 기능입니다.
질문2. 1x, 2x, 3x 대신 100px, 200px처럼 고정 픽셀로 내보낼 수 있나요?
네, 가능합니다. ‘내보내기 설정’의 크기 입력란에 1x 대신 100w(가로 100픽셀), 200h(세로 200픽셀)처럼 고정 값을 입력하면 해당 크기로 내보내집니다. 이 설정 역시 프리셋으로 저장할 수 있습니다.
질문3. 아이패드 버전 어피니티 디자이너에서도 프리셋 설정이 가능한가요?
네, 100% 동일하게 작동합니다. 아이패드 화면 상단의 세 번째 페르소나 아이콘을 탭하면, 데스크톱과 동일한 ‘슬라이스’ 패널과 ‘내보내기 설정’ 패널이 나타납니다. 여기서 프리셋을 저장하고 불러올 수 있습니다.
결론
어피니티 디자이너의 익스포트 페르소나는 단순한 편의 기능이 아니라, 디자이너의 작업 시간을 획기적으로 단축시켜주는 ‘워크플로우 혁신’ 그 자체입니다. 더 이상 디자인이 끝난 후, 수백 개의 파일을 수동으로 저장하고 리사이징하는 고통스러운 반복 작업에 시간을 낭비하지 마십시오.
지금 바로 익스포트 페르소나를 켜고, 1x, 2x, 3x 설정을 ‘프리셋’으로 저장해 두십시오. 100개의 슬라이스가 1분 만에 300개의 파일로 변환되는 마법을 경험하는 순간, 당신의 디자인 작업은 완전히 새로운 차원으로 올라설 것입니다.