PHP 마법 학교 17기 4강: [대단원] 완성! ‘나만의 스마트 마법 비서 대시보드’

안녕하세요! 가족과 함께하는 스마트 라이프입니다. 드디어 17기 ‘API 마법’ 시리즈의 마지막 시간입니다! 마법 우체국을 통해 날씨 소식과 뉴스 꾸러미를 가져오는 법을 모두 배웠죠? 오늘은 이 모든 정보를 한 화면에 모아, 아침마다 우리에게 필요한 정보를 척척 알려주는 ‘스마트 마법 비서 대시보드’를 완성해 보겠습니다!

PHP 마법 학교 17기 4강: [대단원] 완성! '나만의 스마트 마법 비서 대시보드'

1. 마법 비서의 심장: 통합 API 호출

진짜 똑똑한 비서는 여러 곳의 정보를 한꺼번에 정리해서 보여줘야 해요. 날씨 서버와 뉴스 서버에 각각 편지를 보내고, 돌아온 JSON 답장들을 예쁜 상자에 담아 화면에 배치하는 것이 오늘 프로젝트의 핵심이랍니다. 이제 우리 사이트는 단순한 페이지가 아니라, 세상의 정보를 실시간으로 요약해주는 나만의 조종실이 되는 거예요.

2. 스마트 마법 비서 만들기 (코드)

날씨 정보와 뉴스 헤드라인을 동시에 불러와 멋지게 배치해 봅시다. 사용자님이 딸과 함께 사용하는 ‘EduPad’의 첫 화면으로 설정한다면, 아이가 공부를 시작하기 전 오늘의 날씨와 세상 돌아가는 이야기를 확인하는 아주 유익한 도구가 될 거예요!

<?php
// smart_assistant.php: 17기 통합 프로젝트
session_start();

// 1. 날씨 API 마법사에게 물어보기
$weather_url = "https://api.magic-weather.com/v1/seoul";
$weather_res = file_get_contents($weather_url);
$weather = json_decode($weather_res, true);

// 2. 뉴스 마법 부엉이에게 소식 받기
$news_url = "https://api.magic-news.com/v2/top-headlines?category=technology";
$news_res = file_get_contents($news_url);
$news = json_decode($news_res, true);
?>

<!DOCTYPE html>
<html>
<head>
  <style>
    body { background: #f0f7ff; font-family: 'Nanum Gothic'; padding: 20px; }
    .assistant-container { max-width: 800px; margin: auto; display: grid; grid-template-columns: 1fr 2fr; gap: 20px; }
    .card { background: white; padding: 20px; border-radius: 20px; box-shadow: 0 8px 16px rgba(0,0,0,0.05); }
    .weather-box { background: linear-gradient(to bottom, #4facfe 0%, #00f2fe 100%); color: white; text-align: center; }
    .news-box h3 { border-bottom: 2px solid #4facfe; padding-bottom: 10px; }
    .news-link { display: block; margin-bottom: 12px; text-decoration: none; color: #333; font-size: 14px; }
    .news-link:hover { color: #4facfe; }
  </style>
</head>
<body>
  <h1 style="text-align:center; color:#2c3e50;">🧙‍♂️ 오늘의 마법 비서 리포트</h1>
  
  <div class="assistant-container">
    <!-- 왼쪽: 날씨 카드 -->
    <div class="card weather-box">
      <h2>현재 날씨</h2>
      <div style="font-size: 40px;"><?php echo $weather['main']['temp']; ?>°C</div>
      <p><?php echo $weather['weather'][0]['description']; ?></p>
      <p>📍 서울 마법 기상청</p>
    </div>

    <!-- 오른쪽: 뉴스 카드 -->
    <div class="card news-box">
      <h3>🚀 실시간 기술 소식</h3>
      <?php
      foreach (array_slice($news['articles'], 0, 5) as $item) {
          echo "<a href='" . $item['url'] . "' class='news-link' target='_blank'>• " . $item['title'] . "</a>";
      }
      ?>
    </div>
  </div>
</body>
</html>

3. 왜 마법 비서 대시보드가 중요할까요?

수많은 정보를 나에게 꼭 맞게 ‘큐레이션’해주기 때문이에요!
1. 시간 절약: 여기저기 찾아다닐 필요 없이, 내가 만든 대시보드 하나면 아침 준비 끝! 사용자님이 매일 확인하시는 ‘삼성전자 주가’나 ‘환율’ 정보도 이 대시보드에 한 칸 더 추가하면 완벽한 경제 비서가 된답니다.
2. 기술의 융합: 16기에서 배운 그래프 마법과 이번 기수의 API 마법을 합치면 어떻게 될까요? 전 세계 기온 변화를 그래프로 보여주는 멋진 과학 도구도 만들 수 있어요. 이것이 바로 사용자님이 ‘Sigol Life’나 ‘SaaS 기부 플랫폼’을 만드실 때 사용하는 전문가의 기술이랍니다.

PHP 마법 학교 17기 4강: [대단원] 완성! '나만의 스마트 마법 비서 대시보드'

4. 아이들과 함께하는 ‘오늘의 마법 브리핑’ 놀이

아침 식사 시간에 아이와 함께 ‘가족 뉴스’와 ‘오늘의 날씨’를 짧게 발표하는 시간을 가져보세요. “비서님, 오늘 날씨에 맞는 옷차림은요?”라고 물어보고 아이가 대답하게 하는 거죠. “네가 날씨 정보를 찾아보고 뉴스를 골라 알려주는 과정이 바로 스마트 비서 프로그램이 하는 일이란다!”라고 설명해 주세요. 데이터 활용의 목적을 아주 유쾌하게 이해하게 됩니다.

마치며: 세상과 연결된 진정한 마법사

17기 과정을 통해 여러분은 외부 세계의 정보를 가져와 내 것처럼 사용하는 API 마법을 완벽히 정복했습니다! 이제 여러분의 웹사이트는 세상과 실시간으로 대화하는 살아있는 생명체가 되었네요. 저는 잠시 에너지를 보충한 뒤, 18기 시리즈: ‘코딩으로 만드는 나만의 일기장 – 파일 저장과 이미지 업로드 마법’으로 돌아오겠습니다. 모두 수고하셨습니다! ✨

관련 게시물