초간단 성격유형별 테스트 만들었습니다

성격유형별 테스트를 안해보신 분이 거의 없으실텐데요. 정식 MBTI테스트를 해볼 수 있는 곳도 있구요. 

국내에서는 (주)어세스타라는 곳에서 MBTI라이센스를 가지고 있다고 합니다.

무료성격유형 검사를 해볼 수 있는 16Personalites 에서 성격유형 테스트를 많이 하실 것 같고, 고양이 성격유형테스트라는 사이트도 유명합니다. 저는 심심풀이로 간단한 성격유형별 테스트를 만들어봤는데요. 5개문항으로 테스트하도록 해봤습니다. 
 
제가 만든 성격유형별 테스트는 여기서 해보실 수 있습니다.
 

30초 성격유형별테스트 바로가기

 

이글의 구성

• 30초 성격유형별 테스트만들기
• 자바스크립트 주요 기능 설명
• CSS 주요 부분 설명
• html 주요 부분 설명
• ChatGPT 유료 결제 방법

 
 

30초 성격유형별 테스트 만들기

30초만에 만든 것이 아니라 30초 동안 간단히 해볼 수 있는 테스트입니다. 성격유형별 테스트만들기를 javascript와 css, html로 간단히 만들었습니다. 개발자가 아니라서 엄청나게 chatGPT와 씨름을 했고 너무 잘 안돼서 chatGPT를 유료 결제까지 했습니다. 참고로 유료 결제 관련 내용은 페이지 하단에 적어두겠습니다. 하지만 별차이 없음을 미리 알려드립니다. 아는 프로그래머 분께 부탁드렸으면 글쎄요, 제 생각엔 반나절도 안걸려서 뚝딱 만들었을거예요 - 프로그래머 분들 존경합니다. 하지만 ChatGPT는 진짜 최소 2일 정도 쪼이고 쪼이고 제가 버그  찾아내고 엄청 고생했습니다. 챗지피티는 자기가 틀린 곳을 모르면 문제 없다고 우기거든요.
 

자바스크립트 (Javascript) 주요 기능 설명

제가 만든 것은 정말 심플한 성격유형별테스트입니다. 5문항으로 이뤄져 있고, 5문항을 마치면, 결과페이지를 출력하는 형식으로 되어 있습니다. javascript는 문제를 구성하는 영역, 응답을 기준으로 성향별 점수를 계산하는 영역, 결과를 표시하는 영역으로 크게 나눠볼 수 있습니다. 
상수를 선언해줍니다. 

