n8n에서 SVG를 React 컴포넌트로 자동 변환하기, n8n-nodes-svgr

들어가며: SVG 파일 하나 React로 바꾸려고 했을 뿐인데

프론트엔드 개발을 하다 보면 이런 상황이 반복됩니다.
"디자이너가 SVG 아이콘 100개를 줬는데, 이걸 언제 다 React 컴포넌트로 바꾸지?"

SVGR CLI로 하나씩 변환하면 번거롭고, webpack 설정을 건드리면 기존 빌드가 깨질 수 있고, 매번 수동으로 변환하면 시간이 낭비됩니다.
그러다 문득 깨달았습니다.

"n8n으로 자동화하면 되는 거 아닌가?"

n8n. 워크플로우 자동화 플랫폼. 노드를 연결해서 데이터를 처리.
이걸로 SVG → React 변환을 자동화하면 되는 거 아닌가?
그래서 직접 만들었습니다. n8n-nodes-svgr.

1. 왜 이 프로젝트를 만들었나

1.1. 기존 솔루션의 한계

SVG를 React 컴포넌트로 변환하는 도구는 이미 많습니다. 하지만 각각 아쉬운 점이 있었습니다.

첫째, "SVGR CLI는 자동화가 어려워요"

SVGR은 훌륭한 도구입니다. 하지만 CLI 명령어를 매번 실행해야 합니다. 새 SVG가 추가될 때마다 수동으로 변환하고, 옵션을 기억해서 일관성 있게 적용해야 합니다.

둘째, "n8n Cloud에서는 외부 패키지를 못 써요"

n8n의 코드 노드에서 SVGR 패키지를 직접 사용하면 좋겠지만, n8n Cloud에서는 보안상의 이유로 외부 npm 패키지를 설치할 수 없습니다. 셀프호스팅에서만 가능한 방법입니다.

셋째, "기존 n8n 커뮤니티 노드가 없어요"

n8n 커뮤니티 노드 목록을 찾아봤지만, SVG를 React로 변환하는 노드는 없었습니다. 직접 만들어야 했습니다.

넷째, "React Native까지 지원하는 솔루션이 드물어요"

웹용 React 컴포넌트는 쉽게 만들 수 있지만, React Native SVG 형식으로 변환하려면 추가 작업이 필요합니다. <svg>를 <Svg>로, <path>를 <Path>로 바꿔야 합니다.

1.2. 내가 원했던 것

정리하면 이렇습니다:

• n8n 워크플로우에서 바로 SVG를 React로 변환할 수 있을 것
• n8n Cloud에서도 문제없이 동작할 것
• TypeScript 타입도 자동으로 생성될 것
• SVG 최적화도 함께 처리될 것
• React Native도 지원할 것
• 접근성(Accessibility)까지 고려할 것

n8n 커뮤니티 노드 + 자체 구현한 SVGR + 커스텀 SVGO

이 조합이면 다 해결됩니다.

2. n8n-nodes-svgr 핵심 기능

2.1. 기본 변환 기능

2.1.1. 간단한 사용법

n8n 워크플로우에 SVGR 노드를 추가하고, SVG 코드를 입력하면 끝입니다.

입력:

출력:

별도의 설정 파일을 만들 필요가 없습니다. 노드에서 옵션을 선택하면 됩니다.

2.1.2. HTML → JSX 자동 변환

SVG는 HTML 기반이지만, React에서는 JSX 문법을 사용합니다. 속성명이 다릅니다.

이런 변환을 자동으로 처리합니다. 20개 이상의 속성을 자동 변환합니다.

2.1.3. 컴포넌트명 커스터마이징

기본 컴포넌트명은 SvgComponent입니다. 원하는 이름으로 바꿀 수 있습니다.

2.2. TypeScript 지원

2.2.1. TypeScript 타입 자동 생성

typescript 옵션을 켜면 완전한 TypeScript 코드가 생성됩니다.

SVGProps<SVGSVGElement> 타입이 자동으로 추가됩니다. IDE에서 자동완성이 제대로 동작합니다.

2.2.2. forwardRef와 memo 지원

성능 최적화나 ref 접근이 필요할 때 사용합니다.

ref 옵션:

memo 옵션:

두 옵션을 함께 사용하면 forwardRef와 memo가 모두 적용됩니다.

2.3. 접근성(Accessibility) 기능

2.3.1. titleProp 옵션

