QR Code 만들기

얼마 전 사이드 프로젝트로 URL 단축 서비스를 만들다가 QR Code도 같이 적용시키면 재밌을 것 같아서

적용해 보았다. 어려울 줄 알았는데 생각보다 엄청 간단해서 놀랐다.

 

✅ QrCodeController

Controller는 URL을 전달받아서 URL을 qrCode로 변형시킨 뒤 돌려준다.

package sideproject.cutly.controller;

import jakarta.servlet.http.HttpServletResponse;
import lombok.RequiredArgsConstructor;
import org.springframework.web.bind.annotation.*;
import sideproject.cutly.service.QrCodeService;

import java.io.IOException;

@RestController
@RequiredArgsConstructor
@RequestMapping("/qrcode")
public class QrCodeController {

    private final QrCodeService qrCodeService;

    @GetMapping
    public void getQrCode(@RequestParam String url, HttpServletResponse response) throws IOException {
        byte[] qrCodeImage = qrCodeService.generateQrCode(url, 250, 250);
        response.setContentType("image/png");
        response.getOutputStream().write(qrCodeImage);
    }
}

---

✅ QrCodeService

실질적으로 전달 받은 URL을 qrCode로 변형하는 역할을 담당한다.

package sideproject.cutly.service;

import com.google.zxing.BarcodeFormat;
import com.google.zxing.EncodeHintType;
import com.google.zxing.MultiFormatWriter;
import com.google.zxing.client.j2se.MatrixToImageWriter;
import com.google.zxing.common.BitMatrix;
import org.springframework.stereotype.Service;

import java.io.ByteArrayOutputStream;
import java.util.HashMap;
import java.util.Map;

@Service
public class QrCodeService {

    /**
     * 주어진 URL을 기반으로 지정된 크기의 QR 코드를 생성하여 바이트 배열로 반환합니다.
     *
     * @param url QR 코드로 생성할 URL
     * @param width QR 코드의 너비 (픽셀 단위)
     * @param height QR 코드의 높이 (픽셀 단위)
     * @return 생성된 QR 코드의 PNG 이미지 바이트 배열
     * @throws RuntimeException QR 코드 생성 중 오류 발생 시 예외 발생
     */
    public byte[] generateQrCode(String url, int width, int height) {
        try {
            Map<EncodeHintType, Object> hints = new HashMap<>();
            hints.put(EncodeHintType.CHARACTER_SET, "UTF-8");

            BitMatrix bitMatrix = new MultiFormatWriter().encode(
                    url, BarcodeFormat.QR_CODE, width, height, hints);

            ByteArrayOutputStream outputStream = new ByteArrayOutputStream();
            MatrixToImageWriter.writeToStream(bitMatrix, "PNG", outputStream);
            return outputStream.toByteArray();
        } catch (Exception e) {
            throw new RuntimeException("QR 코드 생성 실패", e);
        }
    }
}

---

✅ JS

Service와 Controller가 작성이 되었다면 JS에서 호출하여 qrCode를 받아본다.

$(document).ready(function () {
    $('#qrForm').on('submit', function (e) {
        e.preventDefault();

        const url = $('#url').val();
        const qrCodeApi = `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(url)}`;
        // const qrCodeApi = `/qrcode/generate?url=${encodeURIComponent(url)}`;

        // 로딩 아이콘 표시 및 기존 QR 코드 숨김
        $('#qrCodeResult').fadeIn();
        $('#qrLoading').show();
        $('#qrCodeImage').hide();

        // QR 코드 이미지 로드
        const qrImg = new Image();
        qrImg.src = qrCodeApi;
        qrImg.onload = function () {
            $('#qrLoading').hide();  // 로딩 아이콘 숨김
            $('#qrCodeImage').attr('src', qrCodeApi).fadeIn(); // QR 코드 표시
        };
    });
});

---

✅ 테스트

이제 실제로 URL을 기반으로 qrCode가 생성되는지 확인해 본다.

 

qrCode 생성

 

정상적으로 생성되는 것을 볼 수 있다!

https://github.com/Kimmingki/cutly

GitHub - Kimmingki/cutly: URL 단축 웹 만들기~👍