AI 다이어리 앱
시제품 개발 명세서

1. 서비스 개요

AI 다이어리는 사용자가 하루 중 떠오르는 생각, 감정, 사건을 짧게 녹음하면, 나중에 앱에서 해당 음성 기록을 날짜별로 확인하고 AI 요약본으로 정리해주는 다이어리 앱이다.

2. MVP 개발 목표

첫 번째 목표는 완성형 AI 앱이 아니라, 사용자가 실제로 “이런 방식이면 매일 쓸 수 있겠다”라고 느낄 수 있는 시제품을 만드는 것이다.

3. 사용자 흐름

3-1. 최초 체험 흐름

3-2. 실제 사용 흐름

1. 사용자가 휴대폰 바탕화면에서 앱 아이콘을 누른다.
2. 앱이 켜지면 복잡한 메뉴 없이 바로 녹음 화면이 나온다.
3. 녹음 버튼을 누르면 녹음이 시작된다.
4. 다시 누르면 녹음이 종료되고 하나의 음성 기록으로 저장된다.
5. 하루 중 여러 번 녹음하면 각각 별도의 기록으로 저장된다.
6. 나중에 앱을 열면 캘린더 화면에서 날짜별 요약을 확인한다.
7. 상세 화면에서 녹음 파일, 텍스트 변환본, AI 요약본을 확인한다.

4. 화면 구성 명세

5. 기능 명세

5-1. 녹음 기능

5-2. AI 처리 기능

MVP 초기에는 실제 AI 처리 대신 더미 데이터를 사용해 화면 흐름을 먼저 검증한다. 이후 단계에서 STT와 LLM API를 연결한다.

5-3. 캘린더 기능

• 기록은 날짜 기준으로 자동 그룹화한다.
• 하루에 여러 개의 녹음 기록을 저장할 수 있다.
• 캘린더에서는 기록이 있는 날짜를 시각적으로 표시한다.
• 날짜를 누르면 해당 날짜의 기록 목록과 요약을 보여준다.

6. 데이터 구조 초안

6-1. DiaryEntry

{
  id: "entry_20260601_001",
  userId: "demo_user",
  date: "2026-06-01",
  createdAt: "2026-06-01T21:15:00+09:00",
  audioUrl: "blob-or-storage-url",
  durationSec: 42,
  transcript: "오늘 있었던 일을 음성에서 변환한 텍스트",
  summary: "오늘의 핵심 요약",
  emotion: "calm",
  keywords: ["가족", "사업", "걱정"],
  isDemo: true
}

6-2. Local Demo Storage

{
  demoMode: true,
  entries: [
    {
      id: "demo_001",
      date: "2026-06-01",
      durationSec: 35,
      transcript: "임시 변환 텍스트",
      summary: "임시 요약 문장",
      emotion: "neutral",
      keywords: ["기록", "하루"]
    }
  ]
}

오디오 원본은 용량 문제 때문에 localStorage에 직접 저장하지 않는 것이 좋다. 시제품에서는 IndexedDB를 우선 검토하고, 정식 버전에서는 Supabase Storage 같은 외부 저장소를 사용한다.

7. 기술 구조

7-1. 오디오 재생 문제 체크

• MediaRecorder에서 지원되는 MIME 타입 확인
• Chrome 기준 audio/webm;codecs=opus 우선 검토
• 저장된 Blob이 손상되지 않았는지 확인
• 녹음 중 빈 데이터가 저장되지 않도록 dataavailable 이벤트 처리 확인
• 재생용 URL 생성 시 URL.createObjectURL(blob) 사용

8. Lovable 작업 지시문

8-1. 다음 프롬프트

현재 AI Diary Companion 프로젝트의 로그인 화면에 “로그인 없이 체험하기” 버튼을 추가해줘.

요구사항:
1. 버튼 클릭 시 localStorage에 demoMode=true를 저장한다.
2. Supabase 로그인 없이도 홈 녹음 화면으로 이동해야 한다.
3. demoMode에서는 localStorage 또는 IndexedDB를 이용해 임시 기록을 저장한다.
4. 하단 네비게이션은 홈 / 캘린더 / 설정으로 구성한다.
5. 모바일 narrow layout을 유지한다.
6. 홈 화면에는 큰 원형 녹음 버튼, 녹음 시간, 오늘 기록 개수를 보여준다.
7. 캘린더 화면에는 날짜별 기록 여부를 표시한다.
8. 상세 화면에서는 녹음 재생, 임시 텍스트, 임시 AI 요약을 확인할 수 있게 한다.
9. 실제 AI 처리와 Supabase 저장은 아직 연결하지 말고, 화면 흐름과 저장 구조를 먼저 검증한다.
10. 녹음 파일은 재생 가능해야 하며, 지지직 소리만 나지 않도록 MediaRecorder MIME 타입과 Blob 저장 방식을 점검해줘.

8-2. 녹음 오류 수정 요청 프롬프트

현재 녹음 버튼은 작동하지만 저장된 오디오를 재생하면 정상 음성이 아니라 지지직 소리만 들린다.

다음을 점검해서 수정해줘:
1. MediaRecorder에서 브라우저가 지원하는 MIME 타입을 자동 선택하도록 해줘.
2. audio/webm;codecs=opus를 우선 사용하되, 지원하지 않으면 audio/webm 또는 기본값으로 fallback 해줘.
3. ondataavailable 이벤트에서 size가 0보다 큰 chunk만 저장해줘.
4. 녹음 종료 후 chunks를 Blob으로 합칠 때 같은 MIME 타입을 사용해줘.
5. 재생은 URL.createObjectURL(blob)으로 생성한 URL을 audio 태그에 연결해줘.
6. 저장된 녹음 파일을 다시 불러와도 재생 가능하도록 IndexedDB 저장 방식을 검토해줘.
7. 수정 후 홈 화면에서 녹음 → 저장 → 재생까지 한 번에 테스트 가능한 UI를 보여줘.

9. 개발 단계

10. 시제품 검수 기준

필수 검수 항목

• 로그인 없이 체험하기 버튼이 정상 작동하는가?
• demoMode 상태에서 홈 화면으로 이동하는가?
• 녹음 버튼을 누르면 녹음이 시작되는가?
• 다시 누르면 녹음이 종료되고 저장되는가?
• 저장된 녹음이 정상 음성으로 재생되는가?
• 오늘 녹음한 기록 개수가 표시되는가?
• 캘린더에서 기록이 있는 날짜가 표시되는가?
• 상세 화면에서 녹음, 텍스트, 요약을 확인할 수 있는가?
• 새로고침 후에도 demoMode 기록이 유지되는가?
• 모바일 화면에서 버튼과 네비게이션이 편하게 눌리는가?

현재 가장 중요한 판단 기준

이 시제품은 기술적으로 완벽한 앱이 아니라, 사용자가 매일 음성으로 일기를 남기고 나중에 정리된 기록을 확인하는 경험이 자연스러운지 검증하는 것이 핵심이다.