파이썬으로 간단한 웹사이트 만들기 (Flask 예제)

📋 목차

Flask란?
Flask 설치 및 기본 설정
Flask로 간단한 웹사이트 만들기
HTML 템플릿 적용하기
사용자 입력(Form) 처리하기
Flask 웹사이트 배포하기
FAQ

Flask는 **Python 기반의 마이크로 웹 프레임워크**로, 간단한 웹사이트부터 강력한 웹 애플리케이션까지 손쉽게 개발할 수 있어요. Django보다 가볍고 유연하기 때문에 빠르게 웹사이트를 만들고 싶다면 Flask가 좋은 선택이 될 수 있어요.

이번 글에서는 Flask를 활용하여 **간단한 웹사이트**를 만드는 방법을 단계별로 배워볼 거예요. Python을 조금만 알면 쉽게 따라 할 수 있으니, 천천히 따라와 보세요! 🚀

그럼, 먼저 Flask가 무엇인지 알아볼까요?

Flask란?

Flask는 Python 기반의 **가벼운 웹 프레임워크**로, 빠르게 웹 애플리케이션을 개발할 수 있도록 도와줘요. 특히, **단순한 프로젝트부터 대규모 애플리케이션까지** 확장할 수 있어 유용해요. 🚀

✔ Flask의 특징:

🐍 **Python 기반** - Python만 알면 쉽게 개발 가능
🛠 **경량 프레임워크** - 불필요한 기능 없이 가볍고 빠름
📂 **모듈형 설계** - 필요한 기능만 추가해서 사용 가능
🎨 **Jinja2 템플릿 엔진** - HTML과 연동하여 동적 페이지 제작 가능
🔌 **확장성 높음** - 데이터베이스, API 등 다양한 플러그인 지원

💡 Flask vs Django 비교

특징	Flask	Django
프레임워크 종류	마이크로 프레임워크 (경량)	풀스택 프레임워크 (기능 내장)
유연성	높음 (필요한 기능만 추가 가능)	낮음 (기본 기능이 많음)
사용 용도	빠른 프로토타입, 소규모 프로젝트	대규모 웹 애플리케이션
학습 난이도	쉬움	어려움

📌 Flask는 간단한 웹 애플리케이션을 빠르게 만들 때 적합해요! Django는 보다 **구조적인 대규모 프로젝트**에 유리해요.

다음 단계에서는 Flask를 설치하고 기본 설정을 진행해볼게요! 🛠

Flask 설치 및 기본 설정

이제 Flask를 설치하고, 기본 환경을 설정해볼게요! 🛠️ 설치는 아주 간단하니 따라 해보세요. 😊

✅ 1. 가상 환경 생성하기

프로젝트마다 독립적인 환경을 유지하기 위해 Python의 **가상 환경(venv)**을 사용하는 것이 좋아요.

# 프로젝트 폴더 생성 및 이동
mkdir flask_project
cd flask_project

# 가상 환경 생성
python -m venv venv

# 가상 환경 활성화 (Windows)
venv\Scripts\activate

# 가상 환경 활성화 (Mac/Linux)
source venv/bin/activate

📌 가상 환경이 활성화되면 터미널 앞에 `(venv)`가 표시될 거예요.

✅ 2. Flask 설치하기

Flask를 설치하려면 다음 명령어를 실행하세요.

pip install flask

📌 설치가 완료되었는지 확인하려면 아래 명령어를 실행해보세요.

python -c "import flask; print(flask.__version__)"

버전 번호가 출력되면 정상적으로 설치된 거예요! 🎉

✅ 3. 기본 Flask 앱 만들기

이제 가장 간단한 Flask 웹 애플리케이션을 만들어볼게요. 아래 코드를 **app.py** 파일로 저장하세요.

from flask import Flask

app = Flask(__name__)

@app.route("/")
def home():
    return "Hello, Flask! 🎉"

if __name__ == "__main__":
    app.run(debug=True)

📌 `app.run(debug=True)`를 설정하면 **자동으로 코드 변경을 감지하고 서버를 다시 실행**해줘요.

