백엔드 개발을 하는 데 있어 실시간 웹 애플리케이션은 사용자와의 즉각적인 상호작용을 가능하게 해주는 중요한 요소입니다. 이번 글에서는 Python을 사용하여 실시간 웹 애플리케이션을 구축하는 단계별 튜토리얼을 제공하겠습니다. Flask와 Socket.IO를 사용하여 간단한 채팅 애플리케이션을 만들어 보겠습니다.

1단계: 환경 설정

먼저, Python 환경을 설정하고 필요한 라이브러리를 설치합니다. 다음 명령어를 사용하여 Flask와 Flask-SocketIO를 설치하세요.

pip install Flask Flask-SocketIO

2단계: Flask 애플리케이션 만들기

이제 기본적인 Flask 애플리케이션을 만들어 보겠습니다. 새 파일을 app.py로 저장하고 아래 코드를 작성하세요.

from flask import Flask, render_template
from flask_socketio import SocketIO

app = Flask(__name__)
socketio = SocketIO(app)

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

if __name__ == '__main__':
    socketio.run(app, debug=True)

위 코드는 간단한 Flask 애플리케이션을 설정하고, 루트 경로에 접속할 때 index.html 파일을 반환합니다.

3단계: HTML 템플릿 만들기

이제 templates 폴더를 만들고 그 안에 index.html 파일을 생성합니다. 아래 HTML 코드를 작성하세요.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>실시간 채팅 애플리케이션</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/3.0.3/socket.io.js"></script>
    <style>
        body { font-family: Arial, sans-serif; }
        #messages { list-style-type: none; }
        #messages li { margin: 5px; }
    </style>
</head>
<body>
    <h1>실시간 채팅</h1>
    <ul id="messages"></ul>
    <input id="message-input" autocomplete="off" /><button onclick="sendMessage()">전송</button>

    <script>
        var socket = io();

        socket.on('message', function(msg) {
            const item = document.createElement('li');
            item.textContent = msg;
            document.getElementById('messages').appendChild(item);
        });

        function sendMessage() {
            const input = document.getElementById('message-input');
            const message = input.value;
            socket.emit('message', message);
            input.value = '';
        }
    </script>
</body>
</html>

위 코드는 간단한 채팅 UI를 구현하며, 메시지를 입력하고 전송하는 기능을 포함하고 있습니다.

4단계: Socket.IO 이벤트 처리

이제 실시간 메시징 기능을 구현하기 위해 app.py에 Socket.IO 이벤트를 추가해야 합니다. 다음 코드를 추가하세요.

@socketio.on('message')
def handle_message(msg):
    print('메시지 수신: ' + msg)
    socketio.send(msg)

위 코드는 클라이언트에서 메시지를 수신하면 콘솔에 출력하고, 다시 모든 클라이언트에게 메시지를 전송합니다.

5단계: 애플리케이션 실행하기

모든 코드가 준비되었으니 이제 애플리케이션을 실행해보겠습니다. 터미널에서 다음 명령어를 입력하세요.

python app.py

브라우저에서 http://localhost:5000에 접속하여 채팅 애플리케이션을 확인할 수 있습니다. 여러 개의 브라우저 탭을 열고 메시지를 보내보세요. 실시간으로 메시지가 전송되는 것을 확인할 수 있습니다.

마무리

이번 글에서는 Python과 Flask, Socket.IO를 사용하여 간단한 실시간 웹 애플리케이션을 만드는 방법에 대해 알아보았습니다. 이 튜토리얼을 바탕으로 더 복잡한 기능을 추가하거나 다른 형태의 실시간 애플리케이션을 개발해 볼 수 있습니다. 실시간 데이터 전송은 사용자 경험을 향상시키는 중요한 요소이니 다양한 아이디어를 시도해 보시기 바랍니다.