May 14, 2026
Artistic Memory Calendar
Artistic Memory Calendar
Artistic Memory Calendar
"행복의 순간을 만화책처럼, 노트처럼, 감성적으로 기록하세요."
✨ 프로젝트 소개
Artistic Memory Calendar는 하루의 행복을 만화책/노트/인스타그램 피드 스타일로 기록하고, 감성적 인터랙션과 최고의 엔지니어링을 결합한 웹앱입니다.
- 만화책/노트 스타일: 두꺼운 테두리, 줄무늬, 손글씨 폰트, 페이지 넘버, 만화책 넘김 애니메이션
- 인스타그램 피드: 카드형 리스트, 정사각형 이미지, 모바일 최적화
- 감성적 UX: 입력/저장/달력 등 모든 액션에 만화책스러운 피드백과 파티클 효과
- 글로벌 상태 관리: Context 기반의 기록, 탭, 선택, 캘린더 월 등 일관된 상태 설계
- 접근성/반응성: 키보드, 스크린리더, 모바일 터치 모두 완벽 지원
- 성능/확장성: localStorage, 이미지 리사이즈, 컴포넌트 분리, 미래 AI 확장 고려
🧑💻 주요 기능
- 오늘의 행복 기록(이미지, 텍스트, 별점, 태그, 날짜)
- 만화책/노트 스타일의 입력/리스트/상세/캘린더 뷰
- 인스타그램 피드형 카드 리스트
- 달력 월 이동/날짜 선택 만화책 애니메이션
- 태그 자동완성/추천, 날짜 빠른 선택(오늘/어제)
- 입력값 자동 임시저장, 유효성 검사, 접근성 강화
- 모바일 카메라 촬영, 이미지 자동 리사이즈/압축
- 저장/별점/달력 등 모든 액션에 감성 피드백
🏗️ 아키텍처 & 컴포넌트
- 글로벌 상태(AppContext): 기록 배열, 탭, 선택, 캘린더 월 등 관리
- 주요 컴포넌트:
NoteCard: 만화책/노트 스타일 입력 카드FeedGrid: 인스타 피드형 리스트CalendarView,DatePicker: 만화책 달력/날짜 선택TagInput: 태그 입력/추천Modal,TabNav등
- 상태/액션 흐름: Context + Reducer 기반, DX/테스트 용이
🎨 만화책 인터랙션 & 감성 UX
- 달력 월 이동/날짜 선택 시 슬라이드, 파티클, 팡! 효과
- 입력/저장/별점 등 모든 액션에 만화책스러운 피드백
- 테두리 강조, 말풍선/스티커, 진동, 애니메이션 등
- Jonathan Ive & Alan Dye 스타일의 미니멀+감성 UI
♿️ 접근성 & 반응성
- aria-label, 키보드/스크린리더 지원
- 모바일 터치/PC 마우스 모두 최적화
- 충분한 대비, 큰 터치 영역, 반응형 레이아웃
⚡️ 성능 & 확장성
- localStorage 자동 저장/복구
- 이미지 리사이즈/압축, 불필요한 리렌더 최소화
- 컴포넌트 분리, 미래 AI/클라우드 확장 고려
- Defensive Engineering: 에러 방지, fallback UI, graceful degradation
👑 팀 철학 (Jeff Dean, Linus Torvalds, Dan Abramov, Jonathan Ive...)
- [성능]: CPU/메모리 최적화, 불필요한 연산 제거, 빠른 피드백
- [확장성]: 컴포넌트 분리, 상태/액션 일관성, 미래 AI/클라우드 확장 고려
- [사용자경험]: 모든 인터랙션에 즉각적 피드백, 감성적 delight, 접근성 우선
- [미학]: 미니멀+감성, 본질만 남긴 UI, 일관된 컬러/타이포/레이아웃
- [안정성]: Defensive Engineering, fallback, 에러 방지, 유지보수성
"기록하는 순간이 즐겁고, 앱이 방해가 되지 않아야 한다."
"모든 인터랙션은 자연스럽고, 사용자는 앱이 아니라 자신의 감정에 집중해야 한다."
🚀 시작하기
npm install
npm start
📦 기술 스택
- React, TailwindCSS, framer-motion
- Context API, localStorage
- (미래) AI 감정 분석, 클라우드 동기화 등
📝 라이선스
MIT