liminfo

Data URL Generator

Data URL 생성기 - SVG/텍스트를 base64 인라인 변환

Data URL Generator 소개

Data URL 인코더 & 디코더는 일반 텍스트, SVG 마크업, HTML 조각, CSS, JSON 같은 텍스트 기반 콘텐츠를 HTML src 속성, CSS url() 값, HTTP 헤더에 직접 삽입할 수 있는 data: URI로 변환합니다. Base64 인코딩(btoa + URI 안전 인코딩)과 URL 퍼센트 인코딩(encodeURIComponent) 중 하나를 선택하고, MIME 타입을 수동으로 지정하거나 자동 감지 옵션을 사용해 SVG·HTML·JSON 패턴을 자동으로 인식시킬 수 있습니다.

Data URL은 웹 개발자들이 SVG 아이콘이나 CSS 데이터 이미지 같은 소규모 애셋을 별도 네트워크 요청 없이 스타일시트나 HTML에 직접 인라인할 때 널리 사용됩니다. 설정 블롭 내장, 쿼리 문자열을 통한 콘텐츠 전달, 특정 MIME 타입의 브라우저 렌더링 테스트에도 유용합니다. 인코드 모드는 올바른 체계·MIME 타입·선택적 ;base64 플래그·인코딩된 페이로드를 포함한 완전한 data: URI 문자열을 생성하고, 디코드 모드는 붙여넣은 data: URI에서 원본 콘텐츠를 추출해 표시합니다.

모든 인코딩·디코딩은 btoa/atob 네이티브 함수와 유니코드 안전 처리를 위한 encodeURIComponent/decodeURIComponent를 조합해 브라우저 안에서 완전히 실행됩니다. 생성된 Data URL의 문자 수가 실시간으로 표시되어 대상 환경의 크기 제한을 즉시 확인할 수 있습니다. 파일, 토큰, 텍스트 콘텐츠 등 어떤 것도 브라우저 탭 밖으로 전송되지 않습니다.

주요 기능

  • 인코드 모드: 텍스트, SVG, HTML, CSS, JSON을 완전한 data: URI로 변환
  • 디코드 모드: data: URI를 붙여넣으면 원본 콘텐츠를 즉시 표시
  • 입력에서 MIME 타입 자동 감지 — SVG, HTML, JSON 패턴 자동 인식
  • Base64(btoa) 인코딩과 URL 퍼센트 인코딩(encodeURIComponent) 선택 가능
  • 수동 MIME 타입 선택: text/plain, image/svg+xml, text/html, text/css, application/json
  • 생성된 Data URL의 문자 수 실시간 표시
  • "복사됨!" 시각적 피드백이 있는 원클릭 복사 버튼
  • 100% 클라이언트 사이드 — 어떤 콘텐츠도 서버로 전송되지 않음

자주 묻는 질문

Data URL이란 무엇인가요?

Data URL(data: URI라고도 함)은 외부 리소스에 링크하는 대신 파일 콘텐츠를 문자열에 직접 내장하는 URI 체계입니다. 형식은 data:[<미디어타입>][;base64],<데이터>입니다. 웹 브라우저는 img src, CSS url(), iframe src 등 외부 URL이 허용되는 곳에서 Data URL을 렌더링할 수 있어 소규모 애셋 인라인에 유용합니다.

Base64 인코딩과 URL 인코딩의 차이는 무엇인가요?

Base64 인코딩은 바이너리 콘텐츠를 base64 알파벳을 사용해 ASCII 문자로 변환하며, Data URL에 ;base64로 표시됩니다. 결과는 원본보다 약 33% 커집니다. URL 인코딩(퍼센트 인코딩)은 특수 문자를 % 시퀀스로 대체하며 SVG나 HTML 같은 텍스트 콘텐츠에서는 보통 더 짧지만 ;base64 플래그가 붙지 않습니다.

SVG를 Data URL로 인코딩하는 방법은?

SVG 소스 코드를 입력 영역에 붙여넣으세요. 도구가 MIME 타입을 image/svg+xml로 자동 감지합니다. Base64 또는 URL 인코딩을 선택하면 즉시 완전한 data:image/svg+xml; URI가 나타납니다. 이 URI를 HTML img 태그나 CSS background-image 속성에 직접 사용할 수 있습니다.

왜 btoa 대신 encodeURIComponent와 btoa를 조합해 사용하나요?

기본 btoa() 함수는 Latin-1 문자만 처리합니다. 한국어·일본어·이모지 같은 유니코드(멀티바이트) 문자를 포함한 문자열을 안전하게 인코딩하려면, 먼저 encodeURIComponent로 퍼센트 시퀀스로 변환한 뒤 unescape()를 거쳐 btoa()에 전달합니다. 이렇게 하면 "잘못된 문자" 오류 없이 올바르게 인코딩 및 디코딩됩니다.

어떤 MIME 타입을 지원하나요?

드롭다운에서 text/plain, image/svg+xml, text/html, text/css, application/json을 선택할 수 있습니다. "자동 감지"를 선택하면 입력이 <svg, <?xml, 또는 <…html 패턴(SVG/HTML)으로 시작하는지, 또는 { / [(JSON)으로 시작하는지 확인해 적절한 MIME 타입을 자동으로 적용합니다.

Data URL에 길이 제한이 있나요?

이 도구 자체에는 제한이 없습니다. 하지만 브라우저와 환경마다 자체 제한이 있습니다. 대부분의 최신 브라우저는 최대 약 2MB의 Data URL을 지원하지만, 오래된 Internet Explorer는 32KB로 제한했습니다. 일부 브라우저의 CSS Data URL은 8KB로 제한됩니다. 대용량 애셋에는 일반 URL 참조를 사용하는 것이 거의 항상 더 적합합니다.

Data URL을 다시 텍스트로 디코딩하는 방법은?

상단의 탭에서 디코드 모드로 전환하세요. 전체 data: URI("data:"로 시작)를 입력 필드에 붙여넣으면 도구가 Base64 인코딩(;base64 존재) 여부 또는 URL 인코딩 여부를 자동으로 감지해 디코딩된 콘텐츠를 표시합니다. 결과는 복사 버튼으로 클립보드에 복사할 수 있습니다.

이미지 파일에도 사용할 수 있나요?

이 도구는 SVG, HTML, CSS, JSON, 일반 텍스트 등 텍스트 기반 콘텐츠를 인코딩합니다. PNG나 JPEG 같은 바이너리 이미지는 원시 바이트를 Base64로 인코딩해야 하며, 이는 파일 리더 방식이 필요해 이 도구의 범위를 벗어납니다. 단, SVG 이미지는 XML 텍스트이므로 이 도구로 완벽하게 처리할 수 있습니다.