Home

🗺️ BooMap Wiki

회의만 하면 계속 제자리로 돌아오는 것 같고, 창의적인 아이디어를 생성하기 어려운 것 같을 때?

Boomap은 AI 기반의 마인드맵 자동생성과 마인드맵 조작을 통해 브레인스토밍을 도와주는 도구입니다.

Boomap을 통해서

• 회의록 기반으로 마인드맵을 자동으로 만들어줘요.
• 시각화된 캔버스는 수정과 삭제까지 가능해요.
• 만들어진 마인드맵을 팀원들과 손쉽게 공유하고, png로 내보내서 발표 자료에 활용할 수 있어요.

---

📂 주요 기능

실시간 마인드맵 공동편집

• 팀원들과 함께 동일한 링크에 접속하여 브레인스토밍을 진행할 수 있습니다.
• 단축키를 활용하여 마인드맵의 노드를 간편하게 선택, 추가, 삭제할 수 있으며, 작업을 손쉽게 되돌릴 수도 있습니다.
• 생성된 마인드맵은 이미지로 다운로드 받을 수 있습니다.

마크다운 에디터를 활용한 회의록 작성

• 마인드맵의 소유자는 마크다운 형식의 에디터를 활용하여 회의록을 작성할 수 있으며, 해당 내용은 실시간으로 협업 환경에 접속한 모두에게 반영됩니다.
• 에디터의 크기를 자유롭게 조절하여, 마인드맵 노드 구성에 자유롭게 참고할 수 있습니다.

AI를 활용한 마인드맵 자동 변환

• 텍스트나 음성 파일을 업로드하여, 구조화된 마인드맵을 손쉽게 만들고 그 내용을 직관적으로 파악할 수 있습니다.
• 생성된 마인드맵은 자유롭게 편집이 가능합니다.

---

🛠️ 기술적 도전과 성장

팀의 기술적 도전과 그 과정에서 발생한 트러블 슈팅 과정을 소개합니다.

라이브러리 선정 및 설계

	keyword
👨‍🎨 canvas를 사용한 이유	FE canvas
🖌️ konva-react를 선정한 이유	FE canvas
🌐 socket.io를 선정한 이유	FE BE 실시간
🚀 사이트를 배포하는 방법	BE 아키텍처
🧩 canvas 데이터 구조 설계	FE BE canvas
🗂️ 계층 데이터 구조를 DB에 저장하는 방법	BE 아키텍처

canvas 기반 저작도구 구현

	keyword
🎨 canvas의 요소들을 겹치지 않게 생성하기	FE vector 좌표계산 각도
🧩 canvas의 요소들이 서로를 피해가게 만들기	FE collision detection
⚡ canvas 충돌방지 로직 최적화 도전기	FE 최적화 throttling WebWorker requesetAnimationFrame
🎯 마인드맵의 원을 따라가는 선 그리기	FE 좌표계산 벡터
⏪ undo와 redo 기능 구현하기	FE 단축키 historyState
📐적절한 노드 생성 위치 계산하기	FE vector 좌표계산 각도

실시간 통신

	keyword
🛑 소켓 서버가 자꾸 다운되는 문제 해결하기	BE 예외처리
🌀 이벤트 중복 등록으로 인한 문제 해결하기	FE event handling
🔎 이벤트 리스너가 의도치 않게 사라지는 현상 탐색하기	FE 디버깅 io.off
⚠️ 소켓 에러 처리를 통한 사용자 경험 개선하기	FE 에러 핸들링

---

🧠TEAM 두뇌풀가동

J001 강민주	J026 김남희	J155 양현호	J238 조민형
@Minju9187	@kimnamheeee	@adkm12	@alsgud8311