<aside> <img src="/icons/window_gray.svg" alt="/icons/window_gray.svg" width="40px" /> 프로젝트 소개

본 프로젝트는 WebSocket을 활용한 실시간 음성 인식 기반 협업 브레인스토밍 웹 애플리케이션입니다. 사용자가 음성 녹음을 활성화하면, Speech-to-Text 기술로 실시간 텍스트 변환이 이루어지고, WebSocket을 통해 변환된 텍스트가 서버와 클라이언트 간 빠르게 동기화됩니다.

이 텍스트 데이터는 OpenAI GPT API를 통해 분석 및 이해되어 자동으로 마인드맵 형태의 시각적 아이디어 구조로 변환되고 확장됩니다. 팀원들은 실시간으로 마인드맵을 공동 편집할 수 있으며, AI가 새롭게 입력된 내용에 맞추어 관련 아이디어 노드를 추천해 협업의 효율성과 창의성을 극대화합니다.

또한, 음성 입력 외에도 텍스트 기반 아이디어 입력, 마인드맵 이미지 추출, 사용자 맞춤형 AI 추천 기능 등 다양한 기능을 제공하여 직관적이고 인터랙티브한 협업 환경을 구현하였습니다.

프로젝트 진행 계기

팀 기반 아이디어 회의에서 음성으로 쏟아지는 다양한 의견을 실시간으로 정리하고 구조화하는 과정이 매우 비효율적임을 경험했습니다. 특히 아이디어가 많고 복잡할수록 이를 체계적으로 시각화하고 협업하는 데 어려움이 있었습니다.

이에 음성 인식 기술과 생성형 AI를 결합하여, 회의 중 실시간으로 음성을 텍스트화하고 AI가 이를 분석해 마인드맵 형태로 자동 시각화하는 협업 도구의 필요성을 느껴 프로젝트를 기획하였습니다.

WebSocket 기반 실시간 데이터 동기화와 OpenAI GPT API를 활용한 자연어 이해 및 아이디어 추천 기능을 결합함으로써, 브레인스토밍의 질적 향상과 효율적인 협업 환경 구축을 목표로 하고 있습니다.

</aside>

<aside> <img src="/icons/flag_gray.svg" alt="/icons/flag_gray.svg" width="40px" /> 프로젝트 목표

• 음성인식을 활용한 실시간 브레인스토밍 자동화
  • 기존 협업 도구(Miro, FigJam, Notion, Google Docs 등)는 주로 텍스트 기반 입력 방식에 의존하여, 사용자가 직접 키보드로 내용을 작성해야 하는 불편함이 존재함.
  • 본 서비스에서는 음성인식(Speech-to-Text) 기술을 활용하여, 회의 중 실시간으로 아이디어를 텍스트로 변환하여 자동 기록.
  • 음성 데이터를 AI가 분석하여 문장 구조를 정리하고, 알맞게 요약하며 체계적으로 정리하는 기능을 제공.
  • AI가 분석한 데이터를 기반하여 실시간으로 주요 키워드를 추출하고 추천 키워드를 제공.
  • 이를 통해 사용자는 빠르게 아이디어를 공유하고, 회의가 끝난 후에도 구조화된 형태로 내용을 다시 확인할 수 있음
• 생성형 AI 기반 브레인스토밍 확장
  • 기존 협업 도구들은 사용자의 입력을 단순히 기록하는 데 그치며, 아이디어를 확장하거나 발전시키는 기능이 부족함.
  • 본 서비스는 ChatGPT 및 생성형 AI 모델을 활용하여, 사용자가 제시한 내용을 분석하고, 해당 주제와 관련된 핵심 키워드를 자동으로 추출 및 추천하는 기능을 제공합니다.
  • 이를 통해 사용자는 논의의 방향을 더 쉽게 잡고, 브레인스토밍의 생산성을 높이는 데 기여
