코드 이미지 만들기
문서·강의·공유에 사용할 코드 조각을 PNG 이미지로 만듭니다. 언어·테마·이미지 크기를 직접 선택하며 긴 줄은 그래핌 경계에서 줄바꿈합니다. 기기의 글꼴이 지원하면 한글과 여러 문자로 구성된 이모지를 함께 표시할 수 있습니다.
주요 기능
- JavaScript·TypeScript·JSON·Python·CSS·HTML/XML·Bash·SQL 구문 강조와 일반 텍스트
- 밝은·어두운 테마 및 원본 줄 번호 표시 선택
- 480~1,400px 이미지 폭, 글자 크기와 여백 조절
- 1배·2배 PNG 출력과 브라우저 메모리를 위한 행·픽셀 상한
- 원문·옵션 변경 시 이전 이미지를 무효화하고 새로 생성
사용 방법
- 코드를 입력하거나 예문을 불러온 뒤 언어를 선택합니다.
- 이미지 폭·글자 크기·여백·테마·줄 번호·해상도를 설정합니다.
- PNG 만들기를 누르고 미리보기와 실제 픽셀 크기를 확인합니다.
- PNG를 다운로드합니다. 원문이나 설정을 바꿨다면 다시 생성합니다.
활용 예시
- 프로그래밍 수업에 읽기 쉬운 짧은 코드 예제 넣기
- 발표 자료와 기술 글에 구문 강조한 코드 이미지 첨부
- 한글 주석·이모지가 포함된 코드 조각 공유
- 문서에 사용할 밝은 버전과 어두운 버전을 같은 설정으로 만들기
자주 묻는 질문
입력한 코드를 실행하나요?
아닙니다. 원문을 구문 강조용으로 읽고 캔버스에 그립니다. JavaScript를 평가하거나 명령을 실행하거나 입력 HTML을 실제 페이지에 붙이지 않습니다.
입력과 이미지 크기에 제한이 있나요?
입력은 JavaScript 문자열 길이 기준 12,000자, 원본 600줄 이내입니다. 자동 줄바꿈 후에도 최대 600개 표시 행을 허용합니다. 출력은 한 변 8,192px·전체 1,600만 픽셀 이내여야 하므로 긴 코드는 글자를 줄이거나 1배 해상도를 사용하세요.
긴 줄이 줄바꿈되면 줄 번호가 바뀌나요?
아닙니다. 원본 줄의 첫 표시 행에만 원래 줄 번호를 적고 이어지는 행에는 추가 번호를 붙이지 않습니다. 탭은 4문자 단위 탭 위치까지 공백으로 바꾸고 CRLF·CR 줄바꿈은 LF로 정리합니다.
색상이 나오면 문법이 올바른 코드인가요?
아닙니다. 구문 강조는 읽기 위한 시각적 안내이며 파서·컴파일러·린터 검사가 아닙니다. 비슷한 언어를 선택해도 잘못되거나 모호한 코드에 색이 붙을 수 있습니다.
한글이나 이모지가 다른 컴퓨터에서 달라 보이는 이유는 무엇인가요?
캔버스는 기기에서 사용 가능한 글꼴과 대체 글꼴을 사용합니다. 이모지 모양·글자 폭·안티앨리어싱은 기기마다 다를 수 있습니다. 다운로드한 PNG에는 현재 브라우저가 그린 모습이 고정됩니다.
입력 후 다운로드 링크가 사라진 이유는 무엇인가요?
원문이나 이미지 옵션을 바꾸면 이전 PNG를 무효화하고 임시 URL을 해제합니다. PNG 만들기를 다시 눌러 현재 설정과 일치하는 이미지를 만드세요.
개인정보 안내
코드·설정·생성 이미지는 현재 페이지 메모리에서 처리합니다. 이 도구는 이를 외부로 전송하거나 브라우저 저장소에 자동 저장하지 않습니다. PNG 다운로드를 선택할 때만 기기에 파일을 저장합니다.
댓글과 질문