본문으로 건너뛰기

가이드

스캔을 망치지 않고 QR 코드에 로고 넣는 방법

로고는 QR 코드를 알아보기 쉽게 만들지만 동시에 매트릭스의 일부를 가져갑니다. 믿을 만한 설계는 오류 정정 여유가 얼마나 남아 있는지, 대비가 충분히 강한지, 그리고 최종 실물로 시험해 봤는지에 달려 있습니다.

애초에 QR 코드 위에 로고를 올릴 수 있는 이유

QR 코드에 로고를 올린다는 것은 데이터의 일부를 가린다는 뜻입니다. 그래도 동작합니다. 그리고 왜 동작하는지를 이해하는 것이, 브랜드를 입혀도 읽히는 코드와 보기에는 괜찮은데 고객 기기에서 실패하는 코드를 가릅니다.

QR 코드는 여분의 데이터를 담고 있습니다. 규격은 일부가 더러워지거나 찢어지거나 접히거나 가려져도 읽히도록 오류 정정을 내장했습니다. 이 형식은 디자인 포트폴리오가 아니라 공장 바닥을 위해 설계됐습니다. 로고는 그 여유분의 일부를 의도적으로 쓰는 것뿐입니다.

그래서 질문은 결코 "로고를 넣을 수 있는가"가 아니라 "여유분의 얼마를, 무엇에 쓰는가"입니다.

네 가지 정정 등급과 각각의 대가

모든 QR 코드는 네 가지 오류 정정 등급 중 하나로 생성되며, 각각 코드 면적의 약 7%, 15%, 25%, 30%를 복원합니다.

가장 높은 것을 골라놓고 신경 끄는 것이 직관적인 선택입니다. 그렇게 단순하지 않습니다. 여분은 어딘가에 저장돼야 하기 때문입니다. 등급이 올라가면 데이터가 늘고, 데이터가 늘면 모듈이 늘고, 같은 인쇄 크기에서 모듈이 늘면 하나하나가 물리적으로 작아집니다. 어느 지점을 넘어서면 튼튼한 코드를 카메라가 아예 분해하지 못하는 조밀한 코드와 맞바꾼 셈이 됩니다.

브랜드를 입힌 대부분의 코드에 대한 실무적 답은 절제된 로고와 중간 등급, 그리고 시험을 거친 상태입니다. 가장 높은 등급으로 손을 뻗는 것은 그 코드가 정말 가혹한 곳에서 쓰일 때입니다 — 휘어진 병, 직물 표면, 운송 중 긁히는 포장 — 그리고 그만큼 큰 인쇄 크기가 필요하다는 점도 받아들여야 합니다.

로고가 실제로 가릴 수 있는 범위

생성한 등급의 가장자리가 아니라 충분히 안쪽에 머무르세요. 그 등급이 약 30%를 복원한다 해도, 30%에 가깝게 차지하는 로고는 현실 세계를 위해 아무것도 남기지 않습니다. 그리고 그 여유분의 존재 이유가 바로 현실 세계입니다.

무너지는 방식이 점진적이지 않다는 점도 사람들이 걸려 넘어지는 이유입니다. 로고가 커질수록 코드가 서서히 읽기 어려워지는 것이 아닙니다. 먼저 안정적으로 읽히고, 다음에는 일부 기기에서만 읽히고, 그다음에는 멈춥니다. 위험한 것은 중간 단계입니다. 대부분의 사람이 하는 유일한 시험을 통과해 버리기 때문입니다.

원하는 것보다 작게 시작하고, 시험하고, 결과가 깨끗하면 키우세요.

로고가 절대 가면 안 되는 자리

무늬의 일부는 데이터가 아니라 구조이며, 오류 정정은 그것들을 보호하지 않습니다.

네 귀퉁이 중 세 곳의 큰 사각형은 위치 검출 패턴입니다. 판독기는 이것으로 코드를 찾고 방향을 판단합니다. 큰 코드에서 네 번째 귀퉁이 근처의 작은 사각형은 정렬 패턴으로, 비스듬히 찍힌 코드의 왜곡을 보정합니다. 위치 검출 패턴 사이를 지나는 점선은 타이밍 패턴으로, 모듈 격자를 정합니다.

