[메모 트리 프로젝트] 2. 설계 - 와이어프레임, 요구 사항

프로젝트 글 목차

2021.03.13 - [메모 트리 프로젝트] 1. 기획

2021.03.13 - [메모 트리 프로젝트] 2. 설계 - 와이어프레임, 요구 사항

2021.03.14 - [메모 트리 프로젝트] 3. 설계 - 객체 모델링

2021.03.18 - [메모 트리 프로젝트] 4. UI 구현 - 1

2021.03.19 - [메모 트리 프로젝트] 5. UI 구현 - 2

2021.03.20 - [메모 트리 프로젝트] 6. 나머지 프론트엔드 작업

2021.03.20 - [메모 트리 프로젝트] 7. 배포 및 후기

---

설계

기획, 설계 과정에서 번거로운 절차는 기간이 일주일이니까 최대한 생략하는게 낫겠다고 판단 했다.

맨 땅에서 A 부터 Z까지 개발해야 하므로 최대한의 시간 절약이 필요하니까 라는 변명!

 

차후 편한 개발을 위해서 필수적인 와이어프레임과 요구 사항, 대략적인 모델링만 정리했다.

 

 

---

와이어프레임

이번 프로젝트는 단 하나의 페이지만 존재한다.

팝업 같은 기능에 대한 프레임은 생략하여 간단하게 블록으로 정리했다.

 

-----------------------------------------------------
|1. logo | 2. title          | 3. share | 4. search |
|---------------------------------------------------|
|  5. item                                          |
| --------     --------     --------     --------   |
| | item |-----| item |-----| item |-----| item |   |
| --------     --------  |  --------     --------   |
|   name                 |                          |
|                        |                          |
|                        |  --------                |
|                        ---| item |  ←-----        |
|                        |  --------       |        |
|                        |             right click, |
| option : line animation|             popup context|
|                        |  --------       ↓        |
|                        ---| item | -context---    |
|                           --------  | add    |    |
|                                     | remove |    |
| --------     --------     --------  | rename |    |
| | item |-----| item |-----| item |  |   .    |    |
| --------  |  --------     --------  |   .    |    |
|           |                         ----------    |
|           |  file                                 |
|           |  --------                             |
|           ---| item |  ← left click, popup content|
|              --------                             |
|                                                   |
-----------------------------------------------------

1. logo : 수정 불가
2. title : 사용자 수정 가능
3. share : 공유 버튼?
4. search : 클릭 시 호버 또는 placeholder로 텍스트 입력 시 즉시 검색?
5. item : 각 아이템에 해당되는 영역. 가로, 세로 스크롤 발생 가능성이 있음!

 

 

---

요구 사항

번호 뒤에 *가 표기된 부분은 다른 모든 사항이 완성된 후 추가적으로 고려하는 사항이다.

 

1 . 사용자가 임의로 타이틀을 설정할 수 있다.

  - 타이틀 텍스트를 보더 라인이 없는 input 태그로 설정

 

2 . 윈도우 디렉토리 구조처럼 사용자는 아이템 또는 빈 영역을 우클릭 하여 컨텍스트 메뉴를 띄울 수 있다.

  - 실행 컨텍스트에서는 아이템 생성, 이름 변경, 삭제가 가능하다.

 

3. 폴더의 하위 항목에 아이템을 추가할 수 있다.

  - 객체 모델 설정과 하위 아이템이 추가될 때, 렌더링 영역 설정에 주의가 필요함. 

 

4. 작성한 메모 트리를 다음에도 확인할 수 있다.

  - 브라우저 내부에 로컬 스토리지로 저장

 

5*. 다른 사람에게 내 메모 트리를 공유할 수 있다.

  - DB 및 배포 선행. DB 대신 json 파일 가져오기, 내보내기 등으로 가능하긴 함!

 

6*. 키워드 검색을 통해 원하는 이름이 포함된 아이템을 찾을 수 있다.

  - 부분 문자열로 탐색? 자음 검색은 스킵

 

7*. 마우스 드래그로 아이템 이동이 가능하다.

  - 드래그 했을 때, 시각적인 효과도 고려해야 함.

 

8*. 나이트 모드 지원

  - filter로 적절하게 반전하기 보다 10, 11번 사항을 고려하여 처리

 

9*. 바디 영역의 크기 조절 기능

  - 폴더 구조의 깊이 또는 하나의 폴더에 많은 파일로 발생되는 스크롤을 완화할 수 있으므로 최대한 구현

 

10*. 배경 영역의 색상 설정

 

11*. 아이템 아이콘 및 이름의 색상 설정

 

12*. 선 그리기 애니메이션

  - 실행 시 전체 구조를 한 번에 로드하므로 불필요한 기능이지만 시각적인 즐거움을 줄 수 있음.

 

13*. 아이템 비공개 설정

  - 공유 기능과 함께 묶어서 처리하면 좋을듯

 

기간 내에 꼭 구현해야 하는 기능은 1 ~ 4 번이며, 추가적인 기능은 할 수 있을까...? 걱정이 되긴 한다.

 

---

여기까지 오고 나니까 처음에 생각한 개요에 약간 오류가 있음을 발견했다.