MeetingAutoDocs

회의 녹음 → 텍스트 변환 → AI 요약 → PRD 자동 생성 플랫폼

🌐 데모: https://loboking.github.io/AutoMeetingWriteDocument/

📋 개요

MeetingAutoDocs는 회의 녹음을 자동으로 텍스트로 변환하고, AI가 요약과 기획서(PRD)를 생성해주는 웹 애플리케이션입니다.

주요 기능

• 🎙️ 브라우저 녹음: 마이크로 실시간 회의 녹음
• 🔄 STT 변환: OpenAI Whisper API를 사용한 음성-텍스트 변환
• ✨ AI 요약: Claude API를 활용한 회의 내용 요약
• 📄 PRD 생성: 회의 내용을 바탕으로 자동 기획서 작성
• 💾 저장소: 로컬 스토리지를 통한 회의 기록 영구 저장

🚀 빠른 시작

1. 리포지토리 클론

git clone <repository-url>
cd meeting-auto-docs

2. 의존성 설치

npm install
# 또는
yarn install
# 또는
pnpm install

3. 환경 변수 설정

.env.local 파일을 프로젝트 루트에 생성하고 다음 내용을 추가하세요. (아래 예시 전체는 .env.example 파일에 들어있습니다 — cp .env.example .env.local 후 키만 채우면 됩니다.)

# .env.local

# ⚠️ 필수: LLM 문서생성은 ZAI(GLM)로 강제.
# GEMINI_API_KEY(STT/화자용)를 깔면 LLM이 Gemini로 빼앗겨 PRD 섹션이 8192로 잘리는
# 치명적 품질 사고가 납니다. 반드시 한 줄 명시.
LLM_PROVIDER=ZAI

# Z.ai 코딩 플랜 (Coding Plan) API — LLM 문서생성(GLM)
ZAI_API_KEY=your-zai-api-key-here
ZAI_BASE_URL=https://open.bigmodel.cn/api/coding/paas/v4

# OpenAI API — Whisper STT(음성→텍스트) fallback
OPENAI_API_KEY=sk-your-openai-api-key-here

# STT/화자분리용 Gemini 오디오 (활성화됨 — 도이 작업 머짍 완료).
#        이 키를 쓰더라도 LLM_PROVIDER=ZAI 가 LLM을 고정하므로 PRD 절단 사고 방지됨.
GEMINI_API_KEY=your-gemini-api-key-here
# STT용 모델(기본 gemini-2.5-flash). LLM용 GEMINI_MODEL과 분리.
# GEMINI_STT_MODEL=gemini-2.5-flash
STT_PROVIDER=whisper   # whisper | gemini-audio (기본 whisper, gemini-audio 시 STT+화자분리 동시)

API 키 가져오기:

• Z.ai 코딩 플랜: https://z.ai/chat - 추천 (코딩 플랜 구독 필요)
• OpenAI: https://platform.openai.com/api-keys - Whisper STT용
• Google AI Studio: https://aistudio.google.com/apikey - STT/화자분리용 Gemini 오디오 (옵션)

💡 참고: 코딩 플랜 구독 시 잔액 기반이 아닌 구독 기반으로 GLM 모델을 무제한 사용할 수 있습니다. 지원 모델: glm-5, glm-5.1, glm-5-turbo, glm-4.7 (현재 glm-5 사용)

⚠️ 치명적 함정 — LLM_PROVIDER=ZAI 생략 금지: GEMINI_API_KEY는 STT/화자분리용이지만, 같은 키가 LLM provider 후보에도 Gemini로 추가됩니다. 기본 우선순위가 ANTHROPIC > GEMINI > OPENAI > ZAI라 LLM_PROVIDER를 안 정하면 LLM이 Gemini로 잡힙니다. 그러면 PRD 섹션 생성 토큰이 16384가 아닌 8192로 절반 잘려서 품질 사고가 납니다. STT용으로 Gemini 키를 쓰더라도 반드시 LLM_PROVIDER=ZAI 한 줄을 넣어 LLM을 고정하세요.

4. 개발 서버 실행

npm run dev

브라우저에서 http://localhost:3000을 열어 확인합니다.

📖 사용 방법

회의 녹음 흐름

1. 새 회의 시작

   • 회의 제목을 입력 (선택사항)
   • "회의 시작하기" 버튼 클릭 또는 파일 업로드

2. 녹음

   • 마이크 아이콘을 클릭하여 녹음 시작
   • 일시정지/재개 가능
   • 정지 버튼으로 녹음 완료

3. 텍스트 변환

   • 녹음된 오디오 확인
   • "텍스트 변환하기" 클릭
   • Whisper API가 음성을 텍스트로 변환
   • 필요한 경우 텍스트 수정 가능

4. AI 요약

   • "AI 요약 생성" 버튼 클릭
   • AI가 회의 내용을 분석
   • 핵심 사항, 의사결정, Action Items 추출

