QR Code - boostcamp-2020/Project15-C-Client-Based-Formula-Editor GitHub Wiki

QR 코드(영어: QR code, Quick Response code)은 흑백 격자무늬 패턴으로 정보를 나타내는 매트릭스 형식의 이차원 코드이다. 비슷한 용도로 먼저 사용된 이 차원 코드로는 바코드가 있다. 바코드는 이름 그대로 단순한 막대기 모양의 바를 이차원으로 나열한 것이다. QR코드는 주로 한국, 일본, 중국, 영국, 미국 등에서 많이 사용되며 명칭은 덴소 웨이브의 등록 상표 'Quick Response'에서 유래하였다. 종래에 많이 쓰이던 바코드의 용량 제한을 극복하고 그 형식과 내용을 확장한 2차원의 패턴으로 종횡의 정보를 가져서 숫자 외에 문자의 데이터를 저장할 수 있다. 보통 디지털카메라나 전용 스캐너로 읽어 들여 활용한다. 국립국어원에서는 QR 코드를 정보무늬로 다듬었다.

QR코드는 1994년 일본 도요타 자동차 자회사인 덴소 웨이브가 도요타 자동차 전용 부품을 구별하기 위해 개발하면서 시작됐다. 기존 바코드 방식이 1차원적인 가로 선만으로는 담을 수 있는 정보의 양이 제한되기 때문에, 일정 면적에 정보를 담을 수 있는 2차원 코드를 개발한 것이다. 기존의 바코드가 20자 내외의 숫자 정보만 저장할 수 있지만, QR코드는 숫자 최대 7,089자, 문자 최대 4,296자를 저장할 수 있다.

QR코드는 정사각형 안 흑백 격자선 위로 다양한 무늬가 입혀진 것이다. QR코드는 크게 3가지 패턴으로 구성된다. 위치 찾기 패턴과 얼라인먼트 패턴, 셀 패턴 이다. 위치 찾기 패턴은 모든 QR코드의 세 모서리에 크게 자리 잡고 있는 사각형이다. 해당 기능은 QR코드를 인식기가 360도 어느 방향에서 감지하더라도 QR코드의 위치를 정확하게 파악, 빠른 정보 탐색이 가능하도록 만드는 일종의 나침반 기능을 한다. 이를 통해 데이터 인식 및 분석 속도가 빨라져 QR코드란 이름도 ‘빠른 응답’(Quick Response)에서 나왔다.

여기에 얼라인먼트 패턴과 셀 패턴 등이 더해져 QR코드를 이룬다. 얼라인먼트 패턴은 QR코드에 얼룩이 묻거나 또는 일그러지거나 파손된 경우에도 인식할 수 있게 하는 역할을 한다. 셀 패턴은 흑백 점과 흰색 여백을 통해 데이터가 저장되는 곳이다. QR코드에 담긴 데이터 인식은 빛의 흡수와 반사를 감지하는 적외선 센서를 통해 이뤄진다. 적외선 센서는 적외선을 방출하는 발광소자와 이를 감지하는 수광소자로 분리돼 있다. QR코드의 검은색은 빛을 흡수하고, 흰색은 빛이 반사한다. 적외선 센서는 QR코드의 패턴을 인식하는 것이다.

QR Code 관련 코드

QR Code 생성에 사용한 라이브러리

우리가 value로 Props를 넘겨주게 되면

내부적으로 다음과 같은 코드를 실행하여 UTF-16 코드로 만들어준다.

function convertStr(str: string): string {
  let out = '';
  for (let i = 0; i < str.length; i++) {
    let charcode = str.charCodeAt(i);
    if (charcode < 0x0080) {
      out += String.fromCharCode(charcode);
    } else if (charcode < 0x0800) {
      out += String.fromCharCode(0xc0 | (charcode >> 6));
      out += String.fromCharCode(0x80 | (charcode & 0x3f));
    } else if (charcode < 0xd800 || charcode >= 0xe000) {
      out += String.fromCharCode(0xe0 | (charcode >> 12));
      out += String.fromCharCode(0x80 | ((charcode >> 6) & 0x3f));
      out += String.fromCharCode(0x80 | (charcode & 0x3f));
    } else {
      // This is a surrogate pair, so we'll reconsitute the pieces and work
      // from that
      i++;
      charcode =
        0x10000 + (((charcode & 0x3ff) << 10) | (str.charCodeAt(i) & 0x3ff));
      out += String.fromCharCode(0xf0 | (charcode >> 18));
      out += String.fromCharCode(0x80 | ((charcode >> 12) & 0x3f));
      out += String.fromCharCode(0x80 | ((charcode >> 6) & 0x3f));
      out += String.fromCharCode(0x80 | (charcode & 0x3f));
    }
  }
  return out;
}

그 후에 내부적으로 설치된 qr.js라는 라이브러리를 사용하여 QR코드를 만들어서 canvas 형태로 보여준다.

우리는 위의 라이브러리를 사용하여 QR Code를 만들었다. QR Code 생성에 imgur에 올린 image의 id를 받아서 '백엔드주소/id' 를 Qr Code 컴포넌트의 value로 넘겨 QR코드로 만들었고, QR코드를 찍을 시 우리 백엔드 주소로 이동하여 이미지를 볼 수 있게 만들었다. save를 할 시에는 canvas의 toDataUrl 메소드를 활용하여 QR Code 이미지 자체를 저장할 수 있게 하였다.

import QRcode from 'qrcode.react';

...

<QRcode value={imageUrl} />