익스포트 페르소나, WebP SVG PNG 100개 파일 동시 추출 자동화 방법

작성자:

웹 디자인이나 UI 작업을 마친 뒤, 개발팀에 아이콘을 전달할 때 골치 아프지 않으신가요. 선명함을 위한 SVG, 호환성을 위한 PNG, 그리고 웹 속도를 위한 WebP까지, 3가지 포맷을 일일이 내보내는 건 끔찍한 반복 작업입니다.

하지만 어피니티 디자이너의 익스포트 페르소나를 활용하면, 100개의 아이콘도 단 한 번의 클릭으로 이 3가지 포맷, 총 300개의 파일로 동시 추출할 수 있습니다. 이 강력한 자동화 방법을 지금 바로 시작하겠습니다.

왜 WebP, SVG, PNG 3가지 포맷이 동시에 필요한가요?

현대의 웹 디자인은 ‘속도’와 ‘선명함’ 두 마리 토끼를 모두 잡아야 합니다. 각 파일 포맷은 서로 다른 목적을 가지고 있으며, 이 세 가지를 모두 제공하는 것이 최신 웹 표준의 핵심입니다.

1. PNG (Portable Network Graphics)

  • 목적: 호환성, 투명 배경
  • 특징: 가장 보편적으로 사용되는 무손실 압축 이미지 포맷입니다. 완벽한 투명 배경을 지원하여, 어떤 브라우저나 앱에서도 호환성 문제 없이 깔끔하게 보입니다.
  • 용도: 웹사이트의 로고, 아이콘의 기본이자, 구형 브라우저를 위한 ‘대체 이미지(Fallback)’로 반드시 필요합니다.

2. SVG (Scalable Vector Graphics)

  • 목적: 무한한 확장성, 선명함
  • 특징: 이 파일은 이미지가 아니라 ‘코드(XML)’입니다. 점과 선의 좌표로 그림을 기억하는 벡터 방식이라, 아무리 확대해도 픽셀이 깨지지 않습니다. 파일 용량 또한 매우 가볍습니다.
  • 용도: 로고, 아이콘, 단순한 일러스트 등 해상도에 관계없이 항상 칼같이 선명해야 하는 그래픽에 필수적입니다.

3. WebP (Web Picture format)

  • 목적: 웹 성능(속도), SEO
  • 특징: 구글이 개발한 차세대 웹 이미지 포맷입니다. PNG의 투명 배경과 JPG의 높은 압축률을 모두 지원하면서, 용량은 PNG의 30~50% 수준으로 획기적으로 줄여줍니다.
  • 용도: 웹사이트의 로딩 속도를 결정짓는 핵심입니다. 구글은 페이지 로딩 속도를 검색 엔진 최적화(SEO)의 중요한 평가지표로 삼기 때문에, WebP 사용은 선택이 아닌 필수입니다.

결국 디자이너는 개발자에게 ①속도를 위한 WebP, ②선명함을 위한 SVG, ③호환성을 위한 PNG를 모두 전달해야 하는 과제를 안게 됩니다.

100개 파일 동시 추출 5단계 상세 절차 (일괄 적용)

어피니티 디자이너의 익스포트 페르소나는 이 모든 것을 한 번에 처리합니다. UI 디자인에 100개의 아이콘 레이어가 있다고 가정하고, 이 100개를 PNG, SVG, WebP 3가지 포맷, 총 300개의 파일로 한 번에 내보내는 과정입니다.

1단계: 익스포트 페르소나 전환

작업을 마친 뒤, 앱 좌측 상단의 세 번째 아이콘 익스포트 페르소나를 클릭합니다. 화면 전체가 내보내기 전용 모드로 전환되고, 우측에 ‘슬라이스(Slices)’ 패널이 나타납니다.

2단계: 레이어에서 슬라이스 자동 생성 (가장 중요)

이것이 90%의 작업을 끝내는 핵심입니다. 내보낼 영역을 수동으로 그릴 필요가 없습니다.

  1. 우측의 레이어(Layers) 패널을 엽니다. (슬라이스 패널이 아닙니다)
  2. 내보내고자 하는 아이콘 레이어 또는 그룹 100개를 모두 선택합니다. (Shift 키나 Ctrl/Cmd 키로 다중 선택)
  3. 레이어 패널 하단에 있는 슬라이스 생성(Create Slice) 버튼을 클릭합니다.
  4. 이 순간, 레이어 패널이 아닌 슬라이스(Slices) 패널을 확인해 보십시오. 방금 선택한 100개의 레이어가 100개의 슬라이스 목록으로 완벽하게 생성된 것을 볼 수 있습니다.

3단계: 내보내기 설정 일괄 적용하기

이제 100개의 슬라이스에 ‘어떻게’ 내보낼지 규칙을 정해줘야 합니다.

  1. 슬라이스(Slices) 패널에서 방금 생성된 100개의 슬라이스를 Ctrl+A (Mac: Cmd+A)로 모두 선택합니다.
  2. 화면 우측 하단의 내보내기 설정(Export Options) 패널을 봅니다.
  3. + 아이콘을 클릭하여 첫 번째 설정을 추가합니다. (PNG 설정)
    • 크기 입력란에 1x를 입력합니다.
    • 포맷을 PNG로 설정합니다. (접미사는 비워둡니다)
  4. 다시 + 아이콘을 클릭하여 두 번째 설정을 추가합니다. (SVG 설정)
    • 크기 입력란에 1x를 입력합니다.
    • 포맷을 SVG로 설정합니다.
  5. 다시 + 아이콘을 클릭하여 세 번째 설정을 추가합니다. (WebP 설정)
    • 크기 입력란에 1x를 입력합니다.
    • 포맷을 WebP로 설정합니다.
    • (팁) WebP 포맷 옆의 톱니바퀴를 눌러 ‘무손실’ 또는 ‘손실(품질 80%)’ 등 세부 옵션을 조절할 수 있습니다.

