이 페이지의 코드가 시작되지 않았습니다.

index.html을 폴더에서 바로 열면 브라우저가 JavaScript 모듈을 막습니다. 그래서 담을 내용을 골라도 아무 일도 일어나지 않아요. 폴더를 http로 띄워서 여세요:

powershell -ExecutionPolicy Bypass -File serve.ps1

그런 다음 http://localhost:8080/을 여세요.

QR & 바코드 — QR 코드와 바코드를 오프라인에서 만들기

입력하면 코드가 됩니다. 만드는 데 아무것도 나가지 않습니다.

언어: 한국어
소스 보기
코드와 그 안에 담긴 내용은 절대 업로드되지 않습니다. 서버가 아예 없으니까요.

QR 코드는 문자열을 두고 하는 산술입니다. 보낼 파일도, 물어볼 서비스도 없습니다. 모드를 고르고, 버전을 정하고, 리드-솔로몬 오류 정정을 계산하고, 마스크를 씌우고, 바코드의 막대와 그 아래 검사 숫자를 뽑는 일까지 전부 이 페이지 안, 누구나 읽어 볼 수 있는 천 줄 남짓의 JavaScript에서 일어납니다. 이 도구에는 네트워크 기능이 하나도 없고, 그 사실이 다른 페이지보다 여기서 더 중요합니다. 사람들이 QR 코드에 가장 자주 담는 것이 와이파이 비밀번호이기 때문입니다.

실시간 확인: 확인 중…

오프라인: 확인 중…

그냥 믿지 마시고 직접 확인해 보세요. 개발자 도구의 '네트워크' 탭을 켜 놓고 와이파이 양식에 비밀번호를 입력해 보십시오. 그 한 글자도 실려 나가는 요청이 없습니다. 아니면 인터넷을 끊고 그냥 코드를 만들어 보셔도 됩니다.

1 코드 종류 고르기

QR 코드는 무엇이든 담고, 휴대폰 카메라가 찾는 것도 그것입니다. 바코드는 숫자를 담는데, 어느 것이 필요한지는 대개 만드는 쪽이 정하지 않습니다. 그걸 요구하는 매장이나 창고, 운송사가 정합니다.

2 무엇을 담을지 말하기

이 코드가 담게 될 정확한 문자열
 

3 생김새 고르기

여백은 코드 둘레의 빈자리가 아니라 코드의 일부입니다. 규격이 요구하는 것은 네 모듈이고, 가장자리까지 바짝 잘라 낸 코드는 많은 스캐너가 아예 보지 못합니다.

아래에 글자 인쇄하기 스캐너가 못 읽을 때 사람이 읽는 것입니다. 유통용 코드에서는 숫자가 여백에도 놓이는데, 일부러 그렇게 합니다. 아무도 잘라 내면 안 되는 빈 공간을 표시해 주거든요.

검사 문자 추가하기 Code 39는 보통 검사 문자를 달지 않습니다. 어떤 시스템은 그걸 고집하는데, 받는 쪽이 그럴 때만 넣으세요. 기대하지 않는 리더는 그걸 끝에 붙은 글자 하나로 읽어 버립니다.

배경 없음 이미 색이 있는 것 위에 올릴 때를 위한 투명 배경입니다. SVG도 PNG도 그대로 유지합니다. 뒤에 오게 되는 것은 밝아야 하고, 아니면 스캐너가 대비를 찾지 못합니다.

QR 코드
색과 크기

4 가져가기

간직할 것은 SVG입니다. 픽셀이 아니라 지시로 적힌 코드라서 어떤 크기로 인쇄해도 뭉개지지 않습니다. 다른 그림보다 여기서 더 중요한 점인데, 흐려진 가장자리야말로 스캐너가 못 읽는 것이기 때문입니다.

Markdown으로 보기

