Source: Dev.to

Base64를 SVG로 디코딩하는 Cricut 프로젝트용 디코더 만들기

Cricut 기계는 SVG 파일을 직접 읽을 수 있지만, 때때로 디자인 툴에서 Base64 인코딩된 SVG 데이터를 복사해 붙여넣게 됩니다. 이런 경우에는 직접 디코딩해서 파일로 저장해야 합니다. 이번 포스트에서는 Node.js와 몇 가지 간단한 스크립트를 사용해 Base64 → SVG 변환 파이프라인을 만드는 과정을 단계별로 살펴보겠습니다.

---

📚 왜 Base64인가?

• 텍스트 기반: HTML, CSS, JSON 등 텍스트 파일에 직접 삽입 가능
• 전송 안정성: 바이너리 데이터를 손상 없이 전송
• 편리성: 디자인 툴(예: Figma, Adobe XD)에서 “Copy as SVG”를 하면 종종 Base64 문자열이 반환됨

하지만 Cricut 소프트웨어는 순수 SVG 파일을 요구하므로, 이 문자열을 다시 파일 형태로 변환해야 합니다.

---

🛠️ 준비물

Tip: 프로젝트 폴더를 만들고 npm init -y 로 package.json을 초기화하세요.

---

📂 프로젝트 구조

base64-to-svg/
├─ src/
│  └─ decode.js
├─ input/
│  └─ design.txt      # Base64 문자열이 들어있는 파일
├─ output/
│  └─ design.svg      # 디코딩된 결과물
└─ package.json

---

✍️ decode.js 구현

아래 코드는 Base64 문자열을 읽어 SVG 파일로 저장하는 가장 기본적인 로직입니다.

// src/decode.js
const fs = require('fs');
const path = require('path');

// 입력 파일 경로와 출력 파일 경로 정의
const INPUT_PATH = path.resolve(__dirname, '..', 'input', 'design.txt');
const OUTPUT_PATH = path.resolve(__dirname, '..', 'output', 'design.svg');

// 파일에서 Base64 문자열을 읽음
const base64Data = fs.readFileSync(INPUT_PATH, { encoding: 'utf8' }).trim();

// Data URL 형식(`data:image/svg+xml;base64,`)이 포함돼 있다면 제거
const cleanedBase64 = base64Data.replace(/^data:image\/svg\+xml;base64,/, '');

// Buffer를 사용해 디코딩하고 SVG 파일로 저장
fs.writeFileSync(OUTPUT_PATH, Buffer.from(cleanedBase64, 'base64'));

console.log(`✅ SVG 파일이 생성되었습니다: ${OUTPUT_PATH}`);

주요 포인트

1. trim() – 파일 끝에 개행 문자(\n)가 있을 경우 제거합니다.
2. 정규식 – data:image/svg+xml;base64, 프리픽스가 포함된 경우 자동으로 잘라냅니다.
3. Buffer.from(..., 'base64') – Node.js가 제공하는 가장 빠른 Base64 디코딩 메서드입니다.

---

🚀 실행 방법

node src/decode.js

성공하면 output/design.svg 파일이 생성됩니다. 이제 Cricut Design Space에 바로 업로드할 수 있습니다.

---

🧩 확장 아이디어

---

📌 마무리

Base64 → SVG 변환은 몇 줄의 코드만으로도 충분히 구현할 수 있습니다. 위 예제는 Cricut 프로젝트에 바로 적용할 수 있도록 최소한의 의존성만 사용했으며, 필요에 따라 자유롭게 확장할 수 있습니다.

핵심 요약

• Base64 문자열을 파일에서 읽고, 프리픽스를 제거한다.
• Buffer.from(..., 'base64') 로 디코딩한다.
• 디코딩된 데이터를 .svg 파일로 저장한다.

Cricut 작업 흐름에 이 스크립트를 넣어두면, 디자인 툴에서 복사한 SVG를 바로 사용할 수 있어 생산성이 크게 향상됩니다. 즐거운 메이킹 되세요! 🎉