이제 100개의 슬라이스 각각에 PNG, SVG, WebP 3가지 설정이 모두 일괄 적용되었습니다. 총 300개의 파일이 수출 준비를 마친 것입니다.

4단계: 파일명 자동화 규칙 확인 (레이어 이름)

익스포트 페르소나는 슬라이스를 내보낼 때, 그 슬라이스의 이름을 파일명으로 사용합니다. 그리고 2단계에서 ‘레이어에서 슬라이스 생성’을 하면, 레이어 이름이 자동으로 슬라이스 이름이 됩니다.

즉, 처음부터 레이어 이름을 ‘Layer 1’이 아닌 ‘icon_home’, ‘icon_settings’처럼 깔끔하게 정리하는 습관이 작업 효율의 핵심입니다.

5단계: 원클릭 동시 내보내기

  1. 슬라이스 패널 하단의 슬라이스 내보내기 (100개) 버튼을 클릭합니다.
  2. 저장할 폴더를 선택하고 ‘내보내기’를 누릅니다.
  3. 탐색기에서 해당 폴더를 확인해 보십시오.

‘icon_home.png’, ‘icon_home.svg’, ‘icon_home.webp’, ‘icon_settings.png’, ‘icon_settings.svg’, ‘icon_settings.webp’… 등 300개의 파일이 완벽한 이름과 포맷으로 한 번에 생성된 것을 볼 수 있습니다.

100% 활용을 위한 전문가 꿀팁 (프리셋 저장)

위의 3단계 설정 작업조차 매번 반복하는 것은 비효율적입니다. 이 설정을 ‘프리셋(Preset)’으로 저장하여 1초 만에 불러오는 방법입니다.

  1. PNG, SVG, WebP 3가지 설정이 모두 완료된 내보내기 설정(Export Options) 패널의 우측 상단 햄버거 메뉴(줄 3개)를 클릭합니다.
  2. 드롭다운 메뉴에서 프리셋 관리자(Presets Manager)를 선택합니다.
  3. ‘내보내기 프리셋’ 창이 뜹니다. 좌측 하단의 ‘프리셋 추가’ 아이콘을 클릭합니다.
  4. 현재 설정된 3가지 포맷이 목록에 있는지 확인합니다.
  5. 프리셋 이름을 Web Default Set (PNG+SVG+WebP)처럼 알아보기 쉽게 저장합니다.

이제 다음 프로젝트부터는 100개의 슬라이스를 모두 선택한 뒤, ‘내보내기 설정’ 패널 상단에 있는 프리셋 드롭다운 메뉴를 클릭하여, 방금 저장한 Web Default Set을 선택하기만 하면 모든 설정이 1초 만에 완료됩니다.

저 역시 초기에는 PNG와 SVG를 수동으로 내보내다, 클라이언트가 WebP를 추가로 요구하면서 작업 시간이 두 배로 늘어나는 고통을 겪었습니다. 이 익스포트 페르소나의 프리셋 기능을 알게 된 후, 이 모든 과정이 1분으로 줄어들었습니다.

자주 묻는 질문 (FAQ)

질문1. 픽셀 페르소나로 칠한 텍스처가 SVG로 내보내니 사라졌습니다.

정상입니다. SVG는 벡터(Vector) 포맷입니다. 픽셀 페르소나로 칠한 래스터 브러시 텍스처나 픽셀 레이어는 SVG에 포함되지 않습니다. 픽셀 정보까지 포함하여 내보내려면 PNG나 WebP 포맷을 사용해야 합니다.

질문2. 1x, 2x 배율과 PNG, SVG, WebP를 전부 동시에 내보낼 수 있나요?

네, 가능합니다. ‘내보내기 설정’ 패널에서 + 아이콘을 계속 눌러 원하는 만큼 설정을 추가하면 됩니다. 예를 들어 1x PNG, 2x PNG, 1x SVG, 1x WebP 총 4개의 설정을 프리셋으로 만들어 두면, 슬라이스 100개 클릭 한 번에 400개의 파일을 동시에 생성할 수 있습니다.

질문3. 아이패드 버전 어피니티 디자이너에서도 똑같이 작동하나요?

100% 동일하게 작동합니다. 아이패드 화면 상단의 세 번째 페르소나 아이콘(내보내기 모양)을 탭하면, 데스크톱과 동일한 ‘슬라이스’ 패널과 ‘내보내기 설정’ 패널이 나타납니다. 여기서 프리셋을 저장하고 불러오는 모든 과정이 같습니다.

결론

어피니티 디자이너의 익스포트 페르소나는 단순한 편의 기능이 아니라, 디자이너의 작업 시간을 획기적으로 단축시켜주는 ‘워크플로우 혁신’ 그 자체입니다. 더 이상 디자인이 끝난 후, 수백 개의 파일을 수동으로 저장하고 포맷을 변환하는 고통스러운 반복 작업에 시간을 낭비하지 마십시오.

지금 바로 익스포트 페르소나를 켜고, PNG, SVG, WebP 설정을 ‘프리셋’으로 저장해 두십시오. 100개의 슬라이스가 1분 만에 300개의 파일로 변환되는 마법을 경험하는 순간, 당신의 디자인 작업은 완전히 새로운 차원으로 올라설 것입니다.

댓글 남기기