2024년 2학기 캡스톤 디자인

동아리 회장의 부원 관리 및 부원간 소통의 편의를 위한 웹앱

2024년 2학기 캡스톤 디자인 수업에서 진행한 프로젝트로, 동아리 회장이 부원 관리 및 부원 간 소통의 편의를 위한 웹앱을 개발하였습니다.
이 프로젝트는 학교 내 동아리들을 하나로 이어줄 수 있는 커뮤니티 어플리케이션으로, 사용자 친화적인 인터페이스와 다양한 기능을 제공하여 동아리 활동을 더욱 원활하게 지원합니다.

후기

이번 프로젝트를 통해 기획팀과 개발팀 간의 긴밀한 협업이 얼마나 중요한지 깊이 깨달았습니다.
기획단이 사용자 요구사항을 명확히 정의하고, 개발단이 이를 구현하는 과정에서
사용자 니즈를 두고 치열하게 토론하며 서로의 의견을 조율하는 경험을 했습니다.
프로젝트 단계마다 발생하는 문제를 함께 해결하면서 팀워크의 가치를 다시 한번 절감하기도 했습니다.

특히 프로그래밍 언어 학습과 툴 숙련에 많은 노력을 기울인 끝에,
제 진로와는 다소 다른 분야임에도 포트폴리오용 웹사이트를 직접 구축·관리하고,
서버 활용과 프런트엔드 개발까지 익힐 수 있었습니다.
덕분에 결국 쓸모 없는 경험은 없다는 사실을 몸소 확인하며,
팀워크와 협업의 소중함을 동시에 배우는 뜻깊은 프로젝트가 되었습니다.

MVP 1에서는 프로젝트의 기획 및 설계를 진행하였습니다. 동아리 회장이 부원 관리 및 부원 간 소통의 편의를 위한 웹앱을 개발하기 위해, 사용자 요구사항을 분석하고 기능 목록을 작성하였습니다. 또한, 초기 디자인과 레이아웃을 구상하여 프로젝트의 방향성을 설정하였습니다.

클라이언트 파트에서는, MVP1에 해당하는 회원가입,로그인,게시판 뷰를 구현하였습니다.
회원가입 페이지 이전에는 약관 페이지를 추가하여, 회원가입 전 약관의 동의를 먼저 진행해야만 회원가입이 가능하도록 설계하였습니다.
물론, 약관을 하나라도 체크하지 않으면 회원가입 페이지로 넘어갈 수 없도록 체크박스가 모두 체크될 경우에만 회원가입 버튼이 활성화되도록 하였습니다.
또한, 회원가입시 이용자의 임원진 여부를 선택할 수 있도록 하여, 계정의 권한 레벨에 차등을 두었습니다.
만약, 회원가입에 성공했더라도 실제로 동아리에 가입중인지 확인해야하기 때문에,
우선은 권한 레벨을 0으로 두고, 동아리 임원이 가입을 승인할 시 권한 레벨을 3으로 변경할 수 있도록 하였습니다.
따라서, 아직 권한 레벨이 0인 이용자에 대해서는 로그인시 가입 확인중이라는 문구와 현재의 진행상황을 확인할 수 있는 페이지를 출력했습니다.
로그인 페이지의 경우, 이용자가 입력한 아이디와 비밀번호를 통해 DB에 저장된 정보와 비교하여 로그인 여부를 판단합니다.
최대한 이용자가 편하게 로그인할 수 있도록, 이메일 아이디와 비밀번호를 통해 로그인을 하지만, 아이디를 기억할 수 있도록 체크박스를 추가하였습니다.
마지막으로, 메인 화면에 게시판뷰를 추가하여, 원하는 게시판으로 이동할 수 있도록 기본적인 틀을 잡았습니다.

MVP 2에서는 웹앱의 기본 구조를 설정하고, 사용자 인터페이스(UI)를 디자인하였습니다. HTML과 CSS를 사용하여 레이아웃을 구성하고, JavaScript를 활용하여 동적인 요소를 추가하였습니다. 또한, 사용자 경험(UX)을 고려하여 버튼 및 메뉴의 위치를 조정하였습니다.

클라이언트 파트에서는, MVP2에 해당하는 마이페이지를 구현하였습니다.
마이페이지에서는 이용자가 자신의 정보를 확인하고 수정할 수 있는 기능을 추가하였습니다.
이용자는 자신의 이름, 이메일 주소, 비밀번호 등을 수정할 수 있습니다.
마이페이지와 더불어, 사이드바를 구현하는 작업을 추가로 진행하였습니다.
사이드바에서는 다양한 게시판으로 바로 이동할 수 있도록 하였고, 마이페이지로 이동할 수 있는 버튼을 만들었습니다.
사이드바의 상단에는 자신의 프로필 사진을 수정할 수 있는 버튼을 추가하였고, 실제 로컬에서 자신의 프로필 사진을 업로드하여 사용할 수 있도록 하였습니다.
또한, 로그아웃 버튼을 상단에 추가하였고, 사이드바는 전체 화면의 70%정도 나오도록 설정하였으며, 사이드바가 나와있을때는 사이드바가 차지하지 않는 30%의 화면을 터치시 사이드바가 접히도록 구현하였습니다.

