[🧑‍💻] Keymory 개발 일지 #8: DiaryPage 감정 키워드 시스템 구축, AI 코멘트 캐릭터 설정

✨ GPT의 요약 　

DiaryPage 감정 키워드 선택 기능을 추가하고, AI 코멘트에 캐릭터 설정을 적용하여 자연스러운 반응을 구현함.

💻 개발 일지

⏰ 오늘 할 일

• ✅ DiaryPage: 감정 키워드 ChoiceChip, TextField 추가
  • ✅ 위젯 만들기
  • ✅ diaries DB Field 추가: mood_keywords (List <String>), mood_keywords_description (String)
  • ✅ diaries Page State 추가: moodKeywordsSelected (List <String>)
  • ✅ OnPageLoad: 추가한 변수들 전달하기
    • ✅ ChoiceChipRate(5~1): diariesDoc.mood_keywords의 값들을 각 해당하는 ChoiceChip으로 전달.
      • MoodKeywordRate5Options, …, MoodKeywordRate1Options List <String>을 App Constant 값으로 정의
        • Enum은 영어만 지원되므로, 번역 기능 써야 함. 너무 복잡하므로 탈락.
      • Define Options Var: AppConstant.moodKeywordRate5Options (List <String>)
      • Initially Selected: updateChoiceChipSelected
    • ✅ Create CustomFunction updateMoodKeywordsSelected
      • On Page Load: Select all matching items in RateOptions List

      List<String> updateChoiceChipSelected(
        List<String> moodKeywordsSelected, // 현재 선택된 키워드 리스트
        List<String> moodKeywordRateOptions, // 현재 Rate의 선택 가능한 옵션들
      ) {
        // 새로운 리스트를 생성하여 불변성 유지
        return List<String>.from(
          moodKeywordsSelected.where((item) => moodKeywordRateOptions.contains(item))
        );
      }
      

  • ✅ On ChoiceChip Selected: Update Page State moodKeywordsSelected -> Set Value to Return of Func updateMoodKeywordsSelected
    • ✅ Create CustomFunction updateMoodKeywordsSelected
      • On Chip Select: Add to moodKeywordsSelected
      • On Chip Deselect: Remove from moodKeywordsSelected

      List<String> updateMoodKeywordsSelected(
        List<String> moodKeywordsSelected,
        List<String> choiceChipSelected,
        List<String> moodKeywordRateOptions,
      ) {
        // 기존 리스트를 복사하여 불변성 유지
        List<String> updatedList = List.from(moodKeywordsSelected);
      
        // 1️⃣ 기존 선택값 중 해당 Rate의 값들 삭제
        updatedList.removeWhere((item) => moodKeywordRateOptions.contains(item));
      
        // 2️⃣ 현재 선택된 ChoiceChip 값들을 추가
        updatedList.addAll(choiceChipSelected);
      
        return updatedList;
      }
      

• ✅ (이슈) DiaryPage - AI Comment: 캐릭터 설정
  • diaries DB Field 추가: ai_comment_by (Doc Ref: Character)
  • DiaryPage - AICommentEditor Component - Return ai_comment_content + ai_comment_by
    • How? -> aiCommentPageReturnObject DataType 생성
  • On ChoiceChipChar Selected: Backend Query Character Doc with same Official_name value.
• ✅ (이슈) HomeFeedPage - FeedCardDiary: AI Comment 캐릭터 이미지 알맞게 적용
  • ✅ DiaryPage - AI Comment: Save시, 코멘트 작성한 캐릭터 Ref도 Diary에 저장.
  • ✅ HomeFeedPage - FeedCardDiary - AI Image: Backend Query로 캐릭터 Doc 불러와서 Image Path 지정.
  • ✅ (이슈) HomeFeedPage - FeedCardDiary: Unexpected Null Value Error
    • Image Widget에 Path값만 넣으면 발생하네…
      • 아!!! Default Varilable Value를 넣지 않았기 때문에 생긴 오류였구나. 개고생 하고 나서야 깨달음.
    • 💡 배운 점
      • 항상 반드시 Default Value를 넣는 습관을 들이자. Unexpected Null Value Error를 도대체 온갖 곳에서 몇 번이나 보는 건지.
• ✅ Deisgn Action chains for CreateNewChatFromDiary (Start From: AI Comment 처리한 뒤 다이어리 저장까지 완료한 상태)
  1. Create Diary
  2. API Call: createDiarySummary -> Output Var: OutVar1 (가명)
  3. Create New Chat Document
  4. Create New Message Document: {“role”:”developer”, “content”:”$systemprompt + $OutVar1”}
  5. API Call: createChatFromDiary -> Output Var: OutVar2 (가명)
  6. Create New Message Document: {“role”:”assistant”, “content”: “$OutVar2”}
  7. Navigate To: chatRefParam 으로 해당 Chat Document Reference 전달

