주: 축제 웹사이트 서버가 2023년 5월 19일 12:00부로 운영이 종료되어 더 이상 접속할 수 없습니다.
| 오소현 | 김경재 |
|---|---|
 |
 |
| @osohyun0224 | @PortalCube |
| 한림대학교 빅데이터전공 20학번 3학년 | 한림대학교 빅데이터전공 20학번 2학년 |
2023 한림대학교 비봉축전 웹페이지 프론트엔드입니다! 프레임워크는 Vue.js를 사용하였습니다! 백엔드 코드는 여기에서 확인하실 수 있습니다!
- Windows: 7 이상
- OS X: X El Capitan 이상
- Android: Android 7 이상
- iOS & iPadOS: 14 이상
- vue
- axios
- gsap
- dayjs
- idb-keyval
- js-cookies
- highcharts
- vue-awesome-paginate
- vue-toastification
- vue3-carousel
- click-outside-vue3
- vite
- prettier
- 매년 봄, 축제가 진행되면 축제 주요 공지사항 및 관련 정보는 여러 플랫폼에 분포되어 정보가 분산되고 있었습니다.
- 부스 정보는 실시간으로 보기가 어렵고, 원하는 부스의 정보를 사용자가 파악하기 어려웠습니다. 또한 부스가 마감이 되었음에도 대기를 하는 상황이 벌어져 혼잡도가 발생하였습니다.
- 저희는 이러한 불편함을 해소하고자 여러 정보를 한 번에, 한 눈에 볼 수 있는 축제 웹사이트를 제작하기로 기획하였습니다.
- 프로젝트 초기, 축제 웹사이트를 직접 사용할 학우분들의 의견을 듣고 사용자의 니즈를 파악하고 기능을 기획하기 위해 유저 리서치를 위한 설문조사를 실시하였습니다.
- 인스타그램, 교내 커뮤니티 에브리타임에 글을 게시하여 총 80명의 학우분들의 답변을 받을 수 있었습니다.
(1) 2023 대동제 웹사이트가 필요한가?
- '있다면 사용함' 포함 해당 웹사이트가 개발되기를 필요로 하는 학우분들이 거의 90%이상인 결과를 보여주고 있기에, 학우분들이 필요로 한다는 것을 파악할 수 있었습니다.
(2) 축제 웹사이트 프로토타입 기능들 중 서비스가 중요하게 여겨지는 순위는?
- 응답 그래프를 확인한 결과, 타임테이블과 부스배치도 정보를 필요로하는 학우분들이 많다는 것을 파악할 수 있었습니다.
(3) 축제 웹사이트가 개발된다면, 어떤 정보를 받아 보고 싶은가?
- 해당 질문에 대한 답변 분석 결과입니다.
- 전체적으로 공연 및 타임 테이블 정보, 실시간으로 변동사항이 생겼을 때 받아볼 수 있는 정보, 부스 관련 정보를 알고 싶어하신다는 답변을 받았습니다.
(4) 축제 웹사이트에서 기대되거나 구현을 바라는 서비스가 있다면 무엇입니까?
- 해당 질문에 대한 답변 분석 결과입니다.
✓ 축제 진행 행사인 귀신의 집 예약 티켓팅 시스템
✓ 축제 주점 테이블 예약 티켓팅 시스템
✓ 각 부스별 대기 시간 실시간 안내
✓ 축제를 참가하는 사람들의 실시간 반응 댓글을 볼 수 있는 커뮤니티
✓ 부스 위치를 파악할 수 있는 지도와 함께 부스 목록 조회
- 답변의 내용을 반영하여 축제준비위원회와의 협의 후, 최종 기능을 기획하게 되었습니다.
메인 홈 화면
- 축제 웹사이트 슬로건, 로고 게시
- 주요 페이지로 바로 갈 수 있는 메뉴 바
- 개발팀 자체 제작 부스 유형 테스트 바로가기 링크
- 서버 후원 기업 스폰서 표시
공지사항 페이지
- 일반 유저들은 공지사항 목록 리스트 확인 기능
- 로그인한 메인 관리자(축준위)의 공지사항 작성,수정,삭제 기능
- 제목, 내용 키워드로 검색 기능
- 페이지네이션 기능
타임테이블 페이지
- 요일 별 공연, 주요 행사 일정표 안내
- 컴포넌트 별 애니메이션 적용
부스 정보 메인 페이지
- 축제 기간 운영되는 부스들의 위치를 확인 가능한 지도
- 낮부스 / 밤부스 구분하여 부스 목록 조회 기능
- 부스 이름 , 소개 글 정보 검색 기능
- 요일별 / 댓글 많은 순 / 좋아요 많은 순으로 부스 목록 조회 필터링 기능
- 부스 별 좋아요 기능
부스 상세 정보 페이지
- 부스 별 상세한 정보 안내
- 부스 소개, 부스 메뉴, 부스 관련 이미지 확인 가능
- 부스에 대한 후기를 남길 수 있는 댓글 기능
- 일반 유저 본인 댓글 비밀번호 입력 후 삭제 기능
- 일반 유저 비방을 목적으로 한 댓글을 대상으로 신고 기능
- 댓글 랜덤 닉네임 구현
- 부스 관리자 로그인 후 본인 부스 상세페이지 글 수정, 삽입, 삭제 기능
프로그램 안내 페이지
- 축제준비위원회가 진행하는 주요 행사 목록 안내 기능
- 리스트 사진 클릭 시 해당 행사의 세부 정보 안내 기능
- 리스트, 세부 정보 모달 창 애니메이션 삽입
방명록 페이지
- 축제를 즐기는 사람들의 추억을 확인할 수 있는 방명록 기능
- 일반 유저들은 본인 방명록 작성, 삭제 기능
- 비방을 목적으로 한 방명록에 대한 신고 기능
- 메인 관리자(축준위) 각 방명록에 대한 작성 시간 , 신고 수 조회 가능
- 방명록 랜덤 닉네임 구현
웹사이트 개발팀 , 축준위 명단 페이지
- 해당 웹사이트를 개발한 웹사이트 개발팀 인원 이름/학과/학번/깃허브 링크 확인 가
- 축제준비위원회 명단 확인 가능
굿즈 페이지
- 축제준비위원회의 요청사항을 반영한 기능 중 하나로, 축제 굿즈 목록을 확인할 수 있는 기능
- 구매 가능한 구글 폼 연결 기능
로그인 화면
- 관리자 대상은 부스를 운영하는 운영진 , 축제준비위원회 위원/부위원/홍보팀장 대상
- 일정이 타이트하여, 미리 관리자들 명단을 수집 후, 계정 생성 후 아이디와 비밀번호 배포
백오피스 메인 화면
- 웹사이트 실시간 방문자 수 확인 기능
- 요일 별 누적 방문자 수 그래프 화면 기능
- 메인관리자 개입이 필요한 공지사항/부스목록/신고 댓글/신고 방명록 페이지 메뉴 바 기능
백오피스 부스 목록 페이지
- 일반 유저 부스 목록 페이지와 디자인 유사
- 댓글 순 / 좋아요 순 / 신고 순으로 목록 필터링 시, 그래프 즉각 변경 확인 기능
신고 받은 부스 댓글 / 신고 받은 방명록 페이지
- 신고 받은 목록 조회 가능한 페이지
- 최신순 / 신고가 많은 순으로 필터링하여 목록 조회 가능
- 목록 검색이 가능한 검색 기능
- 목록 페이지네이션 삽입
- 메인 관리자 해당 댓글 직접 삭제 가능
- 교내 커뮤니티 사이트 에브리타임 게시물 게시
- 학과 공식 홈페이지 홍보 글 게시
- 한림대학교 정보과학대학 소프트웨어학부 , 한림대학교 SW중심대학 사업단 사이트 게시
- 한림대학교 전체 학과 공식 단톡방 학생회 배포
- 한림대학교 모든 학과 공식 단톡방에 축제 홍보 게시
- 총학생회 공식 인스타그램 홍보글 게시
연예인 라인 업 페이지 신설 구현
- 연예인 라인업 공개 후, 라인업 페이지 구현
- 각 가수별 멜론 플레이리스트 제작, 유튜브 플레이리스트 삽입
학우분들 요청사항 즉각 반영하여 수정
- 에브리타임에 올라오는 웹사이트 관련 수정 요청사항을 즉각적으로 반응해 배포기간 중 총 3회 업데이트를 진행하였습니다.
- 배포기간 (2023 . 05. 09 - 2023. 05. 18 총 10일) 전체 웹사이트 방문자수 2만 5천명을 기록하였습니다 😊
- https://github.com/osohyun0224/Vue.js_PWA_Apply_hallymfestival
- 설명: 학교 전체 학생들을 대상으로 축제 웹사이트를 제작하고 있기 때문에, pwa의 offline, push message와 같은 기능을 넣고 싶어서 프로젝트에 pwa를 구현하게 되었습니다. 결과를 스포하자면 남은 일정에 비해 프론트 개발일정이 너무 빡세서 pwa를 해당 프로젝트에 구현하지는 않습니다만 그래도 해당 기능을 구현하는 사람들을 위해 제가 개발하면서 고민했던 과정을 기록했습니다.