[세미 프로젝트] 프로젝트 주제 선정 및 설계와 구현 과정을 지나오며....

안녕하세요.
https://blog.naver.com/sysysy0302 여니입니다 :)

 

https://rebel-diplodocus-7f4.notion.site/5bc92c270c774e4693d0bb9a4769e6c9?v=0f02683839a24de6997a3024821ca58d&pvs=4

김소연 이력서 및 포트폴리오

위의 링크를 통해 세미 프로젝트 외에도 파이널 프로젝트 포트폴리오 내용을 확인하실 수 있답니다.

 

>>DAY1. SNS 소셜네트워크, 호텔, 쇼핑몰, 공항 등 중에서 주제 선정

>>DAY2. 유사사이트 장단점 파악(서울동물복지지원센터, 도그마루, WEYEAR) 

         -> 페이지 난잡함 수정, 기능 업그레이드, 커뮤니티(실시간 문의)

         -> 기부 페이지(강아지 발바닥 버튼 누르면 -> "현재 ?분과 함께 기부하고 계십니다.")

         -> 로그인 기능

         -> 회원 분류(기부자 VS NO기부자)

         -> 애견용품 중고장터

         -> 입양후기, 중고, 게시글 조회 (글작성할때 '카테고리를 선택'해야만 작성가능 등)

         -> 홈페이지 메인(강아지가 달려와서 메뉴가 뜨도록)

* PPT 작성

<조이름, 조원이름>    

 

<기획의도 - 1.생명존중, 2.후원시스템을 통해 대리만족, 3.사회적비용절감 >

 

<유사사이트 분석(특징, 장단점) - 

(장점) 서울시 상품권 제로페이-계좌연동(서울동물복지센터) 

실시간 채팅, 카카오톡 상담 가능(오르카홈) ; 우리조에서 이를 이용하겠다.

    

(단점) 기본적인 커뮤니티가 없다.(도그마루)

후원시스템의 부재.(도그마루)>

 

[도그마루]

(장점) 카테고리 메뉴 분류가 자세하다.

(단점) 너무 상세해서 원하는 메뉴를 찾기 힘들다.

          검색 기능 미약

 

[서울동물복지지원센터]

(장점) 미디어 컨텐츠가 많아 사용자에게 어필가능.

(단점) 카테고리 조회가 자세하지 않다. 

-> 대,중,소형으로 유기견 종 검색할 수 있도록 변경

 

[위이어]

(장점) 후원금 시스템 구축이 상세히 되어있다.(수치화)

(단점) 정확히 어디에 후원이 이루어지는지 알기 어렵다.(명확성이 떨어진다.)

-> 구체화 필요함

<클라이언트 요구사항 분석(사용자/관리자) - USECASE DIAGRAM>

<구현할 목표 및 기능, 세부 기능, 팀원들 업무 분담>

<개발환경>

<작업일정표>

* 구성 LIST 

1. 회원가입 - 설문?, 서약서(책임감), 예쁘면 가능

  2. 게시판 - 카테고리 (아나바다/ 입양후기/ 자유게시판) (정렬:ORDER BY)

  3. 로그인 - 계정연동?

  4. 후원란 - 후원금노출유무

  5. 유기견 목록 - 데려온 유기견(종/이름/성별/나이)

  6. 시설안내, 오시는길 

  7. 홈페이지 메인 - 강아지가 달려와서 메뉴가 등장

  8. 애견 중고 물품 나눔 및 판매 - 순수 나눔 VS 판매 및 구매 관리

  9. 관리자 페이지 - 공지올리기, 문의관리, 후기(게시판)관리, 회원관리

  + 운송조회(다른 말 생각해보기)

>>DAY3. PPT & 유스케이스 다이어그램 작업

 

* 사용자 *

> 로그인 / 회원가입(서약서) - 로그인, 로그아웃, 회원가입, 소셜로그인

> 마이페이지 - 후원 내역조회, 문의내역, 개인정보수정, 회원관리, 회원탈퇴, 내가쓴 게시글, 최근에 본 유기견(LOVE,개좋아), 개인쪽지함(아나바다)

> 고객센터 - 1대1 상담, FAQ

> 유기견 목록 페이지 - 유기견 조회(LOVE,개좋아), 유기견 검색, 입양일 선택, 입양신청

> 게시판 - 게시글 등록, 게시글 수정/삭제, 게시글 검색, 게시글 전체 조회, 게시글 상세조회, 카테고리 선택, 신고, 공지사항

> 후원 - 후원신청, 후원 현황조회

* 관리자 *

> 회원관리 

> 후원관리

* 시스템 *

> 게시판 관리 - 공지사항 / 이벤트 등록, 게시글 수정 / 삭제

