MBTI 성향을 시각화하는 웹페이지 개발기: 우주먼지의 좌표 프로젝트

 

• MBTI Step II 기반의 심층 성향 분석을 통해 나만의 좌표를 시각화하는 웹페이지 '우주먼지의 좌표' 개발 과정과 데이터 분석, UI 구현까지의 전 과정을 소개합니다.
• keywords: MBTI Step II, 성격 유형 분석, MBTI Facet, 우주좌표 테스트, JavaScript MBTI, 웹 개발 프로젝트, 성향 시각화

 

---

 

MBTI 검사는 우리가 스스로를 이해하는 데 큰 도움이 되는 도구다. 하지만 단순히 16가지 유형으로 구분하는 것만으로는 개개인의 미묘한 차이를 온전히 담아내기 어렵다. 그래서 이번 프로젝트에서는 MBTI Step II의 2nd Facet 분석을 바탕으로 XYZ 우주좌표를 생성하는 웹페이지를 개발했다. 이번 글에서는 이 개념과 데이터 분석 과정, 그리고 개발 과정에 대해 다뤄보려고 한다.

 

---

🧑‍🚀 MBTI를 새롭게 표현해보자

MBTI Step II는 기존의 MBTI보다 더 세밀한 분석을 제공하는 방식으로, 각 지표(E-I, S-N, T-F, J-P)를 5가지 Facet(세부 성향)으로 나누어 분석한다. 이를 기반으로 개개인의 성향을 보다 정밀하게 파악할 수 있다.

 

📌 MBTI Step II의 주요 Facet 구조

MBTI	Facet1	Facet2	Facet3	Facet4	Facet5
E-I (외향-내향)	Initiating - Receiving	Expressive - Contained	Gregarious - Intimate	Active - Reflective	Enthusiastic - Quiet
S-N (감각-직관)	Concrete - Abstract	Realistic - Imaginative	Practical - Conceptual	Experiential - Theoretical	Traditional - Original
T-F (사고-감정)	Logical - Empathetic	Reasonable - Compassionate	Questioning - Accommodating	Critical - Accepting	Tough - Tender
J-P (판단-인식)	Systematic - Casual	Planful - Open-Ended	Early Starting - Pressure-Prompted	Scheduled - Spontaneous	Methodical - Emergent

 

기존의 MBTI 검사 결과를 이 Facet 기반의 2차 분석으로 확장하면, 보다 정밀한 성향 파악이 가능하다.

 

📋 새롭게 개선된 MBTI Step II 평가 방식

위의 Facet 까지 포함하여 MBTI를 잘 측정할 수 있도록 측정도구의 설계도 chatGPT에게 요청해 보았다. 

 

✅ 응답 방식:

• 각 문항에서 A와 B를 양쪽 극단에 배치
• 사용자가 5점 척도에서 자신의 위치를 선택

✅ Likert 5점 척도 (예시) 
      ➡ 사용자는 (1~5) 중 하나를 선택하기만 하면 된다.

[A] 처음 만나는 사람과 쉽게 대화를 시작한다.
(1) A에 매우 가깝다  
(2) A에 가깝다  
(3) 중립  
(4) B에 가깝다  
(5) B에 매우 가깝다  
[B] 낯선 사람과 대화할 때 상대가 먼저 말을 걸어주길 바란다.

 

 

🛠️ 점수 계산 방법 및 MBTI 유형 결정 방식

 

✅ 점수 변환 규칙

• 1점, 2점 → A 성향(강함) | 3점 → 중립 | 4점, 5점 → B 성향(강함)

✅ 최종 MBTI 유형 결정 방식

• 각 MBTI 지표(E-I, S-N, T-F, J-P)의 편향도를 계산, 백분율로 변환하여 시각적으로 표현 (예: E 60% - I 40%)
• 최종적으로 높은 비율을 가진 성향을 MBTI 유형으로 결정

---

📌 Replit을 통한 웹페이지 제작/구현

 

✍️ 지난글 참고 하기 : Replit과 AI를 활용한 반응형 뉴스레터 웹페이지 개발 가이드 :: Algobee - AI 정보를 전달하는 꿀벌

Replit과 AI를 활용한 반응형 뉴스레터 웹페이지 개발 가이드

 

Replit을 통해 프로젝트를 생성하고 chatGPT를 통해 정리한 MBTI 분석 로직을 통해 웹페이지를 개발했다.

(1) MBTI 설문 페이지 구현 → (2) MBTI 응답 결과 페이지 구현 → (3) 게이트페이지/ID,PW 추가/결과 다시 보기 구현 → (4) Admin 페이지 구현 순서로 진행되었다.

 

이 정도까지 정리하고 만드는 데 하루정도 걸린 것 같고, Replit 비용은 20~30달러 정도 결제되었다. 

 

---

 

🔹MBTI 테스트 페이지 구현

우주좌표 게이트페이지 화면 상세

 

"우주좌표 테스트 시작" 버튼을 누르면 20개의 심층 질문이 포함된 테스트 페이지로 이동한다.

이 질문들은 MBTI Step II의 Facet을 기반으로 설계되었으며, 각 질문에 대한 응답을 통해 개별적인 MBTI 세부 성향을 분석할 수 있다.

 

🔹결과 페이지 구현

우주좌표 결과보기 화면 상세

 

테스트를 완료하면, 다음과 같은 정보가 제공된다.

✅ MBTI 유형 및 Facet 분석 결과 

✅ 우주좌표 (X, Y, Z 값) 계산 결과 

✅ AI 기반 성향 분석 및 및 상세한 Report

✅ 좌표에 기반한 '우주에서 나의 위치 보기' (미구현)

    → 이 좌표 만드는 기능을 한참 씨름했는데 무슨 문제가 있는지 잘 되지가 않아서 나중에 추가하기로 했다.

 

🔹관리자 페이지 구축

우주좌표 관리자 페이지 화면 상세

 

관리자는 사용자의 MBTI 결과를 데이터베이스에서 조회하고, 재계산 및 재분석 기능을 제공하고 있다.

 

혹시나... '우주먼지 좌표 찾기'를 해보고 싶은 분이 있다면, 아래 링크를 클릭해 주세요.

설문 응답하러 바로 가기 (이미지 클릭)

 

 

# 이 웹페이지를 만든 서비스 Replit(바로가기)

Replit 프롬프트 입력 화면 (캡쳐)