예쁘면서 스캔되는 QR코드는 어떻게 만들까: QR 아트의 구조와 한계

거리의 간판, 광고, 포장지 어디에나 QR코드가 있다. 굳이 스캔하고 싶어서 찍는 사람은 드물지만, URL을 시각적으로 공유하는 가장 간단한 수단이라는 이유만으로 세상 곳곳에 퍼졌다. 문제는 흔한 흑백 격자가 브랜드 이미지와 잘 어울리지 않는다는 점이다. 그래서 많은 이들이 로고를 넣거나 사진을 겹치고, 심지어 손으로 직접 디자인한 QR코드를 만든다. 개발자 카일 정(Kyle Zheng)이 정리한 인터랙티브 해설은 이런 'QR 아트'가 어떤 원리로 가능한지, 그리고 어디까지 창의적으로 변형해도 스캔이 되는지를 구조 관점에서 풀어낸다. 실무에서 마케팅용 코드를 다루거나 직접 디자인 도구를 만들려는 개발자라면 짚어둘 만한 내용이다.

로고를 넣어도 읽히는 이유

QR코드 가운데에 로고를 얹어도 인식되는 것은 CD·DVD와 마찬가지로 리드-솔로몬(Reed-Solomon) 오류 정정을 사용하기 때문이다. 손상된 정보를 일정 비율까지 복원할 수 있어, 일부 픽셀이 가려져도 원래 데이터를 되살린다. 오류 정정 수준은 네 단계로 각각 약 7%, 15%, 25%, 30%의 바이트를 복구하도록 설계돼 있다. 다만 복원 여력이 커질수록 같은 정보를 담는 데 더 촘촘한 코드가 필요해 픽셀이 작아지고, 작게 인쇄되는 실제 환경에서는 오히려 읽기 어려워진다. 로고를 크게 박고 오류 정정을 높이면 보기에도 지저분하고 스캔도 안 되는 최악의 결과가 나올 수 있다는 뜻이다. 아름다움과 실용성 사이에는 분명한 상충 관계가 존재한다.

무엇이 필수이고 무엇이 아닌가

창의적 변형의 여지를 알려면 QR코드의 구조를 이해해야 한다. 세 모서리의 큰 사각형인 파인더 패턴은 코드의 방향·크기·원근을 잡아주는 핵심 요소로, 중심을 가로지르는 흑백 비율(대략 1:1:3:1:1)이 관건이다. 이 비율만 지켜지면 바깥 모서리 형태에는 여유가 있고, 주변의 여백(quiet zone)도 특정 크기를 반드시 지킬 필요는 없다. 반면 왜곡을 보정하는 정렬 패턴이나 행·열을 맞추는 타이밍 패턴은 생각보다 덜 중요하다. 저자에 따르면 타이밍 패턴은 사실상 무의미하고, 큰 코드에서 오른쪽 아래 정렬 패턴 정도가 실질적인 도움을 준다. 데이터는 오른쪽 아래에서 시작해 오른쪽에서 왼쪽으로 지그재그로 채워지며, 마지막에는 8비트 단위로 딱 떨어지지 않는 자투리 픽셀이 남는다. URL을 담을 때 실제로 쓰이는 인코딩 모드는 UTF-8을 의미하는 바이트 모드뿐이다.

결국 예술적 QR코드의 핵심 규칙은 단순하다. 파인더 패턴의 형태만 제대로 유지하고, 나머지 영역은 각 위치에서 충분히 어둡거나 밝기만 하면 된다. 코드는 회전·반전이 가능하고 어두운 픽셀과 밝은 픽셀을 뒤집어도 동작한다. 데이터에 XOR로 덧씌워지는 여덟 가지 마스크 패턴은 파인더 모양 같은 바람직하지 않은 배열을 흩뜨리는 역할을 한다.

진짜 걸림돌은 '탐지' 단계

