좀비고등학교 성격유형 테스트 제작

대동제에서 판매하는 이화좀비대학교 학생증 굿즈의 뒷면 QR 코드에 들어갈 좀비고 성격 유형 테스트를 만들었다. 사실 굿즈는 학생증이 메인이고 qr은  이스터에그(?) 같은 느낌으로 제작해서 최대한 간단하게 샤샤샥 2시간 컷 했다.

 

https://zombie-smoky.vercel.app/

이화좀비대학교

 

제일 익숙한 React (React Router 사용), Styled Components, 상태 관리를 위한 React Hooks (useState) 로 작업했다. 

점수 분포 규칙

주요 성향 캐릭터에게는 +3점
유사 성향 캐릭터에게는 +1점
나머지 캐릭터에게는 점수를 주지 않음

각 문항별 가중치 설명

Q1. 조별 과제를 하게 됐을 때 당신의 모습은?

A. "조장을 맡아 전체 일정을 계획하고 조원들을 이끈다."
→ 남동진 +3, 이유리 +1

B. "묵묵히 맡은 역할을 성실히 수행한다."
→ 이유리 +3, 정동석 +1

C. "귀찮아서 최대한 뒷전에 있다가 막판에 몰아서 한다."
→ 김준호 +3, 곽준형 +1

Q2. 쉬는 시간, 반 친구들이 시끄럽게 떠들고 있을 때 당신은?

A. "나도 같이 떠들며 분위기를 띄운다!"
→ 정예슬 +3, 곽준형 +1

B. "조용히 책을 읽거나 이어폰을 낀다."
→ 정동석 +3, 고나래 +1

C. "친한 친구랑만 조용히 얘기하고, 모르는 사람과는 거리 두기."
→ 고나래 +3, 이유리 +1

Q3. 갑자기 학교에 좀비가 나타났다! 당신의 첫 반응은?

A. "모두를 대피시키기 위한 작전을 짠다."
→ 남동진 +3, 이유리 +1

B. "패닉은 안돼. 침착하게 행동하자."
→ 이유리 +3, 정동석 +1

C. "어떻게든 재밌게 이 상황을 즐길 방법이 없을까?"
→ 곽준형 +3, 김준호 +1

Q4. 수업 시간에 선생님이 갑자기 발표를 시켰을 때 당신은?

A. "에잇, 그냥 한다. 재밌게 하면 되지~"
→ 곽준형 +3, 정예슬 +1

B. "당황하지만 예의 있게 발표를 마친다."
→ 남동진 +3, 이유리 +1

C. "속으로 '왜 갑자기 시키는 거야…' 하며 최대한 짧게 끝낸다."
→ 정동석 +3, 김준호 +1

Q5. 좀비로부터 도망치는 도중, 친구가 넘어졌다. 당신은?

A. "다른 사람들보다 친구가 먼저다. 바로 도와준다."
→ 이유리 +3, 남동진 +1

B. "어떻게든 친구를 끌어안고 함께 도망친다. 리스크는 무시!"
→ 정예슬 +3, 곽준형 +1

C. "위험을 피해야 하니까, 일단 살고 보자."
→ 김준호 +3, 정동석 +1

Q6. 학교에서 열리는 축제에서 당신은?

A. "기획부터 운영까지 도맡아 나서는 스타일."
→ 남동진 +3, 정예슬 +1

B. "활기찬 분위기 속에서 노래하고 춤추는 게 최고!"
→ 정예슬 +3, 곽준형 +1

C. "북적거리는 건 싫지만 친구랑 조용히 다니는 건 좋아."
→ 고나래 +3, 이유리 +1

Q7. 누군가 예의 없고 거친 말을 했을 때 당신은?

A. "정중하게 지적하고 올바른 행동을 권한다."
→ 남동진 +3, 이유리 +1

B. "속상하지만 조용히 거리를 둔다."
→ 이유리 +3, 고나래 +1

C. "그런 사람하고는 그냥 상종 안 한다."
→ 정동석 +3, 김준호 +1

Q8. 평소 당신의 학업 스타일은?

A. "계획적이고 꾸준히 관리한다."
→ 남동진 +3, 이유리 +1

