안녕하세요! 가족과 함께하는 스마트 라이프입니다. 지난 9기에서 몬스터를 물리치는 멋진 ‘웹 게임’을 완성하며 코딩의 재미를 만끽했죠? 오늘부터 시작되는 10기에서는 우리 실생활에 더 가까운 마법을 부려볼 거예요. 바로 우리 집의 상태를 한눈에 확인하고 제어하는 ‘스마트 홈 대시보드’ 만들기 프로젝트입니다!
[IMAGE_1]
1. 스마트 홈 대시보드란? ‘우리 집의 컨트롤 타워’
요즘은 전등도, 에어컨도 스마트폰으로 조절하는 시대죠? 대시보드는 이런 기기들의 상태(거실 온도는 몇 도인지, 불은 켜져 있는지)를 하나의 화면에 예쁘게 모아 보여주는 판넬을 말해요. 비행기 조종석의 계기판처럼, 우리 집을 멋지게 조종할 수 있는 마법의 화면을 PHP로 설계해 볼 거예요.
2. 우리 집 기기들을 코드로 정의하기 (코드)
먼저 우리 집의 전등이나 에어컨 같은 기기들을 컴퓨터가 이해할 수 있는 배열(Array) 데이터로 정리해 봅시다. 대시보드의 기초 뼈대가 될 거예요.
<?php
// dashboard_init.php: 스마트 홈 기기 설정
// 1. 우리 집 마법 기기들의 상태를 가방에 담아요
$smart_home = [
"living_room_light" => [
"name" => "거실 전등",
"status" => "ON",
"icon" => "💡"
],
"bedroom_ac" => [
"name" => "침실 에어컨",
"status" => "OFF",
"icon" => "❄️"
],
"main_gate" => [
"name" => "현관문",
"status" => "LOCKED",
"icon" => "🔒"
]
];
// 2. 대시보드 화면에 기기들을 하나씩 꺼내 보여줘요
echo "<h2>🏠 마법 본부 기기 상태</h2>";
echo "<div style='display: flex; gap: 20px;'>";
foreach ($smart_home as $key => $device) {
$color = ($device['status'] == 'ON' || $device['status'] == 'LOCKED') ? 'green' : 'red';
echo "<div style='border: 2px solid #ccc; padding: 15px; border-radius: 10px; text-align: center;'>";
echo "<span style='font-size: 30px;'>" . $device['icon'] . "</span><br>";
echo "<strong>" . $device['name'] . "</strong><br>";
echo "상태: <span style='color: $color;'>" . $device['status'] . "</span>";
echo "</div>";
}
echo "</div>";
?>3. 왜 우리 집 대시보드가 필요할까요?
데이터를 한데 모으면 보이지 않던 것들이 보이기 시작해요!
1. 에너지 절약: 불이 켜진 방을 한눈에 확인해서 낭비되는 전기를 줄일 수 있죠.
2. 스마트한 생활: 사용자님께서 개발하신 ‘EduPad’와 연결한다면 어떨까요? 아이가 오늘의 학습 목표를 달성했을 때 대시보드에 ‘칭찬 모드’가 활성화되면서 거실 전등 색깔이 무지개색으로 변하는 깜짝 마법을 부릴 수도 있답니다!
[IMAGE_2]
4. 아이들과 함께하는 ‘우리 집 지도 그리기’ 놀이
종이에 우리 집 평면도를 그리고, 각 방에 어떤 스마트 기기가 있으면 좋을지 스티커를 붙여보세요. “여기는 온도를 알려주는 센서, 여기는 도둑을 감시하는 카메라!”라고 정하는 과정이 바로 시스템 설계입니다. “우리가 지도에 스티커를 붙인 것처럼, 코딩으로 기기들을 배열에 넣으면 컴퓨터가 우리 집을 관리할 수 있게 된단다!”라고 설명해 주세요.
마치며: 우리 집이 똑똑해지기 시작했어요
오늘 우리는 스마트 홈 대시보드의 첫 단추인 기기 설정 마법을 배웠습니다. 이제 우리 집의 상태를 컴퓨터가 읽을 수 있게 되었네요! 다음 시간에는 버튼을 눌러 실제로 전등을 켜고 끄는 ‘제어 마법: 폼 전송과 상태 업데이트’를 배워보겠습니다. 우리 집을 움직이는 마법사가 되어보세요! 내일 아침에 만나요! ✨
