λ³Έλ¬Έ λ°”λ‘œκ°€κΈ°
Lect & Tip/javascript, jQuery

엠비티아이 검사 μžλ°”μŠ€ν¬λ¦½νŠΈ

by st곡간 2025. 4. 27.
λ°˜μ‘ν˜•

엠비티아이 검사 μžλ°”μŠ€ν¬λ¦½νŠΈ

μ›Ήμ‚¬μ΄νŠΈ λ°©λ¬Έμžκ°€ μžμ‹ μ˜ 성격 μœ ν˜•μ„ κ°„νŽΈν•˜κ²Œ νŒŒμ•…ν•  수 μžˆλŠ” 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 검사 μœ„μ ―μ„ μ‚½μž…ν•¨μœΌλ‘œμ¨ λΈ”λ‘œκ·Έμ˜ 방문자 참여도λ₯Ό 높이고, 체λ₯˜ μ‹œκ°„μ„ μ¦κ°€μ‹œν‚¬ 수 μžˆμŠ΅λ‹ˆλ‹€. μœ„ 예제 μ½”λ“œλ₯Ό κ·ΈλŒ€λ‘œ ν™œμš©ν•˜κ±°λ‚˜, 질문/μŠ€νƒ€μΌμ„ μ»€μŠ€ν„°λ§ˆμ΄μ§•ν•˜μ—¬ λ”μš± ν’λΆ€ν•œ μ‚¬μš©μž κ²½ν—˜μ„ μ œκ³΅ν•΄ λ³΄μ„Έμš”.

λ°˜μ‘ν˜•

λŒ“κΈ€