피클웹 블로그

Illustrator 없이 AI 파일을 웹용 SVG로 변환하는 쉬운 방법

15 일 전 89

웹디자이너나 외부 디자이너로부터 AI 파일을 전달받았지만, Adobe Illustrator (어도비 일러스트레이터)가 없어서 직접 열 수 없는 경우가 많습니다. 특히 개발자나 퍼블리셔 입장에서는 이 벡터 파일을 웹용 SVG로 변환해 사용해야 하는데, 변환 과정에서 폰트나 색상, 레이어 구조가 깨지기도 하죠. 이럴 때 유용한 방법이 바로 Inkscape(잉크스케이프)와 Figma(피그마)를 활용한 SVG 변환 및 최적화 작업입니다. 이 글에서는 Illustrator 없이도 AI 파일을 열고 웹용 SVG로 다듬어내는 실무 중심의 방법을 단계별로 소개합니다.

Illustrator 파일을 Inkscape로 여는 이유

  • Illustrator 없이도 열 수 있는 무료 대안: Inkscape는 무료 오픈소스 벡터툴로, AI 파일을 직접 열 수 있음
  • SVG로 바로 저장 가능: Plain SVG로 저장해 웹에서 바로 사용 가능한 포맷 생성
  • 벡터 구조 유지: 텍스트, 도형, 레이어 구조 그대로 보존 가능
  • Figma 호환성 확보: AI 파일은 Figma에서 직접 열 수 없으므로 중간 변환 단계로 Inkscape 활용

왜 Inkscape에서 만든 SVG를 Figma에서 다시 다듬는가?

  • 구조가 복잡하거나 불필요한 그룹이 생김: Inkscape에서 저장한 SVG는 자동 생성된 그룹(g), 클리핑 패스(clipPath), ID 등이 많이 포함됨
  • 디자인 정렬 및 여백 오류: Inkscape로 변환한 후 오브젝트 간 간격이나 정렬이 의도와 달라지는 경우가 있음
  • 폰트 및 텍스트 이슈: 텍스트가 벡터로 깨져 들어오는 경우 Figma에서 다시 텍스트로 재입력 필요
  • 웹 개발자와 협업 용이: Figma는 SVG 최적화뿐만 아니라 디자인 가이드, 스타일링 등 협업에 적합한 UI/UX 기능이 풍부

따라서, Inkscape에서는 AI 파일을 SVG로 변환하는 1차 처리만 하고, Figma에서 구조 정리, 시각적 수정, 최종 내보내기 작업까지 진행하는 것이 실무에선 가장 안정적인 방식입니다.

1. Inkscape에서 AI 파일 열기 및 SVG 저장

1-1. Inkscape 설치 및 AI 파일 열기

  1. Inkscape 설치: 공식 사이트에서 Windows, Mac, Linux 버전 다운로드
  2. AI 파일 열기: Inkscape 실행 후 파일 > 열기를 통해 .ai 파일 불러오기

1-2. 필요한 오브젝트만 선택 및 정리

  1. 불필요한 요소(배경, 안내선, 텍스트 등)를 삭제
  2. 웹에 사용할 그래픽 요소만 남기고 선택

1-3. 선택 영역에 맞게 페이지 사이즈 조정

  1. 파일 > 문서 속성(Document Properties) 메뉴 열기
  2. "페이지 크기 조정" 섹션에서 “콘텐츠에 맞게 페이지 크기 조정” 클릭
  3. "선택한 객체에 맞게 조정" 체크 후 여백(Margin)을 0으로 설정
  4. “페이지 조정” 버튼 클릭

1-4. SVG로 저장

  1. 파일 > 다른 이름으로 저장 클릭
  2. 형식 선택 시 반드시 “일반 SVG(Plain SVG)” 선택
  3. 파일명 입력 후 저장

TIP: "Plain SVG"는 웹브라우저 및 Figma에서 가장 호환성이 좋은 SVG 포맷입니다. 꼭 이 옵션으로 저장하세요!

2. Figma에서 SVG 다듬기

2-1. Figma 사용 및 SVG 가져오기

  1. Figma 접속: https://figma.com 에서 회원가입 후 로그인
  2. 웹 브라우저에서 바로 사용하거나, PC 앱 설치: Figma 다운로드 페이지에서 Windows/Mac용 데스크탑 앱 설치 가능
  3. SVG 파일을 드래그하여 캔버스에 삽입
  4. 불필요한 그룹/레이어 구조 정리
  5. 텍스트, 색상, 여백, 정렬 오류 수정

2-2. SVG 내보내기 옵션 설정

SVG로 내보내기 전에 오른쪽 패널의 Export 섹션에서 다음과 같은 설정을 확인합니다.

  • Include "id" attribute: 각 요소에 고유 ID를 부여하여, CSS나 JavaScript로 제어해야 할 경우 유용합니다. 필요 시 체크합니다.
  • Outline Text: 텍스트를 벡터(Path)로 변환하여, 웹에서 폰트가 누락되더라도 동일한 형태로 출력되게 합니다. 웹용 SVG에서는 일반적으로 체크를 권장합니다.
  • Simplify Stroke: 복잡한 선(Path)을 단순화하여 SVG 코드 용량을 줄이고 렌더링 속도를 개선합니다. 체크하는 것이 좋습니다.
  • Presentation Attributes (선택 사항): 스타일(CSS)을 인라인 속성으로 처리하여 SVG 구조를 간단하게 만들 수 있습니다. 코드 가독성이 중요할 때 사용합니다.

모든 설정을 확인한 후 "Export [파일명].svg" 버튼을 눌러 SVG 파일을 저장합니다.

3. 웹 최적화를 위한 SVG 정리

이 단계는 선택 사항입니다. SVG 파일을 직접 HTML에 인라인 삽입하거나, 성능에 민감한 페이지(예: 메인 배너, 아이콘 등)에 사용하는 경우에는 최적화가 권장됩니다. 하지만 단순 이미지로 사용하거나, Figma에서 내보낸 SVG가 충분히 가볍다면 꼭 수행할 필요는 없습니다.

  1. SVGOMG(https://jakearchibald.github.io/svgomg/) 등 최적화 툴 사용
  2. 불필요한 <title>, <metadata>, id 정리
  3. Precision(정밀도)은 2~3 설정 권장

참고 사이트

..Illustrator 없이 AI 파일을 웹용 SVG로 변환하는 쉬운 방법