직장인 필수템 '회의 요약 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