코드 이미지 변환기

코드 이미지 변환기란?

코드 이미지 변환기는 코드 스니펫을 공유하기 좋은 이미지 — 구문 강조가 입혀진 깔끔한 코드 카드 — 로 바꿔 주는 무료 브라우저 도구입니다. 블로그 글, 슬라이드, README, SNS 게시물에 그대로 넣을 수 있습니다. 밋밋한 스크린샷을 붙여넣는 대신 코드를 의도적으로 보기 좋게 보여 주고 싶은 개발자, 기술 문서 작성자, 강사에게 인기가 많습니다. JavaScript, TypeScript, JSX, CSS, HTML, JSON, Python, Bash 강조 중에서 고른 뒤 테마와 그래디언트·단색 배경, 원하는 여백으로 카드를 꾸밉니다. 카드는 편집하는 대로 실시간으로 그려지고, 'PNG 다운로드' 버튼 하나로 2배 해상도로 내보냅니다.

코드 이미지 변환기 사용법

1. 에디터에 코드를 붙여넣거나 입력하세요. 작업공간에서는 다른 도구의 텍스트 출력을 입력 포트에 연결할 수도 있습니다.
2. 스니펫에 맞는 언어 — JavaScript, TypeScript, JSX, CSS, HTML, JSON, Python, Bash — 를 골라 구문 강조가 올바르게 입혀지도록 하세요.
3. 설정을 열어 테마(Midnight, Graphite, Snow), 배경(Aurora, Sunset, Ocean, Slate, 투명), 여백(좁게, 보통, 넓게)을 고르세요.
4. 입력하고 옵션을 바꾸는 대로 미리보기가 실시간으로 갱신됩니다. 미리보기를 클릭하면 확대 보기로 크게 볼 수 있습니다.
5. 'PNG 다운로드'를 누르면 카드가 고해상도 이미지로 저장되고, 작업공간에서는 PNG를 하류의 이미지 도구로 곧바로 보낼 수 있습니다.

예시

자주 묻는 질문

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

JavaScript, TypeScript, JSX, CSS, HTML, JSON, Python, Bash를 강조합니다. 언어 드롭다운에서 스니펫에 맞는 것을 고르세요. 분류되지 않는 토큰은 기본 글자색으로 표시됩니다.

어떤 이미지 형식으로 내보내나요?

선명하게 보이도록 2배 픽셀 밀도의 PNG로 내보냅니다. 투명 배경 옵션을 고르면 PNG가 알파 채널을 유지해 코드 카드 뒤에 아무 배경도 없게 됩니다.

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

네. 설정에서 Midnight, Graphite, Snow 테마를 전환하고, Aurora·Sunset·Ocean·Slate·투명 배경을 고르며, 코드 둘레 여백을 좁게·보통·넓게로 설정할 수 있습니다.

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

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

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

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