[코드스테이츠 PMB 14기] 알로 - 위클리 과제(3)

지난주에는 알로의 '회의 기능'을 MVP 기획해봤습니다. 이번주에는 해당 기획을 구체화합니다. 코드스테이츠에서 제공하는 가이드를 따라보겠습니다.

 

먼저 첫 번째는 기능 정의입니다.

 

1. 시나리오 상, 서비스 컨셉 상 필요한 기능들 모두 리스트업
   • 솔루션을 위해 세부적으로 어떤 기능이 필요한지
   • 각각의 기능은 어떤 목적을 해결하기 위한 것인지
2. 유사한 기능들끼리 그룹핑
3. 각각 기능들과 그룹 간 중요도를 1~9로 표시
4. 각각 기능들에 대한 정의 / 필요한 내용 & 컨텐츠에 대한 설명 작성
5. 우선순위가 높은 기능부터 작성합니다.

 

지난주 수행한 알로 회의 기능 러프 스케치

 

구분	서비스(메뉴)	필요 기능	기능 설명	레퍼런스	우선순위
사용자	캔버스 내	회의 시작 버튼	해당 버튼을 클릭하면 회의 시작 팝업이 등장한다		1
	회의 시작 팝업	날짜 및 시간 표시	오늘 날짜와 시간을 표시한다		3
		캔버스에 참여 중인 인원	현재 캔버스에 참여 중인 멤버의 프로필 사진을 보여준다		2
		시작 버튼	회의를 시작한다		1
	회의 중 화면	회의 집중 UI	기존 캔버스에서 회의에 필요한 기능만 활성화하고 이외의 기능은 비활성화한다		1
		회의 중 버튼	해당 버튼을 클릭하면 회의 중 팝업이 등장한다		1
	회의 중 팝업	날짜 및 시간 표시	오늘 날짜와 시간을 표시한다		3
		회의에 참여 중인 인원	현재 회의에 참여 중인 멤버의 프로필 사진을 보여준다		2
		회의 경과 시간	회의를 시작하고 경과한 시간을 보여준다		3
		마무리 버튼	회의를 마무리한다		1
	회의 마무리 팝업	날짜 및 시간 표시	오늘 날짜와 시간을 표시한다		2
		회의에 참여한 인원	회의에 참여했던 멤버의 프로필 사진을 보여준다		2
		회의 진행 시간	회의를 진행한 시간을 보여준다		3
		확인 버튼	해당 팝업을 닫고 프로젝트 페이지로 넘어간다		1

 

---

 

다음은 해당 기능의 정보(계층)구조도 (IA, Information Architecture) 설계입니다.

 

분류	NO	1st depth	2nd depth	3nd depth	4th depth	page id	form	component	description	data
main	0.0	프로젝트				0000-0000-01	페이지	- 프로젝트 생성 버튼 - 프로젝트 선택 버튼		- 프로젝트 정보
하위 페이지	1.1		캔버스			0000-0000-02	페이지	- 캔버스 추가 버튼 - 캔버스 선택 버튼		- 캔버스 정보
	2.1			캔버스 내부		0000-0000-03	페이지	- 회의 시작 버튼 - 회의 시작 팝업	회의 시작 버튼 클릭 시 회의 시작 팝업 생성
	2.1.1				회의 중	0000-0000-04	새 창	- 회의 중 버튼 - 회의 중 팝업	회의 중 버튼 클릭 시 회의 중 팝업 생성
	2.2			회의 마무리		0000-0000-05	팝업	- 회의 마무리 확인 버튼		- 회의 정보

 

---

 

다음으로 화면 디자인(와이어프레임)입니다. 저번주에 그려놓은 것을 참고하여 더욱 적합한 와이어프레임의 형태로 다시 그려보고 흐름을 표시하겠습니다.

 

총 5개의 페이지를 와이어프레임으로 제작했습니다.

 

 

흐름은 다음과 같습니다.

 

와이어프레임 흐름

---

 

마지막으로 스토리보드입니다.

 

회의 시작 스토리보드

회의 중 스토리보드

회의 마무리 스토리보드