MBTI 아이스크림 테스트 개발 회고🍦

예원·2023년 5월 22일

MBTI Springboot html 회고

회고

목록 보기

1/1

여기는.. 이상한 아이스크림의 마을..?
난 어떤 아이스크림일까?

서비스 링크 : ~~https://icecream-mbti.gajob.site~~
깃헙 링크 : github.com/icecream-mbti

인스타 스토리에 MBTI 테스트로 도배된 적이 있었다.
그때마다 나도 만들어 보고 싶다.. 라는 생각을 종종 했다.

그러던 중 대학 동기와 함께 만들 기회가 돼서, MBTI 막차🚗에 탑승해 보기로 했다!

기획부터 하자

기존 MBTI 테스트 사이트 조사부터 시작하기로 했다.

꽃, 케이크, 콩, 학생, 라벨, 직장 동료 등 ...

없는게 없을 정도로 다양한 테스트가 있었다.

동기와 고민하고 고민한 끝에.. 더워지는 날씨에 맞춰 아이스크림 테스트로 주제를 정했다.

질문 & 테스트 결과 작성

MBTI 테스트에서 질문 아래의 유형을 구분하는 질문이 각 3개씩, 총 12개이다.
--> E vs I , S vs N , T vs F , J vs P

노션을 이용해서 아래와 같은 방법으로 질문의 초안을 작성하였다.

만든 질문은 주변 지인들에게 부탁하여 수정과 수정을 거쳐 현재 질문이 되었다.

테스트 결과는 MBTI 유형의 특징과 아이스크림의 특징을 매핑시켜 하나하나 골랐다.

설득력이 있는 결과를 만들어 내는 게 정말 어려웠던 것 같다.

얼른 개발하자

개발 언어 선택

먼저 우리가 선택한 언어는 아래와 같다.

프론트엔드 : html css javascirpt
백엔드 : SpringBoot
디비 : MariaDB

개발을 하기에 앞서 어떤 언어를 사용해야 할지 고민이 많았다.
MBTI 테스트 자체는 HTML, Javascirpt만으로도 구현할 수 있기 때문이다.
하지만 프로젝트의 목적 중 하나가 대학 동기의 스프링 부트 공부였기 때문에 Spring Boot도 사용하기로 했다.

이에 다음과 같이 프론트엔드, 백엔드의 역할을 정했다.

프론트엔드 : 사용자가 12개의 질문을 모두 선택하면 API를 통해 결과를 받아와 표출해준다.
백엔드 : 프론트엔드로부터 받은 12개 질문의 답을 이용해 MBTI 결과를 계산하고, DB에 저장한 뒤 결과를 반환한다.

프론트엔드 개발

간단하게 프론트엔드 개발 부분을 기록해보았다.

질문 리스트

data.js 파일에 만든 질문과 답변을 작성하였다.
여기에 작성한 순서대로 사용자에게 보여주게 된다.

// js/data.js
const qnaList = [
    {
        q: '눈을 뜨니 아이스크림이 걸어 다니는 이상한 마을이다. <br>이럴 때 나는?',
        a: [
            { answer: '주변 아이스크림에게 말을 건다.<br>"안녕하세요! 저 좀 도와주실 수 있나요? 이상한 사람 아니에요ㅜㅜ"', type: 'E'},
            { answer: '혼자 주위를 살피며 상황을 파악한다.', type: 'I'},
        ]
    },
  	...
 ]

사용자가 선택지를 고르면

index.html 에 사용자가 선택한 유형을 카운팅 하기 위한 input 태그가 있다.
선택 이벤트가 발생하면, 선택지와 일치하는 id를 가진 태그의 value가 1씩 증가하게 된다.

<!-- index.html -->
<input type="hidden" id="E" value="0" />
<input type="hidden" id="I" value="0" />
<input type="hidden" id="S" value="0" />
<input type="hidden" id="N" value="0" />
<input type="hidden" id="T" value="0" />
<input type="hidden" id="F" value="0" />
<input type="hidden" id="P" value="0" />
<input type="hidden" id="J" value="0" />

그러고 나서 화면에 표출된 질문을 다음 질문으로 변경해주면 된다.

// js/start.js
function next(pageIdx) {
    let title = document.querySelector(".question #title");
    let answer_a = document.querySelector(".answers #A");
    let answer_a_btn = document.querySelector(".answers #A .btn_select");
    let answer_b = document.querySelector(".answers #B");
    let answer_b_btn = document.querySelector(".answers #B .btn_select");
    let page = document.querySelector("input[id='page']");
    let pageCnt = document.querySelector(".page #cnt");

    title.innerHTML = qnaList[pageIdx].q;
    answer_a.href = `javascript:select('${qnaList[pageIdx].a[0].type}')`;
    answer_a_btn.innerHTML = qnaList[pageIdx].a[0].answer;
    answer_b.href = `javascript:select('${qnaList[pageIdx].a[1].type}')`;
    answer_b_btn.innerHTML = qnaList[pageIdx].a[1].answer;
    page.value = ++pageIdx;
    pageCnt.innerText = pageIdx;
}

마지막 질문까지 선택하면

ajax를 이용하여 서버에 API를 요청한다.
이때 선택한 값(E, I, N, ...)에 대한 개수를 보내는데, json 형태로 변경해줘야 한다.

// js/start.js
let mbti = JSON.stringify({
        E : document.getElementById("E").value,
        I : document.getElementById("I").value,
        S : document.getElementById("S").value,
        N : document.getElementById("N").value,
        T : document.getElementById("T").value,
        F : document.getElementById("F").value,
        P : document.getElementById("P").value,
        J : document.getElementById("J").value
    });

API 응답으로 받은 결과에 맞는 이미지를 사용자에게 보여주면 끝이다.

$.ajax({
        url : `${server}/mbti/result`,
        headers: {'Content-Type': 'application/json'},
        data : mbti,
        type : "POST",

        success: function(data) {
            document.querySelector("#result #result_img").src = `./img/${data}.png`;
            document.querySelector("#result .fin").style.display = "block";
        },

        error: function(request, status, error) {
            console.log(error);
        }
    });

백엔드 개발

백엔드는 대학 동기가 담당하였다.
개발 내용이 궁금하면 이 글도 같이 보면 된다.

배포

이번 프로젝트에서는 간단하게 서버를 구축하였다.

AWS를 사용하였으며, 사용자 수 집계를 위해 구글 애널리틱스와 연동도 하였다.

AWS 설정

- EC2
  - 8080포트로 Spring Boot 서버 배포
  - Nginx를 통해 80번 포트에 프론트엔드를 배포

- RDS
  - MongoDB 생성

- Route53
   - 도메인 등록

- Certificate Manager, ALB
  - SSL 인증서 생성 등

배포까지 완료한 뒤, 지인들 홍보하였다.