사진을 품은 QR 코드, 디더링으로 미학과 인식률의 균형 잡기

QR 코드는 흔히 '검고 흰 네모의 무작위 배열'처럼 보이지만, 실제로는 몇 바이트의 데이터를 사진으로 쉽게 읽어낼 수 있도록 설계된 인코딩 방식이다. 초점이 흐리거나 인쇄 상태가 나쁘거나, 비스듬한 각도로 찍히거나 일부가 훼손돼도 읽히도록 강한 내구성을 목표로 만들어졌다. 개발자 앤드루 T가 정리한 이 기법은 그 내구성의 여유분을 시각적 자유도로 바꾸어, QR 코드 안에 사진을 집어넣는 방법을 다룬다.

QR 코드의 구조와 변형 여지

QR 코드의 격자는 크게 두 부분으로 나뉜다. 하나는 스캐너가 코드의 위치와 방향을 빠르게 찾도록 돕는 굵은 도형, 즉 기능 패턴(finder pattern 등)이다. 이 부분은 매우 선명하고 뚜렷해야 하므로 손을 대기 어렵다. 다른 하나는 실제 데이터와 헤더 등이 담기는 데이터 모듈이다. 스캐너는 기능 패턴으로 코드의 정확한 위치를 먼저 파악한 뒤에야 데이터 모듈을 읽기 때문에, 데이터 모듈은 상대적으로 손을 댈 여지가 있다. 브랜드들이 특징적인 QR 코드를 만드는 것도 이 성질을 이용한 것이며, 변형이 심해질수록 인식 안정성은 떨어지지만 어느 정도까지는 무리 없이 읽힌다.

핵심 아이디어는 각 데이터 픽셀을 3×3 격자로 쪼갠 뒤 가운데 한 칸만 실제 데이터 색으로 쓰고 나머지 여덟 칸은 사진에 내주는 것이다. 스캐너는 기능 패턴이 알려준 '픽셀 중심' 위치만 확인하므로, 코드가 심하게 왜곡되지 않는 한 가운데 칸만 정확하면 읽어낸다. 결과물은 저해상도의 1비트(흑백 두 값) 사진이 되는데, 아홉 칸 중 한 칸이 데이터 때문에 사실상 무작위 색을 갖게 되어 소금·후추 같은 잡음이 낀다.

임계값 처리에서 오차 확산으로

이미지를 낮은 색 심도로 눌러 담을 때는 단순히 밝으면 흰색, 어두우면 검은색으로 자르는 임계값 처리(threshold)만 쓰지 않는다. 보통은 체커보드 형태로 중간 톤을 흉내 내는데, 이미지 전체에 이 발상을 세밀함의 큰 손실 없이 적용하는 방법이 베이어(Bayer) 필터다. 여기서 한 걸음 더 나아간 것이 플로이드-스타인버그 디더링이다.

플로이드-스타인버그 방식은 왼쪽 위부터 시작해 각 픽셀을 임계값으로 처리하되, 그 과정에서 생기는 오차를 아직 처리하지 않은 주변 픽셀로 '확산'시킨다. 예컨대 밝기 70%인 픽셀을 흰색(100%)으로 만들면 30%만큼 밝기를 더한 셈이 되는데, 이 30%를 인접 픽셀들에 조금씩 나눠 어둡게 반영한다. 그 픽셀들을 처리할 차례가 오면 넘겨받은 오차를 감안하게 되고, 이미지 전체를 다 처리하고 나면 평균적으로 원래 밝기에 더 가까워진다. 규칙적인 디더링보다 불규칙한 패턴이 눈에 덜 거슬린다는 장점도 있다.

이 불규칙성은 데이터 모듈이 만든 잡음을 숨기는 데도 유리하다. 다만 완전히 사라지지는 않는다. 147×147 픽셀의 1비트 이미지라는 태생적 한계 때문에 어차피 거칠어 보이지만, 그 거칠음의 일부는 아홉 픽셀 중 하나가 사실상 무작위 색이라는 데서 온다.

데이터 모듈 오차를 먼저 흩뿌리기

저자가 제시하는 해법은 오차 확산을 두 번 하는 것이다. 두 번째 패스는 일반적인 디더링과 같지만, 첫 번째 패스는 오직 데이터 모듈을 감추기 위한 것이다. 데이터 모듈의 색은 이미 정해져 있으므로, 그 픽셀들을 정해진 색으로 고정한 뒤 그로 인해 발생하는 오차를 주변 여덟 픽셀로 확산시킨다. 이때 오차는 매우 클 수 있다. 보통은 우리가 색을 고를 수 있어 오차가 50%를 넘지 않지만, 어두운 영역의 한 픽셀을 순백색으로 강제하면 95%에 이르는 오차가 생기기도 한다. 나쁘게 들리지만, 바로 그렇기 때문에 이 오차를 그냥 받아들이지 않고 확산시키는 일이 중요하다. 이 처리를 거치면 이미지가 훨씬 깨끗해진다.

생성기 도구는 몇 가지 추가 기교를 허용한다. 이미지를 넣기 전에 QR 코드를 회전시키거나, 인코딩 설정을 바꿔 우연히 더 보기 좋은 배치가 나오는지 실험할 수 있다. 또 QR 코드에는 오류 정정 여유가 있어 95% 오차를 내던 데이터 모듈 몇 개를 바꿔도 여전히 읽힌다. 가운데에 로고를 넣은 QR 코드가 작동하는 원리도 이것이다. 다만 실제로는 데이터 모듈의 오차를 확산시키기만 하면 이런 픽셀 변경이 화질에 큰 도움이 되지 않으면서 인식률만 크게 떨어뜨린다.

실무에서의 트레이드오프

실무자 입장에서 기억할 것은 이 모든 기법이 결국 미학과 인식률 사이의 맞교환이라는 점이다. 큰 화면이나 포스터처럼 조건이 좋은 매체에 붙일 코드라면 지나치지 않는 선에서 꽤 잘 작동한다. 반면 구겨질 수 있는 종이 전단 같은 경우에는, 예쁘게 만드느라 포기했던 그 중복성과 오류 정정 여유가 다시 필요해진다. 내 폰에서 노트북 화면을 찍어 읽힌다고 해서, 조명이 나쁜 곳에서 인쇄물을 낯선 사람의 성능 낮은 폰으로 찍었을 때도 읽힌다는 보장은 없다.

마지막으로 놓치기 쉬운 기술적 함정이 있다. 생성기는 여백이 없는 작은 이미지를 만드는데, QR 코드가 안정적으로 읽히려면 어느 정도의 여백이 필요하다. 게다가 브라우저는 이미지를 확대할 때 기본적으로 흐리게 처리하므로 CSS로 이 보간을 꺼야 한다. 여백의 색은 큰 세 개의 파인더 사각형 중심과 반대여야 하며, 보통은 흰색이지만 검은 배경을 요구하는 반전 QR 코드를 만들 수도 있다. 화려한 QR 코드를 시도하기 전에, 실제 배포 환경에서 최악의 조건을 가정해 스캔 테스트를 거치는 것이 무엇보다 안전하다.