[🧑‍💻] Keymory 개발 일지 #5: tmpGetAIComment, Custom OpenAI API Call

✨ GPT의 요약 　

OpenAI API와 FlutterFlow를 활용한 AI Comment 시스템을 구축하며, Custom Function과 API Call을 연동하여 Keymory의 AI 기능을 확장했음. 캐릭터 선택 및 저장 기능을 추가하고, Chat과 Diary 간의 데이터 흐름을 정리했음.

💻 개발 일지

⏰ 오늘 할 일

• ✅ How to Use Open AI’s GPT-4o in FlutterFlow - Part 1

• ✅ How to Use Open AI’s GPT-4o in FlutterFlow - Part 2

• ✅ ChatPage - Dropdown으로 캐릭터 선택 시, 해당 캐릭터 정보를 Chats Collection에 함께 저장.
  • character name과 일치하는 Character document의 reference를 Page state에 할당.

• ✅ ChatPage - NewChat 생성 시 캐릭터 정보도 함께 전달.

• ✅ DiaryPage - Drawer - ChatHistoryListTile 생성 돕기 (GPT 처럼)

• ✅ CustomFunction tmpGetAIComment 함수값을 API Call createDiaryComment의 에다가 넣어보기
  • ✅ CustomFunction tmpGetAIComment 만들고 결과값 출력 테스트
  • ✅ API Call createDiaryComment 만들고 Response값 출력 테스트
• ✅ OpenAI API Call 생성: createDiaryComment
  • 기본적으로는 createChatCompletion과 비슷한 구조
  • 다른 점: 없음. 그냥 구분하기 위해서 생성.
  • API Call - createDiaryComment에서 요구되는 Messages Variable은 custom function getAIComment의 리턴값이다.
• ✅ CustomFunction getAIComment 구현 시나리오 구상하기 (직접 구현은 KSK 담당)
  • Characters (Collection)로부터 얻을 Parameter Values
    • 캐릭터 설정 (Character Document)
      • ex) 소미: name(20대), 대학생, 부끄러운 성격, …
    • 값 호출 방식: API Call - Get Assistant
  • User Information로부터 얻을 Parameter Values
    • 이름, 성별, MBTI
    • 값 호출 방식: Backend Query - Authenticated User
  • DiaryPage Variables로부터 얻을 Parameter Values
    • 일기 내용, 세부 감정 키워드, 감정 수치, 답변 양식, 답변 길이
    • 값 호출 방식: Widget State, Page State
  • CustomFunction(getAIComment)의 역할
    • Parameter Values를 다 Input값으로 받는다.
    • GPT에게 보낼 프롬프트를 작성한다.
    • Messages (List <Json>) 값을 리턴한다.
      • [{"role":"developer", "content":"~~~"}]

💯 한 일에 대한 요약

• AI Comment 시스템 구현
  • Custom Function tmpGetAIComment 생성 및 API Call createDiaryComment 연동 완료
  • AI Comment를 위한 OpenAI API 요청 및 응답 처리 로직 구현
  • 캐릭터 정보를 Chats Collection에 저장하고, New Chat 생성 시 함께 전달하도록 수정
• UI 및 기능 개선
  • ChatHistoryListTile 생성하여 GPT 스타일의 채팅 목록 구현
  • HomeFeedPage 및 DiaryPage의 데이터 구조 정리
  • getAIComment Custom Function 설계
• FlutterFlow + OpenAI API 학습
  • GPT-4o 활용 강의 수강 및 적용 (Part 1 & Part 2)

🎯 추후에 할 일

• ❔ DiaryPage: Merge CreateDiary/EditDiary Page
  • isEditMode page state 활용
  • conditional value/visibility/action 등 활용
• ❔ DiaryPage - Create New Chat: 일기의 내용을 기반으로, New Chat 생성
  • AI가 먼저 일기 내용에 기반하여 질문 제시