✅ 4. Flask 서버 실행하기

아래 명령어로 Flask 서버를 실행해보세요.

python app.py

📌 성공적으로 실행되면 아래와 같은 메시지가 보일 거예요.

 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

웹 브라우저에서 **http://127.0.0.1:5000/** 에 접속하면 `"Hello, Flask! 🎉"`가 출력되는 걸 확인할 수 있어요!

이제 Flask로 간단한 웹사이트를 만들어볼까요? 🚀

Flask로 간단한 웹사이트 만들기

이제 Flask를 활용해 **간단한 웹사이트**를 만들어볼게요! 🚀 우리가 만들 웹사이트는 **홈페이지, 소개 페이지** 등 기본적인 라우트를 포함할 거예요.

✅ 1. 여러 페이지 추가하기

이전에는 `/` (홈페이지) 하나만 만들었지만, 이번에는 **여러 페이지**를 추가해볼게요.

from flask import Flask

app = Flask(__name__)

@app.route("/")
def home():
    return "🏠 환영합니다! Flask 웹사이트에 오신 것을 환영해요."

@app.route("/about")
def about():
    return "ℹ️ 이 웹사이트는 Flask를 사용하여 개발되었습니다."

@app.route("/contact")
def contact():
    return "📧 문의: contact@example.com"

if __name__ == "__main__":
    app.run(debug=True)

📌 이 코드에서는 **홈(/), 소개(/about), 문의(/contact)** 페이지를 만들었어요.

✅ 2. 웹사이트 실행 및 테스트

서버를 실행하고 웹 브라우저에서 테스트해보세요.

python app.py

📌 브라우저에서 아래 주소에 접속하면 해당 페이지가 출력될 거예요.

📌 Flask 라우팅 설명

코드	설명
@app.route("/")	홈페이지 주소
@app.route("/about")	소개 페이지
@app.route("/contact")	문의 페이지

✅ 3. HTML 파일을 활용한 웹페이지 만들기

지금까지는 문자열을 직접 반환했지만, Flask에서는 **HTML 파일을 렌더링**할 수도 있어요. 이를 위해 **템플릿 기능을 사용**해야 해요.

from flask import Flask, render_template

app = Flask(__name__)

@app.route("/")
def home():
    return render_template("index.html")

if __name__ == "__main__":
    app.run(debug=True)

📌 `render_template("index.html")`를 사용하면 **HTML 파일을 불러올 수 있어요!** 다음 단계에서 Flask의 HTML 템플릿 시스템을 더 자세히 알아볼게요. 🏗️

HTML 템플릿 적용하기

지금까지는 Flask에서 **문자열을 직접 반환**했어요. 하지만 실제 웹사이트는 **HTML 파일을 사용**해야 하죠! Flask의 **Jinja2 템플릿 엔진**을 활용하면 동적인 웹페이지를 쉽게 만들 수 있어요. 🚀

✅ 1. 템플릿 폴더 설정

Flask는 기본적으로 **templates** 폴더에서 HTML 파일을 찾아요. 따라서 아래와 같은 **디렉토리 구조**를 만들어야 해요.

flask_project/
│── app.py
│── templates/
│   ├── index.html
│   ├── about.html
│   ├── contact.html

📌 `templates` 폴더 안에 HTML 파일을 저장하면, Flask가 자동으로 찾을 수 있어요!

✅ 2. 기본 HTML 파일 만들기

이제 **index.html** 파일을 만들어볼게요. 아래 내용을 **templates/index.html** 파일로 저장하세요.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Flask 웹사이트</title>
</head>
<body>
    <h1>🏠 환영합니다! Flask 웹사이트입니다.</h1>
    <p>이 사이트는 Flask와 Jinja2 템플릿을 활용하여 제작되었습니다.</p>
    <a href="/about">소개 페이지로 이동하기</a>
</body>
</html>

📌 이 HTML 파일을 Flask에서 불러오려면 `render_template()`을 사용해야 해요!

✅ 3. Flask에서 HTML 파일 렌더링

