📦 FutureBox

미래의 나에게 보내는 디지털 타임캡슐

🚀 Live Demo

💡 프로젝트 소개

FutureBox는 미래의 자신에게 메시지를 전달할 수 있는 디지털 타임캡슐 서비스입니다.

지금의 생각과 감정을 기록하고, 원하는 날짜에 열어볼 수 있습니다. 당장 내일 또는 1년 후, 5년 후의 나에게 메시지를 보내보세요.

✨ 주요 기능

• 🔒 암호화 저장 - AES 암호화로 메시지를 안전하게 보호
• 📅 미래 예약 - 원하는 날짜에만 열리는 타임캡슐
• 💾 클라우드 동기화 - 언제 어디서나 접근 가능
• 📱 반응형 디자인 - 모바일, 태블릿, PC 모두 지원
• 🎨 직관적인 UI - 누구나 쉽게 사용할 수 있는 인터페이스

🎯 사용 방법

1. 메시지 작성 - 미래의 나에게 하고 싶은 말을 작성
2. 날짜 설정 - 메시지를 열람할 날짜 선택
3. 캡슐 봉인 - 저장하면 설정한 날짜까지 잠김
4. 미래에 확인 - 설정한 날짜가 되면 자동으로 열림 버튼 활성화

🛠️ 기술 스택

Frontend

• TypeScript - 타입 안정성과 코드 품질 보장
• Vite - 빠른 개발 환경과 최적화된 빌드

Backend & Database

• Supabase - PostgreSQL 기반 실시간 데이터베이스
• Row Level Security - 사용자별 데이터 보안

Deployment

• Vercel - 자동 배포 및 CDN 최적화

Security

• Web Crypto API - 클라이언트 사이드 암호화
• Environment Variables - 민감 정보 보호

🎨 디자인 특징

• 레트로 픽셀 감성 - 8-bit 스타일의 향수를 자극하는 비주얼
• 감성적인 컬러 - 미래와 추억을 연상시키는 배색
• 도 애니메이션 - 픽셀 아트 스타일의 부드러운 움직임
• 접근성 고려 - 모든 사용자가 편하게 이용 가능

💻 개발 하이라이트

1. 보안 중심 설계

// AES-256 암호화로 메시지 보호
const encryptMessage = async (message: string) => {
  const encoder = new TextEncoder();
  const data = encoder.encode(message);
  const encrypted = await crypto.subtle.encrypt(
    { name: "AES-GCM", iv: iv },
    key,
    data
  );
  return encrypted;
};

2. 날짜 기반 접근 제어

• 설정한 날짜 전에는 메시지 열람 불가
• 서버 시간 기준으로 정확한 제어

3. 실시간 동기화

• Supabase Realtime으로 즉각적인 데이터 반영
• 여러 기기에서 동시 사용 가능

🚀 성능 최적화

• Lazy Loading - 필요한 컴포넌트만 로드
• Code Splitting - 빌드 크기 최소화
• CDN 배포 - Vercel Edge Network로 빠른 로딩
• 이미지 최적화 - WebP 포맷 사용

🔮 향후 계획

• 푸시 알림 기능 (오픈 날짜 알림)
• 사진/동영상 첨부 기능
• 친구와 공유하는 공동 캡슐
• 다국어 지원 (영어, 일본어)
• 다크모드 지원
• PWA 변환 (오프라인 지원)

🤝 기여하기

이슈와 PR은 언제나 환영입니다!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📞 연락처

• Email: lnh929@naver.com

📄 라이선스

이 프로젝트는 MIT 라이선스를 따릅니다.

---

⭐ 이 프로젝트가 마음에 드셨다면 Star를 눌러주세요! ⭐

Made with by uptomaster