유클러버스

프로젝트 목표

팬데믹으로 인한 비대면의 불편함 해소

코로나 19로 인해 비대면이 되면서 학교 전체 활동 자체가 크게 감소하였습니다. 특히 학생 간 교류 또한 크게 줄어들었는데, 그 중 대표적으로 동아리 및 과별 소학회의 홍보 방안 부족이었습니다. 팬데믹 이전엔 동아리 박람회를 통해 쉽게 교류를 할 수 있었던 반면, 팬데믹이 발생한 이후 동아리 지인이 없다면 알 수 있는 방안이 없습니다. 학교 차원에서는 Zoom 및 책자 문구를 통해 동아리 홍보를 진행했지만, 짧은 시간 속에 동아리 전체를 알기엔 절대적으로 부족하였습니다. 이러한 상황을 해결할 수 있도록 언제든지 쉽게 온라인으로 접근할 수 있도록 동아리 커뮤니티 서비스를 제공하고자 합니다.

원활한 동아리 홍보 및 관리

인스타그램, 틱톡 등 SNS 문화가 자리 잡으면서 학생들 간의 온라인 교류가 활발해지고 있습니다. 하지만 SNS를 사용하지 않거나, 동아리 모두 SNS 활동이 필수는 아니기에 어떠한 활동을 하는지 온라인으로 얻을 수 있는 정보가 현저히 적습니다. 또한, 팬데믹 이전에 진행했던 동아리 박람회 등과 같은 오프라인 활동은 비대면인 상황에서 진행하기 쉽지 않습니다. 이러한 문제점을 해결하기 위해 게더타운 형식의 2D 메타버스를 개발하여 온라인 상에서도 학생들 간의 교류를 촉진하고 동아리 활동을 활성화 할 수 있도록 합니다.

기술 스택

React
- 클라이언트 위주의 서비스(메타버스, 동아리 커뮤니티)를 만들기 위해 React 프레임워크를 도입하였습니다.
Recoil
- 사용자 인증 및 인가, 동아리 정보 등 페이지 단위의 상태를 동적으로 관리하기 위해 전역 상태 관리 도구를 사용하였습니다. 첫 프로젝트였기에 러닝커브가 낮은 도구를 1순위로 생각했고, 이 중 Recoil를 선택하였습니다. useState와 비슷한 패턴을 가지고 있으며, 원자 단위로 분리하여 관리할 수 있어서 유지보수성을 높일 수 있는 장점을 고려하였습니다.
Styled-Components
- CSS 오염 방지 및 비즈니스 로직으로부터 관심사 분리를 하기 위해 도입하였습니다. 태그를 통해 CSS 모듈화 및 컴포넌트 레벨로 스타일링을 추상화하여 개발하였습니다.
Typescript
- 정적 타입을 사용하여 코드의 안정성을 높이고 개발 생산성을 향상시키기 위해 도입하였습니다.
Webpack
- 프로젝트 생성 단계에서 create-react-app을 이용하여 시작하였고, 이를 통해 기본적으로 제공되는 Webpack5 설정을 기반으로 개발하였습니다.
Lottie
- 애니메이션 및 인터렉티브한 화면을 구현하기 위해 도입하였습니다. After Effect를 사용하여 자체 애니메이션을 개발하고, Lottie를 사용하여 동적이고 매력적인 애니메이션 효과를 쉽게 추가하였습니다.