MakerBox

코드 이미지 만들기

코드 조각을 보기 좋은 공유용 PNG로 — 문법 강조, 테마, 선택형 macOS 창 프레임. 무료, 100% 브라우저 처리.

function greet(name) {
  // 이름을 받아 인사말을 만든다
  const msg = `안녕하세요, ${name}님!`;
  return msg;
}

greet("민수");

🔒 모두 브라우저에서 처리되며 코드는 업로드되지 않습니다.

코드를 공유하기 좋은 이미지로

코드를 붙여넣고 언어와 테마를 고르면 실제 문법 강조, 둥근 카드, 선택형 macOS 창 프레임이 적용된 깔끔한 이미지가 만들어집니다. 블로그·슬라이드·README·SNS에 바로 넣을 수 있습니다. 여백과 글자 크기를 조절하고 제목 표시줄에 파일명을 넣은 뒤, 1배·2배·3배 중 고른 해상도로 PNG를 내려받거나 이미지를 클립보드에 바로 복사하세요.

왜 코드를 붙여넣는 대신 이미지로?

트위터(X)·링크드인·인스타그램과 대부분의 슬라이드는 코드 서식을 깨뜨리거나 없앱니다. 스타일이 적용된 이미지는 들여쓰기·색상·레이아웃을 그대로 유지해, 단조로운 고정폭 텍스트 덩어리가 아니라 의도한 모습으로 보이게 합니다.

모든 처리는 브라우저에서 실행되어 붙여넣은 코드가 업로드되지 않으므로 비공개·미출시 작업에도 안전합니다.

자주 묻는 질문

어떤 언어를 지원하나요?

JavaScript·TypeScript·JSX·TSX·Python·CSS·HTML·JSON·Bash·Java·Go·Rust·PHP·Ruby·SQL·YAML 16가지를 Prism으로 강조하며, 그 외에는 일반 텍스트 옵션을 쓸 수 있습니다.

이미지를 바로 복사할 수 있나요?

네 — 지원되는 브라우저에서는 “이미지 복사” 버튼으로 PNG를 클립보드에 담아 글이나 채팅에 바로 붙여넣을 수 있습니다. 파일로 내려받을 수도 있습니다.

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

아니요. 문법 강조와 이미지 생성이 모두 브라우저에서 이뤄지므로 코드는 기기를 벗어나지 않습니다.

PNG 해상도는 어떻게 되나요?

1배·2배·3배 중에서 고릅니다. 기본값은 2배로 레티나 화면에서도 글자가 선명하며, 발표 슬라이드를 채울 만큼 큰 그림이 필요하면 3배, 파일 크기가 더 중요하면 1배를 고르면 됩니다.

밝은 테마도 있나요?

네 — 15가지 중 6가지가 밝은 테마입니다. GitHub Light·VS Code Light·Xcode Light·IntelliJ Light·Atom One Light·Solarized Light이며 테마 목록에서 “밝은 테마”로 묶여 있고, 어두운 테마 9가지(Dracula·One Dark·Nord·Monokai·GitHub Dark·Tokyo Night·Night Owl·Midnight·Sunset)는 “어두운 테마”에 있습니다.

인스타그램용 정사각형이나 슬라이드용 16:9로 뽑을 수 있나요?

네. 프레임에서 와이드(16:9)·컴팩트(4:3)·정사각형(1:1)을 고르면 됩니다. 기본값은 “코드에 맞춤”입니다. 프레임은 잘라내기가 아니라 최소 크기라서, 프레임보다 큰 코드는 잘리지 않고 프레임을 밀어 넓힙니다.

배경으로 내 사진을 쓸 수 있나요?

네. 배경에서 “사진”을 고르고 기기에 있는 이미지를 선택하면 카드 뒤에 깔립니다. 사진은 브라우저 안에서만 읽히며 업로드되지 않습니다. 8MB까지 받고, 긴 변이 2400px를 넘으면 내보내기가 느려지지 않도록 작게 다시 그립니다.