안녕하세요! 김코딩입니다.
중급자를 위한 파이썬 활용 시리즈의 네 번째 시간이에요! 지난 시간에는 tkinter를 사용해 GUI 계산기 프로그램을 만들었죠? 이번에는 한 단계 더 나아가서, 파이썬으로 웹사이트를 직접 만들어볼 거예요.
오늘은 Flask 프레임워크를 활용해서 간단한 웹사이트를 만드는 방법을 배워볼 거예요. 자기소개 페이지를 예제로 구현하면서 Flask의 기본 개념을 익히고, 앞으로 나아갈 방향도 제시해 드릴게요.
이제 본격적으로 파이썬 웹 개발의 세계로 들어가 볼까요? 🚀
1️⃣파이썬으로 웹사이트를 만들면 무엇이 좋을까?
우리가 웹사이트를 만들면 브라우저에서 접속 가능한 웹페이지를 직접 구현할 수 있어요.
✔️ 나만의 개인 홈페이지를 만들 수도 있고,
✔️ 블로그처럼 콘텐츠를 관리할 수도 있으며,
✔️ 데이터를 받아 분석하는 웹 서비스도 구축할 수 있어요.
웹 개발을 할 수 있다는 건, 여러분이 더 많은 사람들과 연결될 수 있는 기회를 가지게 된다는 뜻이에요.
그럼, 파이썬으로 웹사이트를 만드는 과정을 간단히 살펴볼까요?
웹사이트 개발 기본 개념
웹사이트를 만들려면 **서버(Server)**가 필요해요.
서버는 사용자가 웹사이트에 접속하면 웹페이지를 생성하여 보내주는 역할을 합니다.
Flask는 이런 서버를 파이썬으로 쉽고 빠르게 만들 수 있게 해주는 프레임워크예요.
즉, Flask를 사용하면 HTML 페이지를 만들어 브라우저에서 볼 수 있도록 제공하는 서버를 쉽게 만들 수 있습니다.
Flask란?
Flask(플라스크)는 파이썬으로 웹 애플리케이션을 만들 수 있는 가벼운 웹 프레임워크예요.
✔️ 간단한 구조로 빠르게 개발할 수 있고,
✔️ 확장성이 뛰어나며,
✔️ 초보자도 쉽게 시작할 수 있다는 장점이 있어요.
Flask를 사용하면 몇 줄의 코드만으로도 웹사이트를 띄울 수 있답니다! ✨
3️⃣ Flask 설치하기
우선, Flask를 설치해볼까요?
설치 방법:
터미널(또는 명령 프롬프트)에서 아래 명령어를 입력하세요.
pip install flask
설치가 완료되면 바로 Flask 웹 애플리케이션을 만들어 볼 거예요!
4️⃣ [실습] Flask로 “Hello, World!” 웹페이지 만들기
Flask의 기본 개념을 배우기 위해 간단한 웹페이지를 만들어볼게요.
📂 프로젝트 폴더 구조:
/flask_project
├── app.py # Flask 서버 코드
app.py 파일 만들기
아래 코드를 app.py 파일에 저장하세요.
from flask import Flask
app = Flask(__name__) # Flask 애플리케이션 생성
@app.route("/") # 홈페이지 URL 경로 설정
def home():
return "Hello, World!" # 화면에 표시될 내용
if __name__ == "__main__":
app.run(debug=True) # 디버그 모드로 실행
실행하기
터미널에서 아래 명령어를 입력하세요.
python app.py
그러면 Flask 서버가 실행되면서 http://127.0.0.1:5000/ 에 접속할 수 있어요.
브라우저에서 확인하기
브라우저를 열고 http://127.0.0.1:5000/에 접속하면 “Hello, World!” 메시지가 보일 거예요. 🎉
5️⃣ [실습] Flask로 자기소개 웹사이트 만들기
이제 Flask를 사용해 자기소개 웹사이트를 만들어볼게요!
📌 📂 프로젝트 폴더 구조:
/flask_project
├── app.py # Flask 서버 코드
├── templates/ # HTML 템플릿 폴더
│ ├── index.html # 자기소개 웹페이지📌 index.html (HTML 템플릿)
📂 templates/index.html 파일을 만들고 아래 코드를 입력하세요.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>홈페이지</title>
<style>
body {
font-family: 'Malgun Gothic', sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
h1 {
color: #333;
}
.introduction {
background-color: #f5f5f5;
padding: 15px;
border-radius: 5px;
margin-top: 20px;
}
</style>
</head>
<body>
<h1>안녕하세요, {{ name }}님!</h1>
<div class="introduction">
<p>{{ introduction }}</p>
</div>
</body>
</html>
app.py (Flask 서버)
이제 Flask 코드에서 HTML 템플릿을 렌더링(render) 해볼게요.
📂 app.py 파일을 수정하세요.
from flask import Flask, render_template
app = Flask(__name__)
@app.route("/")
def home():
return render_template("index.html", name="김코딩", introduction="저는 파이썬을 배우는 중급자입니다!")
if __name__ == "__main__":
app.run(debug=True)
실행하기
다시 터미널에서 실행하세요.
python app.py
그런 다음 http://127.0.0.1:5000/ 에 접속하면 자기소개 웹사이트가 나타납니다! 🎉
6️⃣ Flask 웹 개발을 더 잘하는 팁
1️⃣ 기능을 하나씩 추가하면서 개발하기
- 처음부터 복잡한 기능을 넣지 말고, 기본 페이지 → 입력 기능 추가 → 데이터 저장 등 단계별로 만들어보세요.
2️⃣ HTML/CSS 활용해서 디자인 꾸미기
- 웹사이트를 더 예쁘게 꾸미고 싶다면, CSS를 활용해 디자인을 추가하세요!
3️⃣ Flask 디버그 모드 활용하기
app.run(debug=True)설정을 하면, 코드 수정 후 자동으로 적용되니 편리해요.
7️⃣ 추천 학습 자료
| 리소스 이름 | 설명 | 링크 |
|---|---|---|
| Flask 공식 문서 | Flask의 모든 기능이 정리된 공식 문서 | 🔗 Flask 공식 문서 |
| HTML & CSS 기초 | 웹 디자인을 위한 필수 기초 | 🔗 MDN 웹 문서 |
| 파이썬 공식 문서 | 파이썬 기본 문법 및 라이브러리 설명 | 🔗 Python 공식 문서 |
마무리: 다음 단계로 나아가기
오늘은 Flask를 사용해 간단한 웹사이트를 만들어봤어요.
Flask의 기본 개념을 이해하고, 자기소개 웹페이지까지 만들었죠!
다음 단계로는 폼을 추가해서 사용자 입력을 받아보거나, 데이터베이스를 연결해서 정보를 저장하는 기능도 도전해보세요!
궁금한 점이 있다면 댓글로 남겨주세요.
파이썬 웹 개발, 앞으로도 함께 배워봐요! 😊
이렇게 정리하면 더 가독성이 좋고 길며, 단계별로 이해하기 쉬운 내용이 됩니다! ✨
[…] 시리즈의 다섯 번째 시간에 오신 걸 환영합니다. 데이터베이스를 배우기전 지난 글에서는 Flask를 활용해 간단한 웹사이트를 제작하고 자기소개 페이지를 […]