본문으로 건너뛰기
Toolars
둘러보기
버그 신고

개발자 · 로컬 유틸리티

코드 → 이미지 변환

Code to Image Converter

여섯 가지 언어의 코드를 구문 강조해 밝은·어두운 테마, 줄번호, 창 제목, 1x/2x 배율로 PNG나 SVG로 내보냅니다.

작업 경로 / 입력에서 결과까지

코드 붙여넣기

로컬에서 실행 · 업로드 없음

코드 → 이미지 변환 사용법, 개인정보 보호 및 관련 도구

작업 경로 / 입력에서 결과까지

코드를 공유용 이미지로 변환하는 방법

  1. 01

    코드 붙여넣기

    「코드 소스」 필드에 코드를 입력하거나 붙여넣으세요. 최대 65,536 UTF-8 바이트, 200줄, 줄당 240자까지 가능합니다. 레이블 옆 카운터가 현재 바이트 수와 한도를 보여 주고, 한도를 넘으면 어떤 한도인지 알려 주는 메시지와 함께 거부되므로 무엇을 줄여야 할지 정확히 알 수 있습니다.

  2. 02

    언어와 테마 고르기

    「언어」에서 JavaScript, TypeScript, HTML, CSS, JSON, Bash 중 하나를 고르고, 「테마」를 「라이트」 또는 「다크」로 설정하세요. 구문 색상은 해당 Shiki 문법과 GitHub 스타일 테마에서 가져오고, 「샘플 불러오기」를 누르면 선택한 언어의 짧은 예시가 채워져 직접 붙여넣기 전에 모습을 비교해 볼 수 있습니다.

  3. 03

    프레임 꾸미기

    「배경」 색상, 「안쪽 여백」(16~96px), 「글꼴 크기」(12~28px)를 설정하고, 80자 이하의 「창 제목」을 입력하세요. 필요에 따라 「줄 번호 표시」를 전환하고 출력 배율을 1x 또는 2x로 고르세요. 줄 높이는 글꼴 크기를 자동으로 따라가므로 큰 글자도 추가 조정 없이 읽기 쉬워요.

  4. 04

    미리보기 생성하기

    생성 시 로컬 토크나이저를 불러와 실제 글꼴과 창 제목을 측정하고 내보내기에 쓰는 동일한 이스케이프 처리 SVG를 표시합니다. 코드는 실행하지 않고 텍스트로만 취급합니다. 편집하면 이전 미리 보기가 지워지며 한도를 넘거나 측정할 수 없으면 출력하지 않습니다. 넓은 미리 보기는 키보드로 스크롤할 수 있습니다.

  5. 05

    SVG 또는 PNG 다운로드

    확장 가능한 벡터가 필요하면 「SVG 다운로드」, 비트맵이 필요하면 「PNG 다운로드」를 사용하세요. PNG는 선택한 배율로 Canvas를 거쳐 렌더링됩니다. 두 파일 모두 로컬에서 생성되고, 선택한 조합이 안전한 출력 크기를 넘으면 깨진 파일을 쓰는 대신 워크스페이스가 알려 줍니다.

도구 요약

처리
브라우저에서 완결
입력의 기기 외 전송
없음
저장
아무것도 저장하지 않음
가격
무료

입력 값은 브라우저에 머물러요.

코드 → 이미지 변환 도구는 검증된 로컬 실행 경로를 사용하고, 숨겨진 입력 또는 출력 기록을 만들지 않습니다.

로컬 실행

현재 브라우저 탭 안에서 실행됩니다.

숨겨진 처리 없음

사용 중인 도구 데이터는 Toolars 문서 기록으로 남지 않습니다.

계정 불필요

프로필을 만들지 않고도 핵심 워크플로를 사용할 수 있습니다. 즐겨찾기는 로그인 후 계정에 동기화됩니다.

즉시 초기화

탭을 정리하면 사용 중이던 작업 데이터도 사라져요.

코드 → 이미지 변환 도구가 유용할 때

두 줄 코드를 이미지로 내보내기

두 줄 const total = 2 + 3;와 console.log(total);(UTF-8 40바이트)를 입력하세요. JavaScript, 다크, 배경 #111827, 패딩 64 px, 글자 16 px, 줄 번호 켜기, 제목 sum.js, 1×를 선택합니다. 2026-09-24 로컬 브라우저 시험에서 미리보기 생성 후 받은 toolars-code-image.png는 406 × 270픽셀, 12,784바이트였습니다. 이미지는 코드를 보여 줄 뿐 실행하지 않습니다.

1×, 2×, SVG 비교

코드와 설정을 유지하고 2×로 바꾼 뒤 다시 생성해 PNG를 받으세요. 2026-09-24 파일은 812 × 540픽셀, 31,366바이트였습니다. 1×에서 받은 toolars-code-image.svg는 1,647바이트, viewBox는 406 × 270입니다. 배율은 PNG 픽셀만 바꾸며 코드는 바꾸지 않습니다. 크기와 바이트 수는 글꼴·브라우저에 따라 달라질 수 있고, 글꼴을 포함하지 않은 SVG는 다르게 보일 수 있습니다.

빈 입력에서 복구

코드 소스를 비우고 미리보기를 생성하면 코드 입력 안내가 나오고 두 다운로드가 비활성화됩니다. 같은 두 줄을 다시 붙여 넣고 재생성하세요. 수정하면 이전 미리보기가 지워집니다. 출력이 한 변 4,096픽셀을 넘으면 1×나 더 작은 패딩·글꼴을 시도하세요.

코드 → 이미지 변환 도구가 실제로 하는 일

