📸 코드 스크린샷
코드 붙여넣기 → 언어 · 테마 · 배경 선택 → PNG 스크린샷. SNS · 기사 헤더에 적합.
🔒 개인정보 보호
- ・모든 처리는 브라우저 내에서 완료됩니다
- ・입력 코드는 서버로 전송되지 않습니다
- ・저장 로그 · 기록 · DB 없음
- ・가입 · 로그인 · 결제 불필요
📖 자주 걸리는 지점
코드를 붙여 넣고 언어 · 테마 · 배경을 고르면 문법 강조가 들어간 PNG 를 내보냅니다. highlight.js 와 html2canvas 를 쓰며 처리는 브라우저 안에서 끝납니다. 완성되는 것은 이미지이므로 안의 코드는 선택도 복사도 검색도 되지 않습니다 — 이 한 가지가 아래에서 주의해야 할 것의 대부분을 결정합니다. 장식으로는 뛰어나지만 코드를 전달하는 수단으로는 텍스트에 크게 뒤떨어집니다.
| 사례 | 무슨 일이 일어나는가 | 어떻게 하면 되는가 |
|---|---|---|
| 내보낸 PNG 가 흐릿하다 | 이미지는 미리보기와 같은 픽셀 비율로 내보내집니다 — Retina 라면 2 배이지만 그래도 흐릿해지는 원인은 그 앞에 있습니다. SNS 나 Slack 에 업로드하면 플랫폼 쪽에서 자동으로 축소되고 JPEG 으로 재압축됩니다. 특히 가로로 긴 이미지는 타임라인의 너비에 맞춰 크게 줄여지므로 40 줄의 코드를 한 장에 담은 이미지는 실기에서 보면 거의 확실히 읽히지 않습니다. 자기 화면에서 열었을 때는 읽히므로 문제를 알아채기 어려운 것이 까다로운 점입니다. | 해상도를 올리는 것보다 정보량을 줄이는 편이 잘 듣습니다. 구체적으로는 코드를 20 줄 이내로 좁히고 폰트 크기를 올리세요 — 축소되어도 글자가 뭉개지지 않는 것은 원래 폰트가 큰 경우뿐입니다. 패딩을 줄여 여백을 덜어 내는 것도 유효하며 같은 너비라면 글자가 상대적으로 커집니다. 긴 코드를 보여 주고 싶을 때는 이미지를 분할하지 말고 애초에 이미지로 만들지 마세요 — 20 줄을 넘는 코드는 이미지로 보여 주는 용도에 맞지 않습니다. 올리기 전에 반드시 스마트폰으로 열어 확인하세요 — PC 화면만으로 판단하면 독자의 대부분이 읽을 수 없는 이미지를 내놓게 됩니다. |
| 일본어나 이모지가 어긋난다 · 사라진다 | html2canvas 는 DOM 을 읽어 Canvas 에 다시 그리지만 웹 폰트의 로드가 끝나기 전에 그리기를 시작하는 경우가 있습니다. 그 경우 대체 폰트로 그려지므로 글자 너비가 달라져 들여쓰기가 무너집니다. 나아가 코드용 고정폭 폰트의 상당수는 일본어 글리프를 갖고 있지 않습니다 — Monaco 나 Menlo 에 일본어를 섞으면 일본어 부분만 다른 폰트로 떨어져 행의 높이와 글자 너비가 맞지 않게 됩니다. 이모지는 한층 더 까다로워서 OS 마다 겉모습이 다른 데다 컬러 이모지는 그려지지 않고 두부가 되는 환경도 있습니다. |
내보내기 전에 폰트의 로드를 기다리세요 — await document.fonts.ready 가 가장 간단한 방법입니다. 일본어를 포함하는 코드를 다룬다면 일본어 대응 고정폭 폰트(Source Han Code JP, BIZ UDGothic, MS Gothic 등)를 명시적으로 지정하세요 — 이들은 일본어를 반각 2 문자분의 너비로 맞추므로 들여쓰기가 무너지지 않습니다. 이모지는 코드 스크린숏에서는 피하는 것이 무난합니다 — 환경 의존이 너무 큽니다. 그리고 최종적인 확인은 내보낸 PNG 를 실제로 열어 들여쓰기가 맞는지를 눈으로 보세요 — 미리보기와 출력은 별개입니다. |
| 기사 본문에 코드 이미지를 써 버린다 | 이미지로 만든 순간 독자는 코드를 복사할 수 없게 됩니다 — 손으로 옮겨 적거나 포기하거나 둘 중 하나입니다. 그뿐 아니라 스크린 리더는 읽어 주지 못하고 브라우저의 검색도 듣지 않으며 번역도 되지 않고 검색 엔진에서도 보이지 않습니다. 모바일에서 확대하면 뭉개지고 다크 모드나 폰트 크기 설정도 전혀 듣지 않습니다. Stack Overflow 가 코드의 스크린숏 게시를 명확히 금지하고 있는 것은 이 모두가 질문과 답변에 도움이 되지 않기 때문입니다. 기술 기사에서 가장 중요한 것은 독자가 자기 환경에서 시험할 수 있는 것이며 이미지는 그것을 직접 방해합니다. | 코드 이미지는 장식의 장면에만 쓰세요 — SNS 의 카드 이미지, 기사의 헤더, 슬라이드의 표지처럼 애초에 읽게 하는 것을 목적으로 하지 않는 곳입니다. 기사의 본문에는 반드시 텍스트 코드 블록을 두세요. 양쪽 다 원한다면 헤더에 이미지, 본문에 같은 코드의 텍스트판이라는 구성으로 하면 보기 좋음과 실용성을 둘 다 얻을 수 있습니다. 판단의 기준은 독자가 이 코드를 실행하고 싶은가 입니다 — 실행해 주었으면 한다면 이미지로 만들어서는 안 됩니다. SNS 에 붙일 때도 게시 본문이나 링크 대상에 텍스트판을 준비하세요 — 안 움직인다는 반응의 대부분은 옮겨 적기 실수입니다. |
스크린숏은 찍을 생각이 없었던 것까지 찍습니다. 코드의 일부를 잘라 냈다고 생각해도 파일 경로(거기에 사용자 이름이 들어 있는 경우가 있습니다), 내부의 호스트명, 사내의 식별자, 주석에 적힌 과제 번호, 그리고 API 키나 토큰이 함께 찍혀 들어갑니다. 텍스트라면 Ctrl+F 로 기계적으로 찾을 수 있지만 이미지는 리뷰에서도 검색에서도 걸리지 않으므로 공개된 채 장기간 남습니다. 공개 전에 이미지를 열어 한 줄씩 눈으로 읽으세요 — 아마 괜찮겠지 로 내보낸 것이 문제가 되는 것은 대개 이 경로입니다. 한 가지 더, 남의 코드를 이미지로 만들어도 저작권은 사라지지 않습니다. 라이선스의 표시 의무가 있는 경우 스크린숏으로 했다는 것은 면제의 이유가 되지 않습니다 — 인용의 범위를 넘는다면 출처와 라이선스를 함께 적으세요.
📖 사용법
-
1
코드 붙여넣기코드를 붙여넣습니다.
-
2
언어 · 테마 · 배경 선택프리뷰에 즉시 반영.
-
3
PNG 저장PNG 다운로드 또는 클립보드 복사.
❓ 자주 묻는 질문
코드가 서버로 전송됩니까?
지원 언어?
출력 해상도?
🔗 관련 도구
🐛 이 도구에서 문제가 발생했나요?
무료 · 가입 불필요. 재현 절차만이라도 도움이 됩니다. 보고는 운영자에게 직접 전달되어 개선에 사용됩니다.
보고 감사합니다!
운영자에게 전달되었습니다. 개선에 사용됩니다.