코드 이미지 생성기

언제 사용하나요?

코드를 블로그·SNS·발표 자료에 보기 좋게 넣고 싶을 때, 텍스트로는 깨지기 쉬운 코드를 이미지로 안정적으로 공유하고 싶을 때 사용합니다.

사용 방법

• 코드를 입력창에 붙여넣습니다.
• 테마, 파일명, 글자 크기, 여백을 조정합니다.
• 미리보기를 확인하고 PNG 이미지로 다운로드합니다.

입력값 안내

이미지로 만들 코드를 붙여넣고 테마(미드나잇·그래파이트·스노우·오션), 글자 크기, 여백, 창 버튼 표시 여부를 선택합니다.

계산·변환 기준

입력한 코드를 캔버스에 고해상도(2배 배율)로 렌더링해 PNG 이미지로 만듭니다. 모든 처리는 브라우저 안에서 이루어집니다.

사용 예시

• SNS 코드 공유 - 코드 스니펫을 깨지지 않는 이미지로 만들어 SNS에 올립니다.
• 블로그·문서 삽입 - 기술 블로그나 문서에 보기 좋은 코드 이미지를 넣습니다.
• 발표 자료 제작 - 강의·발표 슬라이드에 쓸 코드 이미지를 만듭니다.

예시

• 함수 예제 코드를 미드나잇 테마 이미지로 변환
• 파일명·창 버튼을 넣어 에디터 느낌의 이미지 생성

주의사항

• 브라우저 캔버스를 이용해 이미지를 처리하므로 원본 메타데이터(EXIF)가 손실되거나 투명 영역 색상이 변할 수 있습니다.
• 브라우저 환경의 이미지 디코딩 용량 한계로 인해, 지나치게 해상도가 높은 대용량 원본 파일의 변환은 실패할 수 있습니다.

계산·사용 가이드

이미지로 공유하는 이유

코드를 텍스트로 공유하면 줄바꿈·들여쓰기가 깨지기 쉽습니다. 이미지로 만들면 어디에 올려도 형태가 유지되어 SNS·발표 자료에 적합합니다.

고해상도 출력

캔버스를 2배 배율로 렌더링해 고해상도 화면에서도 또렷한 PNG로 저장됩니다. 모든 처리는 브라우저 안에서 이루어집니다.

자주 묻는 질문

구문 강조(색상)도 되나요?

테마별 배경과 글자색을 적용하며, 토큰별 다색 강조 대신 가독성 좋은 단색 텍스트로 렌더링합니다.

이미지 화질은 어떤가요?

2배 배율로 렌더링해 고해상도 화면에서도 또렷한 PNG로 저장됩니다.

코드가 서버로 전송되나요?

아니요. 모든 변환은 브라우저 안에서 처리되며 코드는 외부로 전송되지 않습니다.

긴 코드도 가능한가요?

가능합니다. 줄 수와 가장 긴 줄에 맞춰 이미지 크기가 자동으로 조정됩니다.

관련 도구

• SVG → PNG 변환기 - SVG 코드를 Canvas에 렌더링해 PNG 이미지로 저장합니다.
• 썸네일 생성기 - 텍스트와 배경색으로 간단한 1280×720 썸네일 이미지를 만듭니다.
• OG 이미지 생성기 - 제목, 부제, 색상으로 공유용 1200×630 이미지를 생성합니다.
• JSON 포매터 - JSON 문자열을 보기 좋게 들여쓰기하거나 최소화합니다. 유효성 오류도 함께 표시합니다.
• 이미지 워터마크 추가 - 이미지 위에 텍스트나 로고 워터마크를 위치와 투명도까지 조절해 추가합니다.
• 이미지 리사이즈 - 여러 이미지를 서버 업로드 없이 브라우저에서 비율을 유지하며 리사이즈합니다. JPEG·PNG·WebP 등을 지원하며 최대 가로·세로 픽셀을 지정하면 해상도가 일괄 축소됩니다.