안녕하세요! 가족과 함께하는 스마트 라이프입니다. 드디어 18기 ‘파일 시스템과 업로드 마법’ 시리즈의 마지막 시간입니다! 텍스트로 마음을 기록하고, 사진으로 순간을 담는 법을 모두 배웠으니 오늘은 이 둘을 하나로 합쳐 ‘멀티미디어 마법 일기장’을 완성해 보겠습니다!
[IMAGE_1]
1. 멀티미디어 일기장의 원리: “글과 그림을 한 바구니에”
진짜 일기장에는 글만 있는 게 아니라 사진도 붙어있죠? 웹사이트에서도 마찬가지예요. 우리가 쓴 텍스트 데이터와 서버에 저장된 사진 파일의 경로(주소)를 함께 보여주면 멋진 멀티미디어 일기장이 완성됩니다. 18기 동안 배운 file_put_contents와 move_uploaded_file 마법이 힘을 합치는 순간이죠!
2. 사진이 있는 마법 일기장 완성하기 (코드)
사진을 업로드하면 그 사진 아래에 일기 내용이 예쁘게 붙어 나오는 통합 코드를 작성해 봅시다. 사용자님이 딸을 위해 만드시는 ‘EduPad’의 메인 기능으로 넣는다면, 아이가 오늘 푼 수학 문제 사진을 찍어 올리고 “오늘 100점 맞아서 기분 최고!”라고 적는 행복한 기록장이 될 거예요.
<?php
// final_diary.php: 18기 통합 프로젝트
session_start();
$upload_dir = "uploads/";
if (!is_dir($upload_dir)) mkdir($upload_dir);
if (isset($_POST['save_all'])) {
// 1. 사진 업로드 마법 (3강 내용)
$file_name = basename($_FILES["photo"]["name"]);
$target_file = $upload_dir . time() . "_" . $file_name; // 이름 중복 방지를 위해 시간을 붙여요
if (move_uploaded_file($_FILES["photo"]["tmp_name"], $target_file)) {
// 2. 일기 텍스트 저장 마법 (1강 내용)
$content = "<div class='entry'>\n";
$content .= "<img src='$target_file' style='width:100%; border-radius:10px;'>\n";
$content .= "<p>[" . date("Y-m-d") . ""] " . htmlspecialchars($_POST['diary_text']) . "</p>\n";
$content .= "</div>\n\n";
file_put_contents("master_diary.html", $content, FILE_APPEND);
echo "<script>alert('✨ 소중한 추억이 마법처럼 저장되었습니다!');</script>";
}
}
?>
<!DOCTYPE html>
<html>
<head>
<style>
body { background: #fdf2f8; font-family: 'Nanum Gothic'; padding: 20px; }
.main-box { max-width: 600px; margin: auto; background: white; padding: 30px; border-radius: 25px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
textarea { width: 100%; height: 100px; margin: 10px 0; border-radius: 10px; border: 1px solid #ddd; padding: 10px; }
.btn-magic { width: 100%; padding: 15px; background: #ec4899; color: white; border: none; border-radius: 15px; font-weight: bold; cursor: pointer; }
.entry-list { margin-top: 30px; }
.entry { background: white; padding: 15px; border-radius: 15px; margin-bottom: 20px; border: 1px solid #fbcfe8; }
</style>
</head>
<body>
<div class="main-box">
<h2 style="text-align:center; color:#db2777;">💖 멀티미디어 마법 일기장</h2>
<form method="POST" enctype="multipart/form-data">
<input type="file" name="photo" required>
<textarea name="diary_text" placeholder="오늘의 이야기를 적어주세요..." required></textarea>
<button type="submit" name="save_all" class="btn-magic">추억 기록 마법 걸기</button>
</form>
<div class="entry-list">
<h3>📜 우리가 만든 추억들</h3>
<?php if(file_exists("master_diary.html")) include("master_diary.html"); ?>
</div>
</div>
</body>
</html>3. 왜 통합 멀티미디어 마법이 중요할까요?
다양한 형태의 데이터를 융합할 때 정보가 입체적으로 변하기 때문이에요!
1. 경험의 보존: 텍스트는 생각을, 이미지는 현장을 담죠. 이 둘이 만나면 사용자님이 개발 중인 ‘시골 라이프’ 게스트하우스의 생생한 후기가 되고, ‘Running-to-Donation’ 앱에서는 인증샷과 소감이 어우러진 감동적인 기부 기록이 됩니다.
2. 포트폴리오의 기초: 파일 시스템을 다루는 능력은 나중에 사용자님의 Ubuntu 서버에서 로그 파일을 분석하거나, SaaS 플랫폼의 정산 자료를 엑셀 파일로 생성하는 고급 기술로 이어집니다. 오늘의 작은 일기장이 거대한 시스템의 씨앗인 셈이죠.
[IMAGE_2]
4. 아이들과 함께하는 ‘가족 신문 만들기’ 놀이
오늘 찍은 가족 사진을 인화하거나 화면에 띄우고, 아이와 함께 그 옆에 어울리는 짧은 글을 적어보세요. “사진이라는 파일 데이터와 네가 쓴 텍스트 데이터를 한 페이지에 모으는 게 바로 멀티미디어 대시보드란다!”라고 설명해 주세요. 데이터 결합(Data Integration)의 즐거움을 아주 생생하게 배우게 됩니다.
마치며: 여러분의 서버에 추억이 가득하길!
18기 과정을 통해 여러분은 파일 시스템을 자유자재로 다루며 글과 사진을 저장하는 법을 마스터했습니다! 이제 여러분의 웹사이트는 무엇이든 담을 수 있는 든든한 보물 창고가 되었네요. 저는 잠시 휴식 후, 드디어 웹 개발의 꽃! 19기 시리즈: ‘진짜 마법사의 소통 – 세션과 쿠키로 로그인 기능 만들기’로 돌아오겠습니다. 회원가입할 준비 되셨나요? 내일 아침에 만나요! ✨