이제 **app.py**에서 `render_template()`을 활용해 HTML 파일을 반환하도록 수정할게요.

from flask import Flask, render_template

app = Flask(__name__)

@app.route("/")
def home():
    return render_template("index.html")

@app.route("/about")
def about():
    return render_template("about.html")

if __name__ == "__main__":
    app.run(debug=True)

📌 `render_template("index.html")`을 호출하면 `templates/index.html` 파일이 반환돼요.

✅ 4. HTML 파일 추가하기

`about.html`과 `contact.html`도 추가해볼게요.

<!-- templates/about.html -->
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>소개 페이지</title>
</head>
<body>
    <h1>ℹ️ 소개 페이지</h1>
    <p>이 웹사이트는 Flask로 만들어졌어요!</p>
    <a href="/">홈으로 돌아가기</a>
</body>
</html>

<!-- templates/contact.html -->
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>문의하기</title>
</head>
<body>
    <h1>📧 문의하기</h1>
    <p>이메일: contact@example.com</p>
    <a href="/">홈으로 돌아가기</a>
</body>
</html>

📌 Flask 서버를 다시 실행한 후, 브라우저에서 `/`, `/about`, `/contact` 페이지에 접속해보세요!

✅ 5. Jinja2 템플릿 적용

Jinja2 템플릿을 활용하면 HTML 파일에서 **동적으로 데이터**를 표시할 수 있어요.

from flask import Flask, render_template

app = Flask(__name__)

@app.route("/")
def home():
    return render_template("index.html", title="Flask 홈페이지", message="Hello, Flask! 🎉")

if __name__ == "__main__":
    app.run(debug=True)

📌 이렇게 하면 HTML 파일에서 **전달된 데이터(title, message)**를 사용할 수 있어요!

✅ 6. Jinja2 변수 출력

`index.html` 파일을 아래처럼 수정해볼게요.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>{{ title }}</title>
</head>
<body>
    <h1>{{ message }}</h1>
    <p>Flask의 Jinja2 템플릿을 활용한 웹사이트입니다.</p>
    <a href="/about">소개 페이지로 이동하기</a>
</body>
</html>

📌 `{{ title }}`와 `{{ message }}`는 **Python 코드에서 전달한 데이터를 출력**하는 Jinja2 문법이에요!

💡 Jinja2 템플릿 문법

문법	설명
{{ 변수 }}	변수 값 출력
{% if 조건 %} ... {% endif %}	조건문
{% for item in 리스트 %} ... {% endfor %}	반복문

다음 단계에서는 사용자 입력을 처리하는 방법을 알아볼게요! 🚀

사용자 입력(Form) 처리하기

웹사이트에서는 **사용자로부터 입력을 받아 처리**하는 기능이 필수적이에요. Flask에서는 `request` 객체를 활용하여 **HTML 폼 데이터를 받아 처리**할 수 있어요! 🚀

✅ 1. 입력 폼이 있는 HTML 페이지 만들기

먼저, 사용자 입력을 받을 **HTML 폼(form)**을 만들어볼게요. 아래 코드를 `templates/form.html` 파일로 저장하세요.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>폼 입력 테스트</title>
</head>
<body>
    <h1>📝 이름을 입력하세요!</h1>
    <form action="/submit" method="post">
        <label for="name">이름:</label>
        <input type="text" id="name" name="name" required>
        <button type="submit">제출하기</button>
    </form>
</body>
</html>

📌 사용자가 입력한 데이터를 `/submit` 경로로 **POST 방식**으로 전송해요.

✅ 2. Flask에서 폼 데이터 처리

이제 `app.py`에서 사용자가 입력한 데이터를 받아 처리하는 기능을 추가할게요.

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route("/")
def home():
    return render_template("form.html")

@app.route("/submit", methods=["POST"])
def submit():
    name = request.form["name"]  # 사용자가 입력한 데이터 가져오기
    return f"안녕하세요, {name}님! 🎉"

if __name__ == "__main__":
    app.run(debug=True)

📌 `request.form["name"]`을 사용하면 HTML 폼에서 입력한 **name 값**을 가져올 수 있어요.

