사이버 인생게임 v3를 다시 만든 이유와 방법: 중학생부터 어르신까지 이어지는 인생 커리어 모드

사이버 인생게임(cyberlife.cmhong95.com)은 사기와 해킹 같은 보안 사건을 게임 속에서 먼저 겪어 보는 보안 교육 게임이다. 10월 21일에 처음 열었고, 10월 29일 밤에 v3를 배포했다. v3는 처음부터 다시 만들었다. 왜 다시 만들었는지, 어떻게 만들고 시험하고 배포했는지 적는다.

처음 판에 있던 것

10월 21일에 연 처음 판에는 사건 75개(후폭풍 11개)가 있었다. 후폭풍은 앞에서 한 선택의 결과로 나중에 찾아오는 사건이다. 사건은 정해 둔 텍스트 형식(DSL)으로 dsl/ 폴더의 텍스트 파일에 쓰고, 변환 스크립트(conv.py)가 이를 자바스크립트 파일로 바꾸고, build.py가 HTML 페이지를 만든다. 사건 원고는 글로 쓰고, 페이지는 스크립트가 만드는 구조다. 광고 태그도 build.py가 페이지를 만들 때 함께 넣는다.

언어모델을 실제로 쓰는 실습도 두 개 넣었다. 하나는 3단계로 된 AI 대화 실습이고, 여기에 쓰는 비밀 단어는 서버가 날짜에 따라 만든다. 다른 하나는 사례 6건을 바탕으로 목격자와 대화하는 실습이다. AI 실습은 IP 주소를 그대로 두지 않고 해시로 바꿔, 해시마다 시간당 60회로 제한했다. 시험은 네 가지를 만들었다. 게임을 자동으로 6,000판 끝까지 돌려 보는 시험, 브라우저 화면 시험, AI 화면 시험, AI 실습을 확인하는 파이썬 시험이다.

사이트는 새 터널을 만들지 않고, 학교 서버의 기존 터널에 주소를 하나 더 붙여 열었다. 광고도 붙였다. 학생이 쓰는 도구 사이트에는 광고 확인용 메타 태그와 ads.txt만 두지만, 사이버 인생게임은 블로그, 소개 사이트처럼 광고 스크립트를 넣은 콘텐츠 사이트다. 광고를 붙이려면 서버의 CSP에 광고 주소를 허용하고 ads.txt를 둬야 했다. 10월 28일에는 휴대폰에서 꼬리말 링크를 누르기 쉽게 누르는 영역을 24px 이상으로 키우고, 자동 플레이 6,000판과 화면 시험 40개를 다시 돌렸다.

다시 만든 이유

v3에서 크게 바뀐 것은 두 가지이고, 다시 만든 이유도 이 두 가지다. 하나는 한 사람의 인생을 따라가는 '인생 커리어' 모드이고, 다른 하나는 게임 속 사건을 실제 사례, 예방법, 신고처까지 잇는 일이다. 새 모드와 함께 사건은 90개(후폭풍 16개)가 됐고, 인생 엔딩 8가지와 업적 60개가 들어갔다.

그러면서도 예전 사건 75개의 번호(id)는 하나도 바꾸지 않았다. 그래서 예전 판에서 쓰던 사건 번호가 v3에서도 그대로 통한다. kickru 스타일을 참고했지만, 그쪽의 코드와 그림은 쓰지 않았다.

인생 커리어 모드

v3에는 1년 동안의 이야기를 따라가는 이야기 모드와, 한 사람의 일생을 따라가는 커리어 모드가 함께 있다. 커리어 모드에서는 한 사람이 중학생, 고등학생, 대학생, 사회초년생, 학부모, 어르신 순서로 산다. 단계마다 봄·여름·가을·겨울에 사건이 찾아오고, 계절과 계절 사이에는 보안 습관을 훈련한다. 단계가 끝나면 시상식이 열린다. 마지막에는 등급과 칭호, 인생 엔딩 8가지 가운데 하나, 그리고 공유 카드가 나온다.

공유 카드는 1080×1350(가로세로 4:5) 크기다. 카드 그림은 사용자의 기기 안에서 만든다. 링크를 공유할 때 보이는 대표 그림(og.png)도 v3에서 새로 넣었다.

사건과 사례

v3의 콘텐츠를 숫자로 적으면 이렇다.

사건마다 교훈, 예방법, 신고처를 연결했다. 신고처는 112(경찰, 사기 피해), 118(한국인터넷진흥원, 해킹·개인정보 침해), 1332(금융감독원, 금융 사기)다. 게임 안에서 사건 하나를 넘기는 데서 끝나지 않고, 실제로 그 일을 겪었을 때 어디에 알려야 하는지까지 적어 두려는 것이다.

처음 판과 v3 비교

소개 사이트(cmhong95.com) 첫 화면에도 v3에 맞춰 사이버 인생게임 카드를 새로 달았다. 이 블로그의 꼬리말에서도 바로 갈 수 있다.

