엠비티아이 검사 자바스크립트

엠비티아이 검사 자바스크립트

웹사이트 방문자가 자신의 성격 유형을 간편하게 파악할 수 있는 MBTI 검사는 사용자 참여 도구로서 블로그 트래픽 유입과 체류 시간 증대에 효과적입니다. 특히 워드프레스 포스팅 내에서 바로 실행 가능한 스크립트를 삽입하면 별도 페이지 이동 없이 독자 경험을 높일 수 있습니다. 본 가이드에서는 순수 HTML/CSS/JavaScript만으로 구성된 MBTI 검사 위젯을 워드프레스 포스트 안에 직접 삽입하는 방법을 단계별로 설명합니다.

엠비티아이 검사 스크립트

• 목표: 워드프레스 포스트 본문에 복사·붙여넣기만으로 작동하는 MBTI 검사 스크립트 코드를 제공
• 대상: 프론트엔드 개발자, 블로거, 워드프레스 운영자
• 요구사항: 워드프레스 에디터의 텍스트(HTML) 모드에서 스크립트 태그를 허용하는 환경이어야 함

엠비티아이 검사 스크립트 구현 방법

1. 준비 사항

• 워드프레스 편집기에서 ‘텍스트’(또는 HTML) 모드로 전환
• <script>와 <style> 태그 삽입을 허용하는 플러그인 설치 권장 (예: “Insert Headers and Footers” 등)

2. HTML 구조

아래 코드를 복사하여 포스팅 본문 텍스트 모드에 붙여넣으세요.

<!-- MBTI 검사 위젯 시작 -->
<div id="mbti-quiz">
  <div id="mbti-question"></div>
  <div id="mbti-options"></div>
  <button id="mbti-next" disabled>다음</button>
  <div id="mbti-result"></div>
</div>
<!-- MBTI 검사 위젯 끝 -->

3. CSS 스타일

위 HTML 바로 아래에 다음 <style> 태그를 추가하여 간단한 디자인을 적용합니다.

<style>
  #mbti-quiz {
    max-width: 600px;
    margin: 20px auto;
    padding: 16px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-family: sans-serif;
  }
  #mbti-question {
    margin-bottom: 12px;
    font-size: 1.1rem;
    font-weight: bold;
  }
  .mbti-option {
    display: block;
    margin-bottom: 8px;
    padding: 10px;
    border: 1px solid #aaa;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
  }
  .mbti-option:hover {
    background: #f9f9f9;
  }
  #mbti-next {
    margin-top: 12px;
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    background: #0073aa;
    color: #fff;
    cursor: pointer;
  }
  #mbti-next:disabled {
    background: #ccc;
    cursor: not-allowed;
  }
  #mbti-result {
    margin-top: 16px;
    font-size: 1.2rem;
    font-weight: bold;
    text-align: center;
  }
</style>

4. JavaScript 로직

마지막으로 아래 <script> 태그를 붙여넣으면 위젯이 동작합니다.

<script>
(function(){
  const quiz = [
    {q:'파티에 가면 사람들과 쉽게 대화를 시작한다.', d:'EI', a:'E', b:'I'},
    {q:'문제 해결 시 직관보다는 사실과 데이터를 우선시한다.', d:'SN', a:'S', b:'N'},
    {q:'감정적 요소를 고려해 결정을 내리는 편이다.', d:'TF', a:'F', b:'T'},
    {q:'일정을 계획하고 미리 준비하는 것을 선호한다.', d:'JP', a:'J', b:'P'},
    {q:'혼자 있으면 에너지가 충전된다.', d:'EI', a:'I', b:'E'},
    {q:'추상적인 개념을 쉽게 떠올린다.', d:'SN', a:'N', b:'S'},
    {q:'논리적 분석을 통해 결정을 내린다.', d:'TF', a:'T', b:'F'},
    {q:'유연하게 상황에 대응하는 편이다.', d:'JP', a:'P', b:'J'}
  ];
  let score = {EI:0, SN:0, TF:0, JP:0}, idx = 0;
  const elQ = document.getElementById('mbti-question');
  const elO = document.getElementById('mbti-options');
  const btn = document.getElementById('mbti-next');
  const res = document.getElementById('mbti-result');

  function render(){
    const cur = quiz[idx];
    elQ.textContent = (idx+1) + '. ' + cur.q;
    elO.innerHTML = '';
    ['a','b'].forEach(key=>{
      const opt = document.createElement('div');
      opt.className = 'mbti-option';
      opt.textContent = key==='a'? cur.a : cur.b;
      opt.addEventListener('click',()=>{
        score[cur.d] += (key==='a'?1:0) + (key==='b'?1:0);
        idx++;
        btn.disabled = false;
      });
      elO.appendChild(opt);
    });
    btn.disabled = true;
    res.textContent = '';
  }

  btn.addEventListener('click',()=>{
    if(idx < quiz.length) {
      render();
    } else {
      const type = [
        score.EI >= quiz.filter(x=>x.d==='EI').length/2? 'E':'I',
        score.SN >= quiz.filter(x=>x.d==='SN').length/2? 'S':'N',
        score.TF >= quiz.filter(x=>x.d==='TF').length/2? 'T':'F',
        score.JP >= quiz.filter(x=>x.d==='JP').length/2? 'J':'P'
      ].join('');
      res.textContent = '당신의 MBTI 유형은 ' + type + '입니다.';
      btn.style.display = 'none';
      elO.style.display = 'none';
    }
  });

  render();
})();
</script>

사용법 안내

1. 워드프레스 관리자 ‘글쓰기’ 화면에 진입
2. 편집기 우상단에서 ‘텍스트’(HTML) 모드 선택
3. 위 HTML 구조 → CSS → JavaScript 순서로 전체 코드를 복사하여 붙여넣기
4. 미리보기 또는 공개를 클릭하여 정상 동작 확인

팁: 스크립트 삽입이 제한된 테마라면 “Insert Headers and Footers” 같은 플러그인을 통해 본문에 <script>를 삽입할 수 있습니다.

결론

워드프레스 포스트 내에 직접 실행 가능한 MBTI 검사 위젯을 삽입함으로써 블로그의 방문자 참여도를 높이고, 체류 시간을 증가시킬 수 있습니다. 위 예제 코드를 그대로 활용하거나, 질문/스타일을 커스터마이징하여 더욱 풍부한 사용자 경험을 제공해 보세요.