vroomfan

페스월드, Fes-world

서울대학교 2021 봄축제 페스월드의 웹사이트 개발을 담당했습니다. 첫 온라인 축제인 만큼 학우분들이 불편함 없이 즐길 수 있도록, 그리고 저의 첫 사이드 프로젝트가 부끄럽지 않도록 꼼꼼하게 UI/UX를 고려해 개발했습니다.

메인화면

URL: https://snu-festival.web.app

개발 기간: 6주(2021.03.29 ~ 2021.05.10)

개발 기여도: 100%

기술 스택

React, CRA, ESLint, Storybook, Hygen, Craco, source-map-explorer, Firebase-hosting, CloudFlare, Firestore, Firebase-auth, Google Analytics, git flow, Redux, Redux-saga, Redux-persist, Kakao API, styled-components, styled-media-query, js-sha256

성과 및 평가

5월 9일 선공개 이후 축제가 끝나는 5월 13일까지 5일간 11,829명의 방문자가 들어왔습니다. 방명록 페이지를 통해 사용자의 긍정적 평가를 확인했습니다.

방명록

혼자서 진행했던 프로젝트 중 가장 큰 규모였고 초기 환경 세팅부터 배포까지 코너 케이스를 고려하며 코딩했습니다. 폴더 구조 설계, firebase 환경 세팅, redux 환경 세팅, 빌드와 배포 등 팀 차원에서 생각해야하는 개념부터 성능 최적화, custom hook, animation css 등 개인이 생각해야하는 개념까지 아울러 고민해볼 수 있었습니다.

1명의 디자이너와 zeplin으로 협업을 하는 과정에서 웹사이트의 완성도를 위해 UI/UX에 대한 의견을 적극적으로 냈습니다.

작업 내용

  • 모든 UI 컴포넌트 제작 및 storybook 작성

    • 재활용성이 높은 컴포넌트일수록 스토리북을 이용하여 내부적인 UI 상태만 가지도록 먼저 구현하였고, PC/모바일 환경에 맞게 반응형으로 개발하였습니다.

  • 메인화면

    • 모바일에서는 커다란 섬을 표현하기 힘들었기 때문에 억지로 UI를 맞추기보다는 PC/모바일에서 완전히 다른 레이아웃을 가져가기로 하였습니다.
    • CSR의 특성상 페이지 최초 진입 후 이미지 등의 요소가 느리게 보이는 문제가 있었기 때문에, 메인화면의 로드가 끝난 후 웹사이트의 주요 이미지(소개페이지의 포스터, 미니게임의 아이콘 등)를 미리 preload하는 방식을 채택했습니다.

  • 미니게임: 노래맞히기, 미궁게임, 보물찾기 등의 간단한 게임을 구현하였습니다.

    • 노래맞히기는 키보드 입력 또는 화면 터치시 나오는 '짧은 음악 + 가사'를 보고 노래를 맞히는 게임입니다. svg를 이용한 애니메이션을 추가하여 재미를 더하였습니다. event 발생 시 HTML class를 toggle하여 애니메이션을 트리거시켰고, 성능을 위해 transform과 opacity 만으로 애니메이션을 작성하였습니다.
    • 미궁게임은 사용자가 정답을 입력했을 경우 다음 화면으로 넘어가는데, firestore에 정답을 따로 저장해두기엔 그만큼 중요한 로직이 아니었고 프론트단에 하드코딩해두기엔 (난독화를 하더라도) 개발자 도구의 source를 통한 유출이 우려되었습니다. 그래서 sha256 을 통해 해시값을 미리 계산해두고 해시값만 프론트단에서 비교하는 방법으로 정답 유출을 막는 아이디어를 구상했습니다.

노래맞히기

  • 소개

    • 페이지 하단 '축제 모아보기' 섹션의 Carousel을 직접 구현했습니다. 디자이너의 요구를 충족하는 Carousel 라이브러리를 찾을 수 없어 몇 시간에 걸쳐 직접 캐러셀 컴포넌트를 구현하였습니다. 이 때 사진이 움직이는 속도를 requestAnimationFrame을 이용해 조절함으로써 렌더링 성능 최적화에 성공하였습니다.

carousel

  • 오늘의타로

    • 카드를 흩뿌릴 때 top, left를 사용할 경우 jank 현상이 발생하여 transform을 이용하여 위치를 설정하였습니다.
    • kakao api를 이용하여 지인에게 결과를 공유하는 기능을 구현하였습니다.

  • 미션

    • 페이지 곳곳에 있는 미션을 클리어하면 firestore에 해당 정보를 저장하였고 미션 스탬프를 하나씩 채워나가는 재미를 주었습니다.
    • firebase auth를 이용하여 구글 로그인을 구현하였고, 로그인 정보는 Session storage에 저장되도록 redux-persist와 firebase 로직을 맞추었습니다.
    • firebase auth를 통해 얻은 uid값을 이용하여 firestore에 대한 접근 권한 규칙을 설정했습니다.
    • firestore에서 데이터를 불러오고 저장하는 모든 로직은 redux saga를 통해 분리하였습니다.
    • 축제 이후, 미션을 모두 완료한 uid를 필터링하여 경품을 추첨하는 코드를 작성했습니다.

미션

  • firebase로 호스팅을 한 뒤 CloudFlare를 이용하여 보안 향상을 꾀했습니다.
  • Hygen을 이용하여 반복되는 스켈레톤 코드 생성 작업을 간편화하였습니다.
  • skeleton image와 suspense fallback을 적용하여 로딩 시간의 사용자 경험을 개선했습니다.
  • source-map-explorer를 이용하여 번들 사이즈를 확인하면서 필요한 페이지에 Code Splitting을 적용했습니다.
project
personal
react
interactive
← loplat i