Big5기반 직장인 테스트. 기획부터 개발까지 일주일만에 완료!

📌 목차

1. 개발 배경 

원래 카카오에서 big5 성격검사를 할수 있었다.

그런데 문항수가 많아서 검사시간이 길고, 결과가 '죠르디' 캐릭터를 활용해서 성향을 보여준다. 

 

 

big5 검사는 mbti와 다르게 여러가지 성향에 따라서 어디에 가까운지를 알려줘서 좀더 신빙성이 있다고 한다.

그리고 카카오의 진단 결과에서 "일할때"에 대한 내용이 있지만 내용이 살짝 빈약하다고 느꼈다. 

 

그래서 직장 생활과 연결된 공감 가능한 캐릭터 결과로 알수 있는 big5 성격검사 테스트를 만들어보기로 했다.

 

2. 서비스 기획

아래와 같은 4가지 질문에 대한 답을 찾아가며 기획을 진행했다. 사실 기능은 단순했다. 다만 그 내용을 설계하는게 힘들었다.

 

2.1  누구에게?

20~30대 직장인. Big5 검사를 알거나 모르는 사람

2.2  어떤 문제를?

- 기존 Big5 검사는 문항 수가 많아 검사 시간 7분 이상 소요 ->  바쁜 직장인에게 피로감 

- 죠르디' 같은 캐릭터를 활용하지만, 직장 생활 맥락과 거리가 있어 결과에 대한 공감이나 흥미를 유발하기 어려움

2.3 어떻게 해결?

- 간단하고 빠른 Big5 검사(20문항) 제공 : 5가지 항목별 4가지 질문, 3지선다 선택형

- 직장 생활에 특화된 캐릭터 제시: 3지선다 선택에 따라 높음/중간/낮음으로 점수 부여->과반수 이상 높음/낮음 측정 -> 32가지 유형 

2.4 왜 풀고 싶은가?

- 사실 재미와 공감이 전부다. 직장 생활 캐릭터를 통해 성격을 즐겁게 파악하고, 결과를 공유하면서 새로운 소셜 경험을 제공하는것

- mbti보다 과학적 근거가 탄탄한 big5 성격검사를 더 많이 알리고 싶다. 자신의 기질적인 강점 약점 부터 직장내 업무스타일 파악까지  

 

3. 프롬프트 기획 (질문/답변/결과 만들기 )

이게 가장 오래 걸렸다. 기능구현이 아니라 캐릭터 이름이나 설명, 질문, 답변같은 질문지를 작성하는게 제일 큰 일이였다. 

물론 GPT와 Gemini가 어느정도 big5 성격진단 검사를 알고 있어서 그걸 바탕으로 질문을 만들었다.

 

하지만 톤이나 단어들이 마음에 들지 않았고, 직장 생활 시나리오 기반이라고 해도 상황에 따라 너무 달랐다.

그래서 어느정도 나의 수작업이 많이 들어갔고, 일일이 문장을 손보는 공수가 생각보다 많이 들어갔다. 

 

최종적으로 이렇게 프롬프트 기획으로 만든 데이터들은 JSON으로 저장했다.

이 서비스에서는 질문지, 점수 mapping, 캐릭터 mapping 이 필요했다. 

 

캐릭터 mapping에 각 캐릭터별 요약결과(summary)와 특징(description)을 작성하는게 정말 일이였다.

32가지였는데 후회했다.....

 

4. 서비스 개발 

4.1 기능개발 

개발은 딱히 할만한게 없었다. 

big5에 대한 설명을 하는 랜딩페이지, 질문답변하며 테스트 진행하는 페이지, 결과를 보여주는 페이지가 전부였다.

기능이라고 불릴만하게 '공유 기능' 정도?. Web Share API가 있다며 공유기능도 알아서 커서가 만들어줬다. 

4.2 디자인 개편  (+카피 문구)

그러다보니 디자인에 대한 공수가 많이 들어갔다.  보여주는게 전부이니까.

처음엔 그냥 커서가 만들어주는대로 컬러도 꽤 나쁘지 않은데? 하면서 개발해 나갔다.

그러다가 어느순간 전체적인 컨셉과 테마가 필요하겠다 싶어서 전반적으로 디자인을 변경했다. 

추가적으로 카피 문구들을 손봐야하는것도 생각보다 큰 일이였다. 이것도 LLM을 사용해서 모두 피드백을 받았다. 

 

4.3  반응형 디자인 적용 

그리고 처음엔 웹으로 개발하고 디자인헀는데, 생각해보니 앱에서 공유를 많이 할테니 모바일 화면에 최적화 되어야했다.

