서론: 일정한 속도로 달리는 경주는 ‘노동’일 뿐이다
참가자 이름을 넣을 수 있는 입력창까지 다듬어지자, 트랙 위에는 제법 그럴싸한 경주마들이 출발선에 정렬했습니다. 하지만 치명적인 문제가 하나 더 남아있었습니다. ‘경주 시작’ 버튼을 누르자 말들이 출발하긴 했는데, 모두가 처음부터 끝까지 똑같은 속도로만 달리는 것이었습니다.
가장 먼저 출발선에서 치고 나간 말이 그대로 1등으로 결승선에 들어왔습니다. 엎치락뒤치락하는 역전의 묘미도, 꼴찌가 막판 스퍼트를 올리는 극적인 긴장감도 없었습니다. 결과를 뻔히 아는 레이스를 지켜보는 것은 게임이 아니라 지루한 노동에 불과합니다. 진정한 제비뽑기의 쾌감은 ‘예측 불가능성’에서 나옵니다. 저는 이 밋밋한 레이스에 심장 쫄깃한 긴장감을 불어넣고, 마침내 1등이 결정되었을 때 화면을 압도하는 화려한 시각적 보상을 주기 위해 다시 한번 AI 비서를 호출했습니다.
1. 엎치락뒤치락, 예측 불허의 난수(Random) 생성기
코딩을 모르는 비전공자지만, 로또 번호 생성기를 만들 때 AI가 썼던 ‘자바스크립트의 난수(Random)’ 개념을 떠올렸습니다. 이 무작위 추출 방식을 말들의 속도에 적용하면 어떨까 싶었습니다.
머릿속에 그린 역동적인 레이스를 AI에게 상세히 묘사했습니다.
나의 프롬프트: “말들이 똑같은 속도로 달리면 결과를 미리 알게 되어서 너무 재미가 없어. 경주를 하는 동안 말들의 속도가 무작위로 빨라졌다 느려졌다를 반복하게 해줘. 뒤처지던 말이 갑자기 스퍼트를 내서 역전하기도 하고, 1등 하던 말이 갑자기 느려지는 등 엎치락뒤치락하는 긴장감 넘치는 로직을 자바스크립트로 구현해 줘.”
AI는 즉각 코드를 수정하여 Math.random() 함수를 프레임마다 다르게 적용하는 복잡한 로직을 추가해 주었습니다. 코드를 덮어씌우고 다시 버튼을 누르자, 트랙 위에서 환호성이 터져 나왔습니다. 1번 말이 선두로 치고 나가다 갑자기 속도가 줄고, 뒤에 있던 3번 말이 맹렬한 기세로 타원형 트랙의 곡선 구간을 파고들며 역전하는 완벽한 레이스가 펼쳐졌습니다.
2. 밋밋한 텍스트 결과는 그만, 시각적 보상의 중요성
다이내믹한 경주 끝에 드디어 1등 말이 결승선을 통과했습니다. 그런데 화면 중앙에 덜렁 ‘3번 말 우승!’이라는 작은 텍스트 팝업만 뜨고 경주가 끝나버렸습니다. 긴장감 넘치는 과정에 비해 결말이 너무 초라했습니다. 유저가 게임에 만족감을 느끼려면 확실한 시각적 카타르시스가 필요합니다.
축하 효과 프롬프트: “1등이 결승선을 통과하는 순간, 그냥 글자만 띄우지 말고 화면 전체에 화려한 축하 폭죽(Confetti)이 팡팡 터지면서 흩날리는 효과를 넣어줘. 우승한 경주마의 이름도 화면 한가운데 크게 강조해서 띄워주고.”
AI는 외부의 폭죽 효과 라이브러리(canvas-confetti)를 활용하거나 순수 자바스크립트와 CSS로 색종이가 흩날리는 코드를 뚝딱 작성해 주었습니다. 워드프레스에 코드를 붙여넣고 다시 레이스를 실행했습니다. 숨 막히는 역전극 끝에 1등 말이 결승선을 밟는 순간, 화면 전체를 뒤덮으며 오색 찬란한 폭죽이 터져 내렸습니다. 드디어 이 페이지가 단순한 유틸리티를 넘어 하나의 완벽한 ‘게임’으로 거듭난 순간이었습니다.
3. 기획자의 상상력이 코드의 한계를 깬다
만약 제가 코딩 문법책만 파고 있었다면, 타원형 트랙을 렌더링하는 캔버스(Canvas)의 requestAnimationFrame 사이사이에 난수를 주입하고, 폭죽을 터뜨리기 위해 파티클(Particle) 애니메이션을 구현하는 데만 몇 달이 걸렸을 것입니다.
하지만 저는 철저하게 기획자의 시선에서 “어떻게 해야 사람들이 더 열광할까?”만 고민했습니다. 속도 변화와 폭죽이라는 아이디어를 자연어로 던져주기만 하면, 복잡한 수학 공식과 렌더링 로직은 AI가 완벽하게 처리해 냅니다. 기술의 장벽이 사라진 시대에 가장 강력한 무기는 결국 ‘상상력’과 ‘디테일’이라는 것을 다시 한번 깨달았습니다.
4. 동적 로직 추가 전후의 게임성 비교
| 기획 요소 | 초기 AI 버전 (정속 레이스) | 최종 수정 버전 (다이내믹 레이스) | 기대 효과 및 UX 변화 |
| 속도 로직 | 모든 객체가 고정된 동일 속도로 이동 | 난수 기반으로 실시간 가속 및 감속 반복 | 한 치 앞도 알 수 없는 극도의 긴장감과 몰입도 부여 |
| 레이스 양상 | 출발 순서가 곧 도착 순서 (역전 불가) | 끊임없는 순위 변동과 막판 스퍼트 발생 | 실제 경마를 보는 듯한 역동성 확보 |
| 종료 이펙트 | 기본 텍스트 경고창(Alert) 출력 | 화면 전체를 덮는 화려한 축하 폭죽 애니메이션 | 강렬한 시각적 보상으로 게임의 만족도 극대화 |
결론: 프론트엔드(화면)의 완성, 이제 백엔드(데이터)로 향할 시간
경주마 이름을 직접 정할 수 있고, 타원형 트랙을 역동적으로 달리며, 우승 시 폭죽까지 터지는 완벽한 시각적 게임이 완성되었습니다. 제 워드프레스 사이트(heung-in.com)를 방문한 유저들이 화면(프론트엔드)에서 즐길 수 있는 모든 요소가 갖춰진 셈입니다.
하지만 진짜 서비스는 휘발되지 않아야 합니다. “이 재밌는 경주 결과를 어딘가에 저장해서, 누가 가장 많이 우승했는지 랭킹을 매길 수는 없을까?”
서버도 없고 데이터베이스(DB)라는 개념도 모르는 비전공자에게 이는 엄청난 도전이었습니다. 다음 10편에서는 코딩 초보가 AI의 도움을 받아 ‘구글 스프레드시트’를 나만의 강력한 백엔드 서버로 탈바꿈시키고 유저들의 게임 기록과 랭킹을 저장해 낸 기적 같은 과정을 파헤쳐 보겠습니다.
경마사이트로 가보시죠!