문제의식
'학습 정리를 더 쉽게 할 수 없을까?' 팀원들의 공통적인 문제 상황에서부터 아이디어가 시작되었습니다. 학습 정리가 어려워지는 핵심 이유는 정리한 내용 또는 문서의 “구조화”가 어렵다는 점이었습니다.
해결방식 & 서비스 핵심컨셉
사용자에게 직관적이고 쉬운 인터페이스를 제공하여 Top-down 방식으로 구조를 쉽게 그려나갈 수 있는 방식을 떠올렸습니다. “세포 분열”과 같이 큰 노드에서 뻗어나가는 방식의 구조화를 핵심 아이디어로 떠올렸습니다.
또한 학습과 문서화를 함께하는 상황이 빈번함을 고려했습니다. 협업도 가능하도록 동시 접근, 동시 편집이 가능한 서비스를 목표하였습니다.
사용자는 서비스를 시작했을 때 자동 생성된 루트 노드**(Entry Node)
를 통해서 새로운 노드(Node)
를 생성할 수 있다. 이때 새로운 노드의 집합 공간(Space)
을 생성할 수 있다(디렉토리와 유사하다). 각 노드의 집합은 트리의 형태로 계층적인 구조(Context Tree)
**를 가진다. 사용자는 노드 집합을 구성하는 공간 ****1개만 볼 수 있다. 만약 다른 공간으로 이동할 경우, 해당 공간만 볼 수 있도록 View가 변경된다.
Context Tree | Entry Node를 루트 노드로 가지며, (노드의 집합을 대표하는) Context Root Node를 구성단위로 가지는 Tree |
---|---|
Space | Context Tree에서 사용자가 위치한 곳을 기준으로 Node들의 연결 상태가 표현되는 작업공간 |
Entry Node | 사용자의 엔트리 Context Node |
Context Node | 디렉터리 역할을 하는 노드 |
Head Node | Space를 대표하는 노드 |
Content Node | 2차원 공간(Space)에 자유롭게 배치할 수 있는 독립적인 콘텐츠 단위 |
Node | Context Node 혹은 Content Node |
Note | 노션과 같이 텍스트 에디터를 통해 작성할 수 있는 문서. (milkdown 사용 예정) |
Editor | 노트를 편집하는 페이지 |
Type Palette | 노드를 생성할 때 드롭하면 뜨는 노트 타입 메뉴. |
Context Menu | 노드 타입을 변경하거나 삭제하기 위해 사용자가 가능한 액션들을 확인하는 메뉴. |
Sub Space Node | Space 내에서 보여지는 하위 Space 진입 노드 |
Gooey Animation | 슬라임같이 느껴지는 애니메이션을 부르는 통상적인 용어 |