AI 감정분석 기술을 통해 사용자가 자신을 돌아보고 감정을 관리할 수 있는 경험을 제공하는 웹개발

• 일기 작성 시, AI를 활용하여 작성한 일기 텍스트를 분석

• 내용에 맞는 이미지 추천 서비스 및 감정데이터를 통한 감정 그래프 제공
• 

많은 현대인들은 바쁘고 귀찮다는 이유로 스스로 어떤 감정 상태에 있는지 회피하려는 경향을 보임

일기 쓰기를 통해 오늘 하루 중 있었던 사건, 사건을 받아들였던 자신의 생각과 감정을 적어보면 왜 힘들었는지 좋았는지를 파악할 수 있음

이러한 방법으로 자신의 마음을 돌아보고 이해하며 자신의 감정을 관리하는 훈련이 필요함

따라서 본인의 감정을 파악하여 다스릴 수 있으며 감정을 관리하는데 도움을 줄 수 있는 감정 일기의 필요성을 느껴서 이프로젝트를 진행하게됨

• 힐링과 공감이 필요한 사람
• 내 감정을 글로 기록하며 정리하고 싶은 사람

✏️화면설명

① 로고 : 클릭 시 메인화면 이동

② 검색창 : 일기 검색 기능

③ 로그인 : 로그인(Login_01) 페이지로 이동

④ 회원가입 : 회원가입(join_01) 페이지로 이동

⑤ 가이드 : 홈페이지 소개 및 사용 설명

✏️화면설명

① 로그인 : 아이디, 패스워드 입력 후 클릭 시 일기 기록 페이지(Diary_01) 로 이동

② 회원가입 : 클릭 시, 회원가입 페이지(join_01) 로 이동

③ 소셜 로그인 : 각 소셜로그인 페이지(api) 로 이동

✏️화면설명

① 정보 등록 : 프로필사진, 닉네임, 이름 등록

② 중복확인 : 클릭 시 , 가입 가능 여부 알림

③ 회원가입 : 정보 입력 후, 클릭 시 로그인 페이지(Login_01)로 이동!

✏️화면설명

① 달력기능 : 기록 날짜에 따라 달력에 이모지 표시. 클릭 시 Calendar_01 로 이동

② 일기작성 : 클릭 시 , Diary_03 로 이동

③ 다크모드/라이트모드

④ 사용자 프로필 사진

⑤ 모아보기 : 일기 별 콘텐츠를 카드화해서 보여주기

⑥ 날짜 검색: 검색한 날짜 일기 보여주기

⑦ 페이지 넘기기

✏️화면설명

① 감정 선택

② 폰트 선택 : 일기마다 다른 폰트 설정 가능

③ 사진 추가 기능

④ 일기 텍스트 작성

✏️화면설명

① 날씨 선택 기능

② 조언 텍스트 : 일기 분석을 통한 AI 조언 텍스트

③ 이미지 생성 : 정보 분석 후, 어울리는 AI 이미지 생성

④ 일기 내용 수정 및 삭제 기능

① 다크모드 / 라이트 모드

② 캘린더 모달 창 : 일기 기록 시 감정 이모지 등록, 이모지 클릭 시 해당 일기로 이동

③ 사용자 정보 모달 창 : 정보변경, 감정 그래프 확인, 배경 테마 켜기, 로그아웃

④ 일기 검색 기능 : 검색 후 분류된 일기 모음

① 최근 일기 기록 목록

② 다짐과 목표 적는 텍스트 상자

③ 감정 기록 : 막대그래프, 원형 그래프

④ 정보 변경 페이지(Mypage_02)로 이동

① 정보 변경 : 프로필사진, 닉네임, 비밀번호

② 탈퇴 하기 모달창

① Not403 페이지 : 사용자가 접근이 불가능한 페이지

② 작성한 일기가 없을 시 마이페이지

③ 작성한 일기가 없을 시 작성 페이지

감정 분류:

• 행복
• 당황
• 분노
• 슬픔
• 불안
• 중립 등의 감정이 분류된 데이터.

발화문 및 감정 추출	발화문과 해당 감정을 추출하여 분류
전처리 데이터	데이터는 발화문과 해당하는 1번 감정이 포함된 데이터

데이터 분석 목표	비슷한 감정들을 하나의 감정으로 분류하기
데이터 분석 시나리오	- 공포 감정은 불안 감정으로 분류
	- 혐오 감정은 분노 감정으로 분류
	- 상처 감정은 슬픔 감정으로 분류
	- 기쁨 감정은 행복 감정으로 분류
데이터 분석 결과	- 데이터 분류 결과

                                       |

모델링 목표	사용자가 입력한 텍스트를 문장마다 감정 분석하기
학습 모델	KoBert 기반 kcbert-base를 파인 튜닝
학습 방법	- batch_size = 64
	- learning_rate = 5e-5
	- epochs = 5
	- 문장의 최대 길이로 padding함
모델 예측 결과

                                                         |

모델링 평가 결과

🌼클라이언트 :

• React : 컴포넌트 기반의 UI 라이브러리로써, vuejs보다는 높은 자율성을 가지며, 풍성한 생태계를 가지고 있다는 점에서 선택

• TypeScript : 정적 타입 검사를 통한 안정성과 타입 인텔리센스를 통한 생산성 향상을 위해 사용

• Tailwind(CSS) : CSS 프레임워크로, 많은 utility 클래스를 제공하여 직접 CSS를 작성하는 번거로움을 줄이고, 유연하게 디자인을 구성할 수 있어 선택

• Recoil : 전역 상태를 관리하기 위한 라이브러리로써, Redux와 비교했을 때, 더욱 간결하고, 상태를 작은 단위로 활용하기에 용이함이 있다고 생각해 사용

• Nextjs : 서버사이드 렌더링을 지원하기 위하여 사용했습니다. 또한, 빌드 시간을 단축시키고, 빌드된 파일을 캐싱하여 빠른 로딩을 지원하기 위해 사용

🌸서버 :

• Node.js : JavaScript를 사용하여 프론트엔드와 백엔드 간의 일관된 클라이언트와의 언어적 호환성을 고려하여 선택하

• Mysql : 관계형 데이터베이스로, 데이터를 구조화하여 효율적으로 저장하고 검색하기 위해 선택

• python : 서버 사이드 로직 및 감정분석 모델을 구현하기 위해 도입

🌺 모델 :

• koGPT-2 : koGPT2는 텍스트 생성 작업에 뛰어난 성능을 보이고 문맥을 이해하며 이를 기반으로 자연스러운 텍스트를 생성할 수 있어, 사용자와의 상호 작용에 적합하여 선택

• koBert : 'KoBert' 모델은 한국어 텍스트의 감정 분석에 적합한 모델로, 사용자의 감정을 이해하고 상황에 맞게 대응하여 선택

• Karlo : : 텍스트를 분석하여 키워드에 맞는 이미지생성을 위해 선택