> 고객센터 관리 - 고객센터(1대1 상담)

> 현황관리 / 배송관리

> 후원관리

+ 메뉴관리

>>DAY4. UI 설계 보고서 작성(OVENAPP 작업)

 

메인 페이지

래퍼런스 :  카카오모빌리티(애니메이션), 월드쉐어(컨텐츠)

- 홈페이지 로딩 시 로고 애니메이션(아래 > 위) + 크기가 줄어들면서 네비바로 이동

- 현재 유기견 수(숫자 카운트 기능) 

- 뉴스기사(통계 자료) & 유튜브

- 후원 현황

- 유기견 사진들

- 간략한 소개글

1. 로그인

2. 회원가입

3. 컨텐츠

4. 네비바

 

서브 페이지

1. 마이페이지(개인정보수정, 회원탈퇴, 내가 쓴 게시글, 최근 본 유기견, 개인 쪽지함, 후원내역, 문의내역)

2. 유기견 페이지(목록, 입양)

3. 게시판 페이지(게시판 목록, 게시글 등록, 게시글 신고)

4. 후원 페이지(후훤메인, 후원현황, 후원신청)

5. 고객센터(1:1 상담신청, FAQ)

 

=======================================================================================

 

관리자 페이지

1.  회원관리

2. 게시판 관리(수정/삭제, 공지사항, 이벤트관리)

3. 유기견관리(현황/배송 관련 페이지)

4. 고객센터관리

5. 후원관리(후원신청 조회내역) 

<<메인 페이지>>

1. 유기견숫자

2. 시설소개

3. 뉴스 및 영상 통계 (위 기사 아래 영상) (출처 명시)

4. 입양되서 지내고 있는 유기견들

5. 후원

<Ment>

 

<<푸터>>

 

+ 추가 아이디어

메인페이지 

- 로그인 팝업창

- 마이페이지 팝업 슬라이드

 

+ 해야할일

>>DAY5-6. UI 설계 보고서 작성(OVENAPP 작업)

1. 서브페이지 및 나머지 추가 페이지 작업

2. 피피티 작업 예상 & 구상

<<피피티 목차>>

1. 메인페이지 - 로그인 & 회원가입

2. 마이페이지 - 개인정보수정, 회원탈퇴, 내가쓴게시글, 찜, 배송현황/주문내역, 후원내역, 문의내역, 개인쪽지함 

3. 서브페이지 - 후원, 게시판, 고객센터, 개 리스트 (기능설명)

4. 관리자페이지 (?)

>>DAY7~10. DB테이블 계획 및 설계 보고서

- 테이블 지정할 항목 의논 및 ERD 클라우드 작성

 

[임시 ERD 항목]

1. MEMBER 회원정보 - 회원번호(PK)/회원아이디/회원비밀번호/회원명/전화번호/이메일/주소/회원가입일/결제정보(MODAL창,취소시 이전창 뜨게)/STATUS

 

2. BOARD 게시판 - 게시글번호(PK)/게시글내용/작성자회원번호/카테고리번호(외래키,JOIN)/작성일/조회수/첨부파일/STATUS

 

3. 댓글 - 댓글번호(PK)/댓글내용/참조하는게시글번호(외래키)/작성자회원번호/작성일/STATUS

 

4. 문의 - 작성자회원번호(FK)/글번호(PK)/문의제목/문의내용/작성일/첨부파일/STATUS

 

5. 신고 - 글번호(PK)/작성자회원번호/첨부파일/신고제목/신고내용/작성일/STATUS

 

6. 카테고리 - 자유게시판(FK1)/후원게시판(FK2)/입양후기게시판(FK3)/STATUS

 

7. 모든쪽지함 - 작성자회원번호(FK)/쪽지제목/쪽지내용/수신날짜/STATUS

 

8. 후원 - 후원번호/회원번호(FK)/금액/날짜/후원종류(정기OR일시 후원자 구분)/STATUS

 

9. 첨부파일(사진 가능) - 작성자용(게시글용,문의용) 파일명/파일번호/참조게시글번호/업로드일/저장폴더경로/STATUS

 

10. 마이페이지(외래키) (NO붙여서 상세목록으로 세분화) ==카테고리 분류처럼 생각 - 개인쪽지함/쪽지고유번호/게시글수/문의내역/후원내역/신고내역/STATUS

 

11. 입양동물정보(관리자전용) - 입양동물관련사진/동물번호/동물이름/동물종/동물나이/동물성별/분양가/구조일/STATUS

 

12. 입양글 - 글번호(PK)/동물번호(JOIN)/게시글내용/첨부파일

 

13. 동물첨부파일 - 동물번호/사진경로/동물파일명

 

14. 배송관련(구매확정 날짜기준)/STATUS - 보류

 

