QR코드에 대한 궁금증
항상 카카오톡이나 네이버 인증 또는 QR코드를 웹사이트와 연결시켜주는 광고 등을 보면서 궁금증이 많은 저에게 궁금한 호기심이 생겼습니다. 항상 신기해하고, 궁금한 내용이라 QR코드를 어떻게 제작하고, 스프링부트로 QR코드를 구현할 수 있을까 라는 궁금증이 생겨 QR코드에 대해 구글링을 하여 알아보고, 공부를 해본 내용을 정리해보았습니다.
QR코드 간단 설명
2차원 매트릭스 형태로 이루어진 정보 표시 방법입니다.
QR 코드를 찍어서 직접 웹사이트나 다른 페이지로 연결시켜주는 역할을 하기도 하고, 사용자 정보를 QR 코드에 담아 스캔 후 인증하는 방법으로도 사용합니다.
QR 코드는 공공기관이나 박물관 등 정보 안내에 대한 내용을 전달하기 위해 쓰이기도 합니다.
또는 결제 시스템이나 주문 시스템에도 QR 코드가 쓰입니다.
일상 생활에서 QR 코드가 많이 보이고, 구글링을 조금만 해보아도 QR코드 관련 웹사이트나 어플이 많이 나옵니다.
간단 QR 코드 웹사이트 제작
<QR 코드>
- 어떤 방향으로 스캔해도 인식 가능.(대각선, 정방향, 역방향 등등)
- 최대 숫자 7089자, 문자 4296자에 해당하는 정보 저장 가능.
- 인식률, 속도 높음.
- 암호화, 위변조 방지 등 보안 기능 존재.
- 단점: QR 코드의 수정,삭제 불가능.
QR 코드 제작에 대한 궁금증을 해결하기 위해서,웹 사이트 주소를 입력하면 QR코드로 변환해주는 프로그램을 만들어 보기러 하였습니다.
개발환경:
- intelliJ
- jdk 11
- maven
프레임워크: - springboot 2.5.6
<웹 사이트 구상>
1.화면 구상
-> 화면은 매우 간단하게 기능만을 테스트 할 예정이기 때문에 입력창 하나와 버튼을 만들 것입니다.
2. 입력창에 url을 입력하고, 버튼을 누르면 페이지가 이동되면서 중앙에 그 사이트에 대한 qr 코드가 나옵니다.
QrService , QrServiceImpl
-QrService-
Object cerateQR(String url) throws WriterException, IOException;-QrServiceImpl-
@Service
public class QrServiceImpl implements QrService{
@Override
public Object cerateQR(String url) throws WriterException, IOException{
//qr 크기 설정
int width = 200;
int height = 200;
// QR Code - BitMatrix: qr code 정보 생성
BitMatrix bitMatrix = new MultiFormatWriter().encode(url, BarcodeFormat.QR_CODE,width,height);
try(ByteArrayOutputStream out = new ByteArrayOutputStream();){
MatrixToImageWriter.writeToStream(bitMatrix,"PNG",out);
return out.toByteArray();
}
}
}
- QR 코드 이미지의 너비와 높이를 각각 200 픽셀로 설정합니다.
- MultiFormatWriter의 encode 메서드를 사용하여 URL 문자열을 QR 코드 형식의 BitMatrix로 인코딩합니다. BitMatrix는 QR 코드의 실제 데이터 구조를 나타내며, 여기서 각 비트는 QR 코드 이미지의 픽셀에 해당합니다.
-try-with-resources 구문을 사용하여 ByteArrayOutputStream을 생성합니다. 이 스트림은 QR 코드 이미지의 데이터를 바이트 배열로 캡처하는 데 사용됩니다. - MatrixToImageWriter.writeToStream 메서드는 BitMatrix를 이미지로 변환하고, 이를 PNG 형식으로 ByteArrayOutputStream에 쓰는 데 사용됩니다.
- out.toByteArray() 메서드는 스트림의 내용을 바이트 배열로 반환합니다. 이 바이트 배열은 QR 코드 이미지의 데이터를 포함하고 있으며, 이를 클라이언트에 반환하거나 파일로 저장할 수 있습니다.
controller
@RestController
public class QrController {
private QrServiceImpl qrServiceImpl;
@Autowired
public QrController(QrServiceImpl qrServiceImpl){
this.qrServiceImpl = qrServiceImpl;
}
@GetMapping("/qr")
public Object cerateQR(@RequestParam String url) throws WriterException, IOException {
Object Qr = qrServiceImpl.cerateQR(url);
return ResponseEntity.ok()
.contentType(MediaType.IMAGE_PNG)
.body(Qr);
}
}
index.html
부트스트랩 이용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>QR 코드 만들기</title>
<!-- 부트스트랩 CSS 링크 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="bg-light">
<div class="container">
<div class="row mt-5 justify-content-center">
<div class="col-md-6">
<div class="card">
<div class="card-header">
<h5 class="card-title">QR 코드 만들기</h5>
</div>
<div class="card-body">
<form action="/qr" method="get">
<div class="input-group mb-3">
<input type="text" class="form-control" name="url" placeholder="URL 입력" required>
<button type="submit" class="btn btn-primary">생성</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@2.9.4/dist/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</body>
</html>
<결과 화면>
1.
2.저의 velog 주소를 입력해보겠습니다.
3. qr코드 확인
잘나오는것을 확인했습니다!!
4. 그럼 핸드폰으로 QR코드를 찍어서 웹 사이트를 들어가 볼까요?
이렇게 카메라로 QR코드를 보면 QR 코드를 인식하여 웹사이트로 바로 이동할 수 있습니다.
5. 성공!
단순 궁금증으로 제작하였지만, 여기서 끝내는 것이 아닌 QR코드로 다양한 기능을 접목시킬 예정입니다 !!!