잘 짠 함수는 릴리스 노트에 실릴 자격이 있고, 오래 고민한 코드 조각은 사내 위키의 삽화가 되기 좋고, 발표 슬라이드에는 탭이 잘린 스크린샷보다 스타일이 잡힌 코드 조각이 어울려요. 코드 → 이미지 변환은 줄 번호와 창 제목이 달린 세련된 프레임으로 코드를 만들어 주고, 내보낸 SVG나 PNG는 손질 없이 슬라이드, 문서, 채팅에 바로 들어가요. 토큰화와 렌더링이 모두 이 탭 안에서 이뤄지므로, 공개되지 않은 소스 코드가 어딘가로 전송되지 않습니다.

자주 묻는 질문

슬라이드용 JavaScript 이미지는 어떻게 만드나요?
const total = 2 + 3;을 입력하고 JavaScript, 밝은 테마, 1x를 선택합니다. 미리보기를 생성한 후 PNG를 다운로드합니다. 이미지에는 결과 5가 아닌 코드가 표시됩니다. 코드를 실행하지 않습니다. 더 큰 이미지가 필요하면 2x로 바꾸고 다시 생성하세요. 너비와 높이가 각각 두 배가 됩니다.
JSON 예제를 SVG로 내보내려면 어떻게 하나요?
{"ok":true}를 입력하고 JSON을 선택한 뒤 미리보기를 생성합니다. 크기를 조절할 코드 그림에는 SVG를, 렌더링된 모습을 유지하려면 PNG를 다운로드합니다. 텍스트를 수정하면 이전 미리보기가 지워지므로 다시 생성해야 합니다. 이미지 내보내기이며 JSON 검증 결과가 아닙니다.
입력 한도는 어느 정도인가요?
코드는 최대 65,536 UTF-8 바이트, 200줄, 줄당 240자까지이고 창 제목은 80자 이하여야 합니다. 출력 이미지는 한 변 최대 4,096픽셀, 총 16,777,216픽셀로 제한됩니다. 어느 하나라도 넘으면 구체적인 메시지와 함께 거부됩니다.
코드가 업로드되거나 실행되나요?
둘 다 아니에요. Shiki 토크나이저는 「미리보기 생성」을 눌렀을 때만 이 탭 안에서 로드되고, 미리보기는 주입된 HTML이 아니라 텍스트 토큰으로 구성됩니다. 소스는 어디로도 전송되지 않고, 워크스페이스를 지우면 남지 않습니다.
어떤 언어와 테마를 쓸 수 있나요?
JavaScript, TypeScript, HTML, CSS, JSON, Bash의 여섯 언어로, 각각 전용 Shiki 문법으로 토큰화됩니다. 「라이트」와 「다크」 테마는 GitHub 스타일 팔레트이고, 「배경」 색상 컨트롤은 고른 테마와 별개로 카드 주변의 프레임을 꾸밀 수 있습니다.
출력 배율은 무엇을 바꾸나요?
1x는 측정된 이미지 크기를 사용합니다. 2x는 너비와 높이를 각각 두 배로 늘려 PNG 픽셀 수가 네 배가 되지만 코드의 세부 정보나 텍스트는 바꾸지 않습니다. 두 배율 모두 내보내기 한도가 적용됩니다. 한도를 넘으면 배율을 낮추세요.
SVG와 PNG 중 무엇을 받아야 하나요?
PNG는 여기서 렌더링한 픽셀을 유지합니다. SVG는 확대할 수 있지만 글꼴을 업로드하지 않으면 시스템 글꼴에 의존하여 다른 기기에서 모양이 달라질 수 있습니다. 검증된 업로드 글꼴은 전체가 포함되며 대상 뷰어도 포함 글꼴을 지원해야 합니다. 같은 외관이 필요하면 PNG를 선택하세요.
설정을 바꿨더니 미리보기가 사라진 이유는요?
의도된 동작입니다. 코드, 언어, 테마, 배경, 안쪽 여백, 글꼴 크기, 제목, 줄 번호, 배율 중 무엇이든 수정하면 오래된 이미지를 보여 주는 대신 미리보기를 무효화합니다. 「미리보기 생성」을 다시 누르면 업데이트된 프레임이 그려져요.
어떤 글꼴을 포함할 수 있나요?
TTF/OTF, 최대 24 MiB. 포함할 권한이 있는 글꼴을 선택하세요. 포함 제한이 없는 정적 윤곽선 글꼴만 지원하며 가변·컬러 글꼴은 지원하지 않습니다. 전체 글꼴을 SVG에 포함하고 글자가 없으면 생성을 중단합니다. 파일은 업로드하지 않습니다. 선택하지 않으면 시스템 글꼴을 사용합니다.

함께 읽기

개발자 카테고리에서 계속하기

막다른 길이 아니라 이어지는 작업입니다.

전체 인덱스로 돌아가지 않고 다른 집중 워크스페이스로 바로 이동합니다.

URL 슬러그 생성기

URL Slug Generator

제목을 하이픈·밑줄 슬러그로 입력하는 즉시 변환합니다. 악센트는 제거하고 앰퍼샌드는 확장하며 비라틴 문자는 보존합니다.

생성

React Native 그림자 생성기

React Native Shadow Generator

React Native의 기존 그림자와 boxShadow를 비교하고 플랫폼 제한을 확인한 뒤 스타일을 복사하세요.

생성

Base64 인코딩 / 디코딩

Base64 Encoder/Decoder

Unicode 텍스트 인코딩과 Base64 디코딩을 로컬에서 처리합니다. URL-safe 값도 지원합니다.

변환

HTML 인코딩 / 디코딩

HTML Encoder/Decoder

마크업을 깨는 다섯 문자를 이스케이프하거나 명명·숫자 엔티티를 텍스트로 되돌립니다. 한 번 클릭으로 왕복 검증, 로컬 처리.

변환