성격 테스트 만들기

성격 테스트 만들기

친구들과 연락을 주고받다 보면 가끔 뜬금없이 무언가를 공유해 줍니다. "응 뭐지? OOO 성격 테스트??"

 

유명한 캐릭터 테스트, 연예인 테스트, 색깔 테스트 등 나의 성격을 자유롭게 무언가로 표현하여 재밌게 결과를 만들어줍니다.

 

이건 MBTI, BIG5 등 심리검사 결과를 기반으로 하여 테스트 과정 및 결과를 재밌게 재탄생시킨 것들이죠.

 

저도 몇 번 주고받아서 테스트를 해보다 보니, "재밌네 나도 하나 만들어보고 싶어"는 생각이 들었습니다.

 

그리하여 제가 선택한 것은 제가 좋아하는 '마블영화의 히어로 테스트'로 정하였죠.

---

무엇으로  만들었나?

 

사용한 기술 스택들은 React, 상태관리는 Recoil / props & state, CSS는 Tailwind Css를 사용하였습니다.

React, Reocil ,TailwindCss

---

어떻게 만들었나?

우선 제가 사용한 심리검사는 MBTI 기반으로 하였고 질문 수는 20개 정도로 간단한 테스트로 만들었습니다.

16가지의 MBTI결과를 기반으로 16가지의 히어로들을 데이터에 저장하였습니다. 

결과 데이터

 

합리적인 결과를 도출해 내기 위해서 제가 생각한 로직은 질문을 5개씩 나누어 많이 선택한 성향을  E or I, S or N, F or T, P or J로 결정하여 MBTI결과를 만들고 그에 맞는 히어로가 나오게 만들었습니다.

검사 과정

 

---

마무리하며..

이번 작업물을 통해서 Recoil과 Tailwind CSS를 처음 사용해 보았습니다.

 

이전에는 상태관리 라이브러리를 Redux를 사용했었고 이번 작업물을 통해서 Recoil를 처음 써봤는데 Redux에 비해 정말 착한 사용법을 가지고 있었습니다. 마치 useState 쓰듯이 쉽게 사용할 수 있었고 로컬스토리지, 세션스토리지에 저장하는 법도 간단하였습니다.

 

그리고 Tailwind CSS의 경우는 처음 써봤기 때문에 공식문서를 찾아보면서 쓰다 보니 시간이 좀 걸리긴 했지만 숙달이 되면 다른 CSS 라이브러리들보다 "더욱 빠르게 스타일을 완성시킬 수 있겠다"라고 느꼈죠, 정말 매력적이네요.

 

총 20개의 질문으로는 아쉬움이 남더군요.

다음에는 더 많은 질문과 더욱 재밌는 과정 및 결과로 새로운 심리 검사 테스트를  제공하고 싶네요.

---

마블 히어로 테스트 : https://jeonghodong.github.io/marvel_test/

Github : https://github.com/jeonghodong/marvel_test

GitHub - jeonghodong/marvel_test: https://jeonghodong.github.io/marvel_test/