📖 디지털 추억 앨범

📋 프로젝트 개요

Flask 웹 프레임워크를 사용해서 소중한 추억을 저장하고 공유할 수 있는 웹 애플리케이션을 만들어보세요! Unit 11에서 배운 Flask, 템플릿, 폼 처리를 활용하여 실제로 사용할 수 있는 프로그램을 만드는 프로젝트입니다.

🎯 학습 목표

Flask로 동적 웹 애플리케이션 만들기
Jinja2 템플릿으로 HTML 렌더링하기
웹 폼으로 사용자 입력 처리하기
Bootstrap으로 반응형 디자인 구현하기
추억 생성/읽기 기능 구현하기

🚀 필수 요구사항

1. 추억 앨범 기본 기능

Flask 라우트 구성

/ - 홈페이지 (모든 추억 목록)
/add_memory - 새로운 추억 추가 페이지
/memory/<int:memory_id> - 개별 추억 상세 보기

추억 데이터 구조

제목 (이모지 포함 가능)
날짜 (YYYY-MM-DD 형식)
사진 URL (웹 이미지 링크)
추억 이야기 (텍스트)
ID (자동 생성)

2. 템플릿 시스템

base.html - 기본 레이아웃

네비게이션 바
Bootstrap 5 CSS/JS (CDN)
반응형 컨테이너
Flash 메시지 표시

home.html - 홈페이지 템플릿

추억 카드 그리드 레이아웃
최근 추억 우선 정렬
추억 추가 버튼
추억이 없을 때 안내 메시지

add_memory.html - 추억 추가 폼

입력 필드 검증
날짜 선택기
기본 이미지 URL 제공
취소/저장 버튼

view_memory.html - 추억 상세보기

큰 이미지 표시
전체 스토리 표시
목록으로 돌아가기 버튼

3. 디자인 요구사항

시각적 요소

🎨 그라데이션 배경
📱 모바일 반응형
🌈 카드 호버 효과
✨ 부드러운 애니메이션
🖼️ 이미지 자동 크기 조정

사용자 경험

친근한 한글 메시지
직관적인 네비게이션
빠른 페이지 로딩
명확한 피드백 메시지

💻 실행 예시


$ python app.py
 
==================================================
🎉 추억 앨범 웹사이트가 시작됩니다!
🌐 브라우저에서 http://localhost:5001 으로 접속하세요
⚡ 코드를 수정하면 자동으로 재시작됩니다
🛑 서버를 종료하려면 Ctrl+C를 누르세요
==================================================
 * Serving Flask app 'app'
 * Debug mode: on
WARNING: This is a development server. Do not use it in a production deployment.
 * Running on all addresses (0.0.0.0)
 * Running on http://127.0.0.1:5001
 * Running on http://192.168.108.3:5001
Press CTRL+C to quit

📝 완성 체크리스트

🎨 디자인 가이드

색상 테마

메인 색상: 보라색 그라데이션 (#6c5ce7 → #a29bfe)
카드 배경: 흰색 with 그림자
호버 효과: 카드 상승 + 그림자 강화
버튼: 그라데이션 + 호버 시 밝아짐

레이아웃


┌─────────────────────────────────┐
│        📖 추억 앨범              │  <- 네비게이션
├─────────────────────────────────┤
│    나의 추억 앨범               │  <- 제목
│    새로운 추억 추가하기 버튼     │
├─────────────────────────────────┤
│ ┌──────┐ ┌──────┐ ┌──────┐    │
│ │ 추억1 │ │ 추억2 │ │ 추억3 │    │  <- 카드 그리드
│ └──────┘ └──────┘ └──────┘    │
└─────────────────────────────────┘

추억 카드 구성

📸 이미지 (상단, 200px 높이)
📝 제목 (굵은 글씨)
📅 날짜 (회색 텍스트)
💬 이야기 미리보기 (100자)
🔗 자세히 보기 버튼

🔧 실행 방법


# 1. 프로젝트 클론
git clone https://github.com/jaceleedev/memory-book
cd memory-book
 
# 2. 가상환경 생성 및 활성화
python3 -m venv venv
source venv/bin/activate  # Mac/Linux
# venv\Scripts\activate  # Windows
 
# 3. 필요한 패키지 설치
pip install -r requirements.txt
 
# 4. Flask 앱 실행
python app.py
 
# 5. 브라우저에서 확인
# http://localhost:5001 접속

⚠️ 주의: macOS에서는 AirPlay가 5000번 포트를 사용하므로 5001번 포트를 사용합니다.

🚀 확장 아이디어

기본 확장

📝 추억 수정 기능 (/edit/<id>)
🗑️ 추억 삭제 기능 (/delete/<id>)
🔍 검색 기능
🏷️ 카테고리/태그 추가

고급 확장

👤 사용자 로그인
💾 데이터베이스 연동 (SQLite)
📤 이미지 업로드
💌 추억 공유 기능
📊 월별/연도별 통계
🎵 배경음악 추가

🎉 완성 후

완성된 추억 앨범에 가족과 친구들의 소중한 순간들을 담아보세요! 생일, 여행, 모임 등 특별한 순간들을 기록하고 언제든 다시 볼 수 있는 나만의 디지털 앨범이 완성되었습니다.