GN⁺: QR 코드 단계별 생성 방법
(nayuki.io)QR 코드 생성 단계별 과정
이 JavaScript 데모 애플리케이션은 텍스트 문자열이 QR 코드 바코드 심볼로 인코딩되는 과정을 자세히 시각화함. 이 페이지의 내용은 QR 코드 생성기 라이브러리가 내부적으로 어떻게 작동하는지를 설명하고 정당화함.
사용자 입력
- 텍스트 문자열: "Hello world"
- 오류 수정 수준: 낮음, 중간, 사분위, 높음
- 최소 버전 강제: 1에서 40 사이
- 마스크 패턴 강제: 자동(-1) 또는 수동(0에서 7)
QR 코드 출력
단계별 과정
0. 유니코드 문자 분석
- 입력 텍스트 문자열의 코드 포인트 수: 17
- 각 문자의 세부 사항:
- 인덱스, 문자, 유니코드 코드 포인트, 숫자 모드, 알파벳 모드, 바이트 모드, 한자 모드로 인코딩 가능 여부
1. 데이터 세그먼트 생성
- 각 문자를 비트로 변환
- 바이트 모드에서 문자는 8, 16, 24, 32 비트를 생성
- 생성된 단일 세그먼트:
- 모드: 바이트
- 개수: 17 바이트
- 데이터: 136 비트 길이
2. 버전 번호에 맞추기
- 세그먼트 목록을 표현하는 데 필요한 총 비트 길이
- 버전 및 오류 수정 수준에 따른 QR 코드 데이터 코드워드 용량
3. 세그먼트 연결, 패딩 추가, 코드워드 생성
- 다양한 비트 문자열을 결합
- 세그먼트 모드, 문자 수, 데이터, 종결자, 비트 패딩, 바이트 패딩
4. 블록 분할, ECC 추가, 인터리브
- 모든 블록에 대한 통계
- 데이터 코드워드를 짧은 블록과 긴 블록으로 분할 후 ECC 코드워드 계산 및 추가
5. 고정 패턴 그리기
- 수평 및 수직 타이밍 패턴 그리기
- 세 개의 모서리에 찾기 패턴 그리기
- 정렬 패턴의 그리드 그리기
- 임시 형식 비트 그리기
- 버전 정보 블록 그리기
6. 코드워드 및 나머지 그리기
- 지그재그 스캔을 계산하여 모든 미채워진 모듈 방문
- 데이터/ECC 모듈을 지그재그 스캔 순서 및 코드워드의 비트 값에 따라 그리기
7. 각 마스크 적용 시도
- 마스크 패턴 적용
- 데이터, ECC, 나머지 모듈에 마스크 XOR 적용
- 실제 형식 비트 그리기
8. 패널티 패턴 찾기
- 동일한 색상의 수평 및 수직 모듈 실행
- 2×2 동일 색상 모듈 상자
- 수평 및 수직 찾기 패턴
- 어두운/밝은 모듈의 균형
9. 패널티 포인트 계산, 최적의 마스크 선택
- 패널티 포인트 계산 방법
- 최저 총 패널티 포인트: 마스크 패턴 3
추가 정보
- QR 코드 설계에 대한 Wikipedia 및 기타 자료 링크 제공
이 웹 애플리케이션의 소스 TypeScript 코드 및 컴파일된 JavaScript 코드는 열람 가능함.
Hacker News 의견
-
QR 코드에 대한 온라인 설명에서 Reed-Solomon 오류 코드 계산이 자주 빠지는 점이 아쉬움
- 저자는 이를 "길고 지루하며 흥미롭지 않다"고 설명함
- 이로 인해 관련 정보를 찾기 어려워짐
-
Veritasium의 QR 코드 관련 비디오 "I used to hate QR codes. But they're actually genius"가 있음
-
저자가 받는 피드백이 재미있음
-
QR 코드 디코더에 대한 비슷한 설명도 보고 싶음
-
Rust로 QR 코드 구현을 한 적이 있음
-
기사 제목에 연도를 태그하는 것이 좋은 관행임 (이 경우 2018년)
-
QR 코드 작동 방식을 배우는 것이 오랫동안 할 일 목록에 있었는데, 좋은 입문서였음
-
QR 코드를 빠르게 만들고 싶었으나 광고가 많은 사이트와 "사용하려면 등록"해야 하는 사이트로 인해 어려움을 겪음
- GitHub에서 몇 가지를 찾았으나 다른 문제가 있어 이전에 사용한 잘 설계된 라이브러리를 사용하여 직접 구현함
- 약 15분 소요됨
- QR 코드 생성기 링크
-
더 많은 옵션을 추가할 수도 있지만 대부분의 사용자는 필요하지 않을 것이라고 생각함
-
QR 코드 작동 방식을 알게 되었으니 SQL 쿼리에서도 사용할 수 있음