테스트잇 «숨은 성격 찾기» 로직 해부

0요약 지표

1처리 파이프라인

12문항을 다 누르면 setTimeout(showResult, 120) 으로 결과 화면 전환. 중간 저장·전송 없음.

2문항 → 축 매핑 (전문)

축이 E/I → S/N → T/F → J/P 순서로 정확히 3바퀴 반복됩니다. 순서를 알면 원하는 결과를 그대로 만들 수 있습니다.

3채점 코드 원문

// 클릭 한 번 = 해당 글자에 1점. 그게 전부.
function selectAnswer(type) {
  score[type] += 1;
  currentQuestion += 1;
  if (currentQuestion >= questions.length) setTimeout(showResult, 120);
  else renderQuestion();
}

function getMbti() {
  const ei = score.E >= score.I ? "E" : "I";
  const sn = score.S >= score.N ? "S" : "N";
  const tf = score.T >= score.F ? "T" : "F";
  const jp = score.J >= score.P ? "J" : "P";
  return ei + sn + tf + jp;  // 16분기 키
}

• 가중치·강도 없음 — “매우 그렇다” 같은 척도가 없어 클릭 = 1점.
• 축당 3문항이라 2표면 확정 — 같은 쪽을 2번 고른 순간 그 글자는 고정, 나머지 1문항은 결과에 영향 0.
• 죽은 코드 — 3문항은 동점이 불가능하므로 >=(동점 시 E/S/T/J 우선) 규칙은 실제로 발동하지 않습니다.
• 무작위성 없음 — Math.random 0회. 같은 답이면 항상 같은 결과.

4직접 돌려보기 (원본 로직 재현)

원본과 동일한 채점 함수를 그대로 옮겨 심었습니다. 축별 득표가 실시간으로 보입니다.

516개 결과문 전체

타입을 누르면 해당 결과 화면에 실제로 출력되는 텍스트가 그대로 나옵니다. 색상도 원본 palettes 값입니다.

공통 템플릿

16개가 전부 “겉은 A인데 속은 정반대 A’” 라는 동일한 반전 공식으로 작성돼 있습니다. “숨은 성격”이라는 컨셉의 실체는 타입별 outer/inner 두 문장의 대비입니다.

6데이터 처리 / 프라이버시

• 외부 스크립트는 Google AdSense, 픽셀 웹폰트(neodgm), html-to-image(결과 카드 PNG 저장) 뿐.
• 결과 이미지 저장은 htmlToImage.toPng로 클라이언트에서 생성 (pixelRatio 2, 420px 고정폭).
• 공유는 navigator.share / 클립보드로 고정 URL만 복사 — 결과값이 URL에 실리지 않아 내 결과 링크로 공유는 불가.

7설계상 걸리는 점