Skip to content

yereong/LikeLion-Hackathon

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

163 Commits
 
 
 
 
 
 

Repository files navigation

Emolog 🎨🐶
- AI 친구 Modi와 대화하며 감정을 분석하는 600가지 감정 일기 서비스

로고 1@2x

“Modi가 당신의 이야기를 들어줄테니,

편안하게 자신의 감정을 돌이켜보고 오늘의 색을 만들어봐요”

참여 인원 : 5명 / 개발 주기 : 1달 / 2024 멋쟁이사자처럼 중앙 해커톤 출품

문제점 발견 ‼️

문제점 문제점

정신 건강 문제인 화병 해소의 핵심은 ‘자기감정’을 정확히 표현하는 것이지만, 스스로 감정을 되돌아보는 것은 쉽지 않으며 타인이 공감하며 되물어줄 때 더욱 효과적인 해소가 가능하다.

"왜 감정 일기인데 감정이 한정되어 있을까?"

기존 감정 일기 서비스는 감정이 20개 내외로 한정되어 있는 것에 의아함을 느꼈고.. 선택지를 굉장히 폭넓히자는 의지로 최종 600가지의 감정을 사용했다!

일기 내용을 기반으로 공감하며 되물어주는 AI 봇 MoDi

  • ChatGPT API와 프롬프트 설정을 통해 공감과 되묻는 질문에 최적화된 AI
Modi

Emotion + Log = Emolog 🎨

  1. 오늘의 일기에 관하여 AI 친구 MoDi와 함께 대화를 나누며 자신의 감정에 솔직해지도록 도와주는 서비스
  2. 약 600가지의 감정들 중 일기 내용에 맞는 감정들을 뽑아 보여주며 더 다양한 '자기 감정'에 집중할 수 있다.
  3. 선택한 감정들을 토대로 RGB 값을 뽑아 오늘의 색 생성
  4. 일기 내용에 연관된 그림일기를 AI가 제작하여 더 풍부해진 일기 제공

Tech 🔧

카테고리 기술 스택 상세 내용
백엔드 Spring Boot 3.3.1 / Spring Security, Java 17 라이브러리: Spring Data JPA, JWT, OAuth2.0, Thymeleaf, JUnit
인프라: Nginx, AWS RDS, GitHub Actions
프론트엔드 React 주요 라이브러리: Axios, React-Hook-Form
협업 Notion, Postman 협업 툴로 프로젝트 관리 및 API 문서화

전체적인 Flow Chart 🫧

구현 기능 👨‍💻

0. 실제 사용 화면

image

1. 로그인 / 회원가입

image

2. 주간 캘린더 / 월간 캘린더

image

3. 일기 작성 -> 일기를 기반으로 AI와 대화 진행

image

4. 감정 선택 -> 오늘의 색 반환

  • 일기와 대화를 분석하여 감정 수치 반환, 600가지의 감정 중 감정 수치에 해당하는 감정들 나열 -> 결과 페이지에서 오늘의 색과 그림일기 확인

image

5. 마이페이지

image

감정에 관하여 💟

600개의 감정을 어떻게 RGB 값으로 구현했을까?

image

  • Russell의 정서 차원 이론 및 「한국어 감정단어의 목록 작성과 차원 탐색」 논문 참고
  • ‘쾌/불쾌’(Valence)와 ‘활성화’(Arousal)를 기준으로 4사분면으로 분류하여 감정의 위치에 따라 각 RGB 색상 값을 할당
  • 결론적으로 ‘쾌/불쾌’와 ‘활성화’ 색상들을 가중 평균(80% + 20%)하여 최종 RGB 산출

✨ 문제 해결 및 기술적 도전

✅ 채팅 시작에 시간이 오래 걸리는 문제 해결

1) 문제 상황

일기 작성 이후 채팅 요청을 보내고 채팅 시작까지 10초 이상 걸리는 문제가 발생했습니다.

2) 원인 분석

수정 전 로직은 아래처럼 동작했습니다.

  • 프론트에서 일기 작성 → AI로 전송
  • AI가 이미지 생성까지 완료한 뒤 프론트로 이미지 URL을 반환
  • 그 후에야 채팅 응답이 시작됨

즉 요청 흐름이 아래처럼 이미지 응답에 채팅이 묶여있던 구조였습니다.

일기 등록 request → 채팅 시작 request → (10초 이상 지연) → 일기 이미지 response → 채팅 response

3) 해결 방법

팀 논의를 통해 이미지 생성 API와 채팅 API의 의존성을 분리했습니다.

  • 채팅 UI는 이미지 생성 완료를 기다리지 않고 즉시 시작
  • 이미지는 백그라운드로 완료되는대로 추후 렌더링

✅ 결과적으로 채팅 시작 시간이 약 2~3초 수준으로 개선되었습니다.


팀 소개 (4팀 감정마스터)

PM & BE BE FE FE AI DESIGN
열정이 잡념이 낙관이 명랑이 따분이 평온이

About

프론트엔드 레포지토리

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 59.7%
  • CSS 39.7%
  • HTML 0.6%