문제

“Base64를 SVG로 변환”은 간단해 보입니다:

1. 인코딩된 문자열을 붙여넣기.
2. 디코딩하기.
3. SVG를 다운로드하기.

실제로 사용자는 다양한 종류의 입력을 붙여넣습니다:

Cricut 사용자는 인코딩에 신경 쓰지 않습니다 – Cricut Design Space에 가져올 수 있는 깨끗하고 사용 가능한 SVG 파일만 필요합니다.

“Cricut‑Ready” SVG는 무엇이 다른가?

Source: …

도구의 핵심 기능

자동 입력 감지

• 붙여넣기가 데이터 URL, 일반 Base64, 원시 SVG, 혹은 래스터 이미지인지 감지합니다.

디코딩 및 정리 (클라이언트‑사이드)

• Base64 → SVG 디코딩이 브라우저 내에서 완전히 이루어지며 서버 라운드‑트립이 없습니다.
• 정리 옵션은 다음을 제거합니다:
  • <script> 태그
  • <style> 요소
  • 주석
  • 고정된 width/height (적절한 viewBox를 추가)
  • 원치 않는 래스터 <image> 태그 (선택 사항)

프리셋‑기반 워크플로

• 사용자는 붙여넣기 → 프리셋 선택 → 미리보기 → 다운로드/복사만 하면 됩니다.
• 고급 설정은 숨겨져 있지만 파워 유저를 위해 여전히 접근 가능합니다.

미리보기 및 내보내기 옵션

• 실시간 SVG 미리보기 (확대/축소 가능).
• 다운로드: 정리된 SVG 파일.
• 복사: SVG 코드를 클립보드에 복사.
• 복사: 디코딩된 텍스트(원시 XML)를 복사.
• 보고서 내보내기 (JSON/HTML) – 감지된 문제와 수행된 작업 요약.
• 인쇄 / PDF: 문서화를 위한 보고서 출력.

래스터 이미지 처리 (백엔드)

• 입력이 Base64‑인코딩된 PNG/JPG/WEBP인 경우, 도구가 비트맵을 벡터 경로로 트레이싱합니다.
• 이 트레이싱은 CPU 집약적이므로 별도의 백엔드 서비스에서 속도 제한을 두고 실행됩니다.
• 일반 SVG 디코딩은 백엔드에 전혀 접근하지 않으며, 대부분의 사용자가 빠르게 이용할 수 있습니다.

사용자 흐름 (간소화)

1. 붙여넣기 SVG‑관련 문자열을 입력합니다.
2. 도구가 자동 감지 형식을 판단합니다.
3. 가장 가까운 프리셋을 선택 (또는 기본값 그대로 유지).
4. 결과를 즉시 미리보기합니다.
5. 필요할 경우 고급 설정을 조정합니다.
6. SVG를 다운로드하거나 코드/보고서를 복사합니다.

왜 모든 것을 클라이언트‑사이드에서 유지할까?

• 속도 – 디코딩과 정리가 즉시 이루어져 서버를 기다릴 필요가 없습니다.
• 프라이버시 – 원본 SVG가 사용자의 브라우저를 떠나지 않습니다.
• 확장성 – 일반적인 경우(일반 Base64 또는 원시 SVG)에는 백엔드 부하가 없습니다.

오직 비용이 많이 드는 래스터‑트레이싱 단계만 서버가 필요하며, 적절한 스로틀링으로 격리됩니다.

주요 설정 (Cricut 요구 사항에 맞춤)

참고: 모든 설정이 모든 프로젝트에 적합한 것은 아닙니다. 프리셋은 합리적인 기본값을 선택하며, 사용자는 이후에 세부 조정을 할 수 있습니다.

요약

Base64 → SVG for Cricut 도구는 디코더 이상의 기능을 제공합니다. 이 도구는:

• 모든 SVG 관련 입력(데이터 URL, 원시 Base64, 원시 마크업 또는 래스터 이미지)을 처리합니다.
• Cricut 요구 사항에 맞춘 즉각적인 클라이언트‑사이드 정리를 수행합니다.
• 프리셋 기반의 간편함과 고급 제어를 제공하여 파워 유저도 활용할 수 있습니다.
• 미리보기, 다운로드, 복사 및 보고 작업을 제공하여 사용자가 결과를 즉시 활용할 수 있습니다.
• 비용이 많이 드는 래스터 트레이싱 경로를 별도로 분리하고 속도 제한을 두어, 일반적인 경우 빠르고 서버 부하 없이 동작하도록 합니다.

이 모든 것이 깔끔하고 사용자 친화적인 UI에 구현되어, Cricut 디자이너가 즉시 가져올 수 있는 SVG를 최소한의 마찰로 얻을 수 있게 합니다.

Overview

페이지가 원시 개발자 도구처럼 보이기보다 실제 워크플로우 도구처럼 느껴지도록 재디자인되었습니다.

Core Idea

• Technical task: Decode Base64 into SVG.
• User task: “인코딩되었거나 지저분한 것이 있는데, 사용 가능한 Cricut SVG 파일이 필요해요.”

이 두 작업은 동일하지 않으므로, 도구가 그 간극을 메워야 했습니다.

Design Changes

• Input detection – 원시 SVG, 데이터 URL, 일반 Base64, 혹은 Base64 안에 숨겨진 래스터 이미지를 인식합니다.
• Cleanup presets – Cricut 전용 경고와 자동 수정을 제공합니다.
• Preview behavior – 디코딩된 SVG를 즉시 표시하고, 크기와 경로 수를 함께 보여줍니다.
• Actions – 다운로드와 복사 버튼을 눈에 잘 띄고 접근하기 쉽게 배치합니다.
• Advanced settings – 사용자가 명시적으로 확장하기 전까지는 접힌 상태로 유지합니다.

이러한 선택은 단순 변환기가 아니라 워크플로우‑지향 유틸리티처럼 느껴지게 합니다.

User‑Centric Content

페이지는 이제 사용자가 실제로 마주치는 문제들을 설명합니다. 예를 들어:

• 가져온 후 폰트가 바뀌는 경우.
• 벡터화가 필요한 임베디드 이미지.
• “Print‑then‑cut” 선택.
• 단색 컷 파일.
• SVG가 Cricut 사용에 충분히 깨끗한지 여부.

단순히 “Base64를 붙여넣고 SVG를 다운로드”라고 말하는 대신, 깨끗하고 Cricut‑준비된 SVG를 얻기 위해 필요한 단계들을 안내합니다.

Key Features

• Input detection – 입력 유형을 자동으로 식별하고 적절한 처리 경로를 선택합니다.
• Decoding / Tracing – Base64를 디코딩하거나, 래스터 이미지가 감지되면 트레이싱 루틴을 실행해 벡터 출력물을 생성합니다.
• Live preview – SVG를 즉시 보여주며, 크기와 경로‑수 정보를 표시합니다.
• Copy / Download – SVG 코드를 복사하거나 파일을 다운로드할 수 있는 눈에 띄는 버튼을 제공합니다.
• Collapsed advanced settings – 기본적으로 숨겨져 있으며, 고급 사용자를 위해 확장할 수 있습니다.

Takeaway

Base64‑to‑SVG는 단순 유틸리티가 사람들이 실제로 붙여넣는 지저분한 입력을 인식하고 실용적인 정리 옵션을 제공할 때 얼마나 더 유용해지는지를 보여주는 작은 예시입니다.

향후 iLoveSVG 도구들의 목표도 동일합니다: 순수 포맷 변환을 넘어 사용자가 정확히 필요한 파일을 얻을 수 있도록 돕는 작은 워크플로우‑특화 유틸리티로 나아가는 것.

Try it now: Base64 to SVG for Cricut (link placeholder)