실시간 협업이 가능한 마인드맵 툴, Mind Storming

8월에 열린 Junction Asia 2022 해커톤에 디자이너로 참여하여 팀원들과 함께 마인드맵 툴을 개발했다.

짧은 시간 안에 개발해야 하는 해커톤 특성상 많은 기능을 담기보단 핵심 기능을 잘 보여줄 수 있는 방향으로 진행했다.

 

개발 기간 : 2022.08.19 ~ 2022.08.21

 

✳️ 어떤 것을 만들까

Mind Storming의 키워드는 아래와 같다.

• 실시간 협업
  여러 명이 실시간으로 협업하며 사용할 수 있도록 즉각적으로 생성하고 수정된 사항이 반영되어야 한다.
• 마인드 맵
  브레인스토밍을 할 수 있는 좋은 방법으로 마인드 맵 방식을 적용한다.
• 연관 단어 추천
  단어들을 이어나갈 때 자신이 떠올린 단어뿐만 아니라 유사된 단어를 추천해주어 더 쉽게 아이디어를 떠올릴 수 있게 한다.

 

✳️ 기능과 UI 구성하기

위의 핵심 기능을 기반으로 기존의 마인드맵 툴을 리서치했다. 마인드 맵 툴뿐만 아니라 브레인스토밍에 사용되는 화이트보드 협업 툴 등 다양한 협업 툴을 레퍼런스로 사용했다. 그리고 필수적인 기능들을 아래와 같이 추렸다.

• 배율 조절(확대/축소)
• 단어 추가/수정
• 연관 단어 리스트(추가 가능한)
• 컬러 변경
• 실행 취소/되돌리기

그리고 위의 기능을 담은 기본적인 UI 구성을 마치고 개발자에게 전달하였다.

 

✳️ 구현하기

개발 시간이 촉박하여 실행 취소/되돌리기 기능은 구현하기 어려울 것 같아 제외하기로 하였다. 기존에는 단어를 추가하거나 수정할 때 단어가 있는 박스에서 직접 입력이 가능하게 설계했는데 이것 또한 시간 내에 구현이 어려울 것 같아 따로 인풋 필드를 놓고 거기에서 입력하면 단어가 입력/수정이 가능하게 구현했다. 이 부분에서 단어를 클릭하고 인풋 필드를 또 한 번 클릭해야 해서 사용성이 떨어지게 된 점은 아쉬웠다.

개발 환경에 맞게 수정된 UI

실제 web에서의 UI

 

✳️ 주요 기능 구경하기

1. 추천 단어 추가

단어를 입력하면 하단에 연관 단어를 보여준다. 추천된 연관 단어를 선택하면 추가할 수 있다. 화살표를 클릭하여 더 많은 단어들을 확인할 수 있다.

 

2. 단어 수정

단어를 선택하고 수정할 수 있다.

 

3. 단어 직접 추가

추가 버튼을 클릭하여 직접 입력한 단어를 추가할 수 있다.

 

4. 단어 색상 수정

단어를 선택하고 우측에서 색상을 선택하면 색상이 변경된다.

 

 

✳️ Mind Storming

👉 GitHub Link

👉 Mind Storming(Web) 직접 사용해보기