만들고 시험하는 순서

사건 원고에서 페이지까지는 이렇게 이어진다.

dsl/*.txt (사건 원고) → conv.py → 자바스크립트 사건 파일 → build.py → HTML 페이지

사건 원고를 고치면 페이지를 다시 만들고, 시험 두 개를 돌린다.

python3 build.py                 # 사건 원고로 페이지를 다시 만든다
node tests/play.test.mjs         # 자동 플레이 시험
node tests/career.browser.mjs    # 브라우저에서 커리어 모드 시험

사건이 90개이고 앞의 선택이 후폭풍으로 돌아오면, 사람이 손으로 모든 길을 따라가 볼 수 없다. 그래서 자동 플레이 시험에 기댄다. 자동 플레이는 선택지를 골라 가며 게임을 끝까지 돌리고, 어느 판이든 더 나아갈 수 없는 곳(막힘)이 생기면 실패로 센다.

자동 플레이 시험은 처음 판부터 있었고, v3에서는 커리어 모드를 브라우저에서 돌려 보는 시험(career.browser.mjs)이 따로 생겼다. v3에서는 자동 플레이 5,040판과 커리어 모드 600판을 돌렸고, 막힌 판은 0이었다. 배포한 뒤에는 실제 서버에서 페이지 10개를 세 가지 화면 폭으로 열어, 오류와 가로 넘침이 하나도 없는 것을 확인했다.

부하: 300명이 20초에 걸쳐 들어올 때

학생 300명이 20초에 걸쳐 들어오는 시험에서 요청 7,800개 가운데 실패는 0이었고, 페이지 응답 p95는 0.18초였다. 학생 한 명이 요청을 26개씩 보낸 셈이고, p95가 0.18초라는 것은 요청 100개 가운데 95개가 0.18초 안에 끝났다는 뜻이다. Cloudflare를 거친 150명 시험도 실패 0이었고, 페이지 응답 중간값은 2.6초였다. 이 값에는 시험한 맥의 회선과 Cloudflare 경로가 함께 들어 있어서, 서버 안에서 잰 값과 차이가 크다. Cloudflare를 거치면 요청마다 0.4~0.6초가 더 걸린다는 것은 다른 서비스에서도 확인했다.

서버에는 동시 연결 64칸 제한이 있다. 한순간에 100개 넘게 몰아치면 서버는 바로 503을 돌려준다. 이것은 기존 설계 그대로이고, 20초에 걸쳐 들어온 300명에게는 문제가 되지 않았다. 같은 300명이라도 20초에 나눠 들어오는 것과 한순간에 몰리는 것은 서버에게 전혀 다른 일이다. 그래서 부하 시험은 '몇 명'만 적지 않고 '몇 초에 걸쳐'와 '어디서 쟀는지'를 함께 적는다.

배포: 필요한 것만 옮겼다

개발은 맥에서 하고, 운영은 학교 서버에서 한다. 10월 29일 20시 45분, 배포 직전에 운영 폴더를 압축해 백업했다. 같은 폴더에서 다른 작업이 서버 코드를 고치고 있었기 때문에 옮길 것과 둘 것을 나눴다.

• 옮긴 것: 화면 파일(public/), 페이지(pages/), build.py, 도구(tools/), 문서(docs/), 시험 파일 4개
• 그대로 둔 것: 다른 작업이 고치던 서버 코드(server.py, safe_http.py)와 예전 스타일 백업 파일

10월 28일 꼬리말을 고칠 때도 같은 이유로 스타일 파일만 커밋했다. 한 폴더를 여러 작업이 같이 쓸 때는, 내가 바꾼 파일만 옮기고 내가 바꾼 파일만 커밋해야 남의 작업이 섞여 올라가지 않는다.

배운 것

• 사건 원고와 코드를 나눠 두면, 사건을 늘리는 일과 화면을 고치는 일을 따로 할 수 있다. v3에서 사건이 늘어도 페이지는 build.py 한 번으로 다시 만들었다.
• 다시 만들어도 사건 번호는 지킨다. 예전 사건 번호를 그대로 둔 덕에 처음 판과 v3가 같은 사건을 같은 번호로 부른다.
• 길이 많은 게임은 자동 플레이로 시험한다. 5,040판과 600판은 손으로는 돌릴 수 없는 수다.
• 부하 시험은 인원, 들어오는 속도, 잰 곳을 함께 적는다. 같은 300명도 조건에 따라 결과가 다르다.

남은 것

1년 동안의 이야기를 따라가는 이야기 모드에는 아직 업적이 없다.

관련 주소

• 사이버 인생게임
• 보안 사건 해설과 실제 사례 · 보안 용어 사전
• 사이버 인생게임 개인정보 처리방침 (10월 29일에 다른 서비스들과 함께 올렸다)
• 같이 읽기: 학교 서버 두 대로 서비스 여러 개를 운영하며 배운 것