목차
1. 프로젝트 개요
2. 기획안
- 콘셉트 키워드
- 페이지 구성 (와이어프레임)
3. 개발기능 API
4. 프로젝트 관리툴 및 개발환경
@ 개발 요청서
1. 프로젝트 개요
< OTD : 오픈 더 도어>
대한민국 JavaScript 백엔드 개발의 새시대를 열기 위해 온 그들,
'오픈더도어' 팀을 소개합니다.
| 프로젝트명/팀명 | 오픈 더 도어 |
| 프로젝트 유형 | 미니/단기 프로젝트 |
| 프로젝트 내용 | 팀소개 웹페이지 구현 |
| 프로젝트 일정 | 2022.11.14.(월) ~ 2022.11.17.(목), 총 4일 |
| 프로젝트 결과공개 | 2022.11.18.(금), 시간 미정 |
| 프로젝트 투입인력 | 오픈더도어팀 전원(총 5인) *이보형(팀장) / 김정민 / 장동규 / 장승윤 / 전규렬 |
2. 기획안 : 콘셉트 키워드 / 페이지 구성 (와이어프레임)
[여기서 잠깐] 와이어프레임이란?
- 개념정의 : 와이어프레임이란 선(Wire)으로 틀(Frame)을 잡는다는 뜻
- 설계방법 : 페이지별로 레이아웃을 설계하는 것이 좋음 (화면 간 흐름 파악이 쉽기 때문)
- 포함사항 : ‘내용’, ‘구조’, ‘흐름’, ‘기능’ 등이 포함
- 제작방법 : 제작 방법에 제한은 없지만, 실무에서는 ‘손그림’이나 ‘피피티’같은 가벼운 형식을 선호
*출처 : 와이어프레임과 프로토타입 구별하기(디지털인사이트, 2021.1.11.)
- [콘셉트 키워드] Simple & U and Us
| # SImple 심플 이즈 베스트 |
많은 정보를 노출해 페이지 방문자의 피로도를 높이는 것을 지양함 |
| # U and Us 다른 너와 만난 우리 |
전체 웹페이지의 디자인적 통일성을 유지하나, 개인별 팀원 소개 페이지는 팀원 각자의 개성을 반영해 제각기 다른 디자인, 구성으로 구현함 |
- [페이지 구성] 팀소개 / 팀원소개 / 프로젝트
구글 'sites'를 이용해 와이어프레임을 작성함
오픈더도어
sites.google.com
1) 팀소개
- 오픈더도어 팀소개 사이트의 기본 페이지로 함
- 기본 페이지 내 과도한 정보를 담는 것보다는 카테고리(팀/팀원/프로젝트 소개)를 나눠 정보를 분산
- 내비게이션바를 상단에 배치해 필요한 카테고리의 정보에 쉽게 접근할 수 있도록 함
- 페이지 구성
| 팀 목표/특징 | - 오픈더도어 팀에 대한 주요 정보를 전달함 1) 페이지 배너 부분에 팀 목표 내용을 작성함 2) 배너 하단에 팀 특징 내용을 작성함 |
| 버킷리스트 | - 팀 목표를 달성하기 위한 개발팀으로서의 버킷리스트를 작성함 - 달성한 버킷리스트는 체크박스 및 취소선을 통해 표시함 |
| 방명록 | - 해당 페이지의 방문자가 방명록 등록 박스를 통해 팀에 대한 응원글/관심글 등을 남김 - 등록된 방명록은 방명록 등록 박스 하단에 나열됨 |
2) 팀원소개
- 팀원별 사진과 간략한 소개를 넣음
- 팀원 사진/간략 소개 부분을 누르면 개인별 팀원 소개 페이지로 링크를 연결함
- 페이지 구성
| 팀원소개 | - 페이지 배너에 팀원소개 페이지에 대한 문구를 넣음 |
| 팀원 | - 팀원에 대한 주요 정보를 전달함 1) 팀명 / 간략한 소개 내용을 작성함 2) 팀원에 대한 자세한 내용은 링크로 연결한 개인별 팀원 소개 페이지에서 전달함 |
3) 개인별 팀원 소개 페이지
- 팀원 소개 페이지 내 링크를 통해 연결한 페이지임
- 개인별 팀원에 대한 자세한 소개 내용을 전달함
- 팀원 각자의 개성을 반영해 제각기 다른 디자인, 구성으로 구현함
- 페이지 구성 (필수 포함 내용)
- 자신에 대한 설명 및 MBTI
- 객관적으로 살펴본 자신의 장점
- 협업을 하는 과정에서의 자신의 스타일
- 블로그 주소
4) 프로젝트
- 프로젝트 팀원별 사진과 간략한 소개를 넣음
- 팀원 사진/간략 소개 부분을 누르면 팀원 개인 소개 페이지로 링크를 연결함
- 페이지 구성
| 프로젝트 | - 페이지 배너에 프로젝트 소개 페이지에 대한 문구를 넣음 |
| 프로젝트 내용 | - 프로젝트 진행 내용에 대한 정보를 전달함 1) 프로젝트 개요 2) 프로젝트 개발인원들의 역할 3) 구현된 API와 사용 기술 4) 데이터베이스 구조 - '글 접기 기능'을 이용해 'Simple'이라는 페이지 콘셉트를 유지함 |
3. 개발기능 API
| 페이지 | 구분 | 기능 | 서버/클라이언트 | 담당자 |
| 팀소개 |
페이지 디자인 | 로고 디자인 | 클라이언트 | 장승윤 |
| 내비게이션 바 디자인 / 링크 | 클라이언트 | |||
| 배너(팀 목표) 디자인 | 클라이언트 | |||
| 팀 특징 구획 디자인 | 클라이언트 | |||
| 버킷리스트 구획 디자인 | 클라이언트 | |||
| 방명록 구획 디자인 | 클라이언트 | |||
| 버킷리스트 | 버킷리스트 등록 | 서버 | 김정민 | |
| 버킷리스트 수정 | 서버 | |||
| 버킷리스트 삭제 | 서버 | |||
| 버킷리스트 조회 | 서버 | |||
| 버킷 박스 체크 | 클라이언트 | |||
| 버킷 박스 체크 해제 | 클라이언트 | |||
| 방명록 | 방명록 등록(C) | 서버 | 이보형 | |
| 방명록 조회(R) | 서버 | |||
| 방명록 수정(U) | 서버 | |||
| 방명록 삭제(D) | 서버 | |||
| 입력내용이 없는 경우 경고창 | 클라이언트 | |||
| 방명록 등록 박스 디자인 | 클라이언트 | |||
| 등록된 방명록 글 목록 디자인 | 클라이언트 | |||
| 팀원소개 | 페이지 디자인 | 배너 디자인 | 클라이언트 | 전규렬 |
| 팀원 소개 | 멤버별 소개 카드(기본소개) 디자인 | 클라이언트 | ||
| 팀원 사진 / 소개글 삽입 | 클라이언트 | |||
| 개인별 상세 팀원 소개 페이지 이동 링크 | 클라이언트 | |||
| 프로젝트 | 페이지 디자인 | 배너 디자인 | 클라이언트 | 장동규 |
| 글 접기 기능 | 클라이언트 | |||
| 프로젝트 이미지 삽입 | 클라이언트 | |||
| 프로젝트 소개 내용 삽입 | 클라이언트 | |||
| 개인별 팀원소개 | 추후 작성 예정 | - | - | 팀원 전원 |
4. 프로젝트 관리툴 및 개발환경
| 프로젝트 일정관리 | 지라 |
| 프로젝트 코드관리 | 깃허브 |
| 프로젝트 DB관리 | 몽고DB |
| 프로젝트 서버 | AWS |
@ 개발 요청서
프로젝트 구성 (구현 기능 가이드)
1. 웹 개발을 위한 필수 요소
- 팀원들의 정보를 보여줄 수 있는 페이지를 구현해주세요. (구현 가능한 마크업 및 프로그래밍 언어, 라이브러리 등! HTML CSS Javascript Bootstrap)
- 페이지별로 방명록을 입력받을 수 있는 백엔드를 만들어주세요. (JS Flask MongoDB)
- DB에 저장된 정보들을 사람들에게 보여줄 수 있는 페이지를 만들어주세요. (HTML Css JS Flask MongoDB)
- 프로젝트를 소개하는 문서를 만들어주세요. (개발 인원 및 역할, 프로젝트 소개, 구현 된 api, 사용 된 기술(html, js, python, …), 데이터베이스 구조, etc)
2. 우리 팀만의 웹 개발을 위한 부가 요소 (더 해보고 싶다면!)
- 소개페이지 댓글 기능 (선택)
- 등록 된 게시글 및 댓글의 수정 및 삭제 기능 (선택)
3. 참고사항
- 팀원 소개 페이지는 개인별로 html/css/js를 이용해서 작성해주세요.
- 작성된 파일들을 한 사람이 모아서 다함께 팀 소개 페이지를 작성하고 링크로 팀원소개페이지를 연결해주세요.
- 카톡/이메일 등을 사용해 html/css/js 파일을 보내주세요.
- index.html은 팀 소개 페이지가 됩니다.
- 스타일은 모두가 개성넘치게 할 수도 있고 하나의 통일된 스타일을 만들수도 있습니다.