냥생뭐였니?

배경

MBTI나 "나의 광석" 같은 유형 테스트가 유행하는 걸 보고, 나도 하나 만들어 보자는 생각으로 시작했습니다. 반려묘의 성향을 묻는 질문에 답하면 그 고양이의 전생, 환생, 인간형 모습을 결과로 보여 주는 심리테스트형 웹 콘텐츠입니다. 반려동물을 키우거나 성격 유형 테스트와 결과 공유를 즐기는 사람을 대상으로 잡았습니다. 혼자 기획하고 개발했으며, Next.js(Pages Router), TypeScript, Tailwind CSS로 만들어 Vercel에 배포했습니다.

맡은 역할

• 1인 기획·개발 — PRD 작성, 질문·결과 데이터 설계, 화면 구현, 배포

과정

기획서부터 정리했습니다. 구현 전에 PRD를 커밋해 목표, 타겟 사용자, 화면별 기능, 데이터 구조, 2주 단위 개발 일정을 정리했습니다. 진행하면서 항목 옆에 "-완", "-하는 중"을 달아 체크리스트처럼 썼습니다.

만들면서 기획을 고쳤습니다. 질문은 5~7개에서 10개로, 선택지는 2~4개에서 3개로 정리했습니다. "다음" 버튼은 없애 고르면 바로 넘어가게 했고, 결과를 정하는 방식은 두 번 바꿨습니다(아래 기술적 결정).

MVP 이후로 미뤄 둔 기능도 넣었습니다. PRD의 "추가 개선사항"에 적어 둔 결과 이미지 저장과 광고를 앞당겼습니다. 결과 카드와 로고를 Canvas에 그려 PNG로 저장하게 했고, Google AdSense 스크립트를 추가했습니다.

기술적 결정

질문 분기 대신 유형 매칭으로 결과 판정

• 상황PRD에서는 선택지마다 다음 질문이나 결과를 지정하는 분기 구조로 설계했고, 첫 구현도 그렇게 만들었습니다.
• 결정모두가 같은 질문 10개를 거치고, 고른 유형 값을 모아 결과마다 둔 유형 목록과 비교하게 바꿨습니다.

"전부 일치"에서 "6개 이상 일치"로

• 상황처음에는 답변 10개가 한 결과의 유형과 전부 맞아야 했고, 아니면 "냥생 미스터리!" 결과로 넘어갔습니다.
• 결정6개 이상 겹치는 결과를 후보로 삼고, 많이 겹치는 순, 같으면 id가 작은 순으로 첫 번째를 보여 주게 바꿨습니다.

결과

• https://nyangseng.vercel.app 에 배포했습니다.
• 질문 10개, 결과 27종과 "냥생 미스터리!"를 갖췄습니다.
• 결과는 Web Share API로 공유하거나 PNG로 저장할 수 있고, "히든냥이" 페이지에서 모든 결과를 모아 볼 수 있습니다.
• 2024년 12월 말 Google AdSense 스크립트를 추가했습니다.