const questions = [
  {
    text: '새로운 환경이나 상황을 마주하게 된다면 어떤 것이면 좋겠어요?',
    choices: [
      '새로운 사람들과의 만날 수 있는',
      '조용한 환경에서 시간을 보낼 수 있는',
      '인상 깊은 장소, 디테일한 경험 가능한',
      '독특하고 창의적 아이디어를 낼 수 있는 '
],
},

위와 같은 방식으로 문제를 구성해줬구요. const는 상수를 선언해주도록 하는 부분입니다. 
 
fuction displayQuestion으로 문제를 출력하도록 하고 질문(question), 선택지(choice)를 기능으로 만들어서 질문과 4개의 선택지가 한묶음으로 되도록 했습니다. 질문에 답을 선택하지 않고는 다음 문제로 넘어갈 수 없도록 해주었구요. 
아래와 같이 답을 저장하고 선택지를 체크하지 않으면 경고를 띄웁니다.

// nextQuestion() 함수를 업데이트하여 선택한 답변을 저장하도록 합니다.
function nextQuestion() {
const selectedChoice = document.querySelector('input[name="choice"]:checked');
if (!selectedChoice) {
alert('Please choose an option.');
return;
}

 
제일 애먹였던 부분은 결과를 보여주는 부분이었습니다.
원래는 성격유형별테스트를 할 때 4가지의 중요한 성격을 체크하기 위해 각각 대비되는 선택지를 2개씩 주는데요. 저는 4개의 선택지를 섞어서 나오게 했거든요. 성격유형을 최대한 고르게 섞는 것도 필요했고, 그러다 보니 각각의 문항들도 사용한 언어가 좀 어렵게 느껴질 수 있습니다. 위에 말씀드렸던 고양이 테스트는 정말 쉬운 말로 쉽게 답변이 가능하게 되어 있죠. 결과를 제대로 출력하기 위해서 성격의 유형을 최대한 골고루 섞여 있게 문제를 만들려고 애쓰다보니 이부분에서 ChatGPT와도 실갱이를 한참했습니다. 그리고 자꾸만 여기서 에러가 나서 코드를 여러번 확인시키고 이부분이 문제가 있는 것 아니냐 하고 질문을 던지고 제가 직접고쳐보고 하기를 반복했습니다.
 

function displayResults(result) {
  // 결과를 표시할 div를 찾고, 결과를 표시합니다.
  const resultContainer = document.getElementById('resultContainer');
  resultContainer.style.display = 'block';
  const resultElement = document.getElementById('result');
  resultElement.innerHTML = ''; // 초기화
  resultElement.innerText = result;

 
위 부분과 함께 16개의 성격 유형별로 결과가 나올 수 있도록 텍스트와 이미지를 구성해줬습니다. 이미지는 Midjourney를 쪼아서 만들었습니다. 이것때문에 미드저니도 유료 결제를 했답니다. 미드저니에서 뽑은 16개의 성격유형 이미지입니다. 사실 좀 완벽하게 매칭되지는 않지만 그래도 나름 이미지들은 스테이블 디퓨전으로 뽑는 것보다 만족스러워서 그냥 사용하기로 했습니다.
 

미드저니로 만든 16개의 성격유형

 

CSS 주요부분 설명

CSS 때문에 페이지가 제대로 보이지 않는 경우도 발생합니다. 여러번 소스를 수정하면서 CSS도 많이 수정하고 제가 직접 수정하거나 미디어 쿼리를 추가하기도 했습니다. 가장 중요한 부분은 퀴즈(질문지) 부분과 결과를 출력하기 위한 부분이겠는데요. 
 

#quizContainer {
  text-align: left;
  margin-top:0px;
  padding-top:0px;
  padding-bottom:20px;
  height: 100%;
  max-width: 600px;
  min-width: 360px;	
  background-color:#FFFFFF;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  margin-bottom:30px;
	
  overflow:hidden;
  
  border:1px solid #006382;
}

#result-page {
  display: none;
  width:600px;
  max-width:600px;
  
  text-align: center;
	
  opacity: 0; /* 초기에는 투명도를 0으로 설정하여 화면에서 숨김 */
  animation: fade-in 1s ease-in-out 0.5s forwards; /* 애니메이션 설정 */

화면 사이즈에 따라 잘 맞지 않아서 CSS 여러번 수정했습니다. 지금도 만족스럽지는 않은데, 너무 오래 붙잡고 있는 것이 좋은 건 아니라서 타협하고, 배경이미지를 추가하고 디자인을 좀 가미해서 마무리했습니다. 
PC와 모바일 화면입니다. 

 

HTML 주요 부분 설명

HTML은 심플하기 때문에 특별히 설명드릴 부분은 없지만 문제부분과 결과 부분이 분리되어 있다는 점이 중요할 것 같습니다.

<div id="quizContainer">
	
	<div id="question-page">
    <h1 class="headtitle">30초 성격유형별 테스트</h1>
	<div style="text-align: center;margin-top:10px;">심심풀이지만 진지한 5문항!</div>
		<div class="container">
		
		<h2 id="question"></h2>
			
			<hr>
			
    <div id="choices"> ... </div>
    
    <button id="nextButton" onclick="nextQuestion()">다음</button>
  </div>
  </div>
		
 <!-- 결과 부분 -->       
<div id="result-page" style="display: none;">
		
			<h1 class="headtitle">나의 성격유형은,</h1>
	
	<div id="resultContainer">
		
    <img id="resultImage" src="" alt="">
    <h2 id="result" style="font-size:40px; text-align: center;"></h2>
	<p id="resultDescription" style="text-align: center;"></p>
	</div>
		
	<br><br>	
		<button class="restart" onclick="restartTest()" style="text-align: left;">다시하기</button>
			
		</div>	
		
		
	
  
		
	</div>
  
  
  <script src="mbtitest.js"></script>

 id 로 지정된 부분에 자바스크립트에서 정보를 받아서 화면에 뿌려주는 역할을 합니다.
 
 

30초 성격유형별테스트 바로가기

 
 

ChatGPT 유료 사용하기

 
ChatGPT를 무료로 사용하다가 두가지 이유 때문에 유료 결제를 하게 됐습니다. 첫번째는 속도입니다. 어느정도 사용하다 보면 자주 끊기기도 하고 어떤때는 접속자체가 잘 되지 않고 오랫동안 사람인지를 체크하는 부분에서 화면전환이 되지 않더라구요. 유료결제를 하면 이문제가 없다고 하여 고려하고 있었는데요. 그보다 더 큰 유료결제를 결심한 것은 좀 더 버그체크를 제대로 할 수 있을 것 같다는 기대 때문이었습니다. 유료 결제를 하면 GPT4를 사용할 수 있거든요.
 
유료 결제는 chatGPT Plus를 선택하면 됩니다. chatGPT 화면에서 왼쪽의 plus 를 선택하고 결제하면 되구요. ChatGPT Plus가 되면 아래와 같이 GPT-4 를 선택할 수 있습니다.
 

chatGPT 바로가기

 
 

마치며,

제가 만든 성격유형별테스트는 5개 문제 각각 4개의 선택지를 조합해서 성격을 분석하는 것인데요. 16personalites 의 성격유형테스트와는 비교할 수 없을 정도로 단순한 것이기 때문에 이것으로 성격을 분석한다고는 할 수 없습니다. 하지만 이런저런 상황일 때 나는 이런 생각에 더 가깝구나 하는 생각을 해보실 수 있을 듯합니다. 5개문항에 4개 선택지라서 평소의 성격분석과는 차이가 생기기도 하고 비슷하게 나오기도 합니다. 참고해주시기 바랍니다. 

 

국내에서 정식으로 MBTI를 테스트해볼 수 있는 곳은 어세스타 심리평가기관이라고 합니다. 다른 무료 테스트에 대해서는 개개인이 판단하셔서 이용하시면 될 거 같습니다.
 
 

30초 성격유형별테스트 바로가기