용의자의 답변 규칙을 브라우저에서 서버로 옮겼습니다. 게임에서는 사진을 찍고, 그 사진을 들고 용의자 세 명에게 자유롭게 질문합니다. 지난번에 만든 체험판은 HTML 파일 하나로 휴대폰 브라우저 안에서 다 돌아갔습니다. 이제는 질문을 하면 서버가 답합니다. 화면 코드와 서버 코드를 확실히 나누려고 게임 전체를 Next.js로 옮겼습니다.
용의자의 답변 규칙을 브라우저에서 서버로 옮겼습니다
현장을 살피고 사진을 찍고 인물에게 직접 질문하며 사건을 푸는 모바일 추리 게임입니다.이 프로젝트 소개 →뭘 했다
왜
체험판에는 용의자가 언제, 어떻게 거짓말하는지가 브라우저 코드에 그대로 들어 있었습니다. 브라우저 코드는 누구나 '소스 보기'로 열어 볼 수 있습니다. 그래서 추리의 답을 거꾸로 알아낼 수 있었습니다. 이제 브라우저 코드에는 인물 소개만 남기고, 답변 규칙은 서버에만 둡니다. 게임을 배포할 때도 검사를 거칩니다. 사건의 정답이나 AI를 부르는 데 쓰는 API 키가 브라우저 코드에 섞였으면 배포가 멈춥니다.
삽질 포인트
배포하려는데 Vercel에서 빌드가 오류로 멈췄습니다. 알고 보니 로그인과 저장 기능 코드에 역슬래시가 쓸데없이 하나씩 붙어 있었습니다. 그 역슬래시 때문에 코드가 끝나지 않은 문장처럼 읽혔습니다. 역슬래시를 지우고 빌드를 다시 돌려 확인했습니다.
다음 할 것
실제 휴대폰에서 촬영부터 심문까지 끝까지 해 보려 합니다. 그다음 처음 10~15분 흐름을 다른 사람에게 플레이해 보게 할 생각입니다.
그 밖의 소식
구글 계정으로 로그인하면 수사 기록을 계정에 저장할 수 있습니다. 로그인부터 요구하면 먼저 해 보려는 사람이 들어오기 어려워서, 로그인하지 않으면 지금처럼 기기에 저장하고 원할 때만 계정에 저장하게 했습니다. 커밋 6개
사건의 배경과 인물, 증거 설계를 문서로 정리했습니다. 인물이 질문마다 없던 과거를 지어내거나 숨겨야 할 정보를 흘리지 않도록, 세 인물이 아는 것과 숨기는 것, 미술관에서 살펴볼 수 있는 물건 26가지의 특징을 미리 정해 두었습니다. 커밋 8개
원료 · git log
1136d88fix: DB 저장 API의 잘못된 문자열 이스케이프로 인한 빌드 실패 수정
e5de2ecchore: 단위 테스트와 공개 빌드 보안 검사를 배포 명령에 연결
def0ad6chore: 컴파일된 브라우저 코드의 정답 및 시크릿 노출을 추가 검사
3ece64achore: 게스트 진행과 계정 저장의 보안 경계를 테스트 코드로 고정
9f6e0defix: 로그인 UI 스타일 누락과 서버 파일 보안 스캔 오탐 수정
2ac6185fix: 로그인 직후 자동 저장이 무시되는 상태 충돌 해결
b1986defeat: 비회원 플레이를 유지하며 구글 로그인 후 선택적 클라우드 저장 UI 추가
ea8c50ffeat: 현장 관찰 기록을 계정 저장용 스냅샷으로 내보내고 복원 지원
c540688feat: 구글 계정별 수사 기록과 사진 저장 및 복원 API 구현
1635c07feat: 구글 계정 인증과 폐기 가능한 로그인 세션 저장 구조 추가