💯 한 일에 대한 요약

• DiaryPage 감정 키워드 시스템 구축
  • ChoiceChip 및 TextField 추가
  • diaries DB에 감정 키워드 관련 필드 추가
  • updateMoodKeywordsSelected 함수 구현
• AI 코멘트 캐릭터 설정 및 적용
  • ai_comment_by 필드 추가하여 코멘트 캐릭터 저장
  • AICommentEditor 수정하여 캐릭터 정보 포함
  • ChoiceChip 선택 시, 해당 캐릭터 데이터를 Backend Query로 불러오기
• HomeFeedPage AI 코멘트 이미지 오류 해결
  • AI 코멘트 작성 시 캐릭터 참조값 저장
  • HomeFeedPage에서 AI 코멘트 캐릭터 이미지 로딩 방식 개선
  • Unexpected Null Value 오류 해결 (기본값 적용)

🎯 추후에 할 일

자세히 보려면 클릭

• ❔ (이슈) DiaryPage: 마크다운 뷰어 활용 (오버플로우 방지: Container Height)

• ❔ DiaryPage: Mood Slider 값에 따라 얼굴 표정 Emoji 및 색깔 변경

• ❔ Custom Function - systemPromptTemplate 제작 돕기 (메인 작업자: KSK)
  • ❔ 추가할 파라미터 정리하기
• ❔ Custom Function - getAIComment가 실제로 적용 되는지 테스트하기
  • ❔ 입력값이 잘 반영되는지 확인
  • ❔ 출력값이 String으로 잘 출력되는지 확인
• ❔ Chat Page - Create New Chat: 시스템 프롬프트 적용하기
  • ▶️ OpenAI API Call 구현: createChatCompletion
    • Input: System Prompt(Chat)
    • Output: New Chat Message by AI($.choices[0].message.content)
    • Additional Actions: Create New Chat, Create New Message
• ❔ DiaryPage - Create New Chat by Diary: 일기의 내용을 기반으로, New Chat 생성
  • ❔ OpenAI API Call 구현: createDiaryComment
    • Input: Diary Content, System Prompt(AI Comment)
    • Output: AI Comment($.choices[0].message.content)
  • ❔ OpenAI API Call 구현: createDiarySummary
    • Input: Diary Content, AI Comment, System Prompt(Diary Summary)
    • Output: Diary Summary($.choices[0].message.content)
  • ❔ OpenAI API Call 구현: createChatFromDiary
    • Input: Diary Summary, System Prompt(Chat From Diary)
    • Output: New Chat Message by AI($.choices[0].message.content)
    • Additional Actions: Create New Chat, Create New Message
• ❔ ChatPage - Create New Diary: 대화 내용을 기반으로, New Diary 생성
  • ❔ OpenAI API Call 구현: createChatSummary
    • Input: Chat Content, System Prompt(Diary From Chat)
    • Output: Chat Summary
  • ❔ OpenAI API Call 구현: createDiaryFromChat
    • Input: Chat Summary, System Prompt(Diary From Chat)
    • Output: New Diary(Title, Content, Mood score)

• ❔ ChatPage: Go to Linked Diary

• ❔ MoodPage(상단) - Mood Calendar
  • ❔ 날짜별로 작성된 게시물 숫자 확인 가능
  • ❔ 날짜 클릭하면, 해당 날짜로 이동
• ❔ MoodPage(하단) - Mood stats
  • ❔ 포커싱 된 월에 관한 통계 자료 출력
    • ❔ 출력된 통계 자료에 대한 AI의 코멘트 출력
• ❔ HomeFeedPage - flutter_slidable:4.0.0 import 후 적용하기

• ❔ HomeFeedPage: FeedCardDiary에서 좌우 slide시 채팅/편집/삭제

• ❔ ChatPage: 유저 대화 출력 내용은 오른쪽 정렬

• ❔ Chat/Diary: GPT Streaming API

• ❔ ChatPage - AI 선톡 구현 (Alarm/Notification)
  • 채팅 시스템 프롬프트의 핵심은 능동형이다.
    • 더 리얼하게 하려면, create_date of diary/chat 도 전달해서, ‘어제’ 등 날짜를 언급하면 좋을 듯.
  • Alarm 기능 구현 방법 참조