15. 후원등급

>>DAY7. 

- ERD 클라우드 팀으로 구성 및 Table기술서 만들기

 

<ovenapp 보고서 피드백>(23.06.28)

1. 배송현황관리 어떻게?

+ 지도 api 활용하면 어떨까? / 배송대기 배송중 배송완료 표기

=> 배민 배송현황처럼 구현

 

2. 관리자페이지

+ 유기견관리/배송관리/후원관리/고객센터관리 페이지 추가(ovenapp) 

[ERD 재구성]

 

1.회원정보 - 회원고유번호(PK)/회원명/회원아이디/회원비밀번호/전화번호/이메일/주소/회원가입일/결제정보/후원등급/상태정보

 

2.마이페이지 - 회원고유번호(PK)/후원번호(PK)/글고유번호(PK)/쪽지고유번호(PK)/신고글고유번호(PK)/게시글고유번호(PK)

 

3.게시판 - 게시글고유번호(PK)/회원고유번호(FK)/파일고유번호/게시글내용/작성일/조회수/상태정보/카테고리

 

4.댓글 - 댓글고유번호(PK)/게시글고유번호(FK)/회원고유번호/카테고리번호/댓글내용/작성일/상태정보

 

5.신고 - 신고글고유번호(PK)/게시글고유번호(FK)/회원고유번호(FK)/카테고리번호/신고제목/신고내용/작성일

 

6.후원 - 후원번호(PK)/회원고유번호(FK)/금액/날짜/후원종류

 

7.전체문의내역 - 문의고유번호(PK)/회원고유번호(FK)/문의제목/문의내용/작성일/첨부파일/상태정보

 

8.전체쪽지함 - 쪽지고유번호(PK)/회원고유번호(FK)/쪽지제목/쪽지내용/수신날짜/상태정보/수신자회원번호/발신자회원번호

 

9.파일카테고리 - 카테고리번호(PK)/파일종류

 

10.첨부파일 - 파일고유번호(PK)/카테고리번호(FK)/파일명/저장폴더경로/상태정보

 

11.분양상세정보 - 분양글고유번호(PK)/동물번호(FK)/첨부파일고유번호(FK)/게시글내용

 

12.보호동물정보 - 동물번호(PK)/동물이름/동물종류/동물나이/동물성별/분양가/구조일/상태정보

 

13.배송 - 배송고유번호(PK)/회원고유번호(FK)/동물번호(FK)/상태정보

>>DAY8. 

ERDCloud 다듬기 및 최종 작성 , Table기술서 수정 및 최종 작성, EDR Table기술서 PPT MAKE

>>DAY9.

EDR Table기술서 PPT 제출, 개인역할분담 및 총 일자별 기획 날짜 정하기

 

[개별 역할 분담]

※ 정택 왈 : 지.켜.보.고.있.다. 양 적다고 놀지말고 빨리 끝난 사람은 딴사람 도와주자! 

 

* 통일해야할 것 : 폰트, 패딩, 코드줄맞춤잘하기(서로 합치기 편하게)

* 공통 css : 배경(outer 좌우 1300px),

  RGB(240,240,240),

  폰트(한글) : https://fonts.google.com/specimen/IBM+Plex+Sans+KR?subset=korean¬o.script=Kore

  폰트(영어) : https://fonts.google.com/specimen/Karla

<조원1>

마이페이지 - 9페이지

관리자페이지 - 6페이지 (글등록 빼고)

 

<조원2>

게시판 - 3+1 + 1(글등록 뻬고)

메인페이지 1(2~3분량)

 

<나>

로그인 - 회원가입 5페이지

FAQ - 3 + 1(1대1 상담 빼고)

 

<조원4>

개리스트 - 4페이지(결제완료 알림창까지 해야함) + 1상세페이지 나중에(틀만 만들어놓던지하기)

푸터 헤더

 

<조원5>

후원 - 3페이지(결제완료 알림창까지 해야함)

6월 30일 금요일 ~7월 5일 수요일까지 (최대한 각 HTML마무리)

7월 6일 목요일~ 7월 12일 수요일 (테이블 구현 및 기능 구현)

7월 13일 목요일~ 7월 18일 화요일 (오류 수정 및 애니메이션 구현)

7월 18일 화요일 ~ 7월 20일 목요일 (피피티 및 발표자료 준비)

>>DAY10~14

(DAY10~개인역할 분담 파트 HTML 작업)

(DAY12 - 각자 완성된 HTML 합치기 작업)

(DAY13 - 미완성 HTML 마무리, ERD SQL화 작업, 메인페이지 구성 사진 및 뉴스기사&영상 찾아 선정) 

(DAY14~ - ERD 수정, 기능구현 역할분담, 폴더명 통일하기 회의)

 