✅ 3. Flask에서 입력 데이터를 웹페이지에 출력

이제 입력 데이터를 받아서 새로운 HTML 페이지에 출력해볼게요.

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route("/")
def home():
    return render_template("form.html")

@app.route("/submit", methods=["POST"])
def submit():
    name = request.form["name"]
    return render_template("result.html", name=name)

if __name__ == "__main__":
    app.run(debug=True)

📌 이제 `result.html`에서 사용자의 이름을 출력할 수 있어요!

✅ 4. 결과 페이지(result.html) 만들기

이제 `templates/result.html`을 만들어볼게요.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>결과 페이지</title>
</head>
<body>
    <h1>🎉 환영합니다, {{ name }}님!</h1>
    <a href="/">다시 입력하기</a>
</body>
</html>

📌 이제 사용자가 이름을 입력하면 환영 메시지가 출력돼요!

📌 Flask에서 폼 데이터 처리 흐름

단계	설명
1️⃣ HTML 폼 생성	사용자가 데이터를 입력하고 제출
2️⃣ Flask에서 데이터 수신	`request.form`을 통해 입력 값 가져오기
3️⃣ HTML로 데이터 전달	`render_template()`을 통해 결과 페이지 표시

이제 Flask 웹사이트를 배포하는 방법을 알아볼까요? 🚀

Flask 웹사이트 배포하기

지금까지 Flask로 간단한 웹사이트를 만들었어요! 🚀 이제 Flask 애플리케이션을 **인터넷에 배포**하는 방법을 알아볼게요.

✅ 1. Flask 애플리케이션 준비

우선, 배포할 **Flask 프로젝트 폴더 구조**가 아래처럼 되어 있는지 확인하세요.

flask_project/
│── app.py
│── requirements.txt
│── templates/
│   ├── index.html
│   ├── about.html
│   ├── contact.html
│   ├── result.html
│── static/
│   ├── style.css
│── venv/  (가상 환경 폴더, 선택 사항)

📌 `requirements.txt`는 Flask 및 필요한 패키지를 포함하는 파일이에요.

✅ 2. requirements.txt 생성

배포하려면 프로젝트에서 필요한 패키지를 `requirements.txt`에 기록해야 해요.

pip freeze > requirements.txt

📌 `requirements.txt` 파일을 열어보면 다음과 같이 표시될 거예요.

Flask==2.2.2

✅ 3. Render를 이용한 Flask 배포

무료로 Flask를 배포할 수 있는 **Render**를 사용해볼게요.

1. Render에 접속하여 회원가입하고 로그인하세요.

2. **"New Web Service"** 버튼을 클릭하세요.

3. GitHub 또는 GitLab 저장소를 연결하세요.

4. **Start Command**에 아래 명령어를 입력하세요.

gunicorn -w 4 -b 0.0.0.0:5000 app:app

5. **"Deploy"** 버튼을 클릭하면 배포가 시작돼요!

✅ 4. Flask와 Gunicorn을 이용한 배포

Flask 애플리케이션을 배포할 때는 **Gunicorn**을 사용하면 좋아요.

pip install gunicorn

그다음 아래 명령어로 로컬에서 실행해볼 수 있어요.

gunicorn -w 4 -b 0.0.0.0:5000 app:app

📌 Gunicorn은 프로덕션 환경에서 Flask 앱을 실행하는 데 적합한 WSGI 서버예요.

✅ 5. Flask를 AWS에 배포하기

**AWS EC2 인스턴스**에서 Flask를 실행할 수도 있어요!

# EC2에서 Flask 실행
sudo apt update
sudo apt install python3-pip
pip3 install flask gunicorn

그다음, Flask 애플리케이션을 실행하면 배포 완료! 🎉

📌 Flask 배포 방법 비교

배포 방법	장점	단점
Render	무료 사용 가능, 간단한 설정	고급 설정 제한
AWS EC2	고급 설정 가능, 확장성 높음	초기 설정 복잡
Heroku	무료 플랜 제공, 빠른 배포	무료 사용량 제한

