도형과 픽셀의 차이
PNG는 픽셀 격자를 저장합니다. 크게 키우면 소프트웨어가 픽셀 사이에 무엇이 들어갈지 추측하고, 그 과정에서 모든 가장자리가 뭉개집니다. SVG는 지시문을 저장합니다. 여기에 이만한 크기의 이런 색 정사각형을 그리라는 식입니다. 2 cm로 요청하든 2 m로 요청하든 어느 쪽이든 깔끔하게 그려집니다.
QR 코드가 사진보다 이 차이에 민감한 이유
스캐너는 격자를 표본으로 읽어 각 칸이 밝은지 어두운지 판정하는 방식으로 QR 코드를 읽습니다. 가장자리가 뭉개지면 칸들이 중간 회색 쪽으로 밀리고, 중간에 가까운 칸에서 디코딩이 실패하기 시작합니다. 조금 흐린 사진은 여전히 그 사진처럼 보입니다. 조금 흐린 QR 코드는 더 이상 QR 코드가 아닙니다.
조밀한 기호일수록 상황이 더 나쁩니다. vCard 레코드나 매개변수가 붙은 URL처럼 긴 페이로드는 같은 크기의 정사각형 안에 더 많은 모듈을 넣어야 하므로, 모듈 하나가 작아지고 뭉개진 가장자리가 모듈에서 차지하는 비율이 커집니다.
쓰임새에 따라 고르기
| 코드가 놓이는 곳 | 형식 | 이유 |
|---|---|---|
| 명함, 전단, 포장 | SVG | 인쇄소가 손실 없이 레이아웃 크기에 맞춥니다 |
| 포스터, 창문 스티커, 간판 | SVG | 큰 크기야말로 PNG가 무너지는 지점입니다 |
| 벡터 편집기의 디자인 파일 | SVG | 도형을 편집하고 색을 바꿀 수 있으며 리샘플링이 없습니다 |
| 이메일 서명 | PNG | 메일 클라이언트는 래스터 이미지를 훨씬 예측 가능하게 처리합니다 |
| 슬라이드 또는 스크린샷 | PNG | 표시 크기가 고정되어 있어 확대가 없습니다 |
| 다른 서비스의 CMS 업로드 칸 | PNG | 일부 시스템은 원칙적으로 SVG 업로드를 거부합니다 |
SVG 다루기
- 스크린샷을 붙여 넣지 말고 파일을 배치하세요 편집 도구로 파일을 가져오세요. 미리보기 이미지를 복사하면 벡터 데이터가 버려지고 다시 픽셀만 남습니다.
- 색은 신중하게 바꾸세요 어떤 벡터 편집기에서도 모듈 색을 바꿀 수 있습니다. 밝은 배경 위에 어두운 모듈을 두세요. 반전된 코드나 대비가 낮은 파스텔 조합은 실제 판독기에서 실패합니다.
- 한쪽 축만 늘리지 마세요 가로와 세로를 함께 조절하세요. 늘어난 코드는 격자가 깨진 것이며, 어떤 오류 정정도 형태를 되돌리지 못합니다.
- 여백 유지하기 주위의 빈 여백도 기호의 일부입니다. 모듈에 딱 맞춰 잘라 내는 것은 아름다운 레이아웃이 스캔되지 않게 만드는 가장 흔한 원인입니다.
그래도 PNG를 써야 한다면
최종 레이아웃에 필요한 픽셀 크기 또는 그보다 크게 내보내고, 그다음에는 절대 키우지 마세요. 줄이는 것은 대체로 안전합니다. 흐림은 키울 때 생깁니다.
PNG를 손실 압축기에 넣지 마세요. JPEG 아티팩트는 흑백 경계가 뚜렷한 곳에 몰리는데, QR 코드는 모든 가장자리가 그런 경계입니다. 파일을 더 작게 만들어야 한다면 사진 용량 줄이기 도구가 PNG를 무손실로 다시 인코딩하고, 실제로 작아지지 않으면 결과를 버립니다.
두 형식 모두에 적용되는 검사
Vaultaire는 같은 페이로드에서 PNG와 SVG를 만든 다음, 완성된 각 파일을 별도의 판독기로 다시 디코딩합니다. 디코딩한 내용이 검토한 내용과 일치할 때만 다운로드가 활성화됩니다. 이렇게 하면 인쇄에 넘어가기 전에 망가진 렌더링을 잡아냅니다. 다만 최종 레이아웃이 콰이어트 존을 유지했는지는 알 수 없으니, 교정쇄는 직접 스캔해 보세요.
SVG와 PNG 자주 묻는 질문
SVG인가요, PNG인가요?
인쇄하거나 크기가 바뀌는 용도에는 SVG입니다. 포스터, 포장, 카드, 간판, 디자인 파일이 그렇습니다. 이메일 서명이나 슬라이드처럼 화면에서 자리가 고정된 곳에는 PNG입니다.
SVG QR 코드가 품질이 더 높은가요?
해상도라는 개념 자체가 없습니다. 모듈을 도형으로 기술해 요청한 크기 그대로 그려집니다. PNG는 픽셀 격자가 고정되어 있어 그 격자를 넘으면 흐려집니다.
색을 바꿀 수 있나요?
예. 어떤 벡터 편집기에서도 바꿀 수 있고 파일은 선명하게 유지됩니다. 밝은 배경 위에 어두운 모듈을 두세요. 반전되거나 대비가 낮은 코드는 형식과 상관없이 일부 판독기에서 실패합니다.
인쇄한 코드가 왜 흐리게 나오나요?
PNG를 픽셀 격자보다 크게 키워서 인쇄기가 모듈 가장자리의 디테일을 지어냈습니다. SVG를 인쇄하거나, 레이아웃에 필요한 크기 그대로 PNG를 내보내세요.
인쇄소에서 SVG를 받아 주나요?
대부분 받아 주고, 모든 편집 도구가 SVG를 가져옵니다. 인쇄소가 PDF나 EPS를 원하면 디자인 도구에 SVG를 배치한 뒤 거기에서 내보내세요. 도형은 그대로 남습니다.
나중에 PNG를 SVG로 변환할 수 있나요?
래스터 코드를 벡터로 되돌리는 트레이싱은 이미 뭉개진 가장자리를 추측합니다. 대신 페이로드에서 SVG를 새로 생성하세요. 1초면 되고 형태가 정확합니다.