AI 회의록 에이전트 웹사이트 만들기

 

오늘은 AI 회의록 에이전트를 만들어보았다.

이름은 Minute + Memory 의 합성어인

Minemory 로 정했다.

 

 

 

 

1. PRD 작성

당신은 Product Manager입니다. 저는 ai 회의록 자동 생성 프로그램을 만드려고 합니다.
이 서비스는 다음과 같이 기능을 해야합니다. 사용자가 회의 내용을 음성으로 녹음하고, ai를 활용하여 자동으로 텍스트 변환, 요약, 상세 회의록을 생성합니다.

핵심 목표는 사용자의 회의록 작성 부담을 줄이고 업무 효율성을 향상시키는 것입니다.
당신은 서비스 기획, ux/ui, 설계, 기술스택, 디자인 역량을 갖춘 전문가로서 답변을 해줘야 합니다.

PRD에는 다음 내용을 반드시 포함하여 섬세하게 작성해주세요.

1. 제품 개요:
- 목적 : 이 제품이 해결하고자 하는 문제와 사용자에게 제공하는 가치
- 범위: 제품의 주요 기능 경계 (예: 웹 기반, 단일 사용자 초기 버전)
- 대상 사용자: 이 제품을 사용할 주요 사용자 그룹 및 그들의 니즈

2. 기능 명세:
다음 핵심 기능들에 대한 상세한 설명을 포함해야 합니다.
- 음성 녹음 기능
- 메모 입력 기능
-회의 데이터 관리 기능
- ai기반 회의록의 생성 기능
-설정 관리 기능 : AI 프롬프트(요약용, 상세 회의록용)
-데이터 외부 연동 기능

4. UI/UX 디자인 고려사항:
- 주요 화면 레이아웃 구성 (헤더, 메인 콘텐츠 영역)
- 필요한 주요 UI 컴포넌트 목록 (녹음 버튼, 텍스트 표시 영역, 설정 팝업 등)
- 일관된 디자인 시스템 적용

5.기술 스택
-next.js
-tailwind css
-음성->텍스트 변환 : assembly ai
-회의요약 : GPT
-데이터 저장 : 로컬

요청 스타일:
-각 문서는 체계적이고 이해하기 쉽게 작성해주세요
-각 항목은 명확하고 구체적으로 기술해주세요
-주니어 개발자도 문서를 보고 제품을 이해하고 개발에 참여할 수 있도록 상세한 설명을 포함해주세요
-전문용어 사용 시 간략한 설명을 덧붙여주세요.

PRD작성 시 유의사항
-명확성 : 모호한 표현 대신 구체적인 수치와 예시 사용
-간결성 : 핵심 정보만 포함하고 불필요한 설명 제거
-검증가능성 : 모든 요구사항은 측정/테스트 가능해야함
-이해관계자 검토 : 개발, 디자인, QA, 마케팅 등 모든 팀의 검토 필요
- 버전 관리 : 변경 사항 추적을 위한 버전 관리 유지

 

 

 

2.  메모장 UI 및 기능 구현

이 prd를 바탕으로 해서 사용자가 회의를 하는 동안 회의 내용을 자유롭게 작성할 수 있는 메모 섹션을 만들어줘. 
우선 프론트 디자인부터 구성을 해주고, 이 디자인을 할 때 글자색은 배경색과 다르게 하여 눈에 잘 보이도록 만들어줘.
참고할 디자인은 노션 스타일과 같은 형태로 만들어줘

 

3. 녹음 UI 및 녹음 상태 표시 디자인

녹음에서 녹음 중일 때 사용자의 음성이 인식이 되고 있다는 것을 알 수 있도록
웨이브 형태로 표시를 해줘.

 

4. Assembly AI로 음성에서 텍스트 변환 세팅

https://www.assemblyai.com/

AssemblyAI | AI models to transcribe and understand speech

assmebly ai를 활용하여, 회의를 녹음한 음성을 텍스트로 변환을 할거야.
api키 : {}
위 키는 api 키야. 보안을 위해 환경변수로 세팅을 해주고, 그리고 녹음을 진행할 때 음성도 인식이 되도록 설정을 해줘.

 

5. 녹음 결과 텍스트창 표시

배치가 이런식으로 구성되도록 수정해줘

