[Python] 점심 메뉴 추천해주는 웹사이트 만들기 (ft. Flask)

728x90

점심시간이 되면 어떤 메뉴를 먹을지 고민이 되는 경우가 많습니다. 이번 포스트에서는 Python과 Flask를 사용하여 간단한 점심메뉴 추천 웹사이트(웹앱)을 만들어보겠습니다.

Flask 설치 및 구조

아래의 명령어를 사용하여 Flask를 설치합니다.

pip install Flask

Flask는 웹 프레임워크로, 간단한 앱부터 복잡한 앱까지 다양한 웹 애플리케이션을 만들 수 있습니다. HTML, CSS, Javascript 등에 대한 이해도 어느 정도 있어야 괜찮은 웹사이트를 만들 수 있지만, 보통 무료로 제공하는 템플릿을 가져다가 사용하면 뚝딱 만들 수 있습니다. Flask 앱의 최소 구조는 다음과 같습니다:

app/
ㄴ static/ # css, js, 이미지 등을 저장하는 디렉토리입니다.
ㄴ style.css
ㄴ templates/ # HTML 파일을 저장하는 디렉터리입니다.
ㄴ index.html
ㄴ __init__.py # Flask 앱을 생성하고 실행할 때 사용하는 파일입니다

코드의 관리와 기능의 분리를 위해 __init__.py 안에 있는 코드들을 views.py, app.py, model.py 등으로 나눠서 저장을 하기도 하지만, 이번 프로젝트는 최소한의 노력으로 만들어보겠습니다 ㅎㅎ

간단한 Flask App 만들기 - 점심메뉴 추천 앱

__init__.py

from flask import Flask, render_template, request
import random

app = Flask(__name__)   # Flask App 생성하기


# 점심 메뉴 추천 함수

def select_menu():
    menu_list = [
        '짜장면', '짬뽕', '탕수육', '볶음밥', '자장밥', '삼겹살', '치킨', '피자', '초밥'
        , '가츠동', '제육볶음', '생선구이', '쌀국수', '순대국', '김치찌개', '돈까스', '순두부찌개'
        , '부대찌개', '햄버거', '칼국수', '분식', '텐동', '곰탕', '갈비탕', '찜닭', '라멘', '샐러드', '샌드위치']

    return random.choice(menu_list)  # 메뉴 리스트에서 랜덤으로 하나 뽑기


# 웹 페이지의 라우팅 설정
@app.route('/', methods=['GET', 'POST'])   
def index():
    if request.method == 'POST':
        menu = select_menu()
        return render_template('index.html', menu=menu)  # menu라는 변수에 저장된 내용을 index.html에 반영
    return render_template('index.html')
    
    
# 앱 실행
if __name__ == '__main__':
    app.run()

templates/index.html (인코딩 utf-8로 저장 필수)

<!DOCTYPE html>
<html>
  <head>
    <title>점심메뉴 추천 앱</title>
  </head>
  <body>
    <h1>점심메뉴 추천 앱</h1>
    {% if menu %}
      <p>오늘의 추천 메뉴는 {{ menu }}입니다.</p>
    {% endif %}
    <form method="POST" action="/">
      <button type="submit">메뉴 추천받기</button>
    </form>
  </body>
</html>

{% if menu %}와 {% endif %} 태그는 menu 변수가 존재할 경우에만 해당 HTML내용을 렌더링 합니다.
form 태그에서 method 속성은 HTTP 요청 방법을 지정하고, action 속성은 요청을 보낼 URL 경로를 지정합니다.
button 태그를 클릭하면 POST 요청이 전송되어 __init__. py에 있는 `if request.method == 'POST'`의 코드블록을 실행시킵니다

static/style.css

body {
  font-family: Arial, sans-serif;
  text-align: center;
}

h1 {
  font-size: 2em;
}

button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 20px 0;
  cursor: pointer;
}

Flask App 실행

위의 내용대로 파일을 전부 만들었다면, Flask 앱을 실행만 하면 됩니다. __init__. py 파일이 위치한 경로에서 터미널을 열고 다음 커맨드를 입력하면 작동이 됩니다:

export FLASK_APP=__init__.py
flask run

작동이 안 된다면, 다음과 같이 python으로 직접 실행하는 방법도 있습니다:

python __init__.py

실행을 하면 다음과 같은 출력 메시지를 확인할 수 있습니다:

'Running on http://127.0.0.1:5000'

브라우저를 사용해서 해당 주소로 이동을 해보면 다음과 같은 화면을 볼 수 있습니다:

그리고 메뉴 추천받기 버튼을 누르면...

햄버거가 추천이 됐네요!

정리하기

이렇게 Python으로도 간단한 웹사이트를 제작할 수 있습니다. HTML, CSS, JavaScript를 어느 정도 다루실 수 있다면 더 멋진 웹사이트를 제작할 수 있을 겁니다.

저는 Flask App을 사용해서 회사 내부망 서버에 기술체험관 웹페이지를 제작했습니다. 사내 직원들이 자연어처리 기술을 체험해 볼 수 있도록 문서 요약, 키워드 추출, 품사 태깅, 워드클라우드 생성 등 다양한 기능을 Flask 앱으로 구현을 했습니다. 대학교 과제, 개인 포트폴리오, 웹사이트 등 제작이 필요하다면 Flask로 구현을 하고 다른 웹 호스팅 사이트를 통해 배포 (deploy)를 하면 더 범용적으로 사용을 할 수 있을 것 같습니다.

'💻 IT·기술·통계' 카테고리의 다른 글

[Tips] Python 모듈 위치, 버전, 상위 폴더에서 불러오기 (0)	2023.03.26
ChatGPT로 썸네일 만들기 (이미지 생성) (0)	2023.03.21
Python으로 개인정보 가명 처리하기 (SHA-256) (0)	2023.03.16
[Tips] Python스럽게 코드 작성하기 (0)	2023.03.12
[Snippet] 상황별 Tuple, List 변환 방법 (0)	2023.03.10

근근로그

[Python] 점심 메뉴 추천해주는 웹사이트 만들기 (ft. Flask)

Flask 설치 및 구조

간단한 Flask App 만들기 - 점심메뉴 추천 앱

Flask App 실행

정리하기

'💻 IT·기술·통계' 카테고리의 다른 글

댓글

티스토리툴바

[Python] 점심 메뉴 추천해주는 웹사이트 만들기 (ft. Flask)

Flask 설치 및 구조

간단한 Flask App 만들기 - 점심메뉴 추천 앱

Flask App 실행

정리하기

'💻 IT·기술·통계' 카테고리의 다른 글

관련글

댓글

티스토리툴바