나와 가장 잘 맞는 레븐 멤버는?

5개의 질문을 통해 나와 가장 잘 맞는 레븐 멤버를 찾아보는 간단한 미니게임입니다!

 

여기서 잠깐! 레븐이 뭔가요?

10인조 버츄얼 그룹으로, 주로 노래 커버영상 위주로 활동 중이랍니다~ 트위치에 오시면 멤버별 생방송도 볼 수 있으니 많관부!

레븐 Leaven Official

 

개발동기 및 개발과정

간단한 설문형 게임이나 mbti와 유사한 검사들이 netlify 등으로 배포되어 많은 호응을 얻고 있는 걸로 알고 있다. 이에 그것들과 유사하게 질문형 미니게임을 만들어보고자 계획했다. 더불어 기술적으로 몇 가지 새로운 도전도 해봤다.

 

기존에는 일반적인 CRA로 제작하는 경우가 많았지만, 이번에는 Next.js(SSR)와 Tailwind CSS로 프론트 개발을 진행했다. Vercel에 배포하였으며 Sentry까지 연동하여 운영 측면까지 고려했다. 기존처럼 Cloudflare Pages에 배포할까 하다가 SSR의 장점을 살려보고싶어서 Vercel을 이용해봤다.

 

질문에 대한 답변 선택!

질문 페이지에서 답변을 선택하려면 버튼을 누르기만 하면 된다. 답변은 localStorage에 저장되며, 마지막 /calculating 페이지에서 localStorage에 저장된 답변 5개를 가져와 계산을 하게 된다.

결과 페이지

결과 페이지에서는 나와 가장 잘 맞는 레븐 멤버를 볼 수 있다. 멤버별 이미지는 Cloudflare Images에 업로드된 파일을 사용하며, Cloudflare 서버에서 Resizing된 채로 넘어오게 된다. 현재는 페이지별로 멤버가 하드코딩되어있지만, 나중에 고도화를 하게 된다면 전부 API에서 불러오도록 할 수도 있을 것이다.

 

공유하기 버튼은 react-copy-to-clipboard 라이브러리를 사용했고, 버튼을 누르면 미리 지정된 텍스트가 클립보드로 복사되며 Toast Message가 뜨게 된다. 토스트 메세지는 react-toastify 라이브러리를 사용했다.

공유하기 버튼 누르면 뜨는 토스트 메세지

총 개발기간은 6~7시간 정도이다.

 

 

몇 가지 이슈

1. next/image로 이미지를 로딩할 때, Daisy UI Avatar와 충돌하여, 이미지가 아바타 아웃라인 밖으로 튀어나오는 현상

상위 div에 custom-image 클래스를 넣고 스타일 속성을 override하도록 했다.

.custom-image span {
  position: static !important;
}
.custom-image span img {
  position: static !important;
  height: 100% !important;
}

2. toastify 메세지에 글자 폰트가 적용되지 않는 현상

해당 클래스에 !important로 font-family를 주면 된다.

.Toastify__toast-body {
  font-family: 'Unilab' !important;
}

 

 

Tailwind CSS가 편한가?

솔직히 잘 모르겠다. 아직 안 익숙해서 그런건지 몰라도, 따로 디자인에 대한 가이드가 없는 사이드 프로젝트 특성상 모든 UI를 직접 그리기는 현실적으로 어렵다. 그래서 UI Library들을 함께 사용하게 되는데, Tailwind CSS 기반의 라이브러리들이 React에서 사용하기에 편한지 잘 모르겠다. UI가 조금만 복잡해지면 코드가 엄청 난잡해질 것 같아서... 프로젝트 사이즈가 조금이라도 커질 것 같으면 Chakra UI 같은 대안을 선택할 것 같다. 이번에는 Daisy UI를 써봤는데, 디자인 자체는 예쁘긴 한데 엄청 깔끔해보이진 않아서 향후에도 계속 쓸지는 고민해볼 것 같다.

 

 

그래서 링크!

웹사이트 : https://minigame.leaven.team 

나와 가장 잘 맞는 레븐 멤버는?

깃허브 : https://github.com/dokdo2013/leaven-minigame

GitHub - dokdo2013/leaven-minigame: 레븐 미니게임