이 중 어느 하나라도 가리면 정정이 아무리 많아도 소용없습니다. 판독기가 그것을 쓸 단계까지 가지 못하기 때문입니다. 로고는 가운데에 두고, 귀퉁이에서 떨어뜨리고, 레이아웃에 맞추려고 코드를 잘라내는 일은 절대 하지 마세요.

되는 브랜드 색과 안 되는 브랜드 색

색은 브랜드 가이드와 스캔 가능성이 가장 자주 부딪치는 지점이지만, 정말 중요한 규칙은 몇 개뿐입니다.

판독기가 읽는 것은 모듈과 배경 사이의 대비이므로 그것은 강해야 하고, 게다가 관습적인 방향, 즉 밝은 바탕에 어두운 모듈이어야 합니다. 반전된 코드, 즉 어두운 바탕에 밝은 모듈은 많은 판독기가 읽지만 전부는 아닙니다. 회수할 수 없는 인쇄물에서는 그것이 도박이 됩니다.

중간 톤의 브랜드 색이 늘 희생됩니다. 백라이트 화면에서는 확실히 어두워 보이던 색이 비코팅지에 찍히면 배경에 훨씬 가까워질 수 있습니다. 모듈 위의 그러데이션과 그 뒤의 사진 배경도 더 예측하기 어려운 방식으로 같은 문제를 만듭니다.

도구가 필요 없는 실용적인 확인법: 인쇄 원고를 회색조로 바꿔서 보세요. 무늬가 여전히 뚜렷하게 밝은 바탕에 어둡다면 대비는 진짜입니다. 뭉개져 보인다면 스캔도 뭉개집니다.

여백 구역을 지키세요

규격은 네 변 모두에 4모듈 너비의 빈 여백을 요구합니다. 이것은 장식용 공백도 아니고 디자이너의 제안도 아닙니다. 판독기가 코드가 어디서 끝나는지 판단하는 수단 그 자체입니다.

그리고 QR 코드에서 가장 자주 파괴되는 부분이기도 합니다. 레이아웃이 가져다 쓸 수 있는 빈 자리처럼 보이기 때문입니다. 가장자리에 바짝 붙인 글자, 코드를 두른 테두리 선, 아래로 지나가는 배경 이미지, 판 가장자리에 맞춰 잘린 코드 — 전부 이것을 없앱니다.

자리가 모자라면 코드를 줄이고 여백을 남기세요. 여백 구역이 온전한 작은 코드는 읽힙니다. 그것이 없는 큰 코드는 읽히지 않을 수 있습니다.

용도에 맞는 파일로 내보내기

인쇄할 것은 모두 벡터 형식으로 — SVG나 PDF. 벡터 원고는 어떤 크기에서도 모듈 가장자리를 완벽히 날카롭게 유지하고, 카메라에 필요한 것이 바로 날카로운 가장자리입니다.

화면, 메일, 래스터 이미지를 전제하는 문서에는 PNG를 쓰되 필요하다고 생각하는 것보다 크게 내보내세요. 작은 PNG에서 *확대한* QR 코드는 모듈 경계가 부드럽게 번지고, 번진 경계는 모호한 데이터로 읽힙니다.

스크린샷에서 코드를 가져오지 말고, 인쇄소로 가는 길에 손실 압축을 한 번 더 거치게 하지 마세요. 고대비 가장자리 주변의 JPEG 잡티야말로 가장 나쁜 종류의 잡음입니다.

오 분이면 끝나는 제대로 된 테스트

디자인 프로그램 안에서 읽힌 코드는 이상적인 조건에서만 시험된 것입니다. 완벽한 초점, 완벽한 조명, 백라이트 화면, 기기 한 대. 그 어느 것도 실제로 쓰일 곳을 설명하지 않습니다.

  • 최종 크기로, 실제 재질에 교정을 뽑아 확인하세요 — 코팅지와 비코팅지는 다르게 반응합니다.
  • 최소한 iPhone 한 대와 Android 한 대로 읽어 보고, 가능하면 카메라가 약한 오래된 기기도 넣으세요.
  • 실제로 놓일 조명에서 시험하세요. 인공 조명도, 야외라면 강한 햇빛도 포함해서.
  • 실제 사람이 설 거리에서 스캔하세요. 10센티미터가 아니라.
  • 살짝 비스듬히 해보세요. 사람들이 기기를 드는 각도가 실제로 그렇습니다.
  • 곡면이나 부드러운 것에 붙일 거라면 평평하게가 아니라 휘어진 상태로 시험하세요.

