코드 이미지 변환 - 코드를 아름다운 이미지로 만들기
코드 스니펫을 구문 강조가 적용된 공유 가능한 이미지로 변환. 테마, 폰트, 배경 선택 — Carbon 대안.
자주 묻는 질문
코드-이미지 변환기란 무엇이며 왜 사용하나요?
코드-이미지 변환기는 소스 코드 스니펫을 구문 강조, 테마 배경, 윈도우 크롬 장식이 적용된 시각적으로 스타일링된 이미지로 변환합니다. 개발자들은 코드 서식이 기본 지원되지 않는 소셜 미디어 플랫폼(Twitter/X, LinkedIn, Instagram)에서 코드를 공유하거나, 블로그 게시물과 문서에 시각적으로 일관된 코드 예제를 만들거나, 기술 프레젠테이션용 세련된 슬라이드를 제작하는 데 이러한 이미지를 사용합니다.
이 코드-이미지 도구는 어떻게 사용하나요?
왼쪽 편집기에 코드를 붙여넣거나 입력하고, 드롭다운에서 프로그래밍 언어를 선택하고, 구문 강조 테마(예: Dracula, GitHub Dark, Tokyo Night)를 선택하고, 배경 색상이나 그라데이션, 창 스타일, 여백, 글꼴 크기를 사용자 정의하고, 오른쪽에서 실시간 미리보기를 확인한 후, PNG 다운로드, SVG 다운로드 또는 클립보드에 복사 버튼을 클릭합니다.
내 코드는 안전한가요? 서버로 전송되나요?
코드는 100% 안전하며 브라우저를 떠나지 않습니다. 모든 구문 강조는 Shiki(JavaScript/WASM 기반 하이라이터)를 사용하여 클라이언트 측에서 수행되며, 이미지 생성은 html-to-image 라이브러리를 사용하여 스타일링된 DOM 요소를 브라우저 내에서 완전히 PNG 또는 SVG로 변환합니다. 코드, 이미지 또는 데이터가 어떤 서버로도 전송되지 않습니다.
PNG와 SVG 내보내기의 차이점은 무엇인가요?
PNG(Portable Network Graphics)는 고정 해상도에서 픽셀 기반 이미지를 생성하는 래스터 이미지 형식입니다. 이 도구는 기본적으로 레티나 품질 출력을 위해 2배 스케일로 PNG를 내보내며, 소셜 미디어, 채팅 앱, 웹 사용에 적합합니다. SVG(Scalable Vector Graphics)는 품질 손실 없이 어떤 크기로도 확대할 수 있는 벡터 형식으로, 인쇄물, 프레젠테이션, 문서에 적합합니다.
어떤 프로그래밍 언어가 지원되나요?
이 도구는 JavaScript, TypeScript, Python, Go, Rust, Java, C, C++, C#, PHP, Ruby, Swift, Kotlin, Dart, HTML, CSS, SQL, Bash, JSON, YAML 등 30개 이상의 인기 프로그래밍 언어를 지원합니다. 구문 강조는 Visual Studio Code와 동일한 TextMate 문법을 사용하는 Shiki에 의해 구동됩니다.
최고 품질의 출력을 얻으려면 어떻게 하나요?
최고 품질의 이미지를 얻으려면: 레티나 디스플레이를 위해 2x 또는 3x 내보내기 스케일을 사용하고, 좋은 대비의 테마를 선택하고(Dracula나 GitHub Dark 같은 다크 테마가 소셜 미디어에서 가장 좋습니다), 적절한 여백(48px 또는 64px)을 사용하고, 깊이감을 위해 그림자를 활성화하세요. 인쇄물이나 프레젠테이션에는 어떤 크기에서든 완벽한 스케일링을 위해 SVG로 내보내세요.
생성된 이미지를 상업적으로 사용할 수 있나요?
네, 생성한 이미지는 전적으로 여러분의 것입니다. 모든 처리가 브라우저에서 이루어지고 이 도구는 무료이며 워터마크나 브랜딩 요구사항이 없으므로, 상업용 블로그 게시물, 유료 강좌, 클라이언트 프레젠테이션, 제품 문서 등 어떤 목적으로든 출력 이미지를 사용할 수 있습니다.
어떤 테마와 사용자 정의 옵션이 있나요?
이 도구는 인기 에디터의 13개 이상 구문 강조 테마(Dracula, GitHub Dark/Light, Tokyo Night, One Dark Pro, Nord, Catppuccin, Vitesse, Ayu), 3가지 창 크롬 스타일(macOS, Windows, 없음), 색상 선택기가 있는 단색 또는 그라데이션 배경, 5가지 여백 옵션, 5가지 글꼴 크기, 여러 고정폭 글꼴, 줄 번호 토글, 그림자 토글, 선택적 워터마크 텍스트를 제공합니다.
코드 예제
// Code to Image using Shiki + html-to-image
import { codeToHtml } from 'shiki';
import { toPng, toSvg } from 'html-to-image';
// Generate syntax-highlighted HTML
async function highlightCode(code, lang = 'javascript', theme = 'dracula') {
return await codeToHtml(code, { lang, theme });
}
// Export DOM node as PNG
async function exportToPNG(node, scale = 2) {
const dataUrl = await toPng(node, {
pixelRatio: scale,
quality: 1.0,
});
const link = document.createElement('a');
link.download = 'code-snippet.png';
link.href = dataUrl;
link.click();
}
// Copy image to clipboard
async function copyToClipboard(node) {
const dataUrl = await toPng(node, { pixelRatio: 2 });
const res = await fetch(dataUrl);
const blob = await res.blob();
await navigator.clipboard.write([
new ClipboardItem({ 'image/png': blob }),
]);
}