Watch Your Nose — 코심코심
"나는 절대 안 속아?" 그 자신감을 시험하는 금융 사기 교육 웹앱입니다. 어떤 체험이 나올지 미리 알려주지 않고, 실제 사기 수법을 본뜬 상황을 그 자리에서 판단하게 한 뒤 마지막에 결과와 대응법을 알려줍니다.
무엇을 체험하나요
한 세션에서 아래 4가지 체험 유형 중 랜덤 순서로 하나씩, 총 4단계를 진행합니다. 어떤 유형이 몇 번째로 나올지는 알려주지 않으며, 각 단계에서 선택하면 정답/오답을 그 자리에서 알려주지 않고 마지막 결과 페이지에서 한 번에 공개합니다.
시작 전 캐릭터 설정(나이대·직업·성별)과 난이도(쉬움·중간·어려움)를 한 번씩 고릅니다. 난이도 화면은 어떤 유형이 나올지 드러내지 않으며, 고른 난이도는 각 체험이 콘텐츠를 선택할 때 반영됩니다(현재는 전세매물에 우선 적용, 나머지 유형은 콘텐츠 태깅 전까지 전체 풀에서 랜덤). "다시 체험하기"로 재시작하면 캐릭터 설정과 난이도는 다시 묻지 않습니다.
- 보이스피싱 — 채팅형으로 이어지는 분기 대화에서 선택지를 고르며 대응합니다.
- 케이스 조사 — 전세·청약·분양 계약 상황을 조사합니다. 조사 포인트로 문서를 열람해 위험 신호를 증거로 등록하고, 상대방에게 정해진 질문을 건네 대사를 들은 뒤 계약 진행 가능/추가 확인 필요/계약 중단 중 하나로 최종 판단합니다.
- 전세매물 — 골목 맵을 이동하며 매물 5채의 등기부·전세가율 등 서류를 확인하고 위험 여부를 O/X로 판정합니다.
- 사기 판별 카드 — 실제 공개된 사기 유형(중고거래·투자리딩방·로맨스스캠·스미싱 등 19종)을 바탕으로 한 지문 카드 4장을 연달아 보고 각각 사기인지 정상인지 판정합니다.
체험이 끝나면 유형별 정답률과 등급, 문항별 상세 리뷰(내 선택 vs 정답, 이유), 오답 유형에 맞는 대응 방안을 보여주는 종합 결과 리포트가 나옵니다.
기술 스택
- Next.js 16 (App Router) + TypeScript strict mode
- Tailwind CSS
- Vitest + React Testing Library
- DB 없는 정적 콘텐츠 구성 — 모든 콘텐츠를
src/data/의 정적 TypeScript 파일로 관리하고, 세션 상태는 React Context에만 보관합니다(새로고침 시 처음부터 다시 시작). 케이스 조사 단계의 NPC 자유 입력 질문 분류만 선택적으로 Anthropic API를 호출하는 최소한의 API 라우트를 둡니다(아래 환경 변수 참고) — 키가 없어도 정적 키워드 매칭으로 자동 폴백해 완전히 동작합니다.
시작하기
Node.js가 설치되어 있어야 합니다.
# 1. 의존성 설치
npm install
# 2. (선택) 환경 변수 설정 — 없어도 정적 키워드 매칭으로 동작합니다
cp .env.example .env.local
# .env.local에 ANTHROPIC_API_KEY를 직접 입력하세요
# 3. 개발 서버 실행
npm run dev
브라우저에서 http://localhost:3000 을 열면 바로 체험할 수 있습니다. src/app/page.tsx 등 페이지 파일을 수정하면 자동으로 반영됩니다.
환경 변수 (.env.local)
| 변수 | 설명 | 기본값 |
|---|
ANTHROPIC_API_KEY | 케이스 조사 단계 NPC 자유 입력 질문 분류(/api/npc-chat)에 사용. 없으면 정적 키워드 매칭으로 자동 폴백 | (없음) |
그 외 명령어
npm run build # 프로덕션 빌드
npm run start # 빌드 결과물 실행
npm run lint # ESLint 검사
npm test # 테스트 실행 (Vitest + React Testing Library)
프로젝트 구조
src/
├── app/ # 페이지 (랜딩 → 캐릭터 설정 → 난이도 선택 → 체험 세션 → 결과)
├── components/
│ ├── experiences/ # 체험 유형별 컴포넌트
│ └── ui/ # 공용 UI 컴포넌트
├── types/ # 체험 유형 공통 인터페이스, 콘텐츠 타입
├── lib/ # 체험 유형 등록(registry), 채점 로직, 세션 상태
└── data/ # 체험 콘텐츠(시나리오·사례·매물 등)와 대응 방안 카피
새 체험 유형은 src/types/의 ExperienceModule 인터페이스를 구현해 src/lib/registry.ts에 등록하는 방식으로 추가합니다. 프로젝트 설계 배경과 세부 규칙은 CLAUDE.md와 docs/ 폴더(PRD, 아키텍처, 설계 결정 기록)를 참고하세요.
