4주째에 벼락치기로 만든 4개의 게임

소개

1주차부터 3주차까지 사례글마다 같은 문장을 반복해서 적었습니다. "만든 게임: 0개." 3주차 사례글의 마지막 배운 점은 이랬습니다.

재는 일은 제 흐름 안에 있고 게임을 만드는 일은 밖에 있습니다. 매주 다른 것을 재면서 본 과제는 안 하고 있습니다.

3주차 강의에서 다음 과제가 안내됐습니다. 게임(또는 웹서비스) 하나에 데이터베이스를 붙이고, 점수 저장과 타이머 같은 기능도 얹으라는 것이었습니다.

이번 주는 방식을 바꿨습니다. 게임을 직접 코딩하는 대신, 클로드 코드에게 기획부터 구현, 배포 전 검증까지 통째로 맡기고 저는 요구사항과 피드백만 주는 방식으로 진행했습니다. 제가 3주 동안 못 넘은 문턱이 도구를 바꾸면 넘어가는지 확인하고 싶었습니다.

진행 방법

사용 도구: Claude Code + 슈퍼베이스

Step 1. 소재 고르기

막연히 "게임 만들어줘"라고 하지 않고, 제 배경(바이오인포매틱스)에 맞는 학습형 소재를 찾는 대화부터 시작했습니다.

게임바이브코딩에 실제로 게임 만들어보라는 피드백이 있어서 게임 만들어볼까 해.
나에게 어울리는 게임이 있을까? 학습적인것도 좀 들어가면 좋을듯.

몇 차례 선택지를 주고받으며 후보를 좁혔습니다. 처음엔 퀴즈형 소재가 나왔는데 제가 원한 건 아니었습니다.

코돈 해독 퍼즐 같은..실제 게임성 있는 걸로 다른거 추천해줘.
좀 재밌는거 없어?

최종적으로 CRISPR 저격(반응형), 항생제 내성 디펜스(전략), 단백질 공장(멀티태스킹), 세균 진화(방치형) 네 갈래로 좁혔고, 제가 마지막에 이렇게 답했습니다.

4개 다 만들어도 돼?

Step 2. 첫 게임과 공용 뼈대 만들기

CRISPR 저격을 먼저 완성했습니다. 규칙은 실제 유전자 편집 원리 그대로입니다. 서열이 표적과 완전히 같고, 뒤에 PAM(NGG)이 붙은 가닥만 자를 수 있습니다.

function isCuttable(s) {
  return s.seq === S.target && s.pam.slice(1) === 'GG';
}

이후 게임 세 개를 더 만들 것을 감안해, 점수 저장과 랭킹을 공용 모듈(common.js)로 뺐습니다. 슈퍼베이스가 연결돼 있으면 원격 랭킹을, 없으면 브라우저 저장소만 쓰도록 만들어서 나머지 세 게임이 이 모듈을 그대로 가져다 쓰게 했습니다.

Step 3. 화면을 보여주니 규칙이 헷갈린다는 게 드러났다

첫 버전을 보고 이런 피드백을 받았습니다.

CRISPR 저격에서 NGG인걸 선택하면 되는거야?? N은 모든 염기인거지?
NGG를 붉은색으로 표기하든지 해서 눈에 더 잘 보이게 해야 할듯.

N(아무 염기)과 GG(고정)를 배지로 나눠 GG를 빨간색으로 강조했습니다. 그런데 이 대화 안에서 바로 다음 지적이 이어졌습니다.

근데 NGG 빈도가 너무 높던데 좀 더 드문드문 나와야지 변별력 있는거 아니야?

실제로 세어 보니 오프타겟(가짜 서열)에게도 항상 유효한 PAM을 주고 있어서, 전체 가닥의 85~90%가 GG를 달고 있었습니다. 배지만 보면 거의 항상 자를 수 있어 변별력이 없었습니다. 오프타겟과 랜덤 가닥의 PAM 유무를 50대 50으로 다시 설계했습니다.

며칠 뒤 표적과 PAM이 붙는 자리를 더 직관적으로 보여 달라는 요청도 왔습니다.

CTGTCTGG
뒤에
NGG
가 붙은 것만 잘립니다
=> 뒤에 예) CTGTCTGGCGG 이런식으로 보여주는건 어때?

표적 서열 뒤에 실제 예시 PAM을 이어 붙여 한 가닥처럼 보여주는 기능을 추가했습니다.

Step 4. 그런데도 정확도 0%가 나왔다

규칙과 배지를 다 고쳤는데도 이런 보고를 받았습니다.

GG가 있는걸 선택해야는거야?? 없는걸 선택해야는거야? 있는거 선택했는데 정확도 0이 나와서.
표적 절단 0 / 오프타겟 3 / PAM 없는 가닥 0 / 놓친 표적 0 / 정확도 0%

판정 코드 자체는 처음부터 정확했습니다. "서열 일치 AND GG"인데, 화면 설명이 GG 쪽만 강조하고 있어서 GG 배지만 보고 클릭하면 서열이 달라도 틀린다는 걸 놓치기 쉬웠던 것입니다. 이어서 점수 체계 자체가 불친절하다는 지적도 받았습니다.

