심리테스트 서비스"나와 닮은 개발자 찾기" 개발기
개발자가 얘기하는 심리테스트 기획부터 개발까지
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개의 유형이 전부 빠지지 않고 나온다는 사실만으로 만족스러웠습니다. 마지막으로 단순 데이터 시각화만 하고 끝내는 것이 아니라 결과를 가지고 어떻게 활용해 볼 수 있을지, 또 유의미한 데이터 분석을 위해서는 프로젝트 초기에 어떤 작업을 거치면 좋을지 등 앞으로 고민해 볼 질문거리도 생겼습니다.
이전에 했던 토이 프로젝트들과는 달리 개발뿐만 아니라 기획과 데이터 등 다양한 관점에서 서비스를 바라볼 수 있었던 프로젝트였습니다.
