AI 유형 테스트 무료 ZIP 템플릿 배포 — 질문과 결과만 바꾸면 어떤 IP든 5분 만에 완성

https://cherrycoding0.tistory.com/9

1화. AI로 요즘 유행하는 유형 테스트 만들기 #CURSOR #챗GPT

https://cherrycoding0.tistory.com/10

2화. 유형 검사 주제 선정과 프롬프트 사용법 #CURSOR #챗GPT

 

AI 유형 테스트 제작기 시리즈 | 3편 — 범용 템플릿과 파일 수정법

---

테스트 구조 다 만들어놨는데, 다음 주제 쓸 때 또 처음부터 짜야 하는 상황이 생겼어요.

아이돌 그룹 멤버가 6명인데 기존 코드는 8명 기준이라 억지로 끼워 맞추거나,

캐릭터 수가 달라질 때마다 App.tsx를 건드려야 하는 문제요. 솔직히 귀찮더라고요.

 

그래서 아예 구조를 분리했어요. 특정 인원 수에 묶이지 않고, 특정 IP에 종속되지 않는

질문이랑 결과만 교체하면 어떤 주제든 바로 쓸 수 있는 범용 템플릿이에요.

왕사남 테스트, 박지훈 필모 테스트 만들면서 검증한 구조를 이번에 그대로 배포할게요.

 

---

이 템플릿이 뭔데요?

한 줄 정의부터 하면 — 캐릭터 수, IP 상관없이 questions.ts랑 results.ts 두 파일만 바꾸면 유형 테스트가 완성되는 React 템플릿이에요.

기존 방식은 테스트 하나 만들 때마다 전체 구조를 다시 설계해야 했어요. 멤버가 5명이면 5명 기준, 8명이면 8명 기준으로 로직 자체를 바꿔야 했거든요.

이 템플릿은 App.tsx를 한 번도 건드리지 않아요. 테스트 엔진은 완성된 상태로 들어있고, 내용물(질문, 결과)만 갈아끼우는 방식이에요. 데이터와 로직을 완전히 분리한 구조예요.

---

시작하는 법

https://cherrycoding0.tistory.com/12

ZIP 파일로 유형 테스트 실행하기

 

👉 ZIP 템플릿 다운로드 generic-character-test-template.zip

generic-character-test-template.zip

0.00MB

ZIP 구조는 이렇게 생겼어요.

src/
├─ data/
│  ├─ questions.ts   ← 여기만 수정
│  └─ results.ts     ← 여기만 수정
├─ App.tsx           ← 건드리지 않음

수정할 파일은 딱 두 개예요. 나머지는 손 안 대도 돼요.

압축 풀고 폴더 안에서 터미널 열고 아래 두 줄 실행하면 바로 돌아가요.

npm install
npm run dev

브라우저에서 로컬 서버가 열리면 기본 테스트 화면이 나타나요. 이 상태가 구조 완성 상태예요. 여기서부터 내용만 갈아끼우면 돼요.

VSCode / Cursor 환경 설정이 낯선 분들은 별도 가이드 글을 먼저 읽어요.

---

실제로 어떻게 활용했냐면

questions.ts — 질문이랑 보기가 들어가는 파일

export const questions = [
  {
    question: "질문 문장",
    options: [
      { id: "A", text: "보기 1" },
      { id: "B", text: "보기 2" }
    ]
  }
]

여기서 핵심은 id예요. 이 id가 결과랑 연결되거든요. 멤버가 6명이면 id를 A~F로 6개, 5명이면 5개. 인원 수 제한 없어요.

results.ts — 결과 설명이 들어가는 파일

export const results = {
  A: {
    title: "A 유형",
    description: "설명"
  }
}

questions.ts에서 쓴 id랑 results.ts의 키가 반드시 일치해야 해요. 이것만 지키면 자동 연결돼요.

원샷 프롬프트로 내용 자동 생성

매번 질문이랑 결과를 직접 쓰기 번거로우니까, 2편에서 공개한 원샷 프롬프트를 쓰면 코드까지 한 번에 나와요.

TEST_TITLE: "나랑 어울리는 워너원 멤버는?"
TEST_TOPIC: "친구들과 여행 갔을 때"
TONE: "러블리"
BANNED: "연애"

이렇게 넣으면 6명 기준 결과 + 질문 10문항 + TypeScript 코드까지 한 번에 나와요. 그대로 붙여넣으면 테스트 완성이에요.

이미지 추가하는 법

public/images/

이 폴더에 이미지 넣고 id랑 동일한 파일명 쓰면 자동 연결돼요.

• A.webp
• B.webp

App.tsx 건드릴 필요 없어요.

---

솔직한 한계

이 템플릿이 모든 상황에 완벽하진 않아요.

점수 계산 방식이 단순 집계 방식이라, 복잡한 MBTI 식 다차원 결과 계산이 필요한 테스트엔 맞지 않아요. 애니메이션, 전환 효과 같은 UI 커스텀은 App.tsx를 건드려야 해서 코드를 전혀 모르면 어려울 수 있어요.

단순 캐릭터 매칭, 유형 분류 테스트엔 이 구조가 제일 빠르고 깔끔해요.

---

마무리: 테스트 하나가 아니라 테스트 엔진을 갖게 된 거예요

구조를 한 번 잡아두면 다음 주제는 훨씬 빨라요.

실제로 왕사남 테스트 이후 박지훈 필모 테스트 만들 때 내용 교체에 30분도 안 걸렸어요.

어떤 IP든, 몇 명이든 — 이 템플릿 하나면 돼요.

---

 

다음 포스팅 : 4편

https://cherrycoding0.tistory.com/13

4화. 프롬프트 넣고 끝이 아니다!