5. 기획 문서 생성

   • 왼쪽 트리에서 문서 선택 후 "생성하기" 클릭
   • 또는 "전체 생성" 버튼으로 의존성이 충족된 모든 문서 한번에 생성
   • 생성된 문서는 편집, 미리보기, 다운로드 가능

   ℹ️ 전체 생성 동작 안내: 문서 생성은 페이지를 떠나거나 새로고침해도 다시 방문하면 남은 문서부터 이어서 진행됩니다. 진행 중에는 우측 하단 진행바에서 상태 확인 및 "종료"가 가능합니다. 단, 브라우저의 모든 탭을 닫으면 생성이 멈추며, 다른 기기/브라우저에서는 이어지지 않습니다. (브라우저 로컬에 진행 상황을 저장하는 방식)

문서 탭 전환

데이터가 생성되면 바로 해당 탭으로 이동할 수 있습니다:

• 녹음: 오디오 녹음 및 관리
• 변환: 텍스트 변환 결과
• 요약: AI 요약 결과
• 문서: 14종 기획 문서 (탭 클릭으로 바로 접근)

기획 문서 종류

문서	설명	의존성
PRD	제품 요구사항 문서	-
시나리오 정의서	사용자 시나리오 정의	-
기능목록	기능 목록 정의서	-
화면목록	화면 목록 정의서	기능목록
IA	정보구조도	화면목록
플로우차트	사용자 플로우 및 프로세스	시나리오, 화면목록
스토리보드	사용자 시나리오 흐름	시나리오, 플로우차트
와이어프레임	화면 설계 및 플로우	IA, 화면목록
API명세	API 인터페이스 설계	기능목록
테스트계획	테스트 시나리오 및 계획	기능목록, API명세
테스트케이스	상세 테스트 케이스 목록	기능목록, API명세, 테스트계획
DB설계	데이터베이스 스키마 및 ERD	기능목록, API명세
WBS	작업 분류 구조	기능목록, API명세, 와이어프레임
배포가이드	릴리스 및 배포 절차	PRD, 기능목록, API명세

문서 내보내기

• 개별 내보내기: 문서 상단의 "내보내기" 버튼 클릭
  • Markdown (.md), 텍스트 (.txt), PDF/인쇄, Word (.docx), Excel (.xlsx), PPT (.pptx)
• 모두 내보내기: 상단의 "모두 내보내기" 버튼으로 모든 문서를 하나의 파일로 병합

터미널 연동 (기획→개발)

기획 문서를 기반으로 개발 명령어를 바로 실행할 수 있습니다:

1. 터미널 모드 전환

   • 문서 상단의 뷰 모드 버튼을 연속 클릭
   • 원문 → 미리보기 → 시각화 → 터미널

2. 명령어 패널 사용

   • 왼쪽 패널에서 기획 문서 기반 자동 생성된 명령어 확인
   • 카테고리별 필터링: 설정, 프론트엔드, 백엔드, DB, 테스트
   • "복사" 버튼으로 클립보드에 복사

3. 터미널 사용

   • 오른쪽 터미널에서 직접 명령어 입력
   • 터미널 클릭하여 활성화
   • 명령어 입력 후 Enter로 실행

4. 자동 생성 명령어 예시

   # 프로젝트 초기화
   npx create-next-app@latest 프로젝트명 --typescript --tailwind --app
   
   # 컴포넌트 생성
   mkdir -p src/components/new-feature
   
   # API 라우트 생성
   mkdir -p src/app/api/v1/resource
   
   # DB 마이그레이션
   npx prisma migrate dev --name init_schema
   
   # 테스트 실행
   npm test -- --coverage
   

단축키

