🖐️ 프로젝트 소개

멋쟁이사자처럼 11기 학생들이 만든 강원대학교 백령대동제 안내 사이트입니다.

👩‍👦‍🧒 프론트엔드 팀 소개

👩‍💻손민주	👨‍💻심현수	👨‍💻권순호
홈 방명록 공지사항 함인섭광장 대운동장 60주념기념관 서버 배포	함인섭광장	60주념기념관

• 2023 백령대동제 (2023.09.19 ~ 2023.09.21)
• 개발기간: 2023.08 ~ 2023.09

📱 실행 영상

daedong.1.mp4

🔗 개발 단계

1. 기획

2. 디자인

3. 퍼블리싱

4. 기능 구현

5. 서버 배포

💡 프로젝트 기획

• 타대학에서는 매년 대동제 주요 공지사항 및 관련 정보 안내 사이트를 멋쟁이사자처럼 대학에서 제작하고 있습니다.
• 축제 정보를 찾으려면 학과 단톡방, 총학생회 인스타그램 등 여러 플랫폼에 흩어진 정보들을 직접 찾아봐야 합니다.
• 저희 강원대학교 멋쟁이사자처럼 11기는 이러한 정보를 한눈에 볼 수 있는 플랫폼을 제공하기 위해 총학생회와 협력하여 모든 정보를 모은 하나의 웹 사이트 제작을 기획하였습니다.

피그마 웹 디자인

📂 프로젝트 주요 기능

• 대동제 메인 테마를 연상하는 애니메이션 홈 화면
• 주요 페이지로 이동할 수 있는 메뉴 바
• 대운동장, 함인섭광장, 60주념기념관별 부스 및 주요 시설 위치 제공
• 참여자 간의 원활한 소통을 위한 방명록
• 행사 정보 제공 및 음악 추천
• 총학생회 공지사항 안내

✨ 프로젝트 결과

홈	공연 및 행사	방명록	공지사항

대운동장	함인섭광장	60주년기념관	제작자

👏 프로젝트 배포

❤️ 축제 홍보

총학생회 인스타그램	교내 에브리타임

• 배포 후 에브리타임 및 인스타그램, 지인 등을 통해 사용자 피드백 내용을 신속하게 반영했습니다.
• 웹 사이트 방문자 수를 기록하는 것의 중요성을 인식하지 못해, 관련 시스템을 구축하지 않아 행사가 끝난 후 방문록으로만 사용자 참여도를 확인할 수 있었습니다.
• 이 경험을 바탕으로 추후 프로젝트에서는 Google Analytics와 같은 웹 분석 도구를 적극적으로 활용하여 방문자 수, 페이지 뷰, 사용자의 웹사이트 내 활동 등을 실시간으로 추적하고 분석할 것입니다.

✍️ 프로젝트 후기

• 강원대학교 학생들을 대상으로 한 프로젝트에서, 사용자 간 다른 OS로 인해 애니메이션 효과 적용에 어려움을 겪었습니다.
• Android 중심 개발로 인해 iOS에서 CSS 속성 호환성 문제가 발생했고, opacity와 transform 속성을 적용하기 위해 -webkit- 접두사를 사용했습니다.
• 또한, SVG 이미지 클릭 시 각 홈페이지로 이동하도록 설정하는 과정에서 코드를 분석해 고화질의 벡터 이미지를 적용하는 방법을 배웠습니다.
• 문제 해결 과정에서 다양한 OS와 브라우저에서의 애플리케이션 성능과 표현을 유지하는 것의 중요성을 인식했고, iOS와 Android의 차이점과 이를 해결하기 위한 CSS 속성의 사용법 등 많은 것을 배울 수 있었습니다.