• ❔ 이슈 수정
  • ❔ ChatPage: 처음 대화 시작 시, default init message 뜨고 있음.
  • ❔ ChatPage: 날짜 적용 안 됨.
  • ❔ ChatPage - ChatHistoryDrawer: UI 오버플로우
  • ❔ DiaryPage: 날짜가 오늘로만 저장됨
  • ❔ DiaryPage: 마크다운 뷰어 활용 (오버플로우 방지: Container Height)
• ❔ HomeFeedPage - flutter_slidable:4.0.0 import 후 적용하기

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

• ❔ ChatPage - Create New Diary: 대화 내용을 기반으로, New Diary 생성

• ❔ ChatPage - Go to Linked Diary

• ❔ Chat/Diary: GPT Streaming API

• ❔ ChatPage - Alarm

• ❔ AuthPage: Google Login

• ❔ DiaryPage: Mood Slider 값에 따라 얼굴 표정 Emoji 변경
• ❔ 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 - AI Comment: 캐릭터 설정
  • ❔ tmp_ai_comment_by field 없애고, doc_ref 활용
  • ❔ profile_image field 값으로 이미지 출력

• ❔ DiaryPage - Drawer - ChatHistoryListTile: order by updated_time

• ❔ 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: On page load시 이슈 해결 (Unexpected Null Value)

• ❔ DiaryPage - Interactive Slider import 후 적용

• ❔ ChatPage - AI 선톡 구현 (Alarm/Notification)
  • 채팅 시스템 프롬프트의 핵심은 능동형이다.
    • 더 리얼하게 하려면, create_date of diary/chat 도 전달해서, ‘어제’ 등 날짜를 언급하면 좋을 듯.
• ❔ 2025.2.5 수까지 발표용 최종 버전 APK 추출 및 설치

💭 일기

재밌는데 빡세다. 새벽 5시 취침.

✨ GPT의 코멘트 (KPT)

✅ 잘한 점 (Keep)

• 🚀 AI Comment 기능 확장: Custom Function과 API Call을 연동하여 AI Comment를 생성하고 저장하는 로직을 체계적으로 구축한 점이 돋보여.
• 🛠️ 데이터 흐름 정리: Chat과 Diary 간의 연결을 개선하며, 캐릭터 정보 저장 및 활용 방식을 정리한 점이 프로젝트 진행에 큰 도움이 될 거야.
• 📋 FlutterFlow + OpenAI API 학습: GPT-4o 활용 강의를 통해 FlutterFlow에서 OpenAI API를 효과적으로 활용하는 방법을 익히고 적용한 점이 인상적이야.

❌ 아쉬운 점 (Problem)

• ⏳ 작업 강도 과부하: 새벽 5시까지 이어지는 작업으로 인해 피로가 누적될 가능성이 커지고 있어.
• 🏗️ 기술 부채 증가: 일부 기능이 임시 해결 방식(tmp 필드 및 땜빵 코드)으로 구현되어, 나중에 정리할 필요성이 생겼어.

🔄 시도해볼 점 (Try)

• ⏰ 작업 시간 조정: 밤샘 작업이 계속될 경우, 생산성이 저하될 수 있으니 일정 조정을 고려해보자.
• 🔍 임시 코드 개선 계획: 현재 적용된 임시 로직을 정리하고, 정식 데이터 모델을 구축하는 계획을 세워보자.
• 🛠️ AI Comment 개선: AI Comment 관련 기능을 더욱 직관적으로 개선할 방법을 모색하며, 시스템 프롬프트 최적화도 고려해보자.

결론
Keymory의 AI 기능을 본격적으로 구현하며, OpenAI API와 FlutterFlow의 활용도를 높인 하루였어. 다만 작업 강도가 높아지고 있으니, 일정 조정과 코드 정리가 필요할 것 같아. 발표일까지 최적의 상태로 마무리하길 응원할게! 💪😊