안녕하세요! 가족과 함께하는 스마트 라이프입니다. 지난 12기에서 인공지능 비서를 소환해 대화하고 그림을 그리는 놀라운 경험을 했죠? 오늘부터 시작되는 13기에서는 우리가 보낸 메시지가 새로고침 없이 즉시 전달되는 ‘실시간 통신(WebSocket) 마법’을 배워보겠습니다!
1. 웹소켓(WebSocket)이란? ‘끊기지 않는 마법 전화선’
지금까지 우리가 배운 방식은 편지를 보내고 답장을 기다리는 방식이었어요. 하지만 채팅을 할 때 매번 새로고침 버튼을 누르면 너무 답답하겠죠? 웹소켓은 서버와 우리 브라우저 사이에 끊기지 않는 마법 전화선을 연결하는 것과 같아요. 한쪽에서 말을 하면 반대편에서 즉시 들을 수 있는 아주 빠른 통신 방법이랍니다.
2. 실시간 채팅방의 뼈대 만들기 (코드)
PHP와 JavaScript를 결합해 메시지를 입력하자마자 화면에 툭 튀어나오는 기초 채팅 화면을 만들어 봅시다. 사용자님이 추진하시는 ‘시골 라이프(sigol.life)’ 프로젝트에서 게스트와 호스트가 실시간으로 문의를 주고받는 대화창의 기초가 될 거예요!
<?php
// chat_room.php: 실시간 대화방 마법
session_start();
?>
<!DOCTYPE html>
<html>
<head>
<style>
.chat-window { max-width: 400px; margin: auto; border: 2px solid #3498db; border-radius: 15px; overflow: hidden; }
#messages { height: 300px; overflow-y: scroll; background: #ebf5fb; padding: 15px; }
.msg-bubble { background: white; padding: 8px 12px; border-radius: 10px; margin-bottom: 10px; box-shadow: 1px 1px 2px rgba(0,0,0,0.1); }
.input-area { display: flex; padding: 10px; background: white; }
input { flex: 1; padding: 10px; border: 1px solid #ddd; border-radius: 5px; }
</style>
</head>
<body>
<div class="chat-window">
<div id="messages">
<div class="msg-bubble">🧙 마법사: 환영합니다! 메시지를 보내보세요.</div>
</div>
<div class="input-area">
<input type="text" id="chatInput" placeholder="마법 주문 입력...">
<button onclick="sendMessage()">전송</button>
</div>
</div>
<script>
function sendMessage() {
const input = document.getElementById('chatInput');
if (input.value === "") return;
// 1. 화면에 즉시 내 메시지를 추가해요 (새로고침 NO!)
const msgDiv = document.createElement('div');
msgDiv.className = 'msg-bubble';
msgDiv.innerText = "나: " + input.value;
document.getElementById('messages').appendChild(msgDiv);
input.value = "";
// 2. 실제 서버와 연결하는 웹소켓 주문은 다음 시간에 더 깊이 배워요!
}
</script>
</body>
</html>3. 왜 실시간 마법이 중요할까요?
세상은 점점 더 빨라지고 있고, 사람들은 기다리는 것을 싫어하기 때문이에요!
1. 즉각적인 반응: 사용자님이 개발 중인 ‘EduPad’에 적용한다면? 아이가 문제를 풀 때 아빠가 멀리서도 “오! 정답이야!”라고 실시간 응원을 보낼 수 있죠. 아이는 아빠가 옆에 있는 것처럼 느낄 거예요.
2. 동시 접속의 힘: 여러 사람이 동시에 접속해 함께 퀴즈를 풀거나 게임을 할 수 있는 멀티플레이어 환경을 만드는 핵심 기술이랍니다.
4. 아이들과 함께하는 ‘실전화기 실시간 대화’ 놀이
종이컵 두 개와 실을 연결해 실전화기를 만들어 보세요. 실이 팽팽해야 목소리가 들리죠? “이 팽팽한 실이 바로 웹소켓이야. 실이 연결되어 있는 동안은 우리가 언제든 바로바로 말을 주고받을 수 있지!”라고 설명해 주세요. 지속적인 연결(Persistent Connection)의 개념을 아주 쉽게 깨닫게 됩니다.
마치며: 연결의 마법이 시작되었습니다
오늘 우리는 새로고침 없이 대화가 오가는 실시간 마법의 첫걸음을 뗐습니다. 이제 우리 마법 학교는 정적인 홈페이지를 넘어 생동감 넘치는 소통의 장이 될 거예요! 다음 시간에는 실제로 서버를 통해 다른 사람과 메시지를 주고받는 ‘데이터 중계 마법: 메시지 전달하기’를 배워보겠습니다. 친구들과 대화할 준비 되셨나요? 내일 아침에 만나요! ✨
