Mind Sync (Mind Synchronize)

마인드맵 실시간 공동 편집 어플리케이션

✨ 프로젝트 소개

• 마인드맵을 사용하여 아이디어를 시각적으로 표현해보세요
• 협업을 원하는 친구나 동료를 초대하는 것도 가능합니다
• 간편하게 마인드맵을 생성하고, 다른 사용자들과 실시간으로 공동 편집을 진행할 수 있어요

👨‍👩‍👧‍👦 팀원 소개

김찬희(J035)	양선아(K023)	이상준(K027)	이용환(J110)	이재한(K029)

⚒️ 기능 소개

🚀 스페이스

• 스페이스는 여러 사용자가 함께 협업하는 공간입니다.
• 스페이스를 만들고, 초대코드를 공유해서 다른 사용자를 초대할 수 있습니다.
• 스페이스에 함께 있는 사용자들은 스페이스에 저장된 보드들을 공유하게 됩니다.
• 스페이스는 스페이스에 참여한 모든 사용자가 나가게 되면 삭제됩니다.

스페이스 추가	초대 코드 발급	스페이스 참가	스페이스 나가기

📃 보드

• 보드는 마인드맵을 저장하는 공간입니다.
• 스페이스 하나에 여러개의 보드가 저장되고, 각 보드에는 마인드맵이 하나씩 할당됩니다.
• 보드를 삭제하면 보드는 휴지통으로 이동됩니다.
• 보드를 영구 삭제할수는 없고, 삭제된 일자 기준으로 7일이 지나면 자동으로 삭제됩니다.
  • 여러명이 협업할 수 있는 환경이기 때문에 영구 삭제는 되지 않도록 했습니다.

보드 생성	보드 삭제	휴지통

🧠 마인드맵

• 보드를 클릭하면 마인드맵 화면으로 이동하게 됩니다.
• 핵심 기능인 마인드맵을 그리고, 편집할 수 있는 공간입니다.
• 노드를 추가, 삭제, 편집, 이동할 수 있습니다.
• socket.io와 CRDT 알고리즘을 이용해 실시간으로 통신이 되도록 했습니다.

노드 추가	노드 삭제	노드 편집

노드 이동	확대/축소/드래그	실시간동시편집

🎯 기술적 도전

저희는 다음과 같은 과제에 도전했습니다.

1. 마인드맵을 그릴 수 있다.
2. 마인드맵을 동시에 실시간 편집 할 수 있다.

그래서 해당 과제를 수행하기 위해 다음과 같은 과정을 거쳤습니다.

1. 마인드맵을 그리기 위해

   • 노드를 그려주는 커스텀 뷰와 라인을 그려주는 커스텀 뷰를 구현했습니다.
     • 커스텀뷰 학습하기
     • 마인드맵을 저장하는 자료구조 설계하기
     • 라인을 곡선으로 그리기
     • 텍스트 크기에 따른 노드 크기 자동화
   • 줌 기능을 추가하고, 늘어나는 마인드맵의 크기에 따라 줌을 조절했습니다.
     • 마인드맵이 커졌을 때 잘리는 현상 해결 과정
     • 줌 기능이 추가됨에 따라, 노드 이동기능과 겹치는 터치 이벤트 관리하기
     • 이동 중 긴 자식 노드가 존재할 때 발생하는 문제 해결
   • 노드가 추가/편집 될 때마다 크기를 재고, 정렬하도록 했습니다.
     • 정렬 알고리즘

2. 마인드맵을 동시에 실시간 편집 할 수 있도록 하기 위해

   • Tree 구조에 적용가능한 작업기반 CRDT를 구현했습니다.
   • socket.io 학습하기

3. 빠른 응답을 위한 캐싱을 직접 구현해 적용했습니다.

   • 캐시 적용기

4. 마인드맵을 서버에 저장하는 공간인 보드와 보드를 여러개 저장할 수 있는 공간인 스페이스를 설계해 사용자가 초대/가입 할 수 있도록 했습니다.

5. 자주 소통하도록 노력하며 협업했습니다.

   • 페어프로그래밍을 자주 했습니다.
   • 안드로이드&백엔드 분야간의 소통도 매일 활발하게 이루어졌습니다.
     • 초반에는 매일 1시간의 티타임을 가지면서 매일 1시간씩 꼭 대화하는 시간을 가졌습니다.
     • api 적용, 소켓 통신을 개발하기 시작하고 나서부터는 더 많은 소통이 필요했고, 그래서 같은 회의실을 사용해서 서로의 이슈를 바로바로 공유할 수 있도록 했습니다.

🚀 문제 해결 과정

• 안드로이드에 Access Token과 Refresh Token 적용하기
• 서버에 Bulk Insert 및 Update 적용하기
• 서버에 카카오 OAuth 적용하기
• 서버에 Refresh Token 적용하기
• 안드로이드 CI 적용기
• 안드로이드 CD 적용기
• 서버 중복 코드를 추상 클래스로 분리하기
• Google Play Store 자동 배포 구축

📚 기술스택

AOS

• Kotlin Canvas Socket.IO Coil MVVM Retrofit Datastore Hilt Flow Jetpack Navigation DataBinding

BE

• Typescript NestJS Naver Cloud Platform MySQL MongoDB CRDT OAuth

📑 문서

설계서	피그마 디자인	프로덕트 백로그	스프린트 백로그	그라운드 룰
📒설계서: 프로젝트를 시작하면서 목표와 어떤 기능을 구현할 지 설계한 내용	📕피그마 디자인	🧾프로젝트 백로그: 전체 기능에 대한 일정 설계	스프린트 백로그: 매주 작성하는 구체적인 일정 설계	⛳MindSync 팀의 그라운드 룰