에디터 살펴보기
에디터는 도큐먼트를 불러와서 작업을 할 수 있는 장소입니다.
에디터는 아래의 네 가지 영역으로 구성되어 있어요.
1. 상단바
- 현재 편집 중인 도큐먼트의 제목, 협업 정보, 프로덕트 요구사항을 확인할 수 있습니다.
- 도큐먼트 데이터를 다양한 방식으로 확인할 수 있는 ‘뷰 전환 버튼’이 있습니다.
- 현재는 '정보구조도 뷰'와 '화면흐름도 뷰'를 제공합니다.
- 뷰에 대한 자세한 내용은 👉 어떤 흐름으로 설계하나요? 페이지를 참고해주세요.
2. 캔버스
- 도큐먼트의 중심 작업 공간으로, 제품 기획 구조를 시각적으로 구성하는 공간입니다.
- 노드(Node) 와 엣지(Edge) 를 이용해 화면 단위를 만들고, 흐름을 연결할 수 있습니다.
- 자세한 구성 방식은 👉 어떤 흐름으로 설계하나요? 페이지를 참고해주세요.
3. 인벤토리
- 도큐먼트 내에 존재하는 모든 아이템을 한눈에 정리하는 리스트이자 저장소입니다.
- 현재 캔버스의 계층 구조를 한눈에 볼 수 있습니다.
- 아이템은 인터페이스(Interface) 와 인포메이션(Information) 으로 구분됩니다.
4. 툴바
- 화면 구성과 데이터 편집을 빠르게 도와주는 도구 모음입니다.
- 노드 생성, 데이터 정렬, 추후 AI 기능 접근도 이곳에서 이루어집니다.
툴바의 도구에 대해 소개합니다:
| 기능 | 설명 |
|---|---|
| 패닝 / 셀렉트 전환 | 캔버스를 드래그해서 이동하거나 개별 요소를 선택할 수 있어요. |
| 레이아웃 정렬 | 노드를 트리 구조에 맞게 자동으로 정렬합니다. |
| 뷰포트 맞추기 | 전체 노드를 한눈에 볼 수 있도록 화면을 자동으로 조정합니다. |
| 노드 펴기/접기 | 모든 노드를 한 번에 펼치거나 접을 수 있습니다. |
| Manyfast AI | 프로덕트 요구사항을 기반으로 정보구조도 노드를 빠르게 생성할 수 있는 기능입니다. |
| 인터페이스 아이콘 | 각 인터페이스 유형(페이지, 모달, 섹션, 컴포넌트)의 노드를 바로 캔버스에 생성할 수 있습니다. |
※ 현재는 AI 자동화 기능은 지원되지 않으며, 5월 중 업데이트를 예정하고 있습니다.