치매어른을 위한 질문형 일기장 앱 만들기
React와 TypeScript로 나만의 PWA 개발기
1. 시작하게 된 배경
• 요즘 뭐 좀 해보려고 하면 gpt한테 이것저것 물어본다. 그러다가 뚝딱 뚝딱 어느 정도 진행이 될 것 같아서 글도 같이 남겨 본다.
• 일기가 치매어른들에게 좋다 하여 질문을 통해 유도하는 일기 형식을 떠올림.
• 나중에 모바일이나 노인친화 앱 아이디어로도 확장 가능할 것 같아서 MVP부터 시작해 보기로 함.
⸻
2. MVP 기획
• 목표: “하루에 하나의 질문을 던지고, 그에 대한 답을 일기로 기록”
• 기본 기능:
• 고정 또는 무작위 질문 제시
• 텍스트 입력 및 저장
• 일기 리스트 보기
• 로컬스토리지 기반 저장
⸻
3. 개발 스택 및 구성
• Frontend: React + TypeScript
• 스타일링: CSS 모듈
• 배포: Vercel
• 저장: localStorage (일단 서버 없이) 무전스타일!
⸻
4. 주요 코드 구성
• App.tsx: 전체 구조 관리
• JournalEntryForm.tsx: 질문 및 입력 폼
• JournalList.tsx: 저장된 일기 목록
• 저장 시 localStorage.setItem() / 읽을 때 getItem()
⸻
5. 배포 및 사용성
• https://my-journal-app.vercel.app
• 반응형 웹으로 제작, PWA 설정은 추후 예정
• PWA 확장 후 모바일 설치 가능
• 현재는 브라우저에만 데이터 저장되므로 데이터 백업 기능 고려 필요
⸻
6. 고민 및 확장 아이디어
• 메모 앱이나 녹음 기능과의 차별화
• 음성 녹음 기능 추가? (MediaRecorder)
• 치매 예방, 노인 친화 기능? (텍스트 큼직하게, 말로 입력 등)
• 백엔드 추가하여 멀티 디바이스 연동 가능성
⸻
7. 느낀 점
• 지피티가 있으니까 안될 거 같은 것도 바로바로 해결방안이 보여서 한 꼭지가 진행된 거 같다.
• 계속해서 시리즈가 진행돼서 최소한 할머니는 유저로써 사용하실 수 있는 앱이 되었으면 좋겠다.
• 기술적으로도 무료로 디플로이도 해주고 앱 환경으로 사용 가능한 부분들이 많아서 좋은 거 같다.
