Community

개발자 99% 커뮤니티에서 수다 떨어요!

← Go back
친구야~ 너의 성격 가면👺을 알려줄게! (페르소나 심리테스트)
#mbti
3년 전
4,046
6
1. 심리테스트 결과물 ("페르소나 심리테스트")

https://personapersonality.com/

undefined

[ 모바일 ( 웹은 다르게 보입니다 ) ]

undefined

undefined

undefined

undefined

2. 제작자 소개

안녕하세요! 현재 대학교에서 디자인, 컴퓨터공학, 경영학을 다중전공하고 있는 대학생입니다. 코딩은 예전부터 조금씩 조금씩 겉만 핥다가 작년부터 제대로 공부하기 시작했습니다. 예전에는 혼자서 강의 듣고 따라하면서 코딩을 공부했었는데, 작년부터 대학 수업 전공 상관없이 코딩과 연계할 수 있는 과제(특히 디자인 과제..)를 코딩으로 해결하기 시작하면서 코딩을 제대로 공부하게 되었어요! (대학교 과제는 코딩을 강제로 독학하게 만든다고 한다…)

3. 서비스 소개

사람의 성격을 분류한 방법으로 MBTI 말고 여러가지 다른 방법이 있다는 것을 알고 계셨나요? 저는 그 중에 에니어그램에 특히 관심이 많습니다. 에니어그램은 MBTI보다 사람 성격의 근원에 대해서 얘기를 많이 하고, 또 사람의 성격이 특정한 상황에서 다른 성격으로 변할 수 있다는 것을 설명합니다. 제가 한때 에니어그램을 너무 재미있게 공부한 적이 있어서 이것을 많은 사람들에게 알리고 싶었는데, 마침 요즈음 심리테스트가 핫해서 저 또한 에니어그램에 기반해서 새로운 심리테스트를 만들어보면 좋겠다고 생각했습니다.

요즈음 심리테스트 대부분이 MBTI 기반이자 본인의 성격을 알고 그친다는 점에서 사람들에게 똑같은 서비스만 제공한다고 느꼈습니다. 그래서 저는 무언가 새로운 경험을 사람들에게 제공하고 싶었습니다. 여러 고민 끝에 문득 “본인이 본인의 성격을 가장 잘 안다고 할 수 있을까?”라는 의문이 들었습니다. 누구나 자기 자신을 평가할 때는 그 누구보다 관대해지기 마련이니까요. 그래서 저는 자기 자신이 아닌, 상대방의 성격을 알아보는 심리테스트를 고안했습니다. 요즈음 코로나이기도 해서 친구간 소통거리도 부족해지고 있는데, 서로가 본 서로의 성격을 친구들끼리 공유하면 조금 도움이 될 수 있을 것 같다고 생각했습니다. 마침 에니어그램 성격심리이론이 워낙 생소한 이론이어기 때문에, 새로운 방식으로 해당 이론을 심리테스트로 포장하면 많은 사람들의 이목을 끌 수 있다고 생각했습니다.

성격 결과는 가면의 형태로 나옵니다. 그래서 앱 이름도 ‘페르소나’입니다. 해당 심리테스트의 테마가 가면인 이유는 ‘내가 보는 상대방의 성격’은 사실상 내게만 보이고 있는 성격이기 때문입니다. 남들한테는 또 다른 성격을 보일 수 있으니깐요.

4. 개발과정

(사용한 기술)

React, Node.js

베포: AWS EC2

React는 꼭 한 번 제대로 배우고 싶어서 이번 심리테스트를 만들 때 React를 썼습니다. 사이트 간 데이터 공유를 위해서 무수히 많은 useState와 useEffect를 썼습니다. 사용자들 간 결과 공유를 위해서 자체 서버를 만들어야 했기 때문에 서버를 위해서 node.js를 활용했습니다. 백엔드 쪽 언어는 아직 많이 약해서 간단한 nedb 라이브러리를 활용하여 서버 데이터를 모았습니다. 베포를 위해서 AWS EC2를 사용했고, nginx를 활용해서 인터넷 웹사이트를 구축했습니다.

이후 어느정도 데이터가 쌓이고 나서, 사람들에게 다른 재미거리를 제공하고자 성격 결과화면에 상세보기 기능을 추가하여 상대방 성격이 전체 데이터에서 얼마나 흔한지, 그리고 ‘페르소나’가 앱의 이름인만큼, 상대방의 다른 성격 가면 후보까지 보이게 했습니다. 데이터 treemap을 위해서는 d3 라이브러리를 활용했습니다.

(어려웠던 점과 해결방법)

제작과정 중 가장 어려웠던 점은 질문을 형성하는 것이었습니다. 아무래도 에니어그램이 워낙 심오한 이론이고, 또 그렇게 잘 알려진 이론이 아니어서 심리테스트용 질문을 만들기가 무척 어려웠습니다. 더군더나 상대방 맞춤용 질문을 만들어야 해서 보다 신중하게 문제를 만들어야 했습니다.

개발에 있어서 어려웠던 점은 web 그리고 mobile responsive하게 만드는 것이었습니다. 앱에 svg문양을 여러 개 넣었는데, web에서는 그 문양을 그대로 적용할 수 있지만, mobile에서는 그 문양을 아예 쓸 수 없는 경우가 많았습니다. 가로 세로 비율이 달라지면 기존에 디자인한 svg element를 재활용할 수 없었기 때문이었습니다. 이 문제는 또한 css에서 media query를 사용해 해결할 수 있는 문제가 아니어서, 아예 js 파일에서 window resize listener를 설정하여 js 파일 안에서 svg element를 조절해야 했습니다.

5. 앞으로의 계획

많이 고민해서 만든 심리테스트여서 애정이 많이 가는 심리테스트입니다. 추후에 이러한 상대방 진단용 심리테스트를 더욱 발전시켜, 나중에는 로그인 기능까지 추가하여 사용자이 상대방에게서 받은 성격 결과 데이터를 총집합할 수 있게 하고 싶습니다. 그렇게 해서 데이터가 많이 쌓이면 자신의 보다 정확한 성격을 알려줄 수 있는 앱이 될 것이라는 희망을 갖고 있습니다. 이를 위해서 에니어그램을 보다 깊이 공부하고(에니어그램을 엄격하게 적용하면 성격 결과가 200가지가 넘는다고 한다..) 무엇보다도 백엔드 쪽 공부를 더 해야 할 것 같습니다. 저도 언젠간.. Full Stack Developer가 되려고 합니다!

6 comments