반복해서 일어나는 실패

생산 단계에서 실패하는 브랜드 코드의 거의 전부가 같은 몇 가지 원인으로 돌아갑니다. 디자인 검토에서 로고가 커졌는데 아무도 다시 시험하지 않았다. 최종 레이아웃에서 여백 구역이 잘려 나갔다. 화면에서는 어둡게 읽히던 브랜드 색이 중간 회색으로 찍혔다. 작은 PNG에서 확대해 가장자리를 잃었다. 혹은 카메라가 아주 좋고 주소도 이미 알고 있는 디자이너의 기기에서만 시험했다.

이 모두가 교정 한 장을 뽑아 다른 사람에게 건네면 잡힙니다.

작성자 소개

Andrii Petlovanyi

Mosaqo의 웹, iOS, Android를 개발합니다.

FAQ

자주 묻는 질문

QR 코드의 로고는 얼마나 크게 넣을 수 있나요?

오류 정정 등급이 기술적으로 허용하는 것보다 작게 넣으세요. 각 등급은 설정에 따라 코드 면적의 약 7~30%를 복원하고, 로고는 그 여유분을 씁니다. 그것을 다 채우면 인쇄 얼룩, 오염, 성능이 낮은 카메라를 위해 남는 것이 없습니다. 절제된 로고로 시작해 인쇄 교정에서 시험하고, 결과가 깨끗할 때만 키우세요.

QR 코드에 브랜드 색을 쓸 수 있나요?

대비가 버텨준다면 대개 가능합니다. 반전하지 말고 밝은 바탕에 어두운 모듈을 유지하고, 무늬 뒤의 그러데이션과 사진 배경은 피하고, 화면에서는 어두워 보이지만 훨씬 밝게 찍히는 중간 톤 브랜드 색을 경계하세요. 원고를 회색조로 바꿔보는 것이 빠른 확인법입니다. 무늬가 여전히 뚜렷하게 밝은 바탕에 어둡다면 대비는 진짜입니다.

제 기기에서는 읽히는데 다른 사람 기기에서는 왜 안 될까요?

코드가 읽히는 한계선에 걸쳐 있을 때 나타나는 전형적인 증상입니다. 여러분의 기기는 카메라가 좋고 조명 조건도 유리하며, 결과가 저장돼 있는 경우도 많습니다. 경계선상의 코드는 좋은 센서에서는 읽히고 약한 센서에서는 실패합니다. 특이한 일이 아니라 고장으로 다루세요. 로고를 줄이고, 대비를 높이고, 여백 구역을 되살리거나, 더 크게 인쇄하세요.

QR 코드는 PNG로 내보내야 하나요, SVG로 내보내야 하나요?

인쇄하는 것은 모두 SVG나 PDF입니다. 벡터 원고가 어떤 크기에서도 모듈 가장자리를 날카롭게 유지하기 때문입니다. PNG는 화면과 문서에는 괜찮지만 넉넉히 크게 내보내세요. 작은 PNG를 확대하면 모듈 경계가 번지고, 번진 경계는 모호한 데이터로 읽힙니다. 스크린샷은 절대 쓰지 마세요.

로고를 넣으면 오류 정정 등급을 올려야 하나요?

필요한 것은 충분한 여유분이며, 그것은 대개 가장 낮은 등급은 아니라는 뜻입니다. 다만 가장 높은 등급이 자동으로 옳은 것도 아닙니다. 정정이 많아지면 모듈이 늘고 같은 인쇄 크기에서 코드가 더 조밀해지기 때문입니다. 절제된 로고와 중간 등급을 인쇄 교정에서 확인한 것이 믿을 만한 기본값입니다. 가장 높은 등급은 정말 가혹한 표면을 위해 남겨두세요.

다음 단계

첫 QR 코드를 만들 준비가 되셨나요?

QR 코드를 만들고 인쇄 전에 테스트하세요

Mosaqo의 첫 번째 릴리스는 무료이며 결제 카드가 필요하지 않습니다.

무료로 시작