1. 프로젝트 기간
💻 전체 기간 : 231127 ~ 231227
💻 세부 운영
1. 프로젝트 아이템 및 커뮤니케이션 툴 확정 ~231128
ㄴ Discord, 구글 닥스, 스프레드 시트, 카카오톡
2. 기획서 작성 ~231129
3. 요구사항 정의서 작성 ~231201
4. 테이블 설계서 작성 ~231204
5. 화면 정의서 작성 ~231207
6. 깃허브 세팅 ~231208
7. 코드 초안 마감 ~231220
8. 팀원 상호 피드백 및 디버깅 ~231222
9. 테스트용 데이터 삭제 및 시연용 데이터 INSERT ~231226
10. PPT 작성 및 발표 준비 ~231226
11. 세미 프로젝트 발표 231227
💻 프로젝트 실 운영 기간 : 25일
프로젝트를 진행한 일자마다 노션 데이터베이스를 활용해 작업물과 논의 사항, 회의록 등을 기록해두었다. 그 덕에 이해가 가지 않는 코드가 있거나, 변경 이유 등이 기억나지 않을 때 내가 만든 데이터베이스를 훑어보며 빠르게 해결할 수 있었다.
2. 화면 이미지
** 담당하지 않은 화면의 상세 설명은 생략합니다.
보다 자세한 내용이 궁금하다면, 기획 포스팅을 확인 바랍니다.
2-1. 인덱스
ㄴ 담당 페이지
1. 캐러셀로 사이트 소개 이미지를 롤링하였다.
2-2. 회원가입
ㄴ 담당 페이지
1. 아이디, 이메일, 닉네임은 중복 체크 진행 → 중복 결과를 alert창으로 공유하고, 미중복으로 입력한 데이터를 사용 가능할 경우에는 체크 버튼을 disabled했다.
2. 만약 중복 체크가 완료된 항목을 재입력하고자 한다면 체크 버튼은 다시 활성화된다.
3. 중복 체크를 하지 않고 '올캠퍼스 가입하기' 버튼 클릭 시 alert창으로 중복 체크를 유도한다.
4. 학번, 아이디, 이메일, 비밀번호, 닉네임은 정규표현식으로 데이터 규격을 통일해 관리했다.
5. 비밀번호와 비밀번호 확인란 일치 여부를 체크했다.
6. 약관 동의 여부도 별도로 체크했다.
7. 자바스크립트를 활용해 입력 유효성 체크를 진행했다.
8. 회원가입 완료 시 로그인 페이지 혹은 인덱스로 이동할 수 있게 했다.
2-3. 로그인
ㄴ 담당 페이지
1. 로그인 화면은 아이디/비밀번호 찾기로 이동할 수 있는 링크와 회원가입 버튼을 추가해 미가입자와 가입자 모두 서비스 이용에 불편함이 없도록 했다.
2. 로그인 시 아이디 혹은 비밀번호가 불일치하거나 DB에 존재하지 않을 경우, alert창으로 안내한 후, 다시 로그인 폼으로 이동하게 했으며 마찬가지로 자바스크립트를 활용한 입력 유효성 체크를 했다.
3. 정상 로그인 시 올캠퍼스 메인으로 이동하며 정지 계정의 경우 정지 처분 결과를 안내했다.
2-4. 아이디/비밀번호 찾기
ㄴ 담당 페이지
1. 현재 화면이 아이디 찾기인지 비밀번호 찾기인지 사용자가 직관적으로 알 수 있도록 탭 위에 overline을 주었다.
2. 아이디 찾기 시에는 가입된 이메일을 입력 받으며 자바스크립트를 활용한 입력 유효성 체크가 이루어진다. (미입력 상태에서 아이디 찾기 버튼 클릭 시 alert)
3. 사용자가 이메일 입력 시에 오타를 냈을 수도 있기 때문에, 오기입 사실을 바로 인지할 수 있도록 찾기 결과 창에 입력한 이메일을 바로 표시했다.
4. 비밀번호 찾기 시에는 가입된 아이디와 가입된 이메일을 모두 받았고, 마찬가지로 입력 유효성 체크가 이루어진다.
5. 아이디와 비밀번호가 모두 DB에 저장된 정보와 일치할 때, 비밀번호 찾기 결과를 공유한다.
6. 이때, 도용 방지를 위해 비밀번호의 일부는 보안 처리를 진행했으며 비밀번호 길이가 8~20자로 폭이 긴 편이라 8~12자까지는 5자만 노출/13~20자까지는 8자만 노출되도록 action에서 길이에 따라 가공해 출력하였다.
(이메일 전송의 경우, Spring을 배운 뒤 보다 쉽게 구현할 수 있다는 선생님의 조언에 제외하였다.)
2-5. 메인 & 헤더
ㄴ 담당 페이지
1. 인증/미인증/관리자 모두 가입 시 선택한 소속 학교와 프로필 사진, 닉네임, 아이디 정보를 확인할 수 있다.
2. MY페이지에서 프로필 사진을 등록하지 않는다면 기본 이미지가 노출된다.
3. 인증 회원의 경우 모든 서비스를 이용할 수 있지만, 미인증 회원의 경우 공지사항, FAQ만 확인 가능하다.
4. 또한, 책방 목록의 경우 최신글 기준으로 메인에서 확인이 가능한데, 미인증 회원은 클릭 시 alert창으로 인증이 필요하다는 안내를 받게 된다.
5. 관리자의 경우 헤더(메뉴)에서 관리자 전용 페이지로 진입할 수 있다.
6. HOT 게시글의 경우, 실시간 인기글처럼 현재 조회수가 100 이상인 자유게시판 게시글을 조회수순으로 리스트업했다.
7. FAQ를 제외한 모든 목록의 글제목은 17자 이상인 경우 ...으로 처리되도록 action에서 가공하여 출력했다.
2-6. 책방
ㄴ 담당 페이지
1. 책방 목록의 경우 페이지 처리, 검색 등이 가능하다.
2. 검색의 경우 LIKE 검색으로 교재명과 저자명 2가지 옵션이 가능하며 표시할 게시물이 없을 경우 결과를 안내한다.
3. 판매글 등록 시에는 모든 항목에서 입력 유효성 체크가 이루어지고, alert창으로 미입력 항목에 대한 안내가 이루어진다.
4. <radio> 입력 체크와 파일 첨부 시 사이즈 체크도 추가로 진행했다.
5. DB 상에서 저자(writer) 컬럼의 데이터 규격을 통일하도록, 저자는 한 명만 입력하고 그 이상은 '외 지음' 체크박스를 선택하도록 했다. 컬럼에는 둘을 합쳐 저장했고 글 수정 시에는 substring으로 나누어 미리보기 하도록 했다.
6. 글 작성 시 목록에서 상세글을 확인할 수 있으며, 내가 작성한 글일 경우 수정/삭제/판매 여부 체크 버튼이 노출되고 타인이 작성한 글의 경우 삭제 버튼과 판매 여부 결과만 노출된다.
7. 오픈 카카오톡 URL의 경우 링크가 걸려 있어 클릭 시 바로 이동한다.
8. 판매 여부 체크 시 ajax 통신으로 하나의 페이지 내에서 판매 여부 변경 처리가 이루어지며 alert창으로 변경 결과를 공유한다.
9. 신고 버튼 클릭 시 사용자가 잘못 클릭하였을 경우를 대비해 confirm창으로 의사를 물은 뒤, 확인 시 신고 처리가 진행된다.
10. 단, 사용자가 신중히 게시물 신고를 할 수 있도록 토글 형태로 동작하지 않게 처리했다. 따라서 신고 완료 후 다시 한 번 신고 시 '이미 신고 처리된 게시글'이라는 내용의 alert창으로 안내했다.
11. 수정 시에는 미리보기로 입력한 내용들을 읽어왔다.
12. 또한, 기존 교재 이미지를 그대로 사용하고자 할 경우 파일 선택을 하지 않아도 되도록 교재 이미지 항목을 입력 유효성 체크해서 제외하였다.
13. 삭제 시에는 confirm으로 사용자의 의사를 물은 뒤, 확인 클릭 시 바로 목록으로 이동하도록 했다.
2-7. MY페이지
2-8. 시간표
2-9. 학점 계산기
2-10. 강의평
2-11. 자유게시판
2-12. 관리자
2-13. 서비스 이용약관
3. 역할 분담
4. 발표
4-1. 발표 자료(PPT)
내가 담당한 산출물이므로 일부 페이지를 공유한다.
💻 총 64p
💻 구역 구분
1. 표지 및 인덱스 1~2p
2. 프로젝트 개요 3~4p
3. 요구사항 정의서 5~8p
4. 테이블 설계서 9~25p
5. ERD 26p
6. 개발 환경 27p
7. 프로젝트 시연 28~62p
8. 역할 분담 63p
9. 마지막 장표 64p
💻 자료
템플릿을 만드는 것 외에 프로젝트 개요 가공 및 발표 순서에 맞게 프로젝트 시안 나열 순서를 재구성하였고, 각 기능을 담당한 팀원들에게 강조하고 싶은 구현 포인트를 전달 받아 PPT에 얹기 좋게 가공하는 작업을 진행하였다.
4-2. 피드백
깔끔하고 내용이 이해가 잘 되었음. 외부 라이브러리를 넣으면 좀 더 서비스 구현이 잘 되었을 듯. 하지만 MVC 패턴과 CRUD 연습이 주이기 때문에 이 정도면 훌륭한 결과물이라고 판단. 기획서에 작성한 내용 대부분을 구현하였다는 점이 칭찬할 만하고, 다른 학생들의 세미 프로젝트 참고용 자료가 될 듯함. 벤치마킹하려는 사이트가 명확한 덕에 분석이 잘 된 느낌을 받음.
4-3. 후일담
1조라 제일 먼저 발표를 했는데, 선생님께서 극찬을 해주셔서 기뻤다. 발표를 담당한 팀원들이 스크립트를 짜고 로그인할 ID를 등급별로 지정해 시연 시 버벅거리지 않도록 잘 준비한 덕분이라고 생각한다.
발표자가 자신이 구현한 기능을 제대로 이해할 수 있도록 기능 설명을 공유하자고 주장했는데, 그 덕에 팀원들 모두가 진행한 프로젝트에 대한 이해를 높일 수 있었던 것 같다.
시연 시 구현하지 못한 페이지가 있다거나, UI 상의 통일감이 떨어져 이질감이 들거나, 에러 화면이 그대로 노출되는 등의 사고는 없어야 한다고 누차 강조했고 그에 맞게 다른 조원들의 작업물에 대한 피드백도 열심히 주며 디벨롭한 덕분에 완벽하게 시연을 마칠 수 있었다.
