자신만의 성향 테스트 웹사이트를 직접 만들어보고 싶다면 복잡한 프레임워크 없이 순수 웹 기술만으로 구현하는 것이 가장 빠른 방법입니다. 이번 글에서는 간단한 문항 데이터 구조 설계부터 점수 집계 로직, 그리고 동적 결과 화면 렌더링까지 전체 과정을 구현하는 코드를 살펴봅니다.
웹앱 인터페이스와 레이아웃 구조
사용자가 테스트에 집중할 수 있도록 화면은 크게 시작 화면, 질문 진행 화면, 결과 화면 세 가지 상태로 나뉩니다. 자바스크립트를 통해 각 상태에 해당하는 HTML 요소의 보임 여부를 제어합니다.
index.htmlHTML
<div id="app">
<div id="start-screen" class="screen active">
<h1>나만의 MBTI 테스트</h1>
<p>간단한 문답을 통해 성향을 확인해보세요.</p>
<button id="start-btn">테스트 시작하기</button>
</div>
<div id="question-screen" class="screen">
<div id="progress-bar"></div>
<h2 id="question-text"></h2>
<div id="options-container"></div>
</div>
<div id="result-screen" class="screen">
<h2 id="result-title"></h2>
<p id="result-desc"></p>
<button id="restart-btn">다시 하기</button>
</div>
</div>질문 데이터 구조와 상태 관리
테스트 문항은 각 성향 지표에 점수를 부여할 수 있도록 배열 형태로 정의합니다. 사용자가 선택한 답변에 따라 특정 지표의 점수가 누적되는 방식으로 결과를 도출합니다.
app.jsJAVASCRIPT
const questions = [
{
question: "주말에 약속이 없다면 당신의 선택은?",
options: [
{ text: "사람들을 만나 에너지를 얻는다", type: "E" },
{ text: "집에서 조용히 휴식을 취한다", type: "I" }
]
},
{
question: "새로운 아이디어를 구상할 때 더 끌리는 방식은?",
options: [
{ text: "현실적인 데이터와 경험을 중시한다", type: "S" },
{ text: "직관과 미래의 가능성을 중시한다", type: "N" }
]
}
];결과 계산 및 화면 전환 로직
관련 글: 자바스크립트 웹앱 제작
사용자가 모든 질문에 답변하면 누적된 점수를 비교하여 최종 MBTI 유형을 판별하고 결과를 화면에 렌더링합니다.
app.jsJAVASCRIPT
let currentStep = 0;
let scores = { E: 0, I: 0, S: 0, N: 0 };
function handleAnswer(selectedType) {
scores[selectedType]++;
currentStep++;
if (currentStep < questions.length) {
renderQuestion();
} else {
showResult();
}
}스타일링 적용 시 주의사항
모바일 기기에서도 화면이 자연스럽게 표시되도록 반응형 레이아웃을 구성해야 합니다.
- 화면 전환 시 부드러운 전환 효과를 위해 opacity와 transform 속성을 활용합니다
- 버튼 크기는 터치하기 편하도록 최소 44px 이상의 높이를 확보합니다
- 모바일 화면에서 가독성이 좋도록 적절한 폰트 사이즈와 줄 간격을 유지합니다
TIP
질문 개수가 늘어나더라도 상태 관리 객체를 확장하면 쉽게 문항을 추가할 수 있습니다.
자주 묻는 질문
외부 라이브러리 설치가 필요한가요?
외부 라이브러리 없이 순수 HTML, CSS, JavaScript만으로 구현되어 있어 별도의 빌드 도구 없이 브라우저에서 바로 실행할 수 있습니다.
전체 16가지 유형으로 확장하려면 어떻게 해야 하나요?
문항 데이터를 추가하고 결과 판별 함수에 로직만 보완하면 16가지 전체 MBTI 유형으로 확장할 수 있습니다.
완성 코드 예제
나만의 웹앱 확장하기
지금까지 살펴본 구조를 바탕으로 CSS 스타일을 다듬고 문항을 추가하면 완성도 높은 성향 테스트 서비스를 구축할 수 있습니다.
직접 코드를 수정하며 자신만의 고유한 기능을 추가해 보세요.