TrueType QR Code 폰트 - 폰트만으로 QR코드 만들기

 (qr.jim.sh)
3P by GN⁺ | ★ favorite | 댓글 2개
  • 대괄호로 감싼 텍스트를 QR 코드로 바꾸는 TrueType/OpenType 폰트로, 이미지 생성 없이 문서 안에 QR 코드를 넣을 수 있음
  • 변환은 폰트 내부의 OpenType 규칙이 처리하며, 대괄호 밖 텍스트는 일반 라틴 텍스트로 그대로 표시됨
  • QR 코드 블록도 텍스트로 남기 때문에 복사·붙여넣기, 평문 저장, 일반 문장과의 인라인 배치가 가능함
  • 브라우저가 셰이핑 전에 줄바꿈을 결정하므로 공백·점·슬래시 같은 지점에서 QR 코드가 여러 줄로 쪼개질 수 있음
  • HTML에서 안정적으로 보이게 하려면 대괄호 블록을 white-space: nowrap; 또는 display: inline-block;가 적용된 컨테이너로 감싸야 함

폰트가 QR 코드를 만드는 방식

  • Jim's TrueType QR Code Font는 실제 TrueType/OpenType 폰트이며, [hello]처럼 입력한 대괄호 안 텍스트를 QR 코드로 렌더링함
  • QR 코드 생성은 폰트 안의 OpenType 규칙으로 처리되어 별도 이미지 생성이나 전처리 단계가 필요 없음
  • 대괄호 밖의 텍스트는 읽을 수 있는 일반 라틴 텍스트로 남음
  • 대괄호 안에는 출력 가능한 ASCII를 사용해야 함
  • 폰트별 지원 길이는 다음과 같음
    • QR Font 1-L: 블록당 최대 17자
    • QR Font 2-L: 블록당 최대 32자
    • QR Font 3-L: 블록당 최대 53자
    • Plain Sans: QR 파싱 없음
  • 일반 텍스트는 Liberation Sans에서 파생된 글꼴로 표시됨

텍스트로 남는 QR 코드와 표시 주의점

  • QR 코드가 텍스트로 유지되므로 렌더링된 QR 블록을 일반 문자처럼 복사·붙여넣기하거나, 평문으로 저장하거나, 라틴 텍스트와 인라인으로 섞을 수 있음
  • 브라우저 레이아웃 엔진은 셰이핑 전에 유니코드 텍스트 기준으로 줄바꿈을 수행함
    • 공백, 점, 슬래시처럼 줄바꿈 가능한 문자가 있고 텍스트 컨테이너 끝에 닿으면 QR 코드가 여러 줄로 나뉠 수 있음
    • HTML에서는 대괄호 블록을 white-space: nowrap; 또는 display: inline-block; 스타일이 적용된 컨테이너로 감싸야 안정적으로 렌더링됨
  • 다운로드와 소스

함께 보면 좋은 글 β

xguru   [-]

이거 좋군요. 언젠가 쓸모가 있을거 같아요.
긱뉴스에 도입하면 어떨까 싶은데 적합한 사용처를 모르겠네요.

텍스트 기반에 적합한 것들은 긱뉴스에 계속 도입중입니다.

Datatype - 텍스트를 차트로 변환하는 가변 폰트
구글, 흑백 이모지 폰트 Noto Emoji 공개

답변달기
GN⁺   [-]
Lobste.rs 의견들

  • QR 코드에서 내용이 어디에 인코딩되는지 보여주는 방식이 좋음. 오른쪽 아래에서 시작해 위아래로 지그재그로 움직이며 오른쪽에서 왼쪽으로 채워지는 흐름이 드러남
    다만 그 목적이라면 위치/정렬/타이밍 마커가 ]를 기다리지 말고 [에서 바로 채워졌으면 구성 과정을 더 잘 볼 수 있었을 듯함. 물론 ]에서 처리하면 이상한 중간 상태나 너무 긴 값이 코드로 오인되는 일을 피할 수 있다는 점도 이해됨

  • 멋짐. 최근 사업에 쓰던 QR 코드가 유료 QR 코드 생성기 뒤에서 납치되는 사기를 당했음
    더 조심했어야 했지만, 웹 기반 JavaScript QR 인코더와 사기성 QR 서비스를 구분하기 어려웠음. 이런 열린 선택지가 검색엔진 최적화를 더 잘해서, 꼭 잘 알아야만 하는 건 아닌 사람들도 사기를 피할 수 있으면 좋겠음

    • 보통 JavaScript QR 생성 라이브러리를 검색한 뒤 GitHub에서 데모 페이지로 들어감 :p
    • QR 코드는 한 번도 스캔해 본 적 없음. 식당이 메뉴를 보려면 QR 코드가 필요하다고 하면 그냥 나감
    • GHCQ의 CyberChef를 쓰면 됨. 내려받을 수 있는 웹 페이지임

  • 아, OpenType이 튜링 완전하다는 걸 생각하면 예상했어야 했음

    • 도전 과제: 어떻게든 OpenType에서 Doom을 실행해 보기

  • 사이트가 잠깐 자체 글꼴을 설정하도록 허용하는 임시 버튼이 있으면 좋겠음

  • 나만 그런 건지 모바일에서는 안 되는 듯함. 선택 상자에서 어떤 글꼴을 골라도 둘 다 일반 텍스트로 보임
    Android의 Brave 브라우저에서 확인함

    • 참고로 iOS Safari에서는 잘 작동함
    • Android의 Firefox에서는 작동함. Chrome은 없어서 확인 못 함

  • QR 내용의 텍스트를 복사할 수 있는 기능이 Chrome에서 깨진 듯함. 개인적으로는 멋진 OpenType 해킹을 제외하면 이게 가장 큰 장점처럼 보이는데, QR 자체를 선택해서 복사하면 닫는 대괄호만 나옴

    • 같은 현상을 봤음. 더블 클릭이 선택하는 범위의 문제에 더 가까워 보임
      선택 영역을 끌어서 QR 전체를 확실히 포함시키면 전체 텍스트도 함께 복사됨
답변달기