첫 배포를 하고 내 모바일 화면에서 확인해보니 처참했다. 한줄을 넘어가는 문구들을 싹다 고쳤다.

 

모바일 화면에서도 같은 디자인이 적용될수 있도록 반응형 디자인으로 바꿨다.

 

4.4  디자인 QA

 https://responsively.app/ 라는 무료 툴을 반응형 디자인 툴을 사용했다.

각 기종마다 어떻게 보이는지 동시에 확인할수 있었다. 

Responsively App - A Web Developer's Browser

 

웹을 비롯해서 일단 아이폰의 기종들 위주로 우선으로 확인해봤다.

 

그런데 확인해보니 기종마다 사이즈가 달라서 버튼이나 텍스트가 짤리는 부분도 많았다.

다시 문구와 텍스트을 또 손봐야했다...수동으로 또 한땀한땀 문장들을 수정했다.

프롬프트 기획을 글자수 제한까지 포함해서 좀더 꼼꼼하게 해야된다는 교훈을 배웠다.

 

아이폰 기종을 기준으로, 한 문장에 20글자수로 제한하면 될것 같다. 그 이상이 넘어가면 짤리거나 줄이 넘어가서 보기싫어진다.

랜딩페이지와 테스트 페이지에 있는 질문/답변 뿐만 아니라 결과 페이지에 있는 모든 텍스트들을 다시 수정했다. Aㅏ....

예전에 카피라이팅을 관련 일을 해보고 싶었는데 이런게 아닐까 싶었다...!! 오히려 좋다 이런일도 해보고! 

 

5. 배포

배포는 vercel로 했다. 깃이랑 연동해놔서 커밋을 하면 자동으로 배포가 된다.

 

그렇다면 완성이다! 

https://big5-work-test.vercel.app/

Create Next App

 

참고로 vercel의 hobby 플랜(무료)는 아쉽게도 구글의 애드센스를 달아서 상업적 이용은 불가능하다.

그래서 아무래도 조만간 cloudflare로 다시 배포하고 호스팅할까 싶다..제 목표는 수익이라구요(현실적인편)

 

테스트를 해보니 나는 요게 나왔다! 아무래도 32가지 결과라 선택을 하나만 다르게 해도 다 달라진다!

친구에게도 해보라고 전달해줬는데 소름돋게 맞는거 같다며 공유해줘서 뿌듯했다.

 

나도 직접 사용하다보니 디테일한 수정부분이 점점 몇가지 보인다. 

예를 들면 질문지에 '와 "가 다른 부분이라던지, vercel에서 배포하고 나면 [Create Next App] 이랑 [여기를 눌러 링크를 확인하세요] 같은 문구를 바꾸고 싶다던지, 추가로 기회가 되면 수익화까지 이어지게 해봐야겠다! 디테일의 수정은 역시 끝이 없는건가...!!

 

6. 피드백 받기

이 외에도 수정할 사항이라던지 추가적인 고려사항이 있을까 싶어서 제미나이에게 나의 서비스에 대한 평가를 부탁했다. 

그리고 오피스 캐릭터가 강력한 차별화 포인트라고 해주었다. (뿌듯) 뿐만 아니라 명확한 타켓팅과 문제 해결이 강점이라고 했다. 20-30대 직장인이 겪는 기존 테스트의 긴 시간과, 결과의 비공감성이라는 문제를 정확히 짚어냈다는 평가를 받았다. 

 

뿐만 아니라 현재 서비스의 불확실성과 우려사항도 알려줬다.

예상대로 문항수가 줄어들어서 지나친 단순화로 인한 신뢰도가 한계점이라고 분석했다. 그래도 big5 진단 검사를 할때 TIPI라고 10개 문항으로 검사하기도 하고, BFI-10, BFI-20 이라고 문항수가 10개나 20개로 하는 간소화 진단 테스트도 있어서 괜찮다고 해줬다.

 

그래서 더 나은 서비스를 위한 고려사항도 알려줬다.

캐릭터 결과의 연결성을 강화하라고 조언해줬다. 결과 화면에서 사용자가 "왜 내가 이 캐릭터가 나왔는지"에 대해 납득할 수 있어야 한다고 했다. 예를 들어 "당신의 높은 성실성(75%)과 낮은 외향성(30%)이 결합되어 '조용한 칼퇴러'가 나왔습니다.  이렇게 예시까지 말이다.

그리고 현재 32가지 캐릭터가 5가지 특성을 '높음/낮음'의 이분법으로 나눈 결과이기에 향후에는 각 점수(예: 0~100%)에 따라 더 미묘하고 다양한 캐릭터를 제공하는 것을 고려하라고 했다.

 

아쉽지만 이정도에서 만족하련다..