# QR 코드 단계별 생성 방법

> Clean Markdown view of GeekNews topic #17841. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=17841](https://news.hada.io/topic?id=17841)
- GeekNews Markdown: [https://news.hada.io/topic/17841.md](https://news.hada.io/topic/17841.md)
- Type: GN+
- Author: [neo](https://news.hada.io/@neo)
- Published: 2024-11-19T10:01:28+09:00
- Updated: 2024-11-19T10:01:28+09:00
- Original source: [nayuki.io](https://www.nayuki.io/page/creating-a-qr-code-step-by-step)
- Points: 5
- Comments: 1

## Topic Body

### 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 코드는 열람 가능함.

## Comments



### Comment 31470

- Author: neo
- Created: 2024-11-19T10:01:28+09:00
- Points: 1

###### [Hacker News 의견](https://news.ycombinator.com/item?id=42165862) 
- QR 코드에 대한 온라인 설명에서 Reed-Solomon 오류 코드 계산이 자주 빠지는 점이 아쉬움
  - 저자는 이를 "길고 지루하며 흥미롭지 않다"고 설명함
  - 이로 인해 관련 정보를 찾기 어려워짐

- Veritasium의 QR 코드 관련 비디오 "I used to hate QR codes. But they're actually genius"가 있음
  - [비디오 링크](https://www.youtube.com/watch?v=w5ebcowAJD8)

- 저자가 받는 피드백이 재미있음
  - [피드백 링크](https://www.nayuki.io/page/poor-feedback-from-readers)

- QR 코드 디코더에 대한 비슷한 설명도 보고 싶음

- Rust로 QR 코드 구현을 한 적이 있음
  - [GitHub 링크](https://github.com/aabiji/qr)

- 기사 제목에 연도를 태그하는 것이 좋은 관행임 (이 경우 2018년)

- QR 코드 작동 방식을 배우는 것이 오랫동안 할 일 목록에 있었는데, 좋은 입문서였음

- QR 코드를 빠르게 만들고 싶었으나 광고가 많은 사이트와 "사용하려면 등록"해야 하는 사이트로 인해 어려움을 겪음
  - GitHub에서 몇 가지를 찾았으나 다른 문제가 있어 이전에 사용한 잘 설계된 라이브러리를 사용하여 직접 구현함
  - 약 15분 소요됨
  - [QR 코드 생성기 링크](https://greggman.github.io/qr-code/)

- 더 많은 옵션을 추가할 수도 있지만 대부분의 사용자는 필요하지 않을 것이라고 생각함

- QR 코드 작동 방식을 알게 되었으니 SQL 쿼리에서도 사용할 수 있음
  - [GitHub 링크](https://github.com/Florents-Tselai/pgQR)