MVP 3에서는 웹앱의 메인 기능인 캘린더 기능을 구현하였습니다다

클라이언트 파트에서는 MVP3에 해당하는 캘린더 기능을 구현하였습니다.
캘린더 기능은 동아리 회장이 부원들과의 일정을 공유하고 관리할 수 있는 기능으로, 사용자가 쉽게 일정을 추가하고 수정할 수 있도록 하였습니다.
캘린더는 월별, 주별, 일별로 보기 가능하며, 사용자가 원하는 날짜에 일정을 추가할 수 있습니다.
캘린더는 Fullcalendar 라이브러리를 사용하여 구현하였고, 사용자가 일정을 추가할 때는 제목, 날짜, 시간, 장소 등의 정보를 입력할 수 있도록 하였습니다.
Fullcalendar 라이브러리는 단순하게 캘린더의 틀만 제공하기 때문에, Google API를 활용하여, 토요일을 파란색, 주말은 빨간색, 공휴일은 빨간색과 어떤 공휴일인지를 추가해주었습니다.
캘린더는 게시판과 연동하는 방식으로 구현했는데, 사용자가 일정을 등록하면 공개되지 않은 게시판에 기록이 됩니다.
이 게시판에 게시된 일정 정보를 캘린더에 표시해주는 방식으로 캘린더를 구현하였습니다.

MVP 4에서는 웹앱의 메인 기능인 게시판 기능을 구현하였습니다.

클라이언트 파트에서는 MVP4에 해당하는 게시판 기능을 구현하였습니다.
게시판 기능은 동아리 회장이 부원들과의 소통을 위한 기능으로, 사용자가 쉽게 게시글을 작성하고 수정할 수 있도록 하였습니다.
게시판은 공지사항, 홍보 게시판, 정보 게시판 등 다양한 카테고리로 나누어져 있으며, 사용자가 원하는 카테고리에 게시글을 작성할 수 있습니다.
게시글 작성 시 제목, 내용, 첨부파일 등을 입력할 수 있으며, 작성된 게시글은 다른 사용자들이 열람할 수 있습니다.
또한, 게시글에 댓글을 달 수 있는 기능도 추가하여 사용자 간의 소통을 더욱 원활하게 하였습니다.
게시판은 GnuBoard5를 사용하여 구현하였고, 사용자가 게시글을 작성할 때는 제목, 내용, 첨부파일 등의 정보를 입력할 수 있도록 하였습니다.
게시판을 구현할 때, 권한 레벨에 따라서 권한을 다르게 설정하였습니다.
임원진의 경우는 게시글,댓글을 삭제할 수 있는 권한을 부여하였고, 공지 게시판에 글을 작성할 수 있는 권한이 있습니다.
일반 부원의 경우는 자신의 게시글, 댓글만을 삭제할 수 있으며, 공지사할 게시판을 열람할 수 있으나, 글을 작성할 수는 없습니다. 댓글은 작성이 가능합니다.

MVP 5에서는 웹앱의 모든 기능 전반을 테스트하고, 버그를 수정하였습니다. 사용자의 피드백을 반영하여 UI/UX를 개선하고, 성능을 최적화하였습니다. 또한, 보안 취약점을 점검하고, 필요한 보안 조치를 추가하였습니다.

클라이언트 파트에서는 MVP5에 해당하는 모든 기능을 구현하였습니다.
우선, 기존의 어두운 다크모드 계열의 테마의 전체를 갈아엎어 화사한 톤의 디자인으로 개선하였습니다.
게시판에 들어가서 일정을 등록한 이후 뒤로가기 버튼을 누르면 메인 화면이 아닌 게시판 목록 페이지로 넘어가지는 버그를 수정하였습니다.
또한, 사용자간 채팅 기능을 구현하였습니다. 이 기능은 약간 재미삼아 만들었는데, 메시지를 보낼 사람을 쉽게 확인할 수 있도록 검색 기능을 추가하여 메시지를 쉽게 보낼 수 있도록 설계하였습니다.
한 가지 아쉬웠던 점은, DB와 클라이언트의 전달속도 차이로 인해 바로바로 메시지가 전달되지 않고 10초정도 텀을 두고 전송된다는 것이었습니다.
이 기능은 메인 페이지의 플로팅 버튼을 통해 쉽게 접근할 수 있도록 설계되었습니다.
이 밖에도, 정말 많은 버그를 수정하여 성공적으로 MVP5를 완성하였습니다.