React로 QR 코드 생성기 만들기

요즘은 QR 코드가 일상 속 거의 모든 곳에 쓰이고 있습니다. 카페의 메뉴판, 행사 입장권, 웹사이트 링크, 심지어는 명함에도 QR 코드가 들어갑니다. QR 코드는 정보를 손쉽게 전달할 수 있는 효율적인 수단이며, 스마트폰 하나면 누구나 즉시 접근할 수 있다는 점에서 매우 편리하죠. 이번 글에서는 React 환경에서 직접 QR 코드 생성기를 만들어보면서 웹 개발 과정과 원리를 함께 살펴보겠습니다.

1. 프로젝트 시작과 환경 구성

QR 생성기를 만들기 위해 React를 사용했습니다. React는 컴포넌트 단위로 UI를 관리하기 때문에 입력과 출력이 명확하게 구분되어 있고, 상태 관리도 간편합니다. 우선 새 프로젝트를 생성하려면 터미널에서 다음 명령을 입력합니다.

npx create-react-app qr-generator

설치가 완료되면 npm start로 로컬 개발 서버를 실행할 수 있습니다. 이제 QR 코드를 만들어줄 라이브러리를 추가해보겠습니다.

npm install qrcode.react

이 라이브러리는 React에서 손쉽게 QR 코드를 생성할 수 있게 도와주는 도구입니다. 복잡한 로직 없이 문자열을 입력하기만 하면 자동으로 QR 이미지를 렌더링해줍니다.

2. 기본 구조 만들기

이제 src/App.js 파일을 열고 다음과 같이 코드를 작성합니다. 이 예제에서는 사용자가 입력한 텍스트를 QR 코드로 즉시 변환하도록 구현했습니다.

import React, { useState } from "react";
import { QRCodeCanvas } from "qrcode.react";

function App() {
  const [text, setText] = useState("");

  return (
    <div className="App">
      <h1>QR 코드 생성기</h1>
      <input
        type="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
        placeholder="텍스트나 URL을 입력하세요"
      />
      <div className="qr-area">
        <QRCodeCanvas value={text || "https://tooloves.net"} size={200} />
      </div>
    </div>
  );
}

export default App;
      

이 코드의 핵심은 QRCodeCanvas 컴포넌트입니다. value 속성에 들어가는 값이 바로 QR 코드로 변환되는 데이터이며, size 속성으로 QR 이미지의 크기를 조절할 수 있습니다. 이렇게 하면 사용자가 입력한 문자열이 실시간으로 QR 코드로 나타납니다.

3. 스타일링과 사용자 경험 개선

단순한 입력창과 QR 코드만으로도 기능은 충분하지만, 보기 좋고 직관적인 디자인은 사용자 경험을 향상시킵니다. 예를 들어 App.css 파일에 다음과 같은 스타일을 추가해보겠습니다.

.App {
  text-align: center;
  padding: 40px;
  background: #fafafa;
}

input {
  padding: 10px;
  width: 300px;
  font-size: 16px;
  border-radius: 8px;
  border: 1px solid #ccc;
}

.qr-area {
  margin-top: 20px;
}
      

이 스타일을 적용하면 깔끔한 입력창과 여백이 생기며, 시각적으로 더 안정감 있는 인터페이스를 만들 수 있습니다. 단순하지만 이런 디테일이 사용자 만족도를 크게 높여줍니다.

4. 이미지 저장 기능 추가

사용자가 생성한 QR 코드를 이미지 파일로 저장할 수 있도록 기능을 확장할 수도 있습니다. qrcode.react는 Canvas 요소를 사용하므로, JavaScript의 toDataURL() 메서드를 활용하면 이미지를 추출할 수 있습니다. 예를 들어 “저장하기” 버튼을 누르면 PNG로 다운로드되게 만들 수 있습니다.

const downloadQR = () => {
  const canvas = document.querySelector("canvas");
  const url = canvas.toDataURL("image/png");
  const link = document.createElement("a");
  link.href = url;
  link.download = "qrcode.png";
  link.click();
};
      

이 기능을 추가하면, 단순한 QR 생성기를 넘어 실사용 가능한 도구가 됩니다. 웹사이트, 앱, 또는 개인 프로젝트에서도 활용하기 좋은 형태로 발전시킬 수 있습니다.

5. 마무리하며

이번 프로젝트를 통해 React의 컴포넌트 구조와 상태 관리, 외부 라이브러리의 활용 방법을 자연스럽게 익힐 수 있었습니다. 또한 “간단한 아이디어도 실제로 구현해보면 다양한 확장 가능성이 생긴다”는 점을 다시 느꼈습니다.

QR 코드 생성기는 단순히 문자열을 시각적으로 바꾸는 도구가 아니라, 정보를 쉽게 연결하는 하나의 “인터페이스”입니다. 앞으로 이 프로젝트를 발전시켜서 색상 변경, 로고 삽입, 배경 제거 등 다양한 기능도 추가해볼 생각입니다. React의 유연함과 오픈소스 생태계를 활용하면, 누구나 이런 프로젝트를 손쉽게 만들어볼 수 있습니다.

이 글이 React 입문자나 웹 개발에 관심 있는 분들에게 도움이 되기를 바랍니다. 단순한 QR 생성기 프로젝트라도, 그 안에는 사용자 경험, 상태 관리, UI 구성 등 다양한 학습 포인트가 담겨 있습니다. 실제로 구현하고 배포하면서 성장하는 과정이야말로 개발의 가장 큰 즐거움입니다.