아무것도 업로드하지 않고 QR 코드 만드는 방법

  1. 코드 종류를 고릅니다. QR 코드는 무엇이든 담고 휴대폰 카메라가 찾는 것도 그것이라, 누가 따로 말해 주지 않았다면 답은 QR 코드입니다. 바코드는 숫자를 담는데, 어느 것이 필요한지는 그걸 스캔할 쪽이 정합니다. 매장은 EAN-13이나 UPC-A를, 물류 상자는 ITF-14를 원하고, 사내용은 대개 Code 128입니다.
  2. 무엇을 담을지 말합니다. 링크가 가장 흔한 경우이고, 그 위의 칸들이 휴대폰이 알아듣는 다른 형식을 만들어 줍니다. 스스로 접속을 권하는 와이파이, 저장을 권하는 연락처, 이메일, 문자 메시지, 전화번호, 지도상의 위치까지요. 무엇을 고르든 완성된 문자열이 페이지에 표시됩니다. QR 코드가 담는 것은 언제나 그 문자열뿐이니까요.
  3. 얼마나 상해도 되는지 정합니다. 네 단계가 오류 정정을 더 넣거나 덜 넣고, 정정이 많아지면 코드는 더 크고 촘촘해집니다. 화면용이면 L, 보통 종이면 M, 손을 많이 타거나 작게 인쇄되거나 볕 드는 유리창에 붙일 것이면 H입니다. 매일 닦아 내는 메뉴판의 코드라면 Q나 H를 쓸 만합니다.
  4. 크기와 여백과 색을 정합니다. 여백은 코드의 일부입니다. 규격이 요구하는 것은 사방으로 네 모듈의 여백이고, 그것을 잘라 내는 것이 인쇄한 코드가 스캔되지 않는 가장 흔한 이유입니다. 밝은 바탕에 어두운 코드, 그리고 실제로 대비가 있어야 합니다. 스캐너는 둘의 차이를 읽기 때문에 흰 바탕에 옅은 회색은 안 되고, 어두운 바탕에 밝은 코드는 꽤 많은 리더에서 아예 실패합니다.
  5. 손에 있는 휴대폰으로 확인합니다. 천 장을 인쇄하기 전에 화면의 코드를 한 번 스캔해 보세요. 10초면 되고, 미리보기로는 잡을 수 없는 실수를 통째로 잡아냅니다. 이스케이프가 필요했던 문자가 든 와이파이 비밀번호, https://가 빠진 링크, 한 자리가 모자란 바코드 번호 같은 것들요.
  6. SVG를 가져갑니다. 픽셀이 아니라 지시로 적힌 코드라서 어떤 크기로 인쇄해도 뭉개지지 않습니다. 그리고 뭉개진 가장자리야말로 스캐너가 못 읽는 것입니다. 붙여 넣을 곳이 SVG를 받지 않는다면 PNG도 함께 가져가세요. 모듈당 정수 픽셀로 그리기 때문에 그쪽도 가장자리가 흐리지 않습니다.

자세한 설명

남의 휴대폰에서도 스캔되는 QR 코드 만드는 방법 오류 정정 수준을 무엇으로 고를지, QR 코드 둘레의 흰 여백이 왜 코드의 일부인지, 얼마나 크게 인쇄해야 하는지, 그리고 무료 생성기의 '다이내믹' 코드가 나중에 무엇을 앗아 가는지.

자주 묻는 질문

제가 입력한 것이 어딘가로 전송되나요?

아닙니다. QR 코드는 문자열을 두고 하는 산술이고, 그 산술은 내 기기에서 도는 내 브라우저가 합니다. 이 도구에는 네트워크 기능이 하나도 없어서 무언가를 가져오지도, 보내지도 않습니다. 이 페이지의 Content-Security-Policy에 연결해도 되는 주소가 전부 적혀 있는데, 그중 이 사이트 것은 하나도 없습니다. 다른 페이지보다 여기서 더 값어치 있는 사실이지요. 사람들이 QR 코드에 가장 자주 담는 것이 와이파이 비밀번호이기 때문입니다.

이 코드는 만료되거나 나중에 멈추나요?

아닙니다. 그럴 수가 없습니다. 입력한 것이 곧 코드가 담는 것이라, 스캔하면 언제까지나 정확히 그 문자열이 나옵니다. 만료되는 코드는 안에 남의 주소가 든 것들입니다. "다이내믹" QR 코드는 생성기 서버의 링크를 담고 있고 그 서버가 원래 주소로 넘겨 줍니다. 그러니 그쪽이 스캔을 모두 셀 수 있고, 목적지를 바꿀 수도 있으며, 체험 기간이 끝나면 꺼 버릴 수도 있습니다. 여기서는 아무것도 거쳐 가지 않습니다.

무료인가요? 상업적으로 써도 되나요?

무료이고, 계정도 워터마크도 개수 제한도 없으며, 결과를 제품이나 포스터, 가게 앞에 써도 됩니다. QR Code는 덴소 웨이브의 등록 상표이지만, 코드를 쓰는 사람에게 권리를 행사하지 않겠다고 밝혀 두었습니다. 규격은 ISO/IEC 18004으로 공개되어 있어 누구나 자유롭게 구현할 수 있고, 이 페이지가 하는 일이 바로 그것입니다. 이 사이트는 광고로 유지됩니다.

오류 정정 수준은 무엇을 고르면 되나요?

특별한 이유가 없다면 M입니다. L은 코드가 가장 작고 화면에서는 충분합니다. M은 보통 다루기를 견딥니다. Q와 H는 작게 인쇄하거나 코팅하거나 유리창에 붙이거나 로고로 일부를 가릴 코드를 위한 것입니다. 한 단계 올릴 때마다 검사 데이터가 늘어나서, 같은 글자 수라도 더 큰 심벌이 필요합니다. L에서 H로 가면 같은 문자열에 대해 모듈 수가 대략 두 배가 됩니다.

QR 코드에는 얼마나 담을 수 있나요?

가장 큰 177모듈 정사각형에서 숫자만이면 7,089자, 대문자와 숫자면 4,296자, 그 밖의 바이트면 2,953바이트입니다. 그것도 오류 정정이 가장 약할 때이고, 가장 강할 때는 그 3분의 1쯤입니다. 현실적인 한계는 형식이 아니라 스캐너입니다. 몇백 자를 넘기면 모듈이 너무 작아져 보통 휴대폰 카메라가 팔 길이에서 분간하지 못합니다. 코드가 길다는 것은 보통 그 안에 짧은 링크가 들어가야 한다는 신호입니다.

