직장인 필수템 '회의 요약 AI 웹' 만드는 방법 (feat.무료 배포 방법 공개)

[사용한 프롬프트]
작업: 'AI 회의 요약 및 분석 대시보드' 개발

UI/UX 요구사항:
반드시 표시되는 UI화면은 한글로 되어있어야합니다.

사이드바 (Sidebar):
Google Gemini API Key 입력 필드 (type="password")
오디오 파일 업로드 영역 (mp3, wav, m4a 등 지원)
'분석 및 요약 시작' 버튼 (클릭 시 모든 분석 프로세스 진행)

메인 화면 (Main Content):
요약 결과가 출력될 섹션을 아래 3가지 영역으로 구분하여 디자인:
- ① [3줄 요약]: 전체 내용을 3개의 문장으로 압축하여 상단에 배치
- ② [상세 줄글 요약]: 회의의 흐름과 세부 내용을 담은 전체 요약글
상태 표시: 오디오 업로드/인코딩/AI 분석 단계별 로딩 상태 표시

기술적 요소:
1. 모델 설정: 'gemini-2.5-flash' 모델 반드시 사용
2. SDK: https://esm.run/@google/generative-ai CDN 활용
3. AI 프롬프트 (System Instruction):
반드시 **한국어(Korean)**로 답변할 것.
출력 형식을 다음과 같이 엄격히 지킬 것:
📌 3줄 핵심 요약
(첫 번째 요약)
(두 번째 요약)
(세 번째 요약)
📝 상세 요약
(전체 내용을 흐름에 따라 상세하게 줄글로 작성)
4. UI화면에 보이는것은 전부 한국어로 표시되어야 합니다.

기능 로직:
업로드된 오디오를 Base64로 변환하여 Gemini API로 전송 .
응답받은 마크다운 텍스트를 HTML에 예쁘게 렌더링.

디자인스타일:
깔끔한 화이트/그레이 톤에 가독성이 높은 폰트 사용.
사이드바는 네이비 색의 깔끔한 색으로 표현
요약 결과 카드에는 부드러운 그림자(Shadow) 효과 적용.
위 요구사항에 맞춰 즉시 실행 가능한 코드를 작성해줘.

[타임라인]
[00:00] 완성된 AI 웹 서비스 시연
[00:41] AI 웹 제작 배경 및 프롬프트 준비
[01:44] AI 스튜디오에서 웹 빌드하기
[02:31] 무료 배포를 위한 Netlify 서비스 소개
[03:01] 드래그 앤 드롭으로 웹 배포하기
[03:29] 배포된 웹 사이트 최종 테스트 및 마무리

#바이브코딩 #업무자동화 #ai