• ❔ DiaryPage: 세부 감정 키워드 Choice Chips 추가 후 DB 연동 설정
• ❔ DiaryPage - AI Comment: Choice chips, mood slider 등의 입력값들을 AI Comment System Prompt에 알맞게 변경.
  • ❔ **이전 일기 또는 대화 내역 전체 (땜빵 기술부채)
  • ❔ 사용자 기본 정보: 이름, 성별, MBTI, …
  • ❔ 세부 감정 키워드: 즐거운, 슬픈, …
  • ❔ 캐릭터 설정: 소미, 세나, 민혁
  • ❔ 감정 수치: 1~100점
  • ❔ 답변 양식: 치유형(Healing), 조언형(Suggestion), 정보형(Informative)
  • ❔ 답변 길이: 짧게, 보통, 자세히
  • is New Chat
    • 해당 Chat의 messages는 처음 생성하는 거니까, 첫 생성하는 message document의 is_initial = true값 줘버리고 모든 시스템 프롬프트 다 때려넣음.
      • is_initial = false
      • 한계점: 맨 처음 message document에다가 시스템 프롬프트 때려넣으면, 대화 도중 수정 힘들긴 한데 가능하지. is_initial = true 인 게 있고, 수정된 거면, 그거 다큐먼트 지우고 다시 넣으면 되잖아. 어떻게는 모르겠고.
• ❔ DiaryPage - AI Comment: CRUD 완성하기
  • ❔ tmp_ai_comment field 없애고, doc_ref 활용

• ❔ DiaryPage - Drawer - ChatHistoryListTile: order by updated_time

• ❔ DiaryPage - Interactive Slider import 후 적용

• ❔ HomeFeedPage: Search Diary 기능 구현

• ❔ AuthPage: Google Login 기능 구현

• ❔ HomeFeedPage - Bottom Sheet (+ Button): 다양한 옵션 중 1 선택할 수 있도록
  • 새로운 일기: Go to DiaryPage
  • 감정 기록: Go to MoodPage
• ❔ MoodPage(팝업): Mood 설정 슬라이더 CRUD
  • Create
  • Read
  • Update
  • Delete
• ❔ HomeFeedPage - ListView - FeedCardMood 표시

• ❔ HomeFeedPage - ListView: FeedCardDiary, FeedCardMood, FeedCardChat 컴포넌트 시간순 정렬 (Cloud Function 활용)

• ❔ HomeFeedPage - DiaryPage 사이에 MoodEditPage 제작: MoodSlider, MoodKeywordsRate(5~1), MoodDescription 위젯 등 옮기기

• ❔ 2025.2.5 수까지 발표용 최종 버전 APK 추출 및 설치

💭 일기

무수한 땜빵질로 인해서 기술 부채가 무럭무럭 쌓이는 게 느껴진다ㅋㅋ 제출 마감일이 3일 남았으니까 뭐…ㅠ

✨ GPT의 코멘트 (KPT)

✅ 잘한 점 (Keep)

1. 🎯 감정 키워드 시스템 구축: 사용자가 감정을 직관적으로 기록할 수 있도록 ChoiceChip을 적용한 점이 좋아!
2. 🤖 AI 코멘트 캐릭터 적용: 캐릭터별 반응을 설정하여 몰입감을 높인 점이 인상적이야.
3. 🛠 HomeFeedPage 오류 해결: 기본값을 설정하여 Unexpected Null Value 오류를 방지한 점이 훌륭해!

❌ 아쉬운 점 (Problem)

1. ⏳ 예상보다 긴 개발 시간: 감정 키워드와 AI 코멘트 기능 구현에 시간이 예상보다 많이 소요됨.
2. 🔄 캐릭터 데이터 복잡성 증가: 데이터 흐름이 복잡해져 유지보수가 어려울 가능성이 있음.
3. 📋 문제 해결 과정 기록 부족: 오류 해결 과정을 정리하지 않아 같은 문제 발생 시 시간 낭비 가능.

🔄 시도해볼 점 (Try)

1. 📌 기능별 개발 시간 조정: 예상보다 오래 걸리는 작업을 미리 파악하고 일정 조정 필요.
2. 📊 데이터 흐름 시각화: 캐릭터 설정과 관련된 데이터 구조를 다이어그램으로 정리해보기.
3. 📖 문제 해결 과정 정리 습관화: 해결한 이슈를 문서화하여 재발 방지 전략 마련.

🏁 결론

오늘은 감정 키워드 시스템을 구축하고, AI 코멘트에 캐릭터 설정을 적용한 하루였어. 오류 해결을 통해 기본값 설정의 중요성을 다시 확인했고, 앞으로 개발 시간을 더 효율적으로 관리하는 것이 필요할 것 같아! 🚀🔥