• AI 기반 마인드맵 자동 생성 및 시각화
  • 기존 마인드맵 툴(예: XMind, MindMeister 등)은 사용자가 직접 입력하고, 수동으로 정리하는 방식으로 동작하여, 아이디어가 많아질수록 관리가 어려움.
  • 본 연구에서는 AI가 자동으로 아이디어를 카테고리화하고, 관계를 분석하여 마인드맵을 생성.
  • 사용자가 아이디어를 추가하면 AI가 자동으로 적절한 위치에 배치하고, 필요하면 관련 키워드를 계속해서 제안
• 실시간 협업 및 AI 지원 시스템
  • WebSocket 등의 실시간 통신 기술을 활용하여, 여러 사용자가 동시에 같은 브레인스토밍 세션에 참여 가능.
  • 회의 중 실시간으로 변경되는 마인드맵이 다른 사용자 화면에서도 즉시 업데이트되어 실시간 협업 환경을 제공.
  • 또한, AI가 모든 사용자의 아이디어 흐름을 분석하고 요약함으로써 체계적인 아이디어 정리를 지원. </aside>

프로젝트 상세 내용

<aside> <img src="/icons/wrench_gray.svg" alt="/icons/wrench_gray.svg" width="40px" /> 사용 기술 및 솔루션

Front-End

• React
  • react
  • react-dom
  • react-router-do
  • react-media-recorder
  • react-speech-recognition
• 네트워크 및 실시간 통신
  • axios
  • sockjs-client
  • @stomp/stompjs
  • stompjs
• 유틸리티 및 기타
  • html2canvas
  • regenerator-runtime
  • @xyflow/react
• 빌드/개발 → ec2로 재배포 예정
  • vite
  • @vitejs/plugin-react-swc
  • typescript
  • eslint
• 스타일링
  • sass
  • sass-embedded

Collaboration

• Notion
• Discord
• Github </aside>

<aside> <img src="/icons/check_gray.svg" alt="/icons/check_gray.svg" width="40px" /> 서비스 구현

프로젝트 최종 결과

MOABA

와이어 프레임 및 기획안

모아바_1차_발표_자료.pdf

moaba_기능명세서.pdf

시연 영상

https://eunjin03.notion.site/1fbffc6c8c658064bcd7eafa8b39df99?source=copy_link

</aside>

담당 역할

<aside> <img src="/icons/sign-in_gray.svg" alt="/icons/sign-in_gray.svg" width="40px" /> 로그인 및 회원가입 구현

이메일 로그인 및 회원가입을 구현.

로그인의 경우 로그인에 더불어 비밀번호 변경, 비밀번호 초기화를 구현

회원가입의 경우 이메일 중복 체크, 이메일 인증, 동의를 구현

또한 카카오, 구글, 네이버 로그인을 구현함.

</aside>

<aside> <img src="/icons/light-bulb_gray.svg" alt="/icons/light-bulb_gray.svg" width="40px" /> 아이디에이션 페이지 구성

주기능 페이지인 아이디에이션 페이지를 구성 및 개발함

react-media-recorder, react-speech-recognition 라이브러리를 활용하여 실시간 스크립트를 생성, NodeJS.Timeout 사용으로 time stamp 생성, 서버에서 오늘 실시간 요약을 띄움

추후 웹소켓 연결로 헤더바에 참여자 목록 업데이트 기능 추가 예정

</aside>

<aside> <img src="/icons/light-bulb_gray.svg" alt="/icons/light-bulb_gray.svg" width="40px" /> 기타 세부 기능 개발

프로젝트 초대(공유하기) 기능 및 모달 제작

프로젝트 이름 수정 및 제거 기능 개발

프로필 수정 기능 개발

</aside>

프로젝트 결과

<aside> <img src="/icons/child_blue.svg" alt="/icons/child_blue.svg" width="40px" /> 제목

</aside>

<aside> <img src="/icons/person-masculine_pink.svg" alt="/icons/person-masculine_pink.svg" width="40px" /> 아쉬웠던 점

</aside>

프로젝트를 통해 얻은 것

<aside> <img src="/icons/checkmark-line_gray.svg" alt="/icons/checkmark-line_gray.svg" width="40px" /> 제목

</aside>