링크를 소문자로 쓰면 왜 코드가 커지나요?

QR 코드에는 대문자와 숫자를 두 글자당 11비트로 담는 모드가 있는데, 소문자에는 그런 모드가 없어서 글자당 8비트가 들기 때문입니다. HTTPS://EXAMPLE.COM/PAGE라고 쓴 URL은 같은 URL을 소문자로 쓴 것보다 3분의 1쯤 작아질 수 있습니다. 스킴과 호스트는 대소문자를 가리지 않으므로 크게 외쳐도 크기 말고는 달라지는 것이 없습니다. 호스트 뒤의 경로는 가리니 그건 그대로 두세요.

QR 코드를 만드는 것 말고 읽을 수도 있나요?

이 페이지는 못 하지만 옆 페이지가 합니다. 리더가 사진이나 스크린숏, 또는 카메라를 받아 그 안의 문자열을 돌려줍니다. 그리는 것보다 훨씬 큰 일입니다. 이미지 속에서 심벌을 찾고, 찍힌 각도를 보정하고, 손상된 부분을 복구하는 세 가지는 이 페이지에는 없는 문제니까요. 그래서 여기 버튼이 아니라 별도의 도구입니다. 조건은 나머지와 같습니다. 아무것도 올라가지 않고, 카메라 화면도 남기지 않습니다.

여백은 왜 필요하고, 줄여도 되나요?

QR 코드 둘레의 빈 공간은 코드의 일부입니다. 리더는 그것으로 심벌이 어디서 끝나는지 알아내고, 규격은 사방 네 모듈을 요구합니다. 바코드는 열 모듈쯤을 원하고요. 여기서 0으로 만들 수 있고 그림은 더 깔끔해 보이겠지만, 그러면 꽤 많은 스캐너가 아예 보지 못합니다. 특히 배경이 복잡할 때 그렇습니다. 자리가 문제라면 여백을 깎지 말고 코드를 작게 만드세요.

어떤 바코드가 필요한가요?

스캔할 사람이 달라는 것입니다. EAN-13은 북미 밖의 유통 바코드이고 UPC-A가 북미의 것인데, 둘 다 GS1에서 발급받은 번호가 필요합니다. 그 번호가 제품만이 아니라 회사를 가리키기 때문입니다. EAN-8은 작은 포장을 위한 짧은 판본입니다. ITF-14는 물류 상자에 붙습니다. Code 128과 Code 39는 숫자뿐 아니라 글자도 담고 등록이 전혀 필요 없어서, 자산이나 선반, 작업 지시서 같은 사내용에는 이쪽이 맞습니다.

검사 숫자가 무엇이고, 도구는 왜 그것을 붙였나요?

유통 바코드의 마지막 숫자로, 앞의 숫자들에서 계산해 냅니다. 스캐너가 잘못 읽은 것과 제대로 읽은 것을 구별할 수 있도록요. EAN-13은 열두 자리를 받아 열세 번째를 계산하고, UPC-A는 열한 자리를 받아 열두 번째를 계산합니다. 짧은 번호를 입력하면 이 페이지가 붙여 줍니다. 전체 번호를 입력하면 주신 것을 검사하고, 조용히 고치는 대신 거부합니다. 잘못 입력한 숫자를 말없이 고치면 남의 제품으로 스캔되는 라벨이 되니까요.

QR 코드 한가운데 로고를 넣을 수 있나요?

여기서는 안 되지만, 다른 데서 그게 되는 이유는 알아 둘 만합니다. 가능하게 해 주는 것은 오류 정정입니다. H 수준에서는 모듈의 30%쯤이 망가져도 코드가 읽히므로, 파인더 패턴이 없는 한가운데를 그보다 좀 덜 덮는 로고는 복구 가능한 손상이 됩니다. H 수준으로 만든 코드를 이미지 편집기에 넣고, 로고를 면적의 5분의 1 아래로 두고, 믿지 말고 실제 휴대폰으로 시험해 보세요.

왜 PNG보다 SVG가 나은가요?

코드는 결국 가장자리이고, PNG에는 그 가장자리를 만들 픽셀 수가 정해져 있기 때문입니다. 확대하면 모든 가장자리가 뭉개지는데, 뭉개진 가장자리야말로 스캐너가 힘들어하는 것입니다. 1200dpi 인쇄기에 512픽셀 PNG를 주는 것은 그 차이를 지어내라고 시키는 셈이에요. SVG는 사각형을 지시로 적어 둔 것이라 명함이든 옥외 광고판이든 선명하게 인쇄됩니다. 여기 PNG는 모듈당 정수 픽셀로 그리는데, PNG로서는 그게 최선입니다.

오프라인에서도 되나요?

됩니다. 페이지를 한 번 불러온 다음 인터넷을 끊어도 계속 동작합니다. 아무것도 업로드되지 않는다는 가장 간단한 증명이기도 하고요. 입력한 글자를 어딘가로 보내서 코드를 그려 오는 도구라면 선을 뽑는 순간 멈춰 버릴 테니까요.