Softonic

코드를 이미지로

단계 1 / 2

코드 조각을 붙여 넣고 네 가지 기본 테마 중 하나를 고른 뒤 색상, 글꼴 크기, 여백, 선택형 헤더, 줄 번호를 조정하고 브라우저 canvas에서 그린 PNG를 다운로드하세요. 이 도구는 일반 텍스트를 그리므로 깔끔한 코드 이미지에는 적합하지만, 언어를 분석하거나 구문 강조를 추가하지는 않습니다.

코드 PNG 만드는 방법

  1. 1

    코드 조각 붙여 넣기

    JavaScript, HTML, CSS, JSON, shell 명령 또는 다른 일반 텍스트를 코드 입력란에 넣으세요. 렌더러는 처음 400줄까지만 사용합니다.

  2. 2

    모양 설정하기

    Dark, Light, Dracula, Solarized 중에서 선택한 다음 제목, 글꼴 크기, 여백, 배경, 텍스트, 강조 색상을 조정하세요.

  3. 3

    canvas 확인하기

    브라우저가 각 줄을 canvas 텍스트로 그립니다. 창 스타일 헤더와 줄 번호는 선택 사항입니다. 긴 줄은 canvas를 내장 최대 너비까지 넓힐 수 있습니다.

  4. 4

    PNG 다운로드

    현재 canvas를 문서, 메모, 슬라이드 또는 게시물에 쓸 PNG 이미지로 내보냅니다. SVG, JPEG, HTML 내보내기는 없습니다.

렌더러가 하는 일

컨트롤 바꿀 수 있는 항목 참고
테마 Dark, Light, Dracula, Solarized 각 테마는 배경, 텍스트, 강조 색상의 초기값을 설정합니다.
텍스트 스타일 제목, 글꼴 크기, 여백 글꼴 크기는 10–40 px, 여백은 20–200 px로 제한됩니다.
색상 배경, 텍스트, 강조 강조 색상은 줄 번호에 사용됩니다.
헤더 창 스타일 헤더 켜기 또는 끄기 켜면 제목이 헤더에 표시됩니다.
줄 번호 표시 또는 숨기기 번호는 일반 canvas 텍스트로 그려집니다.
내보내기 PNG 다운로드 다운로드 버튼은 현재 canvas를 PNG 이미지로 저장합니다.

실제 제한

  • 브라우저는 Canvas API로 코드 조각을 일반 텍스트로 그립니다. JavaScript, Python, HTML 또는 다른 언어를 감지하지 않습니다.
  • 매우 큰 파일이 페이지를 멈추지 않도록 미리보기는 처음 400줄을 사용합니다.
  • canvas 너비는 420 px에서 2200 px 사이로 유지됩니다. 매우 긴 줄은 최대 너비에 도달할 수 있습니다.
  • 두 단계 버전은 편집에서 다운로드로 이동하는 동안 현재 브라우저 탭의 입력값을 sessionStorage에 저장합니다.

접근성 참고

이미지 안의 코드는 검색하거나 복사할 수 없고 화면 읽기 프로그램에서도 읽을 수 없습니다. PNG는 시각 자료로 사용하고, 문서나 튜토리얼 또는 버그 리포트를 게시할 때 실제 코드 조각은 선택 가능한 텍스트로 함께 제공하세요.

자주 묻는 질문

아니요. 붙여 넣은 텍스트를 그대로 canvas에 그립니다. 색상과 테마는 바꿀 수 있지만 언어 선택기나 구문 파서는 없습니다.

메뉴에는 Dark, Light, Dracula, Solarized가 있습니다. 테마를 고른 뒤에도 배경, 텍스트, 강조 색상은 직접 바꿀 수 있습니다.

아니요. 출력은 canvas에서 만든 PNG 다운로드뿐입니다. SVG, JPEG 또는 HTML로 복사하는 기능은 없습니다.

브라우저 반응성을 유지하기 위해 미리보기는 처음 400줄을 그립니다. 공개용 이미지는 핵심을 설명하는 몇 줄로 줄이는 편이 보통 더 좋습니다.

관련 도구

ASCII 표 참조

NUL, LF, DEL 같은 제어 문자를 포함해 모든 문자에 대한 10진수, 16진수, 8진수, 2진수, HTML 숫자 문자 참조를 담은 0부터 127까지의 전체 ASCII 표.

키보드 단축키 참고표

macOS, Windows, Linux에서 VS Code, Chrome, GNU Readline을 쓰는 Bash의 문서화된 기본 단축키를 검색합니다.

보색 찾기

어떤 입력에 대해서도 보색을 찾습니다. HSL 반대 색, 분할 보색 쌍, 그리고 접근성 있는 조합 제안을 반환합니다.

랜덤 영어 글자 생성기

A-Z 영어 글자를 무작위로 생성합니다. 개수와 대문자, 소문자, 혼합 대소문자를 선택해 게임, 과제, 수업 활동에 활용하세요.

랜덤 색상 팔레트 생성기

2~15개의 색상으로 랜덤 팔레트를 만들고, 비비드, 파스텔, muted, dark 스타일을 선택한 뒤 HEX 코드나 CSS 변수를 복사하세요.

2진수 8진수 변환기

비트를 세 개씩 묶어 2진수를 8진수로 변환합니다. Unix 권한, 레거시 시스템, 간결한 숫자 표시에 유용합니다.