JavaScript로 간단한 QR 코드 생성기 만들기 (goqr.me API 활용)

박인정(Jay)·2024년 11월 5일

이번 포스팅에서는 자바스크립트와 goqr.me API를 활용해 간단한 QR 코드 생성기를 만들어보는 실습을 소개합니다.
QR 코드는 일상생활에서 많이 접할 수 있는 2차원 바코드 형태로, 손쉽게 정보를 전달할 수 있는 장점이 있습니다.
이 프로젝트를 통해 QR 코드가 어떻게 만들어지는지, 그리고 JavaScript, HTML, CSS를 사용하면 별도의 복잡한 라이브러리를 쓰지 않고도 손쉽게 QR 코드를 생성할 수 있습니다.

1. 실습 개요

사용 API : goqr.me의 QR 코드 생성 API
GitHub Link : https://github.com/InJungPark/js-qr-basic
기본 원리 :

사용자가 입력한 텍스트를 API에 쿼리 파라미터로 전송
생성된 QR 코드 이미지를 태그에 표시

추가 기능 :
- Enter 키로도 생성 가능
- 텍스트가 비어 있을 때 에러 애니메이션(흔들기) 및 빨간색 테두리 표시

2. 전체 코드 구조

구조는 아주 간단합니다.

.
├─ index.html  // HTML 구조
├─ style.css   // 간단한 스타일
└─ app.js      // JS 로직

각 파일의 주요 내용은 다음과 같습니다.

2.1. HTML (index.html)

<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>QR Code</title>
  <link href="style.css" rel="stylesheet" />
</head>

<body>
  <div class="container">
    <p>TEXT & URL</p>
    <input type="text" id="qrText" placeholder="text or url" autofocus="true" />
    <div id="qrImgBox" class="imgContainer">
      <img id="qrImg" src="" alt="qr img" aria-label="QR 이미지 입니다." draggable="false" />
    </div>
    <button>QR Code Creation</button>
  </div>
  <script src="app.js"></script>
</body>
</html>

input에 사용자가 QR 코드로 만들 문자열 또는 URL을 입력
#qrImgBox 영역에 API로부터 받은 QR 코드 이미지를 출력할 <img> 배치
button 클릭 시 또는 Enter 키 입력 시 QR 코드 생성

2.2. CSS (style.css)

* {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  box-sizing: border-box;
}

body {
  background: black;
}

.container {
  background: lightgray;
  width: 60%;
  padding: 25px 35px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  border-radius: 20px;
}

.container p {
  font-weight: 600;
  font-size: 1.6rem;
  margin-bottom: 6px;
  text-align: center;
}

.container input {
  width: 100%;
  height: 50px;
  border: 1px solid #102a42;
  outline: 0;
  padding: 10px;
  margin: 10px 0 20px;
  border-radius: 10px;
  font-size: 1.2rem;
}

.container input.error-input {
  border-color: red;
}

.container button {
  width: 100%;
  height: 50px;
  border-radius: 10px;
  outline: 0;
  border: 0;
  background: white;
  color: cadetblue;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.6);
  cursor: pointer;
  margin: 10px 0;
  font-weight: 500;
  font-size: 1.2rem;
}

.container button:hover {
  background: #b2d8b6;
  color: #3b3b3b;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3);
}

.imgContainer {
  width: 200px;
  border-radius: 5px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.8s;
}

.imgContainer img {
  width: 100%;
  padding: 10px;
}

.imgContainer.showImg {
  max-height: 300px;
  margin: 10px auto;
  border: 1px solid #b2d8b6;
}

/* 흔들리는 애니메이션 */
.error {
  animation: shake 0.1s linear 10;
}

@keyframes shake {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-2px);
  }
  50% {
    transform: translateX(0);
  }
  75% {
    transform: translateX(2px);
  }
  100% {
    transform: translateX(0);
  }
}

.error-input 클래스를 추가해 에러 시 빨간 테두리를 표시
.error 애니메이션이 흔들리는 효과를 구현
.showImg를 통해 QR 코드가 생성될 때 이미지 컨테이너의 최대 높이를 늘려 부드럽게 노출

2.3. JS (app.js)

// 변수 선언
const qrText = document.getElementById("qrText");
const qrImg = document.getElementById("qrImg");
const qrImgBox = document.getElementById("qrImgBox");
const generateButton = document.querySelector("button");

// Error 보여주기
const showError = () => {
  qrText.classList.add("error-input");
  qrText.classList.add("error");
};

// Error 제거하기
const removeError = () => {
  qrText.classList.remove("error-input");
  qrText.classList.remove("error");
};