B. "벼락치기로도 어떻게든 해낸다."
→ 김준호 +3, 곽준형 +1

C. "딱히 공부는 안 좋아하지만 실습이나 활동형 수업은 재밌다!"
→ 곽준형 +3, 정예슬 +1

Q9. 학교에 처음 전학 온 날, 당신은?

A. "적응은 어렵지만, 진심으로 다가오는 친구에겐 마음을 연다."
→ 고나래 +3, 이유리 +1

B. "사교적이고 금방 친구를 사귀며 분위기를 주도한다."
→ 정예슬 +3, 곽준형 +1

C. "적당히 거리 두며 내 페이스대로 적응한다."
→ 정동석 +3, 김준호 +1

Q10. 좀비 사태가 길어져 모두가 지칠 때, 당신은?

A. "분위기를 바꿔주는 역할! 모두를 웃게 만든다."
→ 곽준형 +3, 정예슬 +1

B. "도움을 주고 위로하며 사람들을 다독인다."
→ 이유리 +3, 고나래 +1

C. "이 상황이 끝나기 전까진 조용히 버티자…"
→ 정동석 +3, 김준호 +1

 
답변 처리 로직

const handleAnswer = (optionScores) => {
  const newScores = { ...scores }
  
  Object.entries(optionScores).forEach(([character, score]) => {
    newScores[character] = (newScores[character] || 0) + score
  })

  setScores(newScores)

  if (currentQuestion === questions.length - 1) {
    sessionStorage.setItem('testScores', JSON.stringify(newScores))
    navigate('/result')
  } else {
    setCurrentQuestion(prev => prev + 1)
  }
}

선택한 답변의 점수를 각 캐릭터에 누적하고, 마지막 질문인 경우 결과를 저장하고 결과 페이지로 이동했다. 그렇지 않은 경우 다음 질문으로 이동하도록 구현했다. 캐릭터 궁합표는 미리 만들어서 넣어뒀다. 
 

💖 좀비고 캐릭터 궁합표 (1:2 대응)

캐릭터	추천 궁합 1	추천 이유	추천 궁합 2	추천 이유
남동진	이유리	차분하고 배려 깊은 성향이 리더십과 조화를 이룸	정예슬	밝은 에너지와 리더십의 시너지가 뛰어남
이유리	정동석	조용하고 깊이 있는 성향의 안정된 조합	고나래	내향적이지만 마음을 나누는 데 편안함을 주는 조합
김준호	곽준형	자유로운 성향 + 모험을 즐기는 외향성의 케미	정예슬	귀찮음을 이겨내게 해줄 활기찬 파트너
정예슬	곽준형	둘 다 밝고 에너지 넘치며 활발한 활동을 선호	남동진	에너지와 책임감의 균형 있는 조화
정동석	이유리	내향적이고 안정적인 성향의 이상적인 궁합	고나래	조용한 환경을 선호하는 공감대 + 편안한 관계
곽준형	김준호	모험심과 자유를 추구하는 유쾌한 케미	정예슬	밝고 활기찬 에너지의 시너지 조합
고나래	정동석	조용하고 깊은 관계를 선호하는 둘의 공감대	이유리	부드럽고 따뜻한 성격의 안정된 궁합

 

돈이 없는 관계로 배포는 무료 배포 사이트인 vercel을 사용했다. 깃허브에 연결해서 사용할 수 있는데 깃허브가 업데이트 될때마다 자동반영이 되어서 편했다. 단점이 있다면 생성된 url이 살짝 못생기다는 정도...? 

 

https://vercel.com/

Dashboard

 

배포까지 완료한 후에는 qr code에 사이트 링크를 연결 시켜서, 학생증 뒤에 qr을 찍으면 사이트로 이동하게 할 수 있게 했다. qr코드는 qr.me를 사용했는데, 1년동안 사이트 접속이 없으면 qr링크가 삭제 된다길래 네이버 링크로 갈아 탔다. qr코드 모양도 마음대로 바꿀 수 있고 영구적으로 무료라 제일 괜찮은 것 같다. 역시 대기업...

 

https://qr.naver.com/

Naver QR code

 

 

최종 결과물이다!! css는 전체적으로 아포칼립스 컨셉을 차용해서 네온 초록색을 사용했다.