titleProp을 켜면 <title> 요소와 aria-labelledby 속성이 추가됩니다.

사용할 때:

2.3.2. descProp 옵션

descProp을 켜면 <desc> 요소와 aria-describedby 속성이 추가됩니다.

두 옵션을 함께 사용하면 WCAG 접근성 가이드라인을 충족하는 컴포넌트가 생성됩니다.

2.4. React Native 지원

2.4.1. native 옵션

native 옵션을 켜면 react-native-svg 호환 코드가 생성됩니다.

자동 변환되는 요소들:

20개 이상의 SVG 요소를 자동 변환합니다. import 문도 사용된 요소만 포함됩니다.

2.5. SVG 최적화 (SVGO)

2.5.1. 27개 최적화 플러그인

svgo 옵션을 켜면 SVG가 자동으로 최적화됩니다. 27개의 플러그인을 직접 구현했습니다.

문서 정리 (5개):

• DOCTYPE 제거
• XML 선언 제거
• 주석 제거
• 메타데이터 제거
• 편집기 네임스페이스 제거 (Inkscape, Sketch, Illustrator, Figma)

속성 정리 (5개):

• 빈 속성 제거
• 미사용 네임스페이스 정리
• ID 정리 및 최소화
• ID 접두사 추가 (충돌 방지)
• 불필요한 공백 정리

요소 제거 (6개):

• title 요소 제거
• desc 요소 제거
• 숨겨진 요소 제거
• 빈 컨테이너 제거
• 빈 텍스트 요소 제거
• 참조되지 않는 defs 내용 제거

스타일 최적화 (4개):

• 색상 최적화 (rgb → hex, 색상명 변환)
• 스타일 압축
• 인라인 스타일 처리
• 중복 스타일 병합

숫자 최적화 (1개):

• 불필요한 소수점, 단위 정리

그룹 최적화 (3개):

• 불필요한 그룹 제거
• 공통 속성을 부모로 이동
• 그룹 속성을 자식으로 이동

경로 최적화 (4개):

• Path 데이터 최적화
• Transform 단순화
• 기본 도형 → Path 변환
• 연속 Path 병합

2.5.2. 최적화 전후 비교

최적화 전 (Figma에서 내보낸 SVG):

최적화 후:

XML 선언, 주석, 메타데이터, 불필요한 그룹, 긴 숫자, 전체 색상 코드가 모두 정리되었습니다.

2.6. 속성 커스터마이징

2.6.1. replaceAttrValues 옵션

특정 속성값을 다른 값으로 치환합니다. 가장 흔한 사용 사례는 하드코딩된 색상을 currentColor로 바꾸는 것입니다.

변환 전:

변환 후:

이렇게 하면 CSS의 color 속성으로 아이콘 색상을 제어할 수 있습니다.

2.6.2. svgProps 옵션

SVG 루트 요소에 커스텀 속성을 추가합니다.

변환 결과:

접근성이나 특정 프레임워크 요구사항에 맞게 속성을 추가할 수 있습니다.

2.6.3. expandProps 옵션

{...props} 전개 위치를 제어합니다.

• end (기본): SVG 속성 끝에 전개 → props로 기본 속성 덮어쓰기 가능
• start: SVG 속성 시작에 전개 → 기본 속성이 props보다 우선
• none: 전개 비활성화 → props 전달 불가

3. 기술 스택과 아키텍처

3.1. 기술 스택 한눈에 보기

3.2. 프로젝트 구조

3.3. 핵심 모듈 설명

3.3.1. Svgr.node.ts - 노드 인터페이스

n8n에 표시되는 노드의 UI와 실행 로직을 정의합니다.

3.3.2. svgTransformer.ts - 변환 엔진

SVG를 React 컴포넌트로 변환하는 핵심 로직입니다. 파이프라인 아키텍처로 구현했습니다.

각 단계가 독립적이어서 테스트와 유지보수가 쉽습니다.

3.3.3. svgo.ts - 최적화 플러그인

27개의 SVG 최적화 플러그인을 정규식 기반으로 직접 구현했습니다.

외부 SVGO 라이브러리 없이 동작하기 때문에 n8n Cloud에서도 문제없이 사용할 수 있습니다.

4. 개발 과정에서의 고민들

4.1. 왜 SVGR 패키지를 직접 사용하지 않았나

처음에는 SVGR 라이브러리를 n8n 노드에서 직접 import하려고 했습니다. 하지만 문제가 있었습니다:

