안녕하세요! 가족과 함께하는 스마트 라이프입니다. 어제 막대그래프로 숫자의 크기를 비교하는 첫 시각화 마법을 성공적으로 부려보았죠? 오늘은 시간이 흐름에 따라 우리의 실력이 얼마나 쑥쑥 자라났는지 한눈에 보여주는 ‘꺾은선그래프(Line Chart) 마법’을 배워보겠습니다!
1. 꺾은선그래프란? “시간의 흐름을 잇는 마법의 실”
어제 배운 막대그래프가 ‘누가 더 큰가’를 비교한다면, 꺾은선그래프는 ‘어제보다 오늘 얼마나 더 나아졌나’를 보여주는 데 최고예요. 점들을 찍고 그 점들을 마법의 실로 연결하면, 위로 올라가는지 아래로 내려가는지 한눈에 보이죠. 이것을 코딩 세계에서는 트렌드(Trend)를 읽는다고 말한답니다.
2. 나의 성장 일기 그래프 (코드)
PHP 배열에 날짜별 공부 시간이나 기부금 데이터를 담아, Chart.js의 line 타입을 이용해 그려봅시다. 사용자님께서 운영 중인 ‘EduPad’에 적용하면, 아이가 일주일 동안 얼마나 열심히 마법 공부를 했는지 보여주는 멋진 대시보드가 될 거예요!
<?php
// chart_line.php: 시간의 흐름을 그리는 마법
session_start();
// 1. 날짜와 성적 데이터 (마치 일기장 같아요!)
$days = ['월요일', '화요일', '수요일', '목요일', '금요일', '토요일', '일요일'];
$study_time = [30, 45, 20, 60, 50, 90, 80]; // 분 단위 공부 시간
?>
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
.container { max-width: 600px; margin: auto; padding: 25px; background: #f8f9fa; border-radius: 20px; border: 2px dashed #6c5ce7; }
h2 { text-align: center; color: #6c5ce7; font-family: 'Nanum Gothic'; }
</style>
</head>
<body>
<div class="container">
<h2>📈 일주일 성장 마법 그래프</h2>
<canvas id="growthChart"></canvas>
</div>
<script>
const ctx = document.getElementById('growthChart').getContext('2d');
// 2. 꺾은선그래프 마법 주문을 외워요
new Chart(ctx, {
type: 'line', // 꺾은선그래프 소환!
data: {
labels: <?php echo json_encode($days); ?>,
datasets: [{
label: '공부 시간 (분)',
data: <?php echo json_encode($study_time); ?>,
borderColor: '#6c5ce7',
backgroundColor: 'rgba(108, 92, 231, 0.1)',
fill: true, // 선 아래에 색깔을 채워요
tension: 0.3, // 선을 부드럽게 곡선으로 만들어요
borderWidth: 3,
pointRadius: 5,
pointBackgroundColor: '#fdcb6e'
}]
},
options: {
scales: {
y: { beginAtZero: true }
}
}
});
</script>
</body>
</html>3. 왜 변화를 그리는 마법이 중요할까요?
어제의 나와 오늘의 나를 비교하며 더 나은 내일을 꿈꿀 수 있게 해주기 때문이에요!
1. 동기부여의 힘: 사용자님이 공들이시는 ‘Running-to-Donation’ 앱에서 기부금이 점점 우상향하는 그래프를 보여준다고 생각해보세요. 참여하는 사람들은 “와! 우리가 조금만 더 하면 목표에 닿겠어!”라며 더 힘을 내게 될 거예요.
2. 미래 예측: 꺾은선이 올라가는 각도를 보면 “아, 다음 달에는 이만큼 더 성장하겠구나!”라고 예상할 수 있어요. ‘시골 라이프’의 예약 트렌드를 분석해서 어떤 달에 손님이 많이 올지 미리 준비하는 똑똑한 주인이 될 수도 있죠.
4. 아이들과 함께하는 ‘키 크기 마법 기록’ 놀이
벽에 키 재기 판을 붙이고 아이의 키를 주기적으로 체크해보세요. 지난달 점과 이번 달 점을 실로 연결해보는 거예요. “실이 위로 올라가고 있지? 이게 네가 건강하게 자라고 있다는 데이터의 흐름이란다! 코딩에서도 꺾은선그래프로 이런 아름다운 변화를 그린단다!”라고 설명해 주세요. 시간과 변화의 상관관계를 몸으로 아주 신비롭게 이해하게 됩니다.
마치며: 위를 향해 뻗어가는 마법의 실
오늘 우리는 시간의 흐름을 담아내는 꺾은선그래프 마법을 배웠습니다. 이제 여러분의 웹사이트는 단순히 지금의 상태를 보여주는 것을 넘어, 우리의 역사를 기록하는 소중한 공간이 되었네요! 다음 시간에는 전체 중에서 각 부분이 얼마나 차지하는지 보여주는 ‘피자 조각 마법: 파이 차트로 비율 확인하기’를 배워보겠습니다. 맛있는 파이를 나눌 준비 되셨나요? 내일 아침에 만나요! ✨