// QR Code 생성 함수
const generateQRCode = () => {
  if (qrText.value.length > 0) {
    // goqr.me API에서 제공되는 QR 코드 생성 URL
    // data 파라미터에 입력값을 넣어주면 자동으로 QR 코드 생성
    qrImg.src = `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${qrText.value}`;

    // 이미지 보여주기
    qrImgBox.classList.add("showImg");
    removeError();
  } else {
    // 텍스트가 비어 있을 때 에러 표시
    showError();
  }
};

// 버튼 클릭 시 생성
generateButton.addEventListener("click", generateQRCode);

// input 입력 시 에러 제거
qrText.addEventListener("input", () => {
  if (qrText.value.length > 0) {
    removeError();
  }
});

// input에서 Enter 키를 누르면 QR 코드 생성
qrText.addEventListener("keydown", (event) => {
  if (event.key === "Enter") {
    generateQRCode();
  }
});

동작원리

1. showError()

input에 error-input 클래스를 붙여 빨간색 테두리 표시
error 클래스로 흔들리는 애니메이션 부여

2. `removeError()`

에러 상태(빨간 테두리, 흔들림)를 제거

3. `generateQRCode()`

qrText의 값이 있을 경우,
- QR 코드 API URL에 data 파라미터로 텍스트를 넣고,
- <img> 태그의 src 속성을 이 URL로 설정
비어 있을 경우 showError()로 에러 표시

3. 실행 방법

프로젝트 다운로드 혹은 폴더 생성
index.html, style.css, app.js를 위와 같이 구성
브라우저에서 index.html을 열기
텍스트 혹은 URL을 입력하고 "QR Code Creation" 버튼을 클릭하거나 Enter 키를 눌러 QR 코드 생성

4. 추가로 해볼 만한 것들

QR 코드 크기 조절

?size=150x150 부분을 원하는 크기로 수정 (예: 200x200, 300x300 등)

에러 보정 레벨 변경

goqr API 문서를 참고해 ECLevel(에러 보정률) 등을 변경하여 다양한 옵션 시도

QR 이미지 다운로드 기능

<img> 태그에 표시된 QR 코드를 마우스 오른쪽 클릭 → “이미지 저장”
좀 더 편리하게 ‘다운로드 버튼’을 만들어 canvas나 Blob 형태로 다운로드받도록 구현 가능

자동 생성

버튼 클릭 없이 입력이 바뀔 때마다 자동으로 QR 이미지를 업데이트하도록 적용 가능

5. 마무리

이렇게 goqr.me API를 통해 아주 간단하게 QR 코드를 생성해볼 수 있습니다.
HTML & CSS를 이용해 스타일링하고, 자바스크립트로 API 호출 후 <img>에 표시하기만 하면 되는 매우 직관적인 방법입니다.

텍스트가 비어 있을 때 에러를 주는 부분이나,
이미지를 천천히 나타내는 애니메이션 효과,
Enter 키로도 동작하도록 만드는 디테일 등이 사용자 경험을 높여줍니다.

원리를 이해했다면, 더 나아가 스캔(Decoding) 기능까지 구현하거나, QR 코드 생성/다운로드/공유 등을 통합한 다양한 프로젝트를 시도해볼 수도 있습니다.

궁금한 점이나 개선 아이디어가 있다면 언제든 댓글로 남겨주세요!

박인정(Jay)

백엔드 개발자에서 프론드엔드 개발자로

이전 포스트

JavaScript 기초 실습 : Counter 기능 구현하기

다음 포스트

JavaScript로 간단한 QR 코드 생성기 만들기 (goqr.me API 활용)

1. 실습 개요

2. 전체 코드 구조

2.1. HTML (index.html)

2.2. CSS (style.css)

2.3. JS (app.js)

동작원리

1. showError()

2. `removeError()`

3. `generateQRCode()`

3. 실행 방법

4. 추가로 해볼 만한 것들

5. 마무리

JavaScript 기초 실습 : Counter 기능 구현하기

JavaScript로 간단한 스톱워치 구현하기⏱️

0개의 댓글

JavaScript로 간단한 QR 코드 생성기 만들기 (goqr.me API 활용)

1. 실습 개요

2. 전체 코드 구조

2.1. HTML (index.html)

2.2. CSS (style.css)

2.3. JS (app.js)

동작원리

1. showError()

2. removeError()

3. generateQRCode()

3. 실행 방법

4. 추가로 해볼 만한 것들

5. 마무리

JavaScript 기초 실습 : Counter 기능 구현하기

JavaScript로 간단한 스톱워치 구현하기⏱️

0개의 댓글

2. `removeError()`

3. `generateQRCode()`