>>DAY15~

개인역할 분담 파트 기능구현 작업

 

<프로젝트명: 7H_The_Town_Project> ☆대소문자, 낙타표기법 구분☆

.settings  sql  src  WebContent

 

common member pet delivery board getThePet postAll donation

 

[폴더별 model-vo]

- member - member membershipTier  조원1

 

-pet - pet   

 delivery - delivery   나

 

- board -   board reply report FAQ / getThePet attachment fileCategory 

  조원2 / 조원4

 

- postAll - postAll

  donation - donation  조원5

 

이 해당 메모는 모두 제가 기록하며, 함께 회의를 진행시 시각화 하고 정리한 부분을 토대로 DB테이블 작성 혹은 기본 유스케이스 작업 등에 활용할 수 있었습니다.

 

우선적으로 어떤 주제의 홈페이지를 제작할지 곰곰히 함께 생각해보고 사회적인 영향 및 의미 혹은 고객이 사용하기에 필요성과 편리성을 고려하였습니다. 그리고 해당 주제와 비슷하거나 알맞는 주제와 중첩하는 타 사이트를 분석해보며 우리 홈페이지에는 어떤 부분을 더 추가해서 넣거나 다르게 구현하면 좋을지 의논하였습니다.

그리고 해당 홈페이지의 구성하는 요소들 즉, 구현할 기능 목록들을 작성한 뒤, 각 기능별 DB테이블에 필요한 칼럼요소들을 정하였습니다. 어떤 컬럼을 PK값으로 줄 것인지, FK값으로 줄 것인지 이 구상을 천천히 꼼꼼하게 생각해보았습니다. 여기서 잘 구상하고고 나서도 나중에 분명히 수정할 것이 생길수 있어서 그 수정 보완 사항을 최소한으로 줄이고자 노력하였습니다.

+ PK란? : Primary Key라고 부르며, 일반적으로 DB 설계를 할 때 Key라면 보통 PK 를 의미합니다. NOT NULL 조건을 가지고 있고 Unique 성질을 가진 NOT NULL & UNIQUE 제약조건입니다. PK는 테이블당 단 하나의 정의만 할 수 있습니다. 즉, PK로 단 하나의 칼럼이 지정되어 있다면 해당 칼럼의 데이터는 Table 내에서 유일성이 보장됩니다. 따라서 PK는 같은 PK를 갖는 행을 테이블 내에서 고유하게 만듭니다. 다른 테이블과 JOIN할 때 기준 값으로 사용됩니다. PK는 Key값의 성질을 갖기 때문에 일반적인 설계에서도 가장 선호되는 Key 타입입니다.

+ FK란? :  Foreign Key라고 부르며, JOIN 등으로 다른 DB 와의 Relation(연결)을 맺는 경우 다른 테이블의 PK를 참조하는 Column을 FK라고 합니다.

+ 참고 포스팅

https://jins-dev.tistory.com/entry/MySQL-%EC%97%90%EC%84%9C-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-Key-%EC%9D%98-%EC%A0%95%EC%9D%98%EC%99%80-%EC%A2%85%EB%A5%98%EB%93%A4%EC%97%90-%EB%8C%80%ED%95%98%EC%97%AC

 

이후 개인 역할 분담을 통해 각자 UI구성과 기능 구현을 진행하였습니다. 그리고 개인별 기능 구현의 진행 속도 등에 따라 역할 분담을 조정하거나 서로 도왔습니다. (중간에 역량보다 개인의 성실성이 매우 떨어져서 결과물의 양과 질도 떨어지는 분은 나머지 분들이나 조장이 좀 고생했지만....)

이후 기능 구현이 모두 마무리 된 후, 제작한 프로젝트를 함께 TEST하였습니다.
PPT 구성 디자인, 스타일 등은 제가 임의로 셀렉하여 (팀 프로젝트 주제인 홈페이지 느낌과 이질적이지 않는 디자인 선택) 내용을 함께 생각하며 작성하였습니다.

이번 회의 및 설계,구현 기록을 작성하면서 너무 편하고 좋았어서 이후 파이널 프로젝트 때에도 제가 자발적으로 정리하였고 해당 프로젝트의 날짜별 행하였던 회의내용이나 구현 내용을 함께 적으니 일의 진행척도 파악이나 혹은 더 필요한 사항들을 추가적으로 꼼꼼히 추가 및 수정할 수 있어서 좋았던 것 같습니다. 앞으로도 개인 공부 과정과 업무 진행시에 개인적으로 나의 업무 일정 및 기록을 남기고자 합니다.

 

>> 다음 포스팅에서 프로젝트에서 사용했던 코드 및 깃허브 링크를 소개하겠습니다 :)