감정일기 발표
좋아, 이제 감정일기 앱 최종 발표자료용 슬라이드 구성 도와줄게!
20분 발표 기준 10~15장 분량으로 구성하고,
기획 → 기능 → 기술스택 → 구조 → 구현화면 → 확장성 흐름으로 설계할게.
⸻
✅ 감정일기 앱 발표 슬라이드 구성안
- 프로젝트 개요
• 제목: 감정일기 – 감정을 기록하고 돌아보는 감성 일기장
• 목적: 감정 기반 회고 습관화 + 정서적 자각 + 시각적 통계 제공
⸻
- 기획 배경
• “일기장은 있지만 감정 분석은 없다”
• 자존감 회복, 우울감 자각 등 실제 사용자 니즈 반영
• 최근 MZ세대 중심으로 감정 추적 서비스 수요 증가 (마인드카페, 요즘심리 등)
⸻
- 주요 기능 요약
• 회원가입 / 로그인 (JWT 인증)
• 감정일기 작성 → 자동 감정 점수 분석
• 일기 목록 조회 (날짜별 정렬, 감정색상 강조)
• 감정 통계 시각화 (Line, Pie Chart.js)
• 마이페이지: 비밀번호 변경 + 자동 로그아웃
• 모든 UI Tailwind 기반 감성 디자인 적용
⸻
- 기술 스택
구분 기술
Frontend React, React Router, Axios, Tailwind CSS, Chart.js
Backend Java Servlet + JSP, Gson, JWT (jjwt), JDBC
Database MySQL
Auth JWT 토큰 + 만료 자동 체크
배포 Vercel (React), Render (Java API), GitHub 연동
⸻
- 시스템 구조도
• React → Axios → REST API
• Java 서블릿 → 감정 분석 → MySQL 저장
• JWT 토큰 발급 → React 로컬 상태 유지
(구조 다이어그램 그려줄 수도 있어)
⸻
- ERD & 테이블 구조
• users, diary, emotion_dictionary
• users - diary: 1:N 관계
• 감정 점수 저장 필드 포함
⸻
- 감정 분석 로직
• Java 기반 키워드 매칭 Rule-based 분석
• 감정 단어 사전 → 점수 계산 → DB 저장
• 향후 Python / HuggingFace 연동 계획
⸻
- UI 및 화면 시연
• 로그인 화면 (Tailwind 인디고 스타일)
• 감정일기 작성 화면 (노랑 크림톤, placeholder 유도)
• 감정일기 목록 (카드 스타일 + 감정색 강조)
• 감정 그래프 시각화 (Line + Pie)
• 마이페이지 (연보라+설정 UI)
⸻
- 배포 구성
• GitHub → Vercel (프론트), Render (백엔드 WAR) 자동 배포
• API 연동 주소 분리 + CORS 허용
• 환경변수, Axios 인터셉터, ProtectedRoute 구성
⸻
- 결과 및 회고
• JWT 인증 → 세션보다 확장성 우수함 경험
• React + Java의 완전한 분리형 구조 학습
• 감정 분석 로직의 확장 가능성 확인 (GPT 도입 가능성)
• 기술 외에도 “감정 기록의 힘”을 실감
⸻
- 향후 개선 계획
• 감정 피드백 자동 생성 (GPT or HuggingFace)
• 친구 감정 공유 / 비교
• 다크모드 + 모바일 반응형 최적화
• DB 감정 패턴 기반 추천 서비스 확장
⸻
필요하다면
• PPT 슬라이드 형태
• PDF용 포트폴리오 문서
• 디자인 포함 발표 템플릿 (Notion or Figma)
으로 제작해줄 수 있어!
어떤 형식으로 만들까?
“PPT 템플릿 고!”, “포폴 PDF 고!”, “디자인 발표자료 고!” 중 골라줘!
좋아!
감정일기 앱 발표용으로 15분 분량 발표 대본 (말하기 기준 1800~2000자)을 짜줄게.
톤은 부드럽고 전문적으로, 기술 내용과 사용자 입장을 균형 있게 반영할게.
⸻
✅ 감정일기 앱 발표 대본 (15분)
⸻
[1. 인사 및 소개]
안녕하세요. 저는 감정일기 앱을 기획하고 개발한 [이름]입니다.
제가 만든 이 프로젝트는, 단순한 일기장이 아니라 감정을 기록하고, 시각화하고, 스스로를 돌아볼 수 있도록 설계된 감정 중심 회고 플랫폼입니다.
⸻
[2. 기획 배경]
우리는 하루에도 수많은 감정을 느낍니다.
하지만 대부분은 그냥 지나치죠.
그 감정들이 쌓이면 우울이 될 수도 있고, 반대로 행복의 패턴일 수도 있는데, 우리는 그걸 놓칩니다.
그래서 저는 “감정을 기록하고 시각화해서 스스로를 이해할 수 있다면 어떨까?”라는 질문에서 이 프로젝트를 시작했습니다.
최근 감정 기반 서비스가 늘고 있고, 저 역시 하루를 돌아보는 루틴을 만들고 싶었습니다.
⸻
[3. 주요 기능 설명]
앱의 핵심 기능은 총 다섯 가지입니다.
1. 회원가입과 로그인은 JWT 토큰 인증으로 구성되어, 로그인 상태 유지와 보안 모두를 신경썼습니다.
2. 감정일기 작성 화면에서는 사용자가 텍스트를 입력하면, Java 백엔드에서 감정 키워드를 분석해 점수를 자동으로 계산합니다.
3. 일기 목록은 날짜순으로 정렬되며, 감정 점수가 시각적으로 표시되어 하루하루의 감정을 한눈에 볼 수 있습니다.
4. 감정 그래프에서는 일간 감정 추이와 감정 분포를 Line Chart와 Pie Chart로 보여줍니다.
5. 마지막으로 마이페이지에서는 비밀번호를 바꾸거나, 남은 세션 시간을 확인하고 로그아웃할 수 있도록 구성했습니다.
⸻
[4. 기술 스택과 아키텍처]
프론트엔드는 React + Tailwind CSS, 백엔드는 Java Servlet + JSP, 그리고 데이터베이스는 MySQL을 사용했습니다.
인증은 JWT 기반, 배포는 Vercel + Render 구조로 분리되어 있습니다.
React에서는 Axios와 React Router를 사용했고, 감정 분석은 Java 단어 사전 기반 Rule-based 분석기로 구현했습니다.
토큰 만료 시 자동 로그아웃 기능도 구현해서 실제 서비스에 가까운 흐름을 체험할 수 있게 했습니다.
⸻
[5. UI 디자인 전략]
감정일기라는 주제에 맞게, UI는 전체적으로 감성적인 색감과 여백 중심의 디자인을 적용했습니다.
Tailwind CSS를 활용해 페이지마다 다른 색감을 주었고,
예를 들어 일기 작성은 크림 노랑, 마이페이지는 연보라, 감정 그래프는 하늘색 계열로 차분한 분위기를 구성했습니다.
⸻
[6. 배포 및 테스트]
프로젝트는 GitHub에 각각 프론트와 백엔드를 분리해 저장했고,
React는 Vercel, Java API는 Render로 배포했습니다.
모든 API는 JWT 인증이 필요한 구조이고, Axios 인터셉터와 CORS 설정까지 적용했습니다.
현재는 실제 URL을 통해 웹에서도 누구나 테스트할 수 있도록 되어 있습니다.
⸻
[7. 회고 및 느낀 점]
처음엔 감정 분석이 단순한 단어 매칭 수준이었지만,
이를 시각화하고 피드백 기능까지 연결하면서 생각보다 깊은 정서적 효과가 있다는 걸 느꼈습니다.
기술적으로는 Java와 React를 완전히 분리하면서도
JWT로 인증을 연결하는 방식이 굉장히 인상 깊었고,
실제 서비스에 가깝게 작동하도록 만드는 데에 집중했습니다.
⸻
[8. 향후 개선 계획]
이 앱은 아직 시작에 불과합니다.
앞으로는 GPT 기반의 감정 피드백 문장 생성,
친구와 감정 공유하기,
감정 기반 추천 기능까지 확장할 계획입니다.
또한, 모바일 반응형 최적화와 감정 테마별 그래프도 구상하고 있습니다.
⸻
[9. 마무리]
감정일기는 단순한 기술 프로젝트가 아니라,
스스로를 이해하기 위한 루틴을 만들어주는 하나의 도구라고 생각합니다.
기술과 정서가 만나는 이 앱을 더 발전시켜
실제 사람들의 하루를 변화시킬 수 있기를 기대하며 발표를 마치겠습니다. 감사합니다.
⸻
✅ 다음 제공 가능
• 슬라이드 1:1 대응 PPT
• PDF 포트폴리오용 정리
• 발표 리허설용 Q&A 예상 질문지
원하면 “PPT 슬라이드 고!” / “포폴 PDF 고!” / “Q&A 고!” 중 말해줘!
