🧭 당신의 프로젝트에 길잡이가 되어줄게요 🧭

AI 기반 마인드맵 자동화 서비스

✨ 당신의 아이디어를 연결하는 가장 스마트한 방법, BooMap! ✨

• 회의록 기반으로 마인드맵을 자동 생성해요.
• 시각화된 캔버스에서 수정과 삭제가 가능해요.
• 만들어진 마인드맵을 팀원들과 쉽게 공유할 수 있어요.

저희 팀은 노드에 대한 동시편집을 가능하기 위해 socket.io에 도전해보았습니다. 동시 편집을 구현하는 과정에 있어서 어떤 문제와 고민들을 했을까요?

• 🕒 io 객체 생성 타이밍과 HTTP 요청
• 🤖 aiResponse 이벤트 핸들러 중복 등록 문제
• 🛠️ 소켓 에러 해결하기 총본집
• 🖥️ 소켓을 연결했더니 캔버스가 마비된 건에 대하여..
• 😱 노드의 텍스트을 삭제했는데 화면의 텍스트가 살아있는 것에 대하여...

마인드맵은 캔버스 라이브러리를 이용하여 그려내지만, 노드들과 마인드맵을 만들어주는 로직은 처음부터 끝까지 저희 팀이 구현했습니다. 어떤 시도와 도전들이 있었는지 찾아보세요!

옵시디언과 같은 메모 앱에서는 마인드맵 자식 요소들이 딸려오던데,, 우리도 한번 도전해볼까?
-> 🛠️ 노드들을 끌고오게 하기

각 부모와 자식 간을 이어주는 선을 직접 위치까지 계산해서 넣어야 했는데,, 보이는 것보다 더 개선할 수 있을까에 대한 고민을 공유합니다
-> 🎯 드래그 시 노드를 따라가는 선 구현하기

사용자들이 브레인스토밍하면서 한 곳으로 관심사를 분류해놓긴 하지만, 텍스트를 보기 위해 겹쳐 놓지는 않을텐데,, 그럼 재미 요소로 노드들끼리 2D 물리엔진처럼 충돌이 되도록 구현해 볼까하는 생각에서 노드 충돌방지를 소개합니다.
-> ⚠️ 노드들의 충돌 감지 및 회피

충돌 방지 기능을 넣었더니 노드가 많아졌을 때 프레임 드랍이 생겼습니다. 프레임 드랍을 해결하기 위한 문제 분석과 이를 해결하기 위한 시도를 공유합니다!
-> 🚀 충돌 방지의 렌더링 성능 최적화

이미지의 export 기능을 구현한 과정을 소개합니다!
-> 💾 노드들의 이미지 다운로드하기

사용자가 나중에 노드가 많아졌을 때, 한번 노드들에 대해서 재정렬하거나 겹치지 않게끔 노드를 만들어주는 기능을 넣으면 사용자 경험에 좋은 영향을 끼칠 것이라 판단했습니다. 그렇다면 이를 어떻게 계산하여 반영했는지에 대한 과정을 소개합니다
-> 📍 노드들이 겹치지 않게 펼치기

회원과 비회원 전용 서비스를 만들면서 어떻게 소유권을 관리해야 할지 정말 많은 케이스들이 발견되었습니다. 이를 해결하기 위한 저희만의 돌파구를 소개합니다.

• 🔑 회원과 비회원의 소유권 관리하기
• 📡 로그인 후 대시보드 API를 불러오도록 타이밍 조절하기

모든 회의에서 대부분의 서기가 있다시피, 저희도 회의록을 두고 한 명이 이를 편집하면서 다른 사람들은 볼 수 있으면 좋겠다는 새로운 아이디어가 나와 회의록 기능을 추가했습니다. 에디터 라이브러리를 사용한 일지를 공유합니다.

• 📝 tiptap 에디터 도입하기

팀원들이 순수 흥미와 호기심으로 했던 도전들과 직면했던 문제들을 해결하기 위한 시도들을 소개합니다!

저작도구에서 중요했던 핵심 기능 중 하나는 '단축키'였습니다. 이와 함께 저희의 노드들의 상태를 되돌리기 할 수 있는 기능이 있다면 편집이 보다 쉬울 것이라 판단하여 시도했던 과정을 소개합니다.
-> 🔄 canvas에서 Ctrl + z로 뒤로가기를 해보자

다양한 문제들을 해결했던 과정들을 소개합니다.

• ⚙️ 이벤트 리스너 조절하기

저희 팀에 대해서 더 알고 싶거나 서비스를 체험하고싶으신 분은 아래 링크를 통해 이동해주세요 😉

BOOMAP TEAM NOTION Wiki