코드 스크린샷이 흐릿한 이유와 해결법
코드 스크린샷을 찍어 블로그나 SNS에 올렸는데, 내 화면에서는 멀쩡하던 글자가 업로드 후에는 유독 뭉개져 보이는 경우가 있습니다. 파일이 손상된 게 아니라, 캡처 당시 저장된 실제 픽셀 수가 나중에 표시되는 크기보다 적어서 생기는 현상입니다. 원인이 되는 숫자 하나만 알면 찍기 전에도 흐려질지 미리 확인할 수 있습니다.
요약 ① 스크린샷의 선명도는 압축이 아니라 저장된 실제 픽셀 수로 정해집니다. ② 픽셀 수는 캡처한 창의 크기 × 화면 배율(디스플레이 밀도)로 결정되고, 이후엔 늘어나지 않습니다. ③ 표시될 폭보다 최소 2배 많은 픽셀을 담아야 확대해도 흐려지지 않습니다.
왜 이런 일이 생기는가 — 픽셀 수는 나중에 늘어나지 않습니다
이미지 파일 하나는 가로·세로 방향으로 정해진 개수의 점(픽셀)만 담고 있습니다. 화면 캡처 프로그램은 이 점을 "캡처한 영역의 크기 × 그 화면의 배율"만큼만 만들어 저장합니다. 파일을 아무리 큰 화면에 띄워도 원래 없던 점은 새로 생기지 않습니다.
예를 들어 배율 1배 모니터에서 편집기 창을 가로 600점 크기로 캡처하면, 저장되는 파일도 정확히 가로 600픽셀입니다. 이 파일을 본문 폭이 1200픽셀인 블로그에 그대로 넣으면 브라우저는 없는 픽셀 600개를 주변 색으로 채워 넣어 확대합니다. 이 보간 과정이 글자 획을 뭉개서 흐리게 보이게 만듭니다.
레티나·고해상도 디스플레이(배율 2배 이상)에서는 같은 창을 캡처해도 픽셀 수가 두 배로 저장되니 사정이 낫습니다. 다만 편집기 창 자체를 작게 띄워 캡처했다면, 배율이 높아도 절대적인 픽셀 수가 부족해 같은 문제가 그대로 재현됩니다.
확인하는 방법 — 파일의 실제 픽셀 수부터 봅니다
가장 확실한 확인법은 화질 슬라이더를 만지는 게 아니라, 이미지 파일이 실제로 몇 픽셀인지 보는 것입니다. 맥에서는 파일을 선택하고 정보 가져오기(Cmd+I)를, 윈도우에서는 속성 → 자세히 탭을 열면 가로×세로 픽셀 값이 나옵니다.
이 값을 이미지가 표시될 폭과 비교합니다. 블로그 본문 폭이 800픽셀이라면, 레티나 화면으로 보는 독자를 감안해 파일이 최소 1600픽셀 이상이어야 확대 흔적 없이 선명합니다. 화면 캡처만으로 이 조건을 맞추려면 편집기 창을 표시 폭의 두 배로 띄우고 고배율 디스플레이에서 캡처해야 합니다.
저희 도구로 확인하기. 매번 창 크기를 재고 배율을 맞추는 대신, 코드를 텍스트로 붙여넣으면 화면 캡처 없이 고정된 2배 해상도로 다시 그려 저장하는 방법도 있습니다.
무료 · 가입 불필요 · 브라우저에서 2배 해상도로 즉시 렌더링
이렇게 만들어진 파일은 실제 표시 폭보다 항상 넉넉한 픽셀을 담고 있어서, 블로그 본문이나 트위터 카드에 그대로 넣어도 확대 흔적이 남지 않습니다.
자주 막히는 지점
| 증상 | 원인 |
|---|---|
| 내 화면에선 선명한데 블로그에 올리면 흐림 | 본문 표시 폭이 캡처 폭보다 넓어 브라우저가 확대 보간함 |
| 같은 파일이 맥에서만 괜찮고 외부 모니터에선 흐림 | 외부 모니터가 배율 1배라 저장 픽셀 수 자체가 적음 |
| 파일 용량을 키워도 안 선명해짐 | 용량(압축률)과 픽셀 수는 별개 — 용량을 늘려도 없는 픽셀은 안 생김 |
| 이미 찍은 흐린 캡처를 다시 확대해봄 | 확대는 있는 픽셀을 보간할 뿐, 없는 정보를 만들어내지 않음 |
정리
- 코드 스크린샷이 흐려 보이는 원인은 하나입니다 — 저장된 픽셀 수가 표시 폭보다 적기 때문입니다.
- 확인은 압축 설정이 아니라 파일의 실제 가로×세로 픽셀 값과 표시될 폭을 비교하는 것으로 충분합니다.
- 표시 폭의 2배 이상 픽셀을 담고 있다면 어디에 올려도 확대 흔적이 남지 않습니다.
- 이미 찍어둔 저해상도 캡처는 확대해도 복구되지 않으므로, 애초에 고정 배율로 다시 그려 저장하는 편이 빠릅니다.
무료 · 가입 불필요 · 브라우저에서 2배 해상도로 즉시 렌더링
자주 묻는 질문
이미 찍어둔 흐릿한 스크린샷을 나중에 선명하게 바꿀 수 있나요?
아니요. 없는 픽셀 정보는 확대한다고 되살아나지 않습니다. 이미지 편집 프로그램의 확대·선명화 기능은 있는 픽셀을 보간해 눈에만 덜 흐려 보이게 만들 뿐입니다. 선명한 결과가 필요하다면 원본 코드를 다시 붙여넣어 처음부터 고배율로 새로 렌더링하는 편이 확실합니다.
이미지 속성에서 픽셀 수는 어디서 확인하나요?
맥은 파일을 선택한 뒤 Cmd+I(정보 가져오기)를 누르면 "크기" 항목에 가로×세로 픽셀이 나옵니다. 윈도우는 파일 속성 창의 "자세히" 탭에 "크기"와 별도로 "폭"·"높이" 항목이 나옵니다.
문법 색상 강조(신택스 하이라이팅)가 안 되는데 해상도와 관련이 있나요?
관련이 없습니다. 해상도는 픽셀 수의 문제이고, 색상 강조는 언어별 키워드에 다른 색을 입히는 별개의 기능입니다. 이 도구는 단색 모노스페이스 폰트로 코드를 그리는 방식이라 문법별 색상 강조는 적용되지 않지만, 해상도 자체는 2배 고정이라 흐려지지 않습니다.
트위터·인스타그램에 올릴 때는 얼마나 큰 해상도면 충분한가요?
플랫폼마다 실제 표시 폭이 다르고 정책도 자주 바뀌므로 정확한 숫자를 단정하기는 어렵습니다. 다만 위에서 설명한 "표시 폭의 2배 이상" 규칙만 지키면 대부분의 경우 확대로 인한 흐림은 피할 수 있습니다.