QR 코드를 이미지가 아니라 폰트로 만드는 실험

QR 코드를 이미지가 아니라 폰트로 만드는 실험

AI 뉴스 썸네일

QR 코드는 보통 이미지로 만들어 붙여요. Jim's TrueType QR Code Font는 이 과정을 폰트 안으로 끌고 들어와요. `[hello]`처럼 대괄호로 감싼 텍스트를 입력하면, 브라우저와 문서 편집기가 그 부분을 QR 코드처럼 그려요. 1

핵심 요약

구분	핵심	왜 볼 만한가요
폰트 기술	TrueType/OpenType 폰트가 대괄호 안 텍스트를 QR 코드로 렌더링해요	QR 이미지를 따로 만들지 않고 문서 안에서 바로 쓸 수 있어요
문서 워크플로	QR 블록이 텍스트로 남아 복사, 저장, 인라인 배치가 쉬워요	계약서, 안내문, 실험용 문서처럼 텍스트 중심 파일에서 다루기 편해져요
웹 표시	줄바꿈 지점에서 QR 코드가 쪼개질 수 있어요	HTML에서는 `white-space: nowrap` 같은 표시 규칙을 같이 잡아야 해요

1. QR 코드 생성기를 폰트 파일 안에 넣었어요

Jim's TrueType QR Code Font는 QR 코드 생성기를 별도 이미지 도구가 아니라 글꼴 기능으로 다뤄요. 원문 데모에서 QR Font 1-L, 2-L, 3-L을 고르면 대괄호 안 텍스트가 검은 모듈로 된 QR 코드처럼 바뀌어요. 폰트별로 담을 수 있는 길이는 17자, 32자, 53자로 나뉘고, 입력은 출력 가능한 ASCII 문자 범위로 제한돼요. 2

재미있는 지점은 변환 위치예요. 보통 QR 코드는 서버나 브라우저 자바스크립트가 이미지를 만든 뒤 삽입해요. 이 실험은 OpenType 규칙이 글자 모양을 바꾸는 단계에서 QR 패턴을 만들어요. 그래서 문서 작성자는 URL을 대괄호로 감싼 텍스트로 입력하고, 화면에서는 QR 코드처럼 볼 수 있어요. 폰트 밖 텍스트는 일반 라틴 글꼴로 남기 때문에 설명 문장과 QR 코드를 한 줄에 섞는 것도 가능해요.

728x90

이 방식은 실무 제품이라기보다 폰트 엔진을 어디까지 밀어붙일 수 있는지 보여주는 기술 데모에 가까워요. 그래도 쓸모가 전혀 없지는 않아요. 사내 문서, 인쇄용 초안, 교육용 자료처럼 QR 이미지를 매번 생성하기 번거로운 곳에서는 텍스트만 바꿔도 QR 코드가 같이 바뀌는 흐름을 만들 수 있어요. QR 코드가 평문으로 저장되니 버전 관리에서도 바뀐 URL을 눈으로 확인하기 쉬워요.

주의할 점도 분명해요. 브라우저는 폰트가 글자를 QR 코드로 바꾸기 전에 먼저 줄바꿈 위치를 계산해요. 대괄호 안에 공백, 점, 빗금처럼 줄이 끊길 수 있는 문자가 있고 컨테이너 폭이 좁으면 QR 블록이 여러 줄로 갈라질 수 있어요. 원문은 HTML에서 대괄호 블록을 `white-space: nowrap` 또는 `display: inline-block`이 적용된 컨테이너로 감싸라고 안내해요. 2

오픈소스 저장소도 공개돼 있어요. GitHub 설명은 이 프로젝트를 "TrueType font 안에 들어간 QR 코드 생성기"로 소개해요. 폰트 파일과 데모 페이지가 함께 제공되기 때문에, 원리를 보려면 데모에서 문자열을 바꿔 보고 저장소의 OpenType 규칙을 따라가면 돼요. 3

왜 중요한가요

이 실험은 QR 코드보다 폰트의 역할을 다시 보게 해요. 글꼴은 보통 글자 모양을 정하는 파일로만 생각하기 쉬워요. 하지만 OpenType에는 문맥에 따라 글리프를 바꾸는 규칙이 있고, 그 규칙을 꽤 복잡하게 쓰면 간단한 변환기를 흉내 낼 수 있어요. QR Font는 그 가능성을 눈에 보이게 만든 사례예요. 2

개발자 입장에서는 "이미지로 만들던 것을 텍스트 레이어에 남길 수 있나"라는 질문이 생겨요. QR 코드가 텍스트로 유지되면 복사와 붙여넣기, diff 확인, 평문 저장이 쉬워져요. 문서 생성 파이프라인에서도 이미지 파일을 별도로 관리하지 않아도 돼요. 다만 QR 코드의 스캔 안정성은 레이아웃과 렌더링 환경에 크게 묶여요. 웹에 그대로 넣을 때는 줄바꿈, 폰트 로딩, 모바일 브라우저 호환성을 꼭 확인해야 해요.

디자인 도구나 문서 도구를 만드는 팀도 참고할 만해요. 바코드, 차트, 아이콘처럼 데이터와 시각 요소가 붙어 다니는 기능은 보통 플러그인이나 이미지 변환기로 처리해요. 이 프로젝트는 작은 범위에서는 폰트도 데이터 표현 계층이 될 수 있음을 보여줘요. 모든 문제에 맞는 해법은 아니지만, 텍스트 중심 워크플로에서 시각 요소를 다루는 선택지가 하나 더 생겨요.

보안과 운영 관점에서는 열린 QR 생성 도구의 의미도 있어요. GeekNews 댓글에 인용된 Lobste.rs 반응에는 유료 QR 생성기나 사기성 QR 서비스에 대한 불신도 나와요. QR 링크를 만드는 과정이 외부 서비스에 잠기면 나중에 링크가 바뀌거나 관리 페이지 뒤에 묶이는 문제가 생길 수 있어요. 로컬에서 작동하는 폰트나 오픈소스 도구는 그런 위험을 줄이는 쪽에 가까워요. 1

결론은 간단해요. 이 폰트는 당장 모든 QR 이미지를 대체할 도구라기보다, 폰트와 문서 포맷이 생각보다 많은 일을 할 수 있음을 보여주는 작은 해킹이에요. 실제 문서에 쓰려면 지원 길이, 줄바꿈, 브라우저 차이를 확인해야 해요. 그래도 QR 코드를 파일 이미지가 아니라 텍스트와 함께 관리하고 싶은 순간에는 꽤 흥미로운 선택지가 돼요.

참고 자료

1. TrueType QR Code 폰트 - 폰트만으로 QR코드 만들기 — GeekNews
2. Jim's TrueType QR Code Font — 원문 데모
3. jimparis/qr-font — GitHub