본문 바로가기
내일배움캠프/프로젝트

[미니 프로젝트 / 팀소개 웹페이지] S.A

by 노믹 2022. 12. 11.

목차

1. 프로젝트 개요

2. 기획안

- 콘셉트 키워드

-페이지 구성 (와이어프레임)

3. 개발기능 API

4. 프로젝트 관리툴 및 개발환경


1. 프로젝트 개요

< OTD: 오픈 더 도어>

프로젝트명/팀명 오픈 더 도어
프로젝트 유형 미니/단기 프로젝트
프로젝트 내용 팀소개 웹페이지 구현
프로젝트 일정 2022.11.14.(월) ~ 2022.11.17.(목), 총 4일
프로젝트 결과공개 2022.11.18.(금), 시간 미정
프로젝트 투입인력 오픈더도어팀 전원(총 5인)
*이보형(팀장) / 김정민 / 장동규 / 장승윤 / 전규렬

2. 기획안 : 콘셉트 키워드 / 페이지 구성 (와이어프레임)

콘셉트 키워드 - Simple & U and Us

# SImple
심플 이즈 베스트
많은 정보를 노출해 페이지 방문자의 피로도를 높이는 것을 지양함
# U and Us
다른 너와 만난 우리
전체 웹페이지의 디자인적 통일성을 유지하나, 
개인별 팀원 소개 페이지는 팀원 각자의 개성을 반영해 제각기 다른 디자인, 구성으로 구현함

 

페이지 구성 - 팀소개 / 팀원소개 / 프로젝트

https://sites.google.com/view/tsfasfsfsf

 

오픈더도어

 

sites.google.com

 

1) 팀소개

- 오픈더도어 팀소개 사이트의 기본 페이지로 함
- 기본 페이지 내 과도한 정보를 담는 것보다는 카테고리(팀/팀원/프로젝트 소개)를 나눠 정보를 분산
- 내비게이션바를 상단에 배치해 필요한 카테고리의 정보에 쉽게 접근할 수 있도록 함

 

페이지 구성

팀 목표/특징
- 오픈더도어 팀에 대한 주요 정보를 전달함

 1) 페이지 배너 부분에 팀 목표 내용을 작성함
 2) 배너 하단 팀 특징 내용을 작성함

버킷리스트
- 팀 목표를 달성하기 위한 개발팀으로서의 버킷리스트를 작성함

- 달성한 버킷리스트는 체크박스 및 취소선을 통해 표시함  
 

방명록
- 해당 페이지의 방문자 방명록 등록 박스를 통해 팀에 대한 응원글/관심글 등을 남김

- 등록된 방명록은 방명록 등록 박스 하단에 나열됨

 

2) 팀원소개

- 팀원별 사진 간략한 소개를 넣음
- 팀원 사진/간략 소개 부분을 누르면 개인별 팀원 소개 페이지 링크 연결

 

페이지 구성

팀원소개
- 페이지 배너에 팀원소개 페이지에 대한 문구를 넣음

팀원
- 
팀원에 대한 주요 정보를 전달함

 1) 팀명 / 간략한 소개 내용을 작성함
 2) 팀원에 대한 자세한 내용은 링크로 연결한 개인별 팀원 소개 페이지에서 전달함 

 

3) 개인별 팀원 소개 페이지

- 팀원 소개 페이지 내 링크를 통해 연결한 페이지임
- 개인별 팀원에 대한 자세한 소개 내용을 전달함
- 팀원 각자의 개성을 반영해 제각기 다른 디자인, 구성으로 구현

 

페이지 구성 (필수 포함 내용)

1. 자신에 대한 설명 및 MBTI

2. 객관적으로 살펴본 자신의 장점

3. 협업을 하는 과정에서의 자신의 스타일

4. 블로그 주소

 

4) 프로젝트

- 프로젝트 팀원별 사진 간략한 소개를 넣음
- 팀원 사진/간략 소개 부분을 누르면 팀원 개인 소개 페이지 링크 연결

 

페이지 구성

프로젝트
- 페이지 배너에 프로젝트 소개 페이지에 대한 문구를 넣음

프로젝트 내용
- 프로젝트 진행 내용
에 대한 정보를 전달함

 1) 프로젝트 개요
 2) 프로젝트 개발인원들의 역할
 3) 구현된 API와 사용 기술
 4) 데이터베이스 구조

- '글 접기 기능'을 이용해 'Simple'이라는 페이지 콘셉트를 유지함 

 

3. 개발기능 API

페이지 구분 기능 서버/클라이언트 담당자
팀소개





페이지 디자인 로고 디자인 클라이언트 장승윤
내비게이션 바 디자인 / 링크 클라이언트
배너(팀 목표) 디자인 클라이언트
팀 특징 구획 디자인 클라이언트
버킷리스트 구획 디자인 클라이언트
방명록 구획 디자인 클라이언트
버킷리스트 버킷리스트 등록 서버 김정민
버킷리스트 수정 서버
버킷리스트 삭제 서버
버킷리스트 조회 서버
버킷 박스 체크 클라이언트
버킷 박스 체크 해제 클라이언트
방명록 방명록 등록(C) 서버 이보형
방명록 조회(R) 서버
방명록 수정(U) 서버
방명록 삭제(D) 서버
입력내용이 없는 경우 경고창 클라이언트
방명록 등록 박스 디자인 클라이언트
등록된 방명록 글 목록 디자인 클라이언트
팀원소개 페이지 디자인 배너 디자인 클라이언트 전규렬
팀원 소개 멤버별 소개 카드(기본소개) 디자인 클라이언트
팀원 사진 / 소개글 삽입 클라이언트
개인별 상세 팀원 소개 페이지 이동 링크 클라이언트
프로젝트 페이지 디자인 배너 디자인 클라이언트 장동규
글 접기 기능 클라이언트  
프로젝트 이미지 삽입 클라이언트  
프로젝트 소개 내용 삽입 클라이언트  
개인별 팀원소개 추후 작성 예정 - - 팀원 전원