8월에 열린 Junction Asia 2022 해커톤에 디자이너로 참여하여 팀원들과 함께 마인드맵 툴을 개발했다.
짧은 시간 안에 개발해야 하는 해커톤 특성상 많은 기능을 담기보단 핵심 기능을 잘 보여줄 수 있는 방향으로 진행했다.
개발 기간 : 2022.08.19 ~ 2022.08.21
✳️ 어떤 것을 만들까
Mind Storming의 키워드는 아래와 같다.
- 실시간 협업
여러 명이 실시간으로 협업하며 사용할 수 있도록 즉각적으로 생성하고 수정된 사항이 반영되어야 한다. - 마인드 맵
브레인스토밍을 할 수 있는 좋은 방법으로 마인드 맵 방식을 적용한다. - 연관 단어 추천
단어들을 이어나갈 때 자신이 떠올린 단어뿐만 아니라 유사된 단어를 추천해주어 더 쉽게 아이디어를 떠올릴 수 있게 한다.
✳️ 기능과 UI 구성하기
위의 핵심 기능을 기반으로 기존의 마인드맵 툴을 리서치했다. 마인드 맵 툴뿐만 아니라 브레인스토밍에 사용되는 화이트보드 협업 툴 등 다양한 협업 툴을 레퍼런스로 사용했다. 그리고 필수적인 기능들을 아래와 같이 추렸다.
- 배율 조절(확대/축소)
- 단어 추가/수정
- 연관 단어 리스트(추가 가능한)
- 컬러 변경
- 실행 취소/되돌리기
그리고 위의 기능을 담은 기본적인 UI 구성을 마치고 개발자에게 전달하였다.
✳️ 구현하기
개발 시간이 촉박하여 실행 취소/되돌리기 기능은 구현하기 어려울 것 같아 제외하기로 하였다. 기존에는 단어를 추가하거나 수정할 때 단어가 있는 박스에서 직접 입력이 가능하게 설계했는데 이것 또한 시간 내에 구현이 어려울 것 같아 따로 인풋 필드를 놓고 거기에서 입력하면 단어가 입력/수정이 가능하게 구현했다. 이 부분에서 단어를 클릭하고 인풋 필드를 또 한 번 클릭해야 해서 사용성이 떨어지게 된 점은 아쉬웠다.
✳️ 주요 기능 구경하기
1. 추천 단어 추가
단어를 입력하면 하단에 연관 단어를 보여준다. 추천된 연관 단어를 선택하면 추가할 수 있다. 화살표를 클릭하여 더 많은 단어들을 확인할 수 있다.
2. 단어 수정
단어를 선택하고 수정할 수 있다.
3. 단어 직접 추가
추가 버튼을 클릭하여 직접 입력한 단어를 추가할 수 있다.
4. 단어 색상 수정
단어를 선택하고 우측에서 색상을 선택하면 색상이 변경된다.