• SVGR은 내부적으로 @svgr/core, @svgr/plugin-jsx, @svgr/plugin-svgo 등 여러 패키지에 의존
• 이 패키지들이 다시 svgo, cosmiconfig, camelcase 등에 의존
• n8n Cloud는 커뮤니티 노드에서 외부 의존성 사용을 제한

해결: 핵심 변환 로직만 TypeScript로 직접 구현

결과적으로 의존성 0개로 n8n Cloud에서도 완벽하게 동작합니다.

4.2. SVGO를 왜 직접 구현했나

SVGO도 마찬가지로 외부 패키지를 사용할 수 없었습니다. 그래서 27개 플러그인을 정규식으로 직접 구현했습니다.

처음에는 걱정이 있었습니다.
"정규식으로 XML을 파싱하는 게 안전할까?"

하지만 SVG는 구조가 예측 가능하고, 최적화 플러그인 대부분은 단순 패턴 매칭으로 충분했습니다.

반복 처리로 중첩된 케이스도 안전하게 처리합니다.

4.3. 테스트 전략

변환 로직이 복잡해서 테스트가 중요했습니다. Vitest로 유닛 테스트를 작성했습니다.

SVGO 테스트만 48개 케이스를 작성해서 각 플러그인이 정확히 동작하는지 검증했습니다.

4.4. React 17+ JSX Transform 지원

React 17부터 새로운 JSX Transform이 도입되어 import React from 'react'가 필요 없어졌습니다.

해결: jsxRuntime 옵션 추가

automatic 모드에서는 React import가 생략됩니다. 단, forwardRef나 memo를 사용하면 해당 함수만 import합니다.

4.5. 다크 모드 아이콘 지원

n8n 인터페이스는 라이트/다크 모드를 지원합니다. 노드 아이콘도 두 가지 버전이 필요했습니다.

해결: Svgr.node.json에 테마별 아이콘 정의

5. 사용해보기

5.1. 설치 방법

n8n Cloud:

1. Settings → Community Nodes 이동
2. n8n-nodes-svgr 검색
3. Install 클릭

Self-hosted:

소스에서 빌드:

5.2. 기본 사용법

1. 워크플로우에 SVGR 노드 추가
2. SVG Code 필드에 SVG 코드 입력
3. Component Name 설정 (기본: SvgComponent)
4. 필요한 옵션 설정
5. 노드 실행

5.3. 출력 데이터

노드 실행 결과는 다음 필드를 포함합니다:

5.4. 워크플로우 예시

디자인 시스템 아이콘 자동 변환 워크플로우:

디자이너가 Google Drive에 SVG를 업로드하면, 자동으로 React 컴포넌트로 변환되어 GitHub에 커밋됩니다.

6. 향후 계획

6.1. 기능 확장

단기:

• SVG 스프라이트 생성 지원
• 배치 변환 (여러 SVG 한 번에 처리)
• 템플릿 커스터마이징

중기:

• Vue 컴포넌트 출력 지원
• Svelte 컴포넌트 출력 지원
• CSS-in-JS 스타일 지원 (styled-components, emotion)

장기:

• AI 기반 SVG 최적화 추천
• 디자인 토큰 자동 연동
• Figma 플러그인 연동

6.2. 문서 개선

• 더 많은 사용 예제 추가
• 비디오 튜토리얼 제작
• 트러블슈팅 가이드

7. 마치며

"외부 패키지? n8n Cloud 제한? 그런 거 없습니다."

의존성 0개로 동작하는 SVGR 노드입니다.

• n8n Cloud 완벽 지원
• 27개 SVGO 최적화 플러그인 내장
• React, TypeScript, React Native 모두 지원
• 접근성(A11y) 기능 내장
• 상세한 한글/영문 문서

복잡한 설정 없이, 노드 하나로 SVG를 React 컴포넌트로 자동 변환하세요.
"반복 작업은 자동화한다."
n8n-nodes-svgr와 함께 더 중요한 일에 집중하세요.

부록: 옵션 전체 목록

A. 기본 옵션

B. 코드 생성 옵션

C. 컴포넌트 옵션

D. 접근성 옵션

E. Props 옵션

이 글이 도움이 되셨다면, 비슷한 고민을 하는 개발자 친구에게 공유해 주세요.

"반복 작업은 자동화한다"는 철학에 공감하신다면, n8n과 함께 직접 자동화 워크플로우를 만들어보세요.