728x90
Flask를 사용하여 QR 코드를 생성하고 웹 페이지에서 표시하는 간단한 웹 애플리케이션을 만드는 방법을 설명하겠습니다. 이 프로젝트는 사용자로부터 텍스트를 입력받아 QR 코드를 생성하고, 웹 브라우저에서 이를 표시하는 기능을 포함합니다.
1. 환경 설정
먼저, 필요한 라이브러리를 설치합니다. Flask와 qrcode 라이브러리를 설치해야 합니다.
pip install Flask qrcode[pil]2. Flask 애플리케이션 만들기
아래의 코드는 Flask 애플리케이션을 설정하고, 사용자 입력으로 QR 코드를 생성하여 웹 페이지에서 보여주는 예제입니다.
프로젝트 구조
먼저, 프로젝트의 디렉토리 구조를 설정합니다.
flask_qr_app/
│
├── app.py
├── static/
│ └── qrcode.png
└── templates/
└── index.htmlapp.py: Flask 애플리케이션을 정의하는 파일입니다.static/qrcode.png: QR 코드 이미지 파일이 저장될 경로입니다.templates/index.html: HTML 템플릿 파일입니다.
app.py
app.py 파일에 Flask 애플리케이션 코드를 작성합니다.
from flask import Flask, render_template, request, send_file
import qrcode
import os
app = Flask(__name__)
# static 폴더가 없으면 생성
if not os.path.exists('static'):
os.makedirs('static')
@app.route('/', methods=['GET', 'POST'])
def index():
if request.method == 'POST':
# 폼 데이터로부터 QR 코드에 넣을 데이터 가져오기
data = request.form.get('data')
# QR 코드 생성
qr = qrcode.QRCode(
version=1,
error_correction=qrcode.constants.ERROR_CORRECT_L,
box_size=10,
border=4,
)
qr.add_data(data)
qr.make(fit=True)
# QR 코드 이미지를 저장할 경로
img_path = os.path.join('static', 'qrcode.png')
img = qr.make_image(fill_color="black", back_color="white")
img.save(img_path)
# 생성된 QR 코드 이미지를 웹 페이지에 표시
return render_template('index.html', qr_code='qrcode.png')
return render_template('index.html', qr_code=None)
if __name__ == '__main__':
app.run(debug=True)templates/index.html
이제 templates/index.html 파일에 HTML 코드를 작성합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QR Code Generator</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 600px;
margin: 0 auto;
padding: 20px;
text-align: center;
}
input[type="text"] {
width: 100%;
padding: 10px;
margin: 10px 0;
box-sizing: border-box;
}
input[type="submit"] {
padding: 10px 20px;
background-color: #007BFF;
color: white;
border: none;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #0056b3;
}
img {
margin-top: 20px;
max-width: 100%;
}
</style>
</head>
<body>
<h1>QR Code Generator</h1>
<form method="POST">
<input type="text" name="data" placeholder="Enter text or URL" required>
<input type="submit" value="Generate QR Code">
</form>
{% if qr_code %}
<h2>Generated QR Code:</h2>
<img src="{{ url_for('static', filename=qr_code) }}" alt="QR Code">
{% endif %}
</body>
</html>3. 애플리케이션 실행
프로젝트의 루트 디렉토리에서 Flask 애플리케이션을 실행합니다.
python app.py서버가 시작되고 다음과 같은 메시지가 출력됩니다:
* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)웹 브라우저에서 http://127.0.0.1:5000/로 이동하면 애플리케이션이 열립니다.
4. 기능 설명
- 사용자 입력: 사용자가 텍스트 또는 URL을 입력하고 "Generate QR Code" 버튼을 클릭합니다.
- QR 코드 생성: 서버는 입력된 데이터를 사용하여 QR 코드를 생성하고,
static/qrcode.png에 저장합니다. - QR 코드 표시: 생성된 QR 코드가 웹 페이지에 표시됩니다.
5. 추가 개선 사항
- 스타일 개선: CSS를 추가하여 UI를 개선할 수 있습니다.
- 파일 저장 경로: 여러 사용자가 동시에 접속할 수 있도록, 파일 저장 경로를 유니크하게 설정할 수 있습니다.
- QR 코드 다운로드 기능: 생성된 QR 코드를 사용자에게 다운로드할 수 있는 옵션을 추가할 수 있습니다.
이렇게 하면 Flask와 qrcode 라이브러리를 사용하여 QR 코드를 생성하고 표시하는 간단한 웹 애플리케이션을 만들 수 있습니다. 추가 기능이나 개선 사항이 필요하다면 언제든지 말씀해 주세요!
728x90
반응형