Flask 웹 프로젝트 시작하기 - 가상환경 설정부터 로그인 기능 구현까지

오늘은 Flask 웹 프레임워크 환경 설정과 기본 웹 페이지 구현까지 실습해보았습니다.
가상환경 설정, 프로젝트 디렉터리 구조 설계, 라우팅 처리, HTML 템플릿 작성, 로그인 기능 구현까지 전반적인 과정을 직접 따라하며 웹 개발의 흐름을 이해할 수 있었습니다.
아래는 단계별로 정리한 실습 과정입니다.

---

1. 가상환경 설정

1.1 가상환경 생성 및 활성화

# 가상환경 디렉토리 생성
C:\> cd \
C:\> mkdir venvs
C:\venvs> python -V
Python 3.12.8

# 가상환경 생성
C:\venvs> python -m venv myproject

# 가상환경 실행
C:\venvs\myproject\Scripts> activate
(myproject) C:\venvs\myproject\Scripts>

# 비활성화
(myproject) C:\venvs\myproject\Scripts> deactivate

1.2 패키지 설치

# Flask 설치
(myproject) C:\venvs\myproject\Scripts> pip install flask

# pip 최신 버전으로 업그레이드
(myproject) C:\venvs\myproject\Scripts> python -m pip install --upgrade pip

---

2. 프로젝트 디렉터리 구성

# 프로젝트 디렉터리 생성
C:\> mkdir projects
C:\> cd projects
C:\projects> mkdir myproject
C:\projects> cd myproject

# 가상환경 활성화
C:\venvs\myproject\Scripts> activate
(myproject) C:\projects\myproject>

2.1 디렉터리 구조

myproject/
├── pybo/
│   ├── __init__.py       # Flask 앱 생성 및 등록
│   ├── views/
│   │   └── main_views.py # 라우팅 관리
│   ├── models.py         # SQLAlchemy 모델
│   ├── forms.py          # WTForms 기반 폼 처리
├── static/               # 정적 파일 (CSS, JS, 이미지)
│   └── style.css
├── templates/            # HTML 템플릿
│   ├── index.html
│   ├── hello.html
│   ├── login.html
│   ├── asd.html
│   └── user.html
├── config.py             # 설정 파일
├── routes.py             # 라우팅 처리

---

3. Flask 기본 라우팅 처리

3.1 routes.py 주요 예시

@app.route('/')
def login_page():
    return render_template('login.html')  # 로그인 폼 출력

@app.route('/logchk', methods=['POST'])
def login_check():
    user_id = request.form['id']
    user_pw = request.form['pw']

    if user_id == 'admin' and user_pw == '1234':
        return "<h2>'관리자'님 접속되었습니다.</h2>"
    else:
        return "<h2>아이디 또는 비밀번호를 확인하세요.</h2>"

---

4. 템플릿 파일 구조 및 예시

4.1 로그인 폼 템플릿

<!-- login.html -->
<form action="http://localhost:5000/logchk" method="post">
  <p><input type="text" name="id" placeholder="아이디" required /></p>
  <p><input type="password" name="pw" placeholder="비밀번호" required /></p>
  <p>
    <input type="submit" value="로그인" />
    <input type="reset" value="입력취소" />
  </p>
</form>

4.2 사용자 목록 예시

<!-- user.html -->
<ul>
  {% for user in users %}
    <li>{{ user }}</li>
  {% endfor %}
</ul>

4.3 Hello 템플릿

<!-- hello.html -->
<div class="hello-box">
    <h1>Hello, {{ name or 'Guest' }} 👋</h1>
    <p>배고픈 저에게 빵을 사주세요 😊</p>
</div>

---

5. Flask 앱 생성 구조

__init__.py - Flask 앱 팩토리 패턴 사용

from flask import Flask 

def create_app():
    app = Flask(__name__)

    from .views import main_views
    app.register_blueprint(main_views.bp)

    return app

이렇게 하면 블루프린트를 통해 라우팅을 깔끔하게 관리할 수 있고, 프로젝트가 커졌을 때 유지보수가 쉬워집니다.

---

6. 블루프린트 예시 (main_views.py)

from flask import Blueprint

bp = Blueprint('main', __name__, url_prefix='/')

@bp.route('/')
def hello_pybo():
    return 'Hello, Pybo!!!!!'

@bp.route('/hello')
def test():
    return 'test test hello'

---

7. 실행 방법 요약

프로젝트 실행 준비

cd C:/projects/myproject
activate
set FLASK_APP=pybo
set FLASK_DEBUG=true
flask run

접속 주소

• http://127.0.0.1:5000 → 로그인 폼
• 로그인 시 ID: admin, PW: 1234 입력 시 성공 메시지 출력

---

8. 결론 및 정리

8.1 오늘 배운 내용

오늘은 Flask를 사용하여 가상환경 설정, 라우팅, 템플릿 구성, 로그인 처리 등 웹 개발의 기초 과정을 실습했습니다.
Flask 앱 구조를 모듈화해 유지보수가 쉬운 구조로 만들었고, HTML 폼을 활용해 사용자 입력값을 서버로 전달하는 과정도 익혔습니다.
또한, 로그인 정보가 맞는지 확인하는 로직을 통해 서버 측 인증 흐름을 이해할 수 있었습니다.

8.2 추가 개발 아이디어

• 로그인 성공 시 세션(session)을 활용한 유지 기능 추가
• DB 연동하여 실제 사용자 정보로 로그인 처리
• Flask-WTF, Flask-Login과 같은 라이브러리 도입
• Bootstrap이나 Tailwind로 UI 개선