심리테스트 서비스"나와 닮은 카지노 게임 찾기" 카지노 게임기
카지노 게임가 얘기하는 심리테스트 기획부터 카지노 게임까지
MBTI의 흥행 때문인지 스낵 컬처의 유행 때문인지는 잘 모르겠으나 요 근래 가볍게 즐길 수 있는 심리테스트가 유행하는 것 같습니다. 최근에는 기업들도 홍보를 위해 자체적으로 심리테스트를 만들면서 이제 심리테스트는 단순 오락거리가 아닌 마케팅이나 행동심리를 분석하는 수단으로도 활용되고 있다고 생각합니다.
저 또한 평소 MBTI를 좋아하고 단톡방에 심리테스트가 올라오면 꼭 한 번씩은 해보는 성격인지라 평소에 심리테스트는 어떻게 만들어지는지 궁금했습니다. 그러다 작년 하반기 즈음에 카지노 게임를 대상으로 한 심리테스트를 만들어보자고 생각했고 마침 관심 있어하던 지인 몇 명을 모아 토이 프로젝트를 시작했습니다.
이번 포스팅에서는 작은 규모의 심리테스트가 어떤 과정을 거쳐 탄생했는지, 그리고 그 과정에서 느낀 점 등을 이야기해볼까 합니다.
시작하기 전에
들어가기에 앞서 이번에 만든 서비스를 소개하자면 나와 어울리는 카지노 게임를 찾는 '나와 똑 닮은 슈스 카지노 게임는?'심리테스트입니다. 빌 게이츠, 리눅스 토발즈, 에이다 러브레이스 등 IT업계에 있다면 한 번쯤 들어봤을 유명인사들을 유형화했고 카지노 게임 경험이 있다면 공감할 만한 상황극을 질문으로 넣어 재미를 더했습니다.
혹시 카지노 게임 경험이 있으시다면 한 번 재미로 해보시는 것은 어떠신가요?
서비스의 시작은 기획
'심리테스트는 금방 만들겠지'라는 안일한 생각과는 달리 전체 작업 기간 중 기획 단계가 절반 이상을 차지했습니다.유형을 정하고 질문을 만드는 과정에서 고려해야 할 사항들이 생각보다 많고 복잡했기 때문입니다.
앞서 얘기했듯 이번에 만든 심리테스트는 카지노 게임라면 한 번쯤 들어봤을 유명인사들을 유형화했습니다. 다만 무작정 유명한 사람들만 고르자니 유형별 특징이 다들 비슷해지는 상황이 생겨 유명도보다는 특색 있는 인물을 고르는 데 집중했습니다. 가령 초반에는 유형 후보 중 프로그래밍 언어 창시자가 꽤 많았는데 이들의 특징을 정리하다 보니 겹치는 부분이 많아 결과적으로 Linux의 창시자 '리눅스 토발즈'만 남게 되었습니다.
기획서에만 남은 있었다가 없어진 후보들그리고 프로젝트를 진행한 의도가 '카지노 게임들이 재미있게 플레이할만한 심리테스트를 만들자'였기 때문에 질문 또한 코드 리뷰나 컨벤션 오류 등 실제로 카지노 게임을 하며 겪었던 상황들을 바탕으로 제작했습니다. 유저 타겟층이 카지노 게임로 좁혀지다 보니 홍보할 수 있는 대상이 한정적이었다는 아쉬움이 있었으나, 저희가 속한 커뮤니티의 얘기다 보니 즐겁게 작업을 진행할 수 있었다는 데 의의를 두기로 했습니다. 공감되는 질문이 많았다는 유저들의 긍정적인 피드백도 얻을 수 있었고요.
마지막으로 결과가 나오는 방식은 각 질문의 답변을 선택할 때마다 그 답변에 가까운 성격의 유형에 점수를 더하고, 최종으로 합산한 점수가 가장 높은 유형이 결과에 나오는 방식을 택했습니다. 여기서 문제가 되는 점이 최고점을 받은 유형이 여러 개일 경우였는데마땅한 방법이 떠오르지 않아 유형 리스트 중 앞쪽에 위치한 유형이 나오게끔 작업했습니다.
내겐 아직도 어려운 디자인
심리테스트가 유저를 끌어오기 위해서는 먼저 흥미 있는 주제여야 하고, 그다음으로 이목을 끄는 UI가 필요하다고 생각합니다. 그만큼 이번 프로젝트에서도 디자인의 중요성을 강조했고 일러스트와 UI컨셉에 꽤 신경을 썼습니다.
UI 디자인은 심리테스트의 특성상 페이지가 많지 않았기에 금방 작업할 수 있었는데 예상외로 일러스트에 시간을 많이 들였습니다.원래는 질문 화면까지 모두 일러스트를 넣을 계획이었지만 손이 느린 관계로 메인 화면과 결과 화면에만 그림이 들어가게 되었습니다. 결과에 나오는 유형별 일러스트는 실제 인물들의 사진을 토대로 그리되 그 유형에 어울리는 아이템을 함께 그려 재미를 더했습니다.
어떤 성격의 인물인지 한눈에 보이시나요?마침내 카지노 게임
카지노 게임은 프런트엔드 카지노 게임과 백엔드 카지노 게임로 분담하여 진행했고 저는 다른 팀원 한 분과 같이 웹 프런트엔드 포지션을 맡았습니다. 자세한 카지노 게임 스펙은 아래와 같습니다.
Front-end : React.js, styled-components
Back-end : Node.js, express.js, MySQL
Server: AWS EC2
나온디자인에맞게컴포넌트를구현하고api를연동해서버와통신하는작업은이전에도해본경험이있어금방작업할 수 있었습니다. 다만SNS 공유기능이나CI/CD 등처음으로시도해보는작업들에서우여곡절이있었습니다. 모든노력이그렇듯쏟은시간에비례하는경험치를얻지는못했으나의미있는인사이트를얻을수있었습니다.
SNS 공유 기능
이번 서비스에선 카카오톡과페이스북공유기능을구현했습니다. 홈화면에서URL을공유하는일은큰 이슈가 없었으나결과페이지에서공유할때결과유형에따라다른썸네일과타이틀을보여줘야한다는문제가있었습니다.
그래서 우선 페이스북은 React의 헤더 값을 변경할 때 사용하는 컴포넌트인 React-Helmet을 이용해 결과마다 open graph 값을 변경하려 했고, 카카오톡의 경우 카카오톡 공유를 담당하는 메서드에 유형에 맞는 이미지 url과 타이틀명을 파라미터로 보내는 방식으로 작업했습니다.
https://gist.github.com/swimjiy/7c5a26b8699780f9ae653bcceaf06f35
CI/CD
원래배포를하려면매번빌드해야하는번거로움이있었는데문득요새 서버에서 자동배포를많이하는데프런트도가능하지않을까?란생각이들어CI/CD에도전했습니다. github pages, netlify, vercel 등유명한프런트엔드배포플랫폼들이있는데그중에서SPA 배포에유용하고도메인커스텀이가능한netlify를선택했습니다.
자동배포커맨드를직접짤생각에걱정이컸는데다행히어떤분이만들어놓은netlify 전용툴(Netlify Actions) 이있길래사용하게되었습니다. 자동배포뿐만아니라PR이등록되면프리뷰전용URL도따로제공하고 있어작업도더수월하게진행할 수있었습니다.
CI/CD를도입한결과빌드하는과정을무조건한번거쳐야했던예전과달리Pull Request를보내고브랜치가머지되면바로배포를할수있게되었습니다. 더불어툴을사용하긴했지만사용을위해CI의기본개념은익혀야 했기에이번기회로CI 워크플로우는어떻게이루어졌는지도배울수있었습니다.
예쁘게 잘 돌고 있는 ci결과 및 마무리
우선 심리테스트를 만들어보고 싶다는 생각으로 시작한 프로젝트인 만큼 성공적으로 결과물을 만들었다는 것만으로 의미 있는 프로젝트였다고 생각합니다. 유저들의 긍정적인 피드백은 덤이고요. 질문 하나하나가 현실적으로 생각해볼 내용이라 좋았다는 피드백이 가장 인상이 남았습니다.
더불어 결과를 수집해 데이터 시각화를 해보는 것이 목표였는데 다행히 그래프를 만들 당시 기준 약 800개의 표본을 얻을 수 있었고 이를 통계 낸 결과 아래의 그래프가 나오게 되었습니다.
여러분은 몇 프로에 속해 계시나요?상위3개유형이전체의약50%를차지하긴하지만그래도12개의유형이전부빠지지않고나온다는사실만으로만족스러웠습니다. 마지막으로단순데이터시각화만하고끝내는것이아니라결과를가지고어떻게활용해볼수있을지, 또유의미한데이터분석을위해서는프로젝트 초기에어떤작업을거치면좋을지등앞으로고민해볼질문거리도생겼습니다.
이전에했던토이프로젝트들과는달리카지노 게임뿐만아니라기획과데이터등다양한관점에서서비스를바라볼수있었던프로젝트였습니다.
