1. 설계의 당위성

    본 프로젝트는 총학생회 홈페이지의 운영 효율성을 개선하고, 학생들 간의 소통을 증진시키기 위한 ‘통합형 플랫폼 구축’을 목표로 합니다. 이전에 존재하였던 총학생회 홈페이지는 매년 바뀌는 단일 개발자가 유지 보수를 담당하였고, 이로 인해 코드의 가독성과 통일성 부족이라는 문제가 존재했습니다. 결국 이러한 문제들로 인해 적절한 인수인계가 불가하게 되어 운영이 중단되는 상황까지 이르렀습니다. 따라서 이번 프로젝트를 통해 통일된 기술 스택(SpringBoot, React 등)을 사용하고, 인수인계 정보와 기술 문서를 체계적으로 문서화하여 유지보수성을 강화하고자 했습니다. 또한, SNS를 사용하지 않는 학생들에게 학교 내부의 공지사항, 제휴 정보, QnA 등 다양한 정보를 쉽고 편리하게 접근할 수 있도록 정보 접근성을 제공하며, 관리자 전용 페이지를 개설하여 게시판 및 댓글 관리, 회원 관리를 쉽고 간단하게 할 수 있도록 설계하였습니다. 이번 프로젝트 통해 학교의 이미지 제고와 홍보 방안을 다양화하며, 학생들이 총학생회에게 쉽게 의견을 제시하고 정보를 얻을 수 있는 중요한 소통 매개체로 자리잡는 홈페이지를 만드는 것을 목표로 하였습니다.

    본 프로젝트는 총학생회 홈페이지의 운영 효율성을 개선하고, 학생들 간의 소통을 증진시키기 위한 ‘통합형 플랫폼 구축’을 목표로 합니다. 기존 존재하였던 총학생회 홈페이지의 경우 단일 개발자가 매년 교체되는 상황으로 인해 코드의 통일성과 가독성 모두 부족한 상황을 초래했습니다. 이로 인해 적절한 인수인계가 불가하게 되었고, 결국 현재는 기존 총학생회 홈페이지가 폐쇄된 상황입니다. 홈페이지의 폐쇄는 곧 홈페이지를 이용하던 학생들의 불편으로 이어졌습니다. 기존의 소통 창구 공간이었던 총학생회 홈페이지가 사라짐에 따라 SNS를 통한 의견 개진은 보다 복잡하고 번거롭게 변화하였습니다. 이로 인해 소통 편의성이 급감하였고 다양한 학생들이 '불편한 소통에 대한 불만'을 표하고 있습니다. 또한 SNS를 사용하지 않는 학생의 경우 정보를 얻을 수도, 의견을 개진할 수도 없는 상황이기에 '학생 소외'라는 또 다른 문제 역시 발생하였습니다. 결국 홈페이지의 폐쇄는, 총학생회의 '학생 자치 단체'라는 궁극적인 역할 수행에 있어 '학생의 뜻을 대변하기 어렵게' 하는 문제를 초래하였습니다. 따라서 본 프로젝트를 통해 이러한 문제점을 해결하고자 합니다. 홈페이지 운영에 있어 가장 큰 문제였던 코드의 통일성과 가독성 문제 해결을 위해 현재 코드를 통일성과 보편성 모두를 지닌 새로운 기술 스택(SpringBoot, React 등)으로 전면 교체하였습니다. 또한 인수인계 정보와 기술 문서를 체계적으로 문서화하여 인수인계 시스템을 구축하였습니다. 구축된 인수인계 시스템과 더불어 개발 진입장벽을 더욱 낮추기 위해 '관리자 페이지'를 별도 신설하여 게시판 개발 및 유지 보수가 보다 용이하게 하였습니다. 또한 홈페이지를 새로이 구축함에 따라 학생들을 위한 '정보 제공 기능'은 물론 '소통 기능'도 다수 마련하여 학생들의 소통 참여를 독려하고 '소통 창구'로서의 역할 역시 수행할 수 있게 하였습니다. 이번 프로젝트를 통해 총학생회 홈페이지는 기존에 존재하던 인수인계의 문제에서 벗어나 오랫동안 존속 가능한 홈페이지로서 자리잡게 될 것입니다. 또한 어떠한 학생이든 소외 없이 편리하게 의견을 제시하고 정보를 얻을 수 있는 교내 주요 소통 플랫폼으로 자리잡게 될 것입니다.

  2. 설계 계획

    사용자 홈페이지와 관리자 홈페이지 총 2개의 홈페이지를 각각 개발하는 계획을 구축하였습니다. 사용자 홈페이지는 총학생회 소개, 100인 안건 상정제, 물품 대여 사업 소개, 통합 소통 창구 등의 기능을, 관리자 홈페이지는 사용자 페이지 및 회원을 관리할 수 있는 게시판 관리, QnA 게시판 댓글 작성, 회원 관리 등의 기능을 제공하고 관리할 수 있도록 설계하였습니다. 이를 위해 React 프레임워크를 프론트엔드로, SpringBoot를 백엔드로 활용하며, PostgreSQL 데이터베이스와 AWS 서버, Docker를 통해 시스템을 안정적으로 구축합니다. 또한, 팀 협업 툴로 Notion을 활용하여 프로젝트 진행 상황을 기록합니다. 또한, 홈페이지 담당자가 교체되었을 상황을 대비하여 다양한 인수인계 문서와 홈페이지 사용 가이드를 포함한 여러 기술 문서를 완성하여 지속 가능한 운영 기반을 마련할 예정입니다.

    설계한 홈페이지 기능 명세는 다음과 같습니다.

    화면 세부 페이지 Aa 기능 설명
    로그인 페이지 로그인 아이디 입력
    로그인 페이지 로그인 비밀번호 입력
    로그인 페이지 비밀번호 찾기 비밀번호 변경
    로그인 페이지 비밀번호 찾기 회원가입 페이지로 이동
    회원가입 페이지 회원가입 약관 동의 약관 동의, 다음 단계 버튼
    회원가입 페이지 회원가입 아이디 입력
    회원가입 페이지 회원가입 이메일 인증 아주대 메일 인증 번호 전송
    회원가입 페이지 회원가입 이메일 인증 번호 입력
    회원가입 페이지 회원가입 회원가입 양식작성 이름, 학과, 학번, 연락처
    회원가입 페이지 회원가입 비밀번호 입력 조건: 8자 이상, 영문+숫자 조합
    회원가입 페이지 회원가입 비밀번호 확인 입력 조건: 8자 이상, 영문+숫자 조합
    로그인 페이지 로그인 로그인
    로그인 페이지 로그인 로그아웃 별도 페이지 X
    메인페이지 footer footer 로고, SNS 바로가기, 개인정보 처리방침, 주소, 연락처 등
    메인페이지 header header
    header header header 로그인
    header header header SNS 바로가기
    header header header 로고
    header header header 상단메뉴바
    header header header URL
    header header header 반응형→사이드 바
    navbar navbar navbar 네비게이션바
    banner banner banner 사진, 영상 재생
    banner banner banner 콘텐츠 구역
    banner banner banner 대표 소개글
    소개 페이지 총학생회 소개 소개페이지 총학생회 소개
    소개 페이지 인사말 소개페이지 인사말
    소개 페이지 조직도 소개페이지 조직도
    소개 페이지 공약소개 소개페이지 공약소개
    소개 페이지 오시는 길 소개페이지 오시는 길
    소식 페이지 공지사항 소식페이지 게시글 검색
    학사알림 학사알림 게시글 검색 제목, 내용, 첨부파일, 작성일
    소통광장 100인 안건 상정제 게시글 등록 제목, 작성일, 작성자, 첨부파일, 조회수 기록
    소통광장 공감 버튼 DB 연동
    소통광장 URL 학습관 침해 구글폼 URL
    소통광장 질문게시판 게시글 등록, 수정, 삭제 시설, 복지, 정책, 인권 등 카테고리 만들기
    소통광장 질문게시판 답변완료 표시 답변 시 제목 뒤에 답변완료 표시
    소통광장 질문게시판 게시글 잠금 개인 비밀번호 설정
    자료실 세칙 및 회칙 게시글 검색 제목, 내용, 작성일, 첨부파일, 작성자
    자료실 회의록 URL 제목, 내용, 작성일, 첨부파일, 작성자
    자료실 감사자료 URL 제목, 내용, 작성일, 첨부파일, 작성자
    학생복지 제휴소개 문화, 외식, 교육, 기타 카테고리별 게시물 등록
    제휴페이지 문화 카테고리별 항목 등록, 수정, 삭제
    제휴페이지 외식 카테고리별 항목 등록, 수정, 삭제
    제휴페이지 교육 카테고리별 항목 등록, 수정, 삭제
    기타 기타 카테고리별 항목 등록, 수정, 삭제
    학생복지 대여사업 대여사업 물품 엑셀 연동
    학생복지 캠퍼스맵 캠퍼스맵 구글폼 연동
    한/영 홈페이지 전체 한영 버튼

    설계한 DB 구조 ERD 다이어그램은 다음과 같습니다.

    DB ERD.png

  3. 설계 내용

    architecture.png

    1. 사용자 홈페이지

      사용자 홈페이지는 일반 학생들이 이용하는 플랫폼으로, 총학생회의 주요 정보와 다양한 사용자 기능을 제공합니다. React.js를 프론트엔드로 사용하여 직관적인 반응형 UI를 구현하였으며 이를 통해 다양한 학생이 편리하게 이용할 수 있게 편의성을 증대하였습니다. 홈페이지 게시판의 경우, ‘정보 제공’의 목적이 짙은 게시판인 ‘총학생회 공지사항’, ‘자료실(회칙 및 세칙)’, ‘학생 복지(대여사업, 제휴사업 안내)’와 ‘소통 창구’의 목적이 짙은 게시판인 ‘100인 안건 상정제’, ‘소통광장(QnA, 통합소통창구 바로가기)’ 등으로 구성되어 있습니다. 이중 ‘소통 창구’ 관련 게시판의 경우 간단한 버튼 클릭이나 검색만으로 의견 개진 및 정보 획득을 가능하게 하여 학생과 총학생회 간의 소통을 더욱 용이하게 하였습니다. 끝으로, 홈페이지 사용자는 ‘**https://www.ajouchong.com’**을 통해 웹사이트에 접속할 수 있습니다.

    2. 관리자 홈페이지

      총학생회의 효율적인 운영을 위해서 설계되었습니다. React.js를 프론트엔드로 사용하며, ‘게시물 관리’, ‘회원 관리’, ‘댓글 관리’ 등의 기능을 제공합니다. 관리자 홈페이지 도메인은 따로 존재하며, 인수인계 문서를 통해 다음 관리자에게 해당 도메인을 전달합니다. 관리자 홈페이지에서는 게시글을 관리할 수 있으며 QnA 게시판의 댓글 작성, 100인 안건 상정제 관리, 회원 관리 등의 기능을 사용할 수 있습니다. 이를 통해 기존의 코드 레벨에서 관리하던 운영 방식에서 벗어나 효율적인 홈페이지 운영이 가능합니다.

    3. 서버 및 DB, 인프라 구축

      Spring Boot를 기반으로 백엔드를 개발하였으며, PostgreSQL을 데이터베이스로 사용하여 안정적이고 확장 가능한 데이터 관리를 구현했습니다. 서버는 Docker Compose를 통해 컨테이너화 하여 배포 및 관리의 편의성을 높였고, GitHub Actions를 활용해 CI/CD 환경을 구축하여 자동화된 배포와 지속적인 업데이트를 가능하게 합니다. 전체적인 시스템은 사용자와 관리자 홈페이지를 효율적으로 연결하며, 데이터의 무결성과 보안을 유지할 수 있는 구조로 설계했습니다.

  4. 결과

    이번 프로젝트의 결과물은 크게 사용자/관리자 홈페이지 인수인계 문서, 기술 문서의 2가지로 나눌 수 있습니다. 인수인계 문서는 총 3가지로 나뉩니다. 먼저, 홈페이지 서버 및 전반적인 홈페이지 구성 및 관리 방법을 작성한 문서입니다.

    <aside> 📞

    연락처

    BE: 소프트웨어학과 유수정 010-2741-3796 [email protected]

    사용자 페이지 FE: 소프트웨어학과 오태림 010-3192-1598 [email protected]

    관지자 페이지 FE: 소프트웨어학과 김혜성 010-5920-7917 [email protected]

    </aside>

    사용자 페이지 관리 메뉴얼

    관리자 페이지 사용 메뉴

    ‣

    ‣

    ‣

    ‣

    ‣

    계정

    1. github
    2. AOLDA 서버
    3. 도메인 관리

    서비스 구성

    → 도커 위에서 돌고 있으며, gitHub CI 구축 완료

    서버 관리 방법

    <aside> 📢

    </aside>

    1. 서버 또는 콘솔 접속

    다음은 사용자 홈페이지 관리 방법을 나타낸 문서입니다.

  5. 참고문헌