코드 이미지 변환기

코드 이미지 변환기란?

코드 이미지 변환기는 코드 스니펫을 공유하기 좋은 이미지 — 구문 강조가 입혀진 깔끔한 코드 카드 — 로 바꿔 주는 무료 브라우저 도구입니다. 블로그 글, 슬라이드, README, SNS 게시물에 그대로 넣을 수 있습니다. JavaScript, TypeScript, Python, Go, Rust, Java, SQL 등 20종 이상의 언어를 강조하며, 코드에서 언어를 추측하는 선택형 자동 감지도 제공합니다. 7가지 테마, 프리셋 그래디언트, 사용자 지정 색·그래디언트, 투명 배경으로 카드를 꾸민 뒤 고정폭 글꼴, 글자 크기, 여백, 줄 번호, 창 제목, 출력 너비를 세밀하게 조절할 수 있습니다. 카드는 편집하는 대로 실시간으로 그려지고, 1x·2x·3x PNG로 내보내거나 SVG로 저장하거나 클립보드에 복사할 수 있습니다.

코드 이미지 변환기 사용법

1. 코드를 붙여넣거나 입력하세요. 작업공간에서는 다른 도구의 텍스트 출력을 입력 포트에 연결할 수도 있습니다.
2. 맞는 언어를 고르거나, 설정에서 자동 감지를 켜서 코드로부터 언어를 추측하게 하세요.
3. 설정에서 테마와 배경 — 프리셋 그래디언트, 사용자 지정 단색·그래디언트, 또는 투명 — 을 고르세요.
4. 고정폭 글꼴, 글자 크기, 여백, 줄 번호, 창 제목, 출력 너비를 취향에 맞게 조절하세요.
5. 편집하는 대로 미리보기가 실시간으로 갱신됩니다. 미리보기를 클릭하면 확대 보기로 크게 볼 수 있습니다.
6. 카드를 1x~3x PNG로 내보내거나, SVG로 내려받거나, 이미지를 클립보드에 복사하세요.

예시

자주 묻는 질문

어떤 언어를 강조할 수 있나요?

JavaScript, TypeScript, JSX/TSX, HTML, CSS, JSON, Python, Bash, Java, C, C++, C#, Go, Rust, Ruby, PHP, SQL, YAML, Markdown, Kotlin, Swift, GraphQL 등 20종 이상입니다. 드롭다운에서 고르거나 자동 감지를 켜서 코드로부터 언어를 추측하게 하세요.

무엇을, 어떤 화질로 내보낼 수 있나요?

1x, 2x, 3x 픽셀 밀도의 PNG로 내보내거나, 벡터 SVG로 저장하거나, 이미지를 바로 클립보드에 복사할 수 있습니다. 투명 배경을 고르면 PNG가 알파 채널을 유지해 카드 뒤에 아무 배경도 없게 됩니다.

카드 모양을 바꿀 수 있나요?

네. 7가지 테마를 전환하고, 프리셋 그래디언트·사용자 지정 단색·그래디언트·투명 배경을 고르며, 고정폭 글꼴, 글자 크기, 여백, 줄 번호, 편집 가능한 창 제목, 출력 너비를 조절할 수 있습니다.

제 코드가 어딘가로 업로드되나요?

아니요. 구문 강조(Prism)와 이미지 캡처(html-to-image)는 모두 브라우저 안에서 100% 클라이언트 측으로 실행됩니다. 코드가 업로드되거나 저희 서버로 전송되거나 공유되는 일은 전혀 없으므로, 비공개 스니펫도 기기 안에만 남습니다.

도구 페이지에서는 왜 다운로드를 눌러야 이미지가 나오나요?

단독 페이지에서는 다운로드, 이미지 복사, SVG 다운로드를 누를 때 PNG를 만들기 때문에, 입력할 때마다 이미지를 다시 캡처하지 않습니다. 스타일이 입혀진 미리보기는 실시간으로 갱신됩니다. 작업공간에서는 PNG도 자동으로 다시 생성되어 다음 도구로 흘러갑니다.