화면구성 만들어서 제시

 

6. 요약본 & 회의록 UI 디자인

6-1) 요약본

먼저 요약결과가 어떻게 나오는지 확인을 하고싶어. 
지금 녹음 데이터를 제공하지 않았는데, 가상의 데이터를 받았다고 가정하여 
요약본 기능만 결과가 어떻게 나오는지 확인할 수 있도록 세팅을 진행해줘. 
요약본에 나와야할 결과는 회의에 대한 내용을 500자로 요약한 텍스트만 나오도록 해줘.

 

6-2) 상세 회의록

다음은 상세회의록을 만들거야. 
동일하게 가상의 데이터 결과값이 나오도록 진행을 해줘. 
상세 회의록의 경우 디자인을 시각적으로 직관적으로 보일 수 있도록 진행해줘

 

 

6-3) UI 디자인 수정

회의개요로 회의제목, 회의 일시, 회의 목적, 참석자 가 기록되게 해주고, 
논의내용,결정사항,Action Items의 header는 첨부한 사진처럼 전부 파란색으로 통일해줘. 
그리고 상단의 새 회의에서 회의제목, 날짜, 참석자를 입력할 수 있게 수정해줘

 

7. GPT-4 API 연동

https://platform.openai.com/playground

OpenAI Platform

 

 

 

8.GPT 프롬프트 작성하여 요약본 및 회의록 구현

messages: [
                {
                  role: "user",
                  content: `당신은 회의 내용을 정확하게 요약하는 전문가입니다. 
                          핵심 내용만 간결하게 요약해주세요. 중요한 논의 사항, 결정된 사항, 액션 아이템을 중심으로 요약해주세요.
                          내용 요약은 최소 500자 이상으로 요약해주세요.아래 회의 전사 내용을 500자 이내로 요약해 주세요.
                          반드시 보고서 형식의 어체를 사용하며, 문장 끝은 '~함', '~임', '~하였음' 등을 쓰세요.
                          맨 마지막은 '이상으로 보고를 마침.'으로 끝내고, 전사에 없는 내용은 넣지 마세요. 
                          요약 텍스트만 출력해주세요요.\n\n전사 내용:\n${transcriptText}`,
                },
              ],

model: "gpt-4o-mini",
            messages: [
              {
                role: "system",
                content: `당신은 회의 내용을 전문적인 회의록으로 변환하는 비서입니다. 다음과 같은 형식으로 회의록을 작성해주세요 :

                          1. 회의 정보 (제목, 일자, 참가자)
                          2. 회의 요약
                          3. 주요 논의 사항 (토픽별로 구분)
                          4. 결정된 사항
                          5. 할당된 업무와 담당자
                          6. 다음 회의 일정 및 안건

                          내용이 없는 섹션은 생략해도 됩니다.

                          전사 내용:
${transcriptText}`,
              },
            ],

 

 

9. 요약본 및 회의록 프롬프트 반영하는 설정창 구현

우측 상단에 설정 아이콘을 만들고, 이 아이콘을 누르면 현재 반영된 프롬프트를 수정하도록 만들고싶어. 
요약과 회의록 프롬프트를 수정할 수 있도록 세팅해줘

 

 

10. Webhook 연결

웹훅 주소 -> {}
이 웹훅 주소로 우리는 회의록 내용을 보낼거야.

 

10-1) 웹훅 연결하여 내보내기 버튼 추가하였으나 배치가 마음에 들지 않아 수정함

원본 -> 커서 제안용 수정본

 

10-2) webhook response 추가 후 run once

 

11. 노션 세팅 및 Slack 세팅

-> 노션으로 자동 업로드 되면 Slack에 알림 가는 방식이나

    혼자 사용하는 개인화된 서비스가 목적이 아니므로 생략함.

 

 

12. 공유 방식 변경

-> 노션 대신 선택항목 내보내기로 필요한 항목 공유하는 방식

 

 

13. Vercel 배포

13-1) 깃허브 repositary 등록 & commit

13-2) Vercel 에서 deploymet

 

 

<코드 확인>

 

GitHub - Sieonshine/MinemoryAI: AI meeting recorder that converts speech into structured meeting minutes and summaries.

 

 

 

<배포 확인>

https://minemory-ai.vercel.app/