이제 Flask 배포까지 완벽하게 완료했어요! 🎉 마지막으로 자주 묻는 질문(FAQ)을 정리해볼게요.

FAQ

Q1. Flask와 Django 중 어떤 것을 선택해야 할까요?

A1. Flask는 **가볍고 유연한 웹 프레임워크**로, 빠르게 프로토타입을 만들기에 좋아요. 반면, Django는 **기본적인 기능(관리 페이지, 인증 시스템 등)이 내장된 풀스택 프레임워크**예요. ✔ Flask → **소규모 프로젝트, API 서버**에 적합 ✔ Django → **대규모 웹 애플리케이션, 데이터베이스 중심 서비스**에 적합

Q2. Flask에서 데이터베이스를 사용할 수 있나요?

A2. 네! Flask는 **SQLAlchemy** 같은 ORM을 지원하며, SQLite, MySQL, PostgreSQL과 연동할 수 있어요.

Q3. Flask 애플리케이션을 어떻게 배포할 수 있나요?

A3. Flask 앱을 배포하는 방법은 다양해요. ✔ **Render** - 무료 사용 가능, 간단한 배포 ✔ **Heroku** - 빠른 배포 가능 (무료 플랜 존재) ✔ **AWS EC2** - 직접 서버를 설정해야 하지만 확장성 높음 ✔ **Docker + Nginx** - 컨테이너 기반 배포

Q4. Flask에서 CSS 및 JavaScript 파일을 어떻게 추가할 수 있나요?

A4. `static/` 폴더에 CSS 및 JS 파일을 저장하고, HTML에서 `{% static '파일경로' %}`를 사용하면 돼요.

Q5. Flask에서 세션(session) 관리는 어떻게 하나요?

A5. Flask는 `session` 모듈을 사용하여 **사용자 정보를 유지**할 수 있어요. 예제:

from flask import Flask, session

app = Flask(__name__)
app.secret_key = "your_secret_key"

@app.route("/set/")
def set_session():
    session["username"] = "FlaskUser"
    return "Session 저장 완료!"

@app.route("/get/")
def get_session():
    return f"저장된 세션: {session.get('username')}"

📌 `session`을 사용하면 로그인 상태 유지, 사용자 데이터 저장이 가능해요!

Q6. Flask로 REST API를 만들 수 있나요?

A6. 네! Flask는 RESTful API 서버를 쉽게 만들 수 있어요. 예제:

from flask import Flask, jsonify

app = Flask(__name__)

@app.route("/api/data")
def api_data():
    return jsonify({"message": "Hello, Flask API!"})

📌 `jsonify()`를 사용하면 JSON 응답을 반환할 수 있어요.

Q7. Flask는 몇 명까지 동시에 접속할 수 있나요?

A7. 기본 Flask 개발 서버는 **싱글 스레드**로 동작하기 때문에 다중 요청을 처리하기 어려워요. 🚀 **배포 시 Gunicorn, uWSGI, Nginx 같은 WSGI 서버를 사용하면 확장성이 좋아져요!**

Q8. Flask의 디버그 모드를 활성화하면 어떤 점이 좋은가요?

A8. `debug=True`를 설정하면 코드가 변경될 때마다 자동으로 서버가 재시작되고, **오류 발생 시 디버깅 정보를 확인할 수 있어요.** 📌 단, **배포 시에는 디버그 모드를 비활성화**해야 해요!

🎯 마무리

여기까지 **Flask를 활용한 웹사이트 개발 및 배포** 방법을 알아봤어요! 🚀 이제 여러분도 Flask로 멋진 웹 애플리케이션을 만들 수 있을 거예요. 😎

📌 요약:

Flask란? → 간단하고 유연한 Python 웹 프레임워크
환경 설정 → Flask 설치, 가상 환경 사용
기본 웹사이트 구현 → 여러 페이지 추가, 템플릿 활용
사용자 입력 처리 → 폼(form)과 request 활용
배포 → Render, Heroku, AWS 등 다양한 방법
Flask 활용 → REST API, 데이터베이스 연동, 세션 관리

백터뷰 (소통방)