키보드	기능
Ctrl + `	터미널 토글 (예정)

🏗️ 프로젝트 구조

meeting-auto-docs/
├── src/
│   ├── app/                    # Next.js App Router
│   │   ├── api/               # API Routes
│   │   │   ├── transcribe/    # Whisper STT
│   │   │   ├── summarize/     # Claude 요약
│   │   │   └── generate-prd/  # Claude PRD 생성
│   │   ├── layout.tsx
│   │   └── page.tsx           # 메인 페이지
│   ├── components/            # React 컴포넌트
│   │   ├── ui/               # shadcn/ui 컴포넌트
│   │   ├── MeetingRecorder.tsx
│   │   ├── TranscriptViewer.tsx
│   │   ├── SummaryViewer.tsx
│   │   └── PrdViewer.tsx
│   ├── hooks/                # React Hooks
│   │   └── useRecorder.ts    # 녹음 로직
│   ├── store/                # Zustand 상태 관리
│   │   └── meetingStore.ts
│   └── types/                # TypeScript 타입 정의
│       └── index.ts
├── public/                   # 정적 리소스
├── .env.example              # 환경 변수 예시 (cp .env.example .env.local)
└── package.json

🛠️ 기술 스택

프론트엔드

• Next.js 16.2 - React 프레임워크 (App Router)
• React 19.2 - UI 라이브러리
• TypeScript 5.0 - 타입 안전성
• Tailwind CSS 4.0 - 스타일링
• shadcn/ui - UI 컴포넌트 라이브러리
• Zustand - 상태 관리
• Lucide React - 아이콘 라이브러리

백엔드

• Next.js API Routes - 서버리스 API
• Z.ai 코딩 플랜 GLM API - AI 요약 및 문서 생성 (구독 기반)
  • 지원 모델: glm-5.1, glm-5-turbo, glm-4.7, glm-4.5-air
• OpenAI Whisper API - 음성-텍스트 변환 (대안)

브라우저 API

• MediaRecorder API - 오디오 녹음
• Web Audio API - 오디오 처리

🔧 API 명세

POST /api/transcribe

녹음된 오디오를 텍스트로 변환합니다.

Request:

• audioFile: File (audio/webm)
• language: string (기본값: 'ko')

Response:

{
  "text": "변환된 텍스트",
  "duration": 120.5
}

POST /api/summarize

텍스트를 요약합니다.

Request:

{
  "text": "회의 텍스트",
  "context": "회의 제목"
}

Response:

{
  "summary": {
    "overview": "회의 개요",
    "keyPoints": ["핵심 사항 1", "핵심 사항 2"],
    "decisions": ["의사결정 1"],
    "actionItems": [
      {
        "task": "작업 내용",
        "assignee": "담당자",
        "priority": "high",
        "deadline": "기한"
      }
    ]
  }
}

POST /api/generate-prd

요약을 바탕으로 PRD를 생성합니다.

Request:

{
  "summary": { ... },
  "meetingInfo": {
    "title": "회의 제목",
    "date": "2024-01-01",
    "attendees": ["참여자1", "참여자2"]
  }
}

Response:

{
  "prd": "# PRD: 회의 제목\n\n..."
}

🧪 개발 및 테스트

빌드

npm run build

프로덕션 실행

npm start

린트

npm run lint

📝 환경 변수

변수	설명	필수
LLM_PROVIDER	LLM provider 강제 지정. ZAI 권장/사실상 필수 — GEMINI_API_KEY 깔면 LLM이 Gemini로 빼앗겨 PRD 섹션이 8192로 잘림	필수 ⚠️
ZAI_API_KEY	Z.ai 코딩 플랜 API 키 (LLM 문서생성 GLM)	선택*
ZAI_BASE_URL	코딩 플랜 API 베이스 URL (/api/coding/paas/v4)	선택
OPENAI_API_KEY	OpenAI API 키 (Whisper STT fallback)	선택*
GEMINI_API_KEY	Google AI 키 (STT/화자분리용 Gemini 오디오, 옵션). 같은 키가 LLM 후보에도 추가되므로 LLM_PROVIDER=ZAI 필수	선택
STT_PROVIDER	STT provider 노브 (whisper | gemini-audio, 기본 whisper)	선택

선택사항이지만, 실제 AI 기능을 사용하려면 필요합니다. 없으면 모의 응답이 반환됩니다. 코딩 플랜 구독을 추천합니다.

⚠️ LLM_PROVIDER=ZAI 를 반드시 넣으세요. STT용 GEMINI_API_KEY만 깔고 이 줄을 빼면, LLM이 Gemini로 잡혀 PRD 섹션이 8192 토큰으로 잘리는 품질 사고가 납니다. 자세한 이유는 위 '환경 변수 설정' 섹션의 치명적 함정 박스를 보세요.

🎯 향후 계획

• 회의 기록 검색 기능
• 여러 언어 지원
• 화자 분리 (Speaker Diarization)
• 회의 참여자 관리
• 이메일/Slack 공유 기능
• 마크다운/PDF 내보내기
• 다크 모드 개선
• PWA 지원

🤝 기여

기여를 환영합니다! 이슈를 열거나 PR을 제출해주세요.

📄 라이선스

MIT License

🙋 자주 묻는 질문

Q: API 키가 없으면 작동하지 않나요?

A: API 키 없이도 앱을 실행하고 UI를 테스트할 수 있습니다. 다만 실제 AI 기능 대신 모의 응답이 반환됩니다.

Q: 브라우저에서 녹음이 안 돼요.

A: 브라우저가 마이크 접근 권한을 요청할 때 "허용"을 선택해주세요. HTTPS 환경이 필요할 수 있습니다.

Q: Z.ai와 OpenAI 중 뭐를 써야 하나요?

A: Z.ai 코딩 플랜 구독을 추천합니다. 구독 기반으로 GLM 모델(glm-5.1, glm-4.7 등)을 무제한 사용할 수 있어 가성비가 우수합니다.

Q: 지원되는 브라우저는 무엇인가요?

A: Chrome, Firefox, Safari, Edge의 최신 버전을 지원합니다. MediaRecorder API를 지원하는 브라우저라면 작동합니다.

Q: 녹음 파일은 어디에 저장되나요?

A: 녹음 파일은 서버에 전송되어 텍스트로 변환된 후 즉시 삭제됩니다. 회의 데이터는 브라우저의 로컬 스토리지에만 저장됩니다.

📞 지원

문제가 있거나 도움이 필요하시면 이슈를 등록해주세요.

---

Made with ❤️ using Next.js and AI

AutoMeetingWriteDocument