[이세계 MBTI 테스트] React SPA로 만드는 MBTI 테스트

이세계 직업 테스트

~ 먼저 한 번 구경해보세요 💜🌙 ~

---

구성

이전에 바닐라 JS로 MBTI 테스트를 만들어봤기에 이번에는 SPA로 MBTI 테스트를 또 만들어보기로 했다.

전자의 경우 시작 - 문제 - 결과(총 16개)라서 많은 html 파일이 필요했는데, React는 single page라서 하나로 해결한다.

즉 위 경우를 모두 컴포넌트로 보여줘야 하기 때문에 라우팅을 /, /questions, /result/${resultData}, /results, /error로 나눴다.

/error는 유저가 주소창에 뭔가 잘못 입력한 경우를 고려해서 보여주는 에러 페이지로 곰곰 이후로 이걸 꼭 챙기고 있다.

💜 메인 페이지

메인 페이지에서는 타이틀과 시작 버튼, 과몰입을 유발할 수 있는 audio를 넣었다.

전반적인 톤앤매너는 몽환적, 판타지, 하늘색~핑크색~보라색의 오묘한 빛의 질감으로 잡았다.

애초에 간단히 만들고 TS로 마이그레이션 하는 게 목표라 디자인 기획 개발 모두 혼자 했는데, 하다 보니 점점 디테일에 욕심이 생겼다;

💜 /questions 페이지

이전에 질문을 보여줄 때 transition 없이 너무 딱딱 진행되는 느낌이 있었어서, 이번에는 애니메이션을 넣으려고 기획했다.

생짜로 해보려다가 실무에서도 많이 쓴다는 framer-motion으로 감을 익히면 좋을 것 같아 이 라이브러리를 학습해 적용했다.

그리고 진행바에 퍼센테이지를 채우고, 뒤로 가기 버튼으로 유저가 질문에 대한 답을 다시 고를 수 있게 디자인 했다.

 

총 12가지 질문으로 기획했고 질문에 대한 답을 다 고르면 아래와 같이 스피너가 노출된다.

백엔드 없이 정적인 페이지라 실제로 서버에서 데이터를 받아오는 건 아니지만 바로 결과가 노출되면 재미가 없는 느낌이었다.

이번엔 최대한 기성 사이트처럼 만들고 싶었고 이 과정에서 react-spinner를 적용했다. 

[React] 리액트 로딩 스피너 라이브러리 react-spinner 사용법

 

💜 /result/${resultData} 페이지

자기 결과 + 타이틀 + 설명 & 잘 맞는 유형 & 안 맞는 유형 & 카톡 공유/링크 버튼 & 다시 하기/전체 결과 버튼으로 구성했다.

원래는 서브 설명도 있었고 다른 유형들이 2줄로 표기되었는데 가장 작은 모바일에서 한 뷰에 버튼을 제외한 결과를 볼 수 있게 하려고 하다 보니 수정됐다. (힘들게 서브도 16개 다 작성했는데 ^_ㅠ)

 

카카오톡 공유하기는 메세지 공유하기 API를 사용했는데 이것도 트러블 슈팅이 많다... ^_^

우선 이미지가 노출되는 것, 노출되는 썸네일 크기 등 공식 문서를 주의 깊게 보지 않아 삽질을 했다.

 

링크 복사하기는 clipboard로 구현했는데 아래와 같이 모달을 띄웠다. (3초안에 사라져서 급하게 캡쳐함)

 

공유하기 외에도 결과를 이미지로 저장하는 것까지 해서 공유하기 버튼을 누르면 3개의 기능이 각각의 버튼으로 나오게 하려고 했는데, 저장하기에 쓸 html2canvas 라이브러리 적용에 문제가 있어 제외하다 보니, 2개 뿐이라 그냥 노출해 주기로 했다.

 

마지막에는 다시하기(/로 라우팅)와 전체 결과 버튼(/results로 라우팅)을 사이드에 넣어줬고 이미지에는 안 보이지만 광고도 붙여봤다.

광고는 2페이지에만 붙여서 수익은 기대하면 안된다 ㅎㅎ

 

광고 붙이는 글은 여기 참고!

[이세계 MBTI 테스트] 웹페이지에 광고 붙이기 : 카카오 애드핏 + 커스텀 훅 + React script 태그

 

💜 /results 페이지

전체 결과 페이지에서는 말 그대로 다른 결과들을 볼 수 있다.

이전에 만든 테스트를 사용한 유저 분이 '전체 결과를 볼 수 있으면 좋겠다'고 피드백을 주셨던 게 인상적이었다.

그래서 전체 결과를 볼 수 있는 페이지를 만들었는데 실제로 친구도 이 기능이 있어서 다 볼 수 있어 좋다고 의견을 주었다. 🥰

각 결과를 클릭하면 /result/${resultData} 페이지로 라우팅 되게 된다.

💜 /error 페이지