게임 설명도 좀 불친절해. 오프타겟으로 크게 깎입니다? => 오프타겟으로 패널티가 있다는건가?
그리고 스코어 시스템에 대해서도 얘기해야 할듯.

"크게 깎입니다" 같은 모호한 문장을 지우고, 정답, 오프타겟, PAM 없음, 놓침 네 가지 경우를 +100/−300/−100/−50 숫자로 못 박은 표를 시작 화면과 하단에 두 번 넣었습니다.

Step 5. 나머지 세 게임과 데이터베이스 연결

다른 게임도 이어서 만들어줘.

항생제 내성 디펜스, 단백질 공장, 세균 진화를 이어서 완성했습니다. 이후 슈퍼베이스 프로젝트 URL과 anon 키를 전달받아 연결했습니다. 연결만 하고 끝내지 않고, 실제로 읽기·쓰기가 되는지와 보안 정책이 진짜 막고 있는지를 curl로 직접 공격해 확인했습니다.

# 음수 점수 쓰기 시도 → 막혀야 정상
curl -X POST ".../rest/v1/scores" -d '{"game":"test","score":-5}'
# {"code":"42501","message":"new row violates row-level security policy..."}  HTTP 401

# 삭제 시도 → 정책을 안 만들었으니 막혀야 정상
curl -X DELETE ".../rest/v1/scores?game=eq.test"
# HTTP 204 (성공 응답이지만, 다시 읽어보니 행이 그대로 있었다 = 실제로는 0건 삭제)

검증 중에 코드 버그도 하나 잡았습니다. 점수 저장 함수가 실제로는 저장에 성공했는데 에러를 던지고 있었습니다. 슈퍼베이스가 쓰기 응답을 줄 때 상태 코드는 201인데 본문이 비어 있는 경우가 있는데, 204만 "본문 없음"으로 처리하던 코드가 빈 본문에 .json()을 호출해 파싱 에러를 낸 것이었습니다.

// 수정 전: 204만 빈 응답으로 취급
return r.status === 204 ? null : r.json();
// 수정 후: 상태 코드 대신 본문의 실제 유무로 판단
return r.text().then(function (t) { return t ? JSON.parse(t) : null; });

결과와 배운 점

측정 결과

배운 점

1. 문턱은 도구가 아니라 위임 방식에 있었습니다. 3주 동안 못 넘은 이유는 클로드 코드를 안 써서가 아니라, "다음에 하겠다"는 계획만 세우고 실제로 맡기지 않았기 때문이었습니다. 이번엔 소재 선택부터 배포 전 점검까지 전 과정을 맡기고 저는 확인과 피드백만 했습니다.

2. 규칙이 맞아도 설명이 부족하면 사람이 틀립니다. 판정 로직은 Step 2부터 끝까지 한 번도 바뀌지 않았는데, 화면 설명이 부족해 정확도 0%가 두 번 나왔습니다. 코드를 의심하기 전에 설명부터 의심해야 하는 경우였습니다.

3. 직접 화면을 보지 않으면 안 잡히는 결함이 있습니다. PAM 배지 빈도 문제도, 점수 설명 문제도 전부 콘솔 에러 없이 정상 작동하던 코드였습니다. 실제로 플레이해 보고 피드백을 준 뒤에야 드러났습니다.

4. 연결됐다는 것과 검증됐다는 것은 다릅니다. 슈퍼베이스 URL과 키를 넣은 순간 "연결 완료"라고 보고할 수도 있었지만, 음수 점수 차단과 삭제 차단을 curl로 직접 공격해 보고서야 보안 정책이 진짜 작동한다고 말할 수 있었습니다. 심지어 그 과정에서 "204 성공 응답인데 실제로는 0건 처리"라는, 응답 코드만 보면 놓칠 사례도 나왔습니다.

시행착오

• PAM이 유효한 가닥이 85~90%에 달해 변별력이 없었던 것을 사용자 피드백으로 알았습니다. 처음 설계할 때 오프타겟에게 항상 유효한 PAM을 준 것이 원인이었습니다.

• 점수 저장 함수의 에러 메시지만 믿었다면 "슈퍼베이스 연결이 안 된다"고 잘못 결론 냈을 것입니다. 다시 조회해서야 실제로는 저장에 성공했다는 것을 확인했습니다.

앞으로의 계획

• 컷신(난이도 선택 화면, 캐릭터 대사)은 과제에 있었지만 아직 못 붙였습니다.

• 배포 전 점검 중 시크릿 모드로 캐시를 직접 확인하는 절차는 아직 안 했습니다.

• 검증용으로 슈퍼베이스에 남은 테스트 데이터(game: 'test') 3건은 정리하지 않았습니다. 실제 게임 랭킹에는 안 잡히지만 남아 있습니다.

도움 받은 글 (옵션)

• 23기 게임바이브코딩 3주차 강의와 과제 (스터디장): 슈퍼베이스 가입부터 요청까지의 절차, 점수 저장과 타이머 요구사항, 배포 전 점검 안내가 이번 주 작업 기준이 됐습니다

• 23기 게임바이브코딩 1~3주차 사례글 (본인): 3주 연속 게임 0개였다는 기록과 "재는 일은 흐름 안에 있고 만드는 일은 밖에 있다"는 반성이 이번 주의 출발점이었습니다