Flask와 Bootstrap을 활용한 UI 개선
이전 글에서는 Flask를 이용한 로그인 기능을 구현했습니다.
이번 글에서는 Flask와 Bootstrap을 활용하여
웹 애플리케이션의 **UI(User Interface, 사용자 인터페이스)**를 개선하는 방법을 배워보겠습니다.
[PYTHON] Flask로 로그인 기능 구현하기 (세션 활용)
Flask로 로그인 기능 구현하기 (세션 활용)이전 글에서는 Flask를 활용한 웹 애플리케이션 개발 및 데이터베이스 연동을 배웠습니다.이번 글에서는 사용자 로그인 기능을 구현해 보겠습니다.로그
englishforkid.tistory.com
1. Bootstrap이란?
📌 Bootstrap은 HTML, CSS, JavaScript로 구성된
반응형 웹 디자인을 쉽게 구현할 수 있는 프레임워크입니다.
✅ 간편한 사용법 (CSS 클래스 적용만으로 스타일 변경 가능)
✅ 반응형 디자인 지원 (PC, 태블릿, 모바일 최적화)
✅ 다양한 UI 컴포넌트 제공 (버튼, 폼, 네비게이션 바 등)
2. Flask에서 Bootstrap 적용하기
📌 Bootstrap을 적용하는 방법은 두 가지입니다.
1️⃣ CDN(Content Delivery Network) 방식 (간편한 사용)
2️⃣ 로컬 파일 다운로드 방식 (인터넷 없이 사용 가능)
이 글에서는 CDN 방식을 사용하겠습니다.
기본 HTML 템플릿 만들기
Flask에서는 templates/base.html을 만들어
공통 레이아웃을 적용할 수 있습니다.
📌 기본 템플릿 (templates/base.html)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% block title %}Flask 웹사이트{% endblock %}</title>
<!-- Bootstrap CDN -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- 네비게이션 바 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="/">Flask 웹사이트</a>
<div class="collapse navbar-collapse">
<ul class="navbar-nav ms-auto">
{% if "user" in session %}
<li class="nav-item"><a class="nav-link" href="/logout">로그아웃</a></li>
{% else %}
<li class="nav-item"><a class="nav-link" href="/login">로그인</a></li>
<li class="nav-item"><a class="nav-link" href="/register">회원가입</a></li>
{% endif %}
</ul>
</div>
</div>
</nav>
<!-- 메인 콘텐츠 -->
<div class="container mt-4">
{% block content %}{% endblock %}
</div>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>✅ {% block title %}{% endblock %} → 각 페이지의 제목 변경 가능
✅ {% block content %}{% endblock %} → 본문 내용을 각 페이지에서 정의
✅ navbar → 상단 네비게이션 바 추가
✅ Bootstrap을 사용하여 반응형 UI 적용
3. 회원가입 페이지 디자인 개선
이전 글에서 만든 회원가입 폼을 Bootstrap 스타일을 적용하여 개선합니다.
📌 회원가입 템플릿 (templates/register.html)
{% extends "base.html" %}
{% block title %}회원가입{% endblock %}
{% block content %}
<div class="row justify-content-center">
<div class="col-md-6">
<h2 class="text-center">회원가입</h2>
<form method="POST" class="card p-4 shadow">
<div class="mb-3">
<label class="form-label">아이디</label>
<input type="text" name="username" class="form-control" required>
</div>
<div class="mb-3">
<label class="form-label">비밀번호</label>
<input type="password" name="password" class="form-control" required>
</div>
<button type="submit" class="btn btn-primary w-100">가입하기</button>
</form>
</div>
</div>
{% endblock %}
✅ class="form-control" → 입력 필드 스타일 개선
✅ class="btn btn-primary w-100" → 버튼 스타일 및 너비 조정
✅ class="card p-4 shadow" → 폼을 카드 형태로 변경
4. 로그인 페이지 디자인 개선
로그인 페이지도 같은 방식으로 디자인을 변경합니다.
📌 로그인 템플릿 (templates/login.html)
{% extends "base.html" %}
{% block title %}로그인{% endblock %}
{% block content %}
<div class="row justify-content-center">
<div class="col-md-6">
<h2 class="text-center">로그인</h2>
<form method="POST" class="card p-4 shadow">
<div class="mb-3">
<label class="form-label">아이디</label>
<input type="text" name="username" class="form-control" required>
</div>
<div class="mb-3">
<label class="form-label">비밀번호</label>
<input type="password" name="password" class="form-control" required>
</div>
<button type="submit" class="btn btn-success w-100">로그인</button>
</form>
</div>
</div>
{% endblock %}
✅ 회원가입과 같은 구조를 유지하면서, **버튼 색상을 초록색(btn-success)**으로 변경
5. 메인 페이지 디자인 개선
홈 화면을 보다 직관적으로 개선합니다.
📌 메인 템플릿 (templates/home.html)
{% extends "base.html" %}
{% block title %}홈{% endblock %}
{% block content %}
<div class="text-center">
<h1>Flask 웹사이트에 오신 것을 환영합니다!</h1>
<p class="lead">이 웹사이트는 Flask와 Bootstrap을 활용하여 제작되었습니다.</p>
{% if "user" in session %}
<a href="/logout" class="btn btn-danger">로그아웃</a>
{% else %}
<a href="/login" class="btn btn-primary">로그인</a>
<a href="/register" class="btn btn-secondary">회원가입</a>
{% endif %}
</div>
{% endblock %}
✅ class="lead" → 강조 텍스트 스타일 적용
✅ class="btn btn-danger" → 로그아웃 버튼을 빨간색으로 표시
✅ class="btn btn-primary" → 로그인 버튼을 파란색으로 표시
6. Flask 라우트 수정 (app.py)
이제 Flask에서 개선된 UI를 적용하도록 수정합니다.
from flask import Flask, render_template, session, redirect, url_for
app = Flask(__name__)
app.secret_key = "supersecretkey"
@app.route("/")
def home():
return render_template("home.html")
@app.route("/register", methods=["GET", "POST"])
def register():
return render_template("register.html")
@app.route("/login", methods=["GET", "POST"])
def login():
return render_template("login.html")
@app.route("/logout")
def logout():
session.pop("user", None)
return redirect(url_for("home"))
if __name__ == "__main__":
app.run(debug=True)
✅ render_template("home.html") → 개선된 UI 적용
7. 결론
이번 글에서는 Flask와 Bootstrap을 활용하여 UI를 개선하는 방법을 배웠습니다.
- Bootstrap을 적용하여 반응형 디자인 구현
- 회원가입 및 로그인 폼 디자인 개선
- 네비게이션 바 추가하여 사용자 경험 향상
다음 글에서는 Flask에서 사용자 프로필 페이지를 만드는 방법을 배워보겠습니다! 🚀
[PYTHON] Flask를 이용한 간단한 웹 애플리케이션 만들기
Flask를 이용한 간단한 웹 애플리케이션 만들기 이전 글에서는 자동 이메일 발송 기능을 구현해 보았습니다.이제 Python을 활용하여 간단한 웹 애플리케이션을 만들어 보겠습니다.웹 애플리케이
englishforkid.tistory.com
[PYTHON] 파이썬을 활용한 웹 크롤링(Web Crawling) 기초
파이썬을 활용한 웹 크롤링(Web Scraping) 기초인터넷에는 다양한 데이터가 존재합니다.하지만 모든 데이터를 직접 다운로드할 수 있는 것은 아니므로, **웹 크롤링(Web Scraping)**을 사용하여 원하는
englishforkid.tistory.com
'BIG DATA > PYTHON' 카테고리의 다른 글
| [PYTHON] Flask에서 파일 업로드 및 프로필 사진 등록하기 (0) | 2025.03.01 |
|---|---|
| [PYTHON] Flask에서 사용자 프로필 페이지 만들기 (0) | 2025.02.28 |
| [PYTHON] Flask로 로그인 기능 구현하기 (세션 활용) (0) | 2025.02.27 |
| [PYTHON] Flask를 이용한 간단한 웹 애플리케이션 만들기 (0) | 2025.02.24 |
| [PYTHON] Python으로 자동 이메일 발송하기 (SMTP 활용) (0) | 2025.02.24 |
