techlist.io
KR EN
figma

피그마의 새로운 SVG 내 (새 탭에서 열림)

figmavector-graphicssvgandroid-studiosvgosvg-export

Figma는 SVG에 정보를 최대한 많이 담는 방식보다, 단순하고 작은 마크업이 다양한 도구와 더 잘 호환된다는 결론에 도달했다. 새 SVG Exporter는 불필요한 구조와 중복을 제거하고, 기본 도형과 간결한 경로를 사용해 파일 크기와 가독성, 호환성을 개선했다. 특히 Android Studio처럼 SVG 일부 기능만 지원하는 도구에서도 더 안정적으로 가져올 수 있도록 설계했다.

SVG가 도구마다 다르게 렌더링되는 이유

  • SVG는 JPG·PNG와 달리 픽셀 이미지가 아니라 화면에 이미지를 그리는 명령어로 구성된 벡터 형식이다.
  • 확대해도 선명하기 때문에 로고, 아이콘, 반응형 웹 자산에 적합하다.
  • 하지만 SVG 마크업을 픽셀로 변환하는 표준 렌더링 방식은 없다.
  • 각 디자인 도구와 개발 도구가 자체 SVG 파서와 렌더러를 사용하며, SVG 사양 전체가 복잡해 많은 도구가 일부 기능만 지원한다.
  • 예를 들어 defs에 정의한 요소를 use로 재사용하는 기능은 Android Studio에서 대부분 제대로 지원되지 않는다.
  • Figma의 기존 SVG는 복잡한 그룹, 마스크, 클리핑 패스, 중복 참조 때문에 파일이 크고 사람이 읽기 어려웠다.
  • 사용자들은 SVGO, svgito 같은 후처리 도구를 사용하거나 SVG를 직접 정리해야 했다.

“모든 정보를 보존하자”는 기존 접근의 한계

  • Figma는 디자인 도구 간 SVG 교환이 보편적인 데이터 형식이 되기를 기대했다.
  • 그래서 다른 도구가 디자인을 정확하게 가져갈 수 있도록 SVG에 가능한 한 많은 구조적 정보를 포함했다.
  • 그러나 실제 생태계에서는 도구마다 지원 범위와 구현 품질이 달랐다.
  • 결과적으로 더 많은 정보가 정확성을 보장하기보다, 일부 도구에서는 import 실패와 파일 비대화의 원인이 됐다.
  • 새 Exporter는 이상적인 상호 운용성보다 실제 사용 환경에서의 호환성과 단순성을 우선한다.

기본 도형을 SVG 프리미티브로 표현

  • 단순한 사각형과 원을 복잡한 path 명령어로 표현하지 않고 SVG의 기본 도형 요소를 사용한다.

  • 기존 방식:

    <path d="M0 100V0H100V100H0Z"/>

  • 변경된 방식:

    <rect width="100" height="100"/>

  • rect, circle 같은 요소는 의미가 명확해 사람이 읽고 수정하기 쉽다.

  • 마크업 길이도 줄어들어 파일 크기와 처리 부담을 낮춘다.

내부선과 외부선 처리 방식 개선

  • SVG의 기본 stroke는 도형 경계의 중앙에만 그려진다.
  • 디자인 도구에서 지원하는 내부선(inside stroke)이나 외부선(outside stroke)을 표현하려면 별도 우회가 필요하다.
  • 기존 Figma 방식은 stroke 폭을 두 배로 늘린 뒤 mask로 불필요한 절반을 숨겼다.
  • 이 방식은 mask, 중복 경로, 추가 참조를 만들어 SVG를 복잡하게 만들었다.
  • 새 방식은 도형의 좌표 자체를 조정한다.
    • 내부선은 도형의 경계를 안쪽으로 이동한 뒤 원래 stroke 폭을 사용한다.
    • 외부선도 시각적 결과에 맞도록 경로 위치를 조정한다.
  • 따라서 마스크 없이도 유사한 시각적 결과를 얻고 마크업을 크게 줄일 수 있다.

불필요한 마크업 제거

  • 렌더링에 직접 영향을 주지 않는 요소와 속성을 제거한다.
    • title
    • desc
    • 불필요한 g
    • id
    • version
  • 클리핑도 항상 출력하지 않고 실제로 필요할 때만 생성한다.
  • 기존에는 클리핑 여부와 관계없이 프레임에 clipPath를 넣었지만, 새 방식은 효과가 없는 마크업을 생략한다.
  • defs에 요소를 정의하고 use로 참조하던 구조도 가능한 경우 인라인 요소로 바꾼다.
  • 중복 제거 효과는 일부 포기하지만, 여러 SVG importer가 더 안정적으로 처리할 수 있고 구조가 훨씬 단순해진다.

최종 결과

  • 작은 검은색 사각형과 회색 내부선을 표현하는 기존 SVG는 여러 단계의 그룹, 클리핑 패스, 마스크, use 참조로 구성됐다.

  • 새 SVG는 다음처럼 단일 rect 요소와 속성만으로 표현된다.

    <svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
  <rect x="15" y="15" width="70" height="70" fill="black" stroke="#CCCCCC" stroke-width="10"/>
</svg>

  • 결과적으로 SVG가 더 작고, 읽기 쉽고, 직접 수정하기 쉬워졌다.

  • Android Studio 같은 제한적인 SVG 지원 환경과의 호환성도 개선됐다.

Figma의 사례는 SVG를 생성할 때 정보와 추상화를 무조건 많이 보존하기보다, 실제 소비 도구가 안정적으로 이해할 수 있는 최소한의 마크업을 사용하는 것이 실용적임을 보여준다. SVG를 배포할 때는 기본 도형, 단순한 경로, 필요한 경우에만 사용하는 마스크·클리핑을 우선하고, SVGO 같은 최적화 도구로 후처리하는 것도 유용하다.