그런데 여기에 큰 함정이 하나 있다. 스마트폰 기본 카메라 같은 범용 스캐너는 해독을 시도하기 전에 먼저 화면에서 QR코드를 '탐지'해야 한다. 항상 켜져 있는 전용 스캐너와 달리 스마트폰은 온디바이스 컴퓨터 비전 모델이 'QR코드처럼 보인다'고 판단해야만 스캔에 들어가기 때문에 훨씬 까다롭다. 저자가 분필로 그린 코드가 실패한 것도 이 탐지 단계 때문이었다. 경험칙은 단색과 높은 대비를 쓰고 어두운 픽셀과 밝은 픽셀의 균형을 잘 맞추는 것이지만, 결국 실제 기기로 직접 테스트하는 것 외에 확실한 방법은 없다.

프로그래밍으로 접근하는 방식은 크게 두 갈래다. 첫째는 임의의 이미지 위에 흑백 QR 픽셀을 얹는 오버레이 방식이다. 각 픽셀 중앙에 폭·높이의 약 3분의 1 이상 되는 점만 찍어도 대체로 해독되며, 이미지를 축소하거나 픽셀아트·디더링·색상 양자화로 노이즈를 더하면 그 점을 자연스럽게 감출 수 있다. 워드 클라우드로 글자를 변형하거나 프레임마다 점을 다시 그려 애니메이션을 만드는 응용도 있다. 둘째는 데이터 자체를 조작하는 방식이다. 메시지가 짧으면 나머지는 임의의 패딩 바이트로 채워지는데, 이 패딩을 원하는 값으로 설정하면 코드 중앙 영역을 통째로 제어할 수 있다. 리드-솔로몬 코드가 최대 거리 분리(MDS) 특성을 갖기 때문에 패딩 바이트 수 p만큼은 오류 정정 바이트와 섞어 자유롭게 조정할 수 있고, URL의 앵커(#뒤 문자열)를 이용해 픽셀을 맞추는 QArt Codes 계열 기법도 여기서 나온다.

실무자가 새겨둘 교훈

저자가 자신의 작업을 통해 반복해서 강조하는 결론은 '단색과 높은 대비'다. 캐나다 예술가 더글러스 커플런드의 작품처럼 2×2 픽셀 묶음을 하나의 색 사각형으로 대체하는 식으로, 여러 픽셀을 더 큰 디자인 요소로 치환하는 것은 코드로 구현하기 쉽고 효과도 좋다. 다만 원본 디자인이 멋지다고 해서 반드시 스캔되는 것은 아니어서, 점을 키우고 밀도를 높이며 파인더 패턴을 강조하는 식의 타협이 필요했다. 손으로 그린 듯한 SVG는 roughjs로 만들 수 있지만, 채움과 거칠기 값을 조절하며 '탐지되는 선'과 '안 되는 선'의 경계를 몸으로 익혀야 했다. 애니메이션은 모든 프레임이 스캔돼야 한다는 점에서 대체로 권장되지 않으며, 그가 만든 실시간 배드애플 사례에서는 오히려 노이즈 패턴을 더하는 편이 탐지 확률을 높였다.

이 해설은 새로운 제품 발표가 아니라, QR코드가 왜 그렇게 생겼고 어디까지 손댈 수 있는지를 구조적으로 이해시키는 데 목적이 있다. 저자는 자신이 만든 디자인 도구 qrframe.kylezhe.ng과 러스트로 짰다 타입스크립트로 다시 쓴 생성기 fuqr를 공개해 직접 실험해볼 수 있게 했다. 마케팅이나 브랜딩에서 QR코드를 다루는 실무자라면, 화려함보다 탐지 가능성이 먼저라는 점, 그리고 각 기법이 서로 배타적이지 않아 오버레이·패딩 조작·형태 변형을 조합할 수 있다는 점을 실용적 지침으로 가져갈 만하다. 다만 어떤 방식이든 실제 기기 테스트를 대체할 수는 없다는 한계는 분명히 남는다.