에러 페이지는 매우 심플하다. 여기로 잘못 오면 돌아갈 수 있게 메인 버튼으로 라우팅 시킨다.

          <Routes>
            <Route path="/" element={<Start />} />
            <Route path="/questions" element={<Questions />} />
            <Route path="/result/:testResult" element={<Result />} />
            <Route path="/results" element={<Results />} />
            <Route path="/*" element={<Error />} />
          </Routes>

라우팅 코드는 이렇게 구성되어 있다.

---

기술 스택

JavaScript + ReactJS

styled-components

storybook

framer-motion

react-spinner

react-dom

react-ga4

여기에 yarn vite vercel로 배포를 진행했다.

 

styled-components도 이번에 처음 제대로 써봐서 아직도 어버버거리고 안티 패턴을 썼을 것만 같다.

storybook은 공통 컴포넌트에를 잘 써보려고 학습 차 적용해봤는데........ 기본 예제만 한 3일 동안 들여다 본 듯... ㅋ

framer-motion은 워낙 레퍼런스도 많아 다른 분께 질문을 드려서 해결하기도 했다.

 

문제는 vite vercel...

잘 모르지만 각자 이점을 이해하고 적용하려고 했는데 원래 쓰던 cra, netlify와는 달라서 꽤 헤맸다.

이 부분에 대해서도 꼭 기록하려고 배포하자마자 포스팅을 쓴다.

---

Lesson & Learn

이번 프로젝트를 하면서 얻어간 건 다양한 라이브러리와 기술을 사용해 봤다는 것도 있지만,

무엇보다 웹 최적화를 직접 해봤다는 것!

 

막연하게만 느꼈는데 전에 읽은 프론트엔드 성능 최적화 가이드를 토대로 lighthouse를 보고 개선해봤다.

여전히 퍼포먼스의 LCP는 0점이지만 ㅋㅋ ㅠ (코드 스플리팅 등 공부할 게 많다) 조금씩 개선해 나가는 게 재미있었다.

실제로 SEO나 접근성은 100점을 만들었는데, 이 과정에서 단순 구현을 넘어 유저에게 가까이 갈 수 있는 개발에 대해 고민해보게 됐다.

오늘만 해도 robots.txt나 nextJS의 필요성을 얼마나 많이 느꼈는지 ㅎㅎ...

 

혼자 하다 보니 쳐지기도 했고 러닝 커브가 많았던 프로젝트라 약 1~1.5개월 정도 걸렸다.

단순한 MBTI 테스트로 보일 수도 있지만 배워간 게 많아서 완성하고 나니 뿌듯하다!

활동하는 오픈 카톡 방이랑 윈터루드 강사님 오픈 카톡방에 용기 내서 링크를 뿌렸는데 반응이 좋아서 도파민 폭발 🤯

디자인, 기획 부분에 대한 호평이 많아서 컨셉추얼하게 톤앤무드를 맞추길 잘했다는 생각이 들었다.

친구들도 원래 잘 안 해주는데 이건 재미있다고 엄청 질문을 했다 ㅠ_ㅠ... 

 

아쉬운 점은 백엔드 쪽도 공부해서 메인 페이지에 [총 n,nnn명이 테스트를 진행했어요!] 같은 문구를 넣고 싶었는데 구현하지 못했다.

또 결과별로 비율을 나눠 1위~16위를 표현하고 싶었는데 이 부분은 전체 결과가 들어가면서 로직을 다시 짜야 해 좀 복잡해졌다.

게다가 이렇게 하려면 DB가 필요한데 전적으로 백 쪽 지식이 없고, 생각보다 앞단 구현에도 딜레이가 많이 돼서 MVP만 구현하기로 했다.

이 부분에 대해 백엔드 분들께 자문했는데 매우 쉽고 간단하다고 하셔서 파베든 nodeJS든 여유가 되면 추가해보기로...

하지만 그 때쯤이면 유행이 끝나 몇 명 없을 것 같긴 하다 ㅎㅎ... 

 

또 SPA라서 index.html이 1개라 /questions를 링크 공유하든 /result/INFJ를 공유하든 다 같은 title, 메타 태그가 뜬다.

대신 동적으로 페이지마다 바꿔주려고 react-helmet, react-snap을 알아봤는데 CSR이라 100% 원하는대로 구현이 불가했다.

이를 위해선 간단하게 NextJS로 구현하는 게 답이라는 걸 알았고, NextJS의 필요성을 절실히 느끼게 되었다...

 

또또 위에서 말한 html2canvas를 사용하려면 레이아웃 구성을 갈아 엎어야 했는데, 그걸 차치하고 해당 라이브러리가 box-shadow를 지원하지 않아 저 빛나는 효과를 사용할 수 없다는... 톤앤매너에 가장 치명적인 상황이 있었다. 두 가지 요인을 고려해 해당 라이브러리를 포기했고 결과를 이미지로 저장하는 걸 포기했는데, 다른 방법은 정말 없을지 조금 더 찾아보고 싶다.

 

아무튼 이렇게 개요 마무리! 🥳