서론: 정적인 텍스트를 넘어, ‘움직이는 화면’에 대한 갈증
로또 번호 생성기를 런칭하고 첫 실패의 쓴맛까지 보았지만, 코드가 눈앞에서 결과물로 바뀌는 경험은 비전공자의 가슴을 뛰게 하기 충분했습니다. 하지만 첫 프로젝트는 치명적인 약점이 있었습니다. 버튼을 누르면 ‘짠’ 하고 숫자가 나타나 버리니, 결과를 기다리는 쫄깃한 긴장감이 전혀 없다는 것이었습니다.
친구들과 점심 내기를 하거나 워크숍에서 제비뽑기를 할 때 사람들이 열광하는 이유는, 누가 걸릴지 모르는 그 아슬아슬한 ‘과정’이 주는 재미 때문입니다. 그래서 두 번째 마이크로 SaaS 프로젝트는 정적인 텍스트 추첨기가 아니라, 화면 속에서 캐릭터들이 살아 움직이며 경쟁하는 ‘동적인 비주얼 게임’으로 정했습니다. 목표는 흔해 빠진 사다리 타기가 아닌, 실제 경기장처럼 말들이 트랙을 도는 ‘경마 제비뽑기’ 웹페이지를 만드는 것이었습니다.
1. 일직선은 지루하다, ‘타원형 트랙’을 상상하다
처음 아이디어를 스케치할 때, 화면 왼쪽에서 오른쪽으로 그냥 직선으로 달리는 달리기 게임을 떠올렸습니다. 하지만 스마트폰의 좁은 세로 화면에서 일직선으로 달리면 경주가 너무 금방 끝나버리고 역동성도 떨어질 것이 뻔했습니다.
“진짜 경마장처럼 둥근 타원형 트랙을 뱅글뱅글 돌게 만들 수는 없을까?”
기획자로서는 멋진 상상이었지만, 코딩 초보에게는 재앙과도 같은 아이디어였습니다. 물체가 화면에서 원을 그리며 돌게 하려면 자바스크립트나 CSS로 사인(Sine), 코사인(Cosine) 같은 복잡한 삼각함수 수학 공식을 써야 한다는 이야기를 얼핏 들은 적이 있었기 때문입니다. 수포자였던 저에게는 불가능에 가까운 영역이었습니다. 하지만 저에겐 수학 천재 AI 비서가 있습니다. 저는 복잡한 공식을 계산하는 대신, 제 머릿속의 그림을 아주 상세한 일상어로 묘사하기 시작했습니다.
2. 수학 공식 대신 ‘묘사’로 승부하는 프롬프트
동적인 애니메이션을 AI에게 지시할 때는, 결과물이 어떻게 보여야 하는지 그 ‘물리적인 움직임’을 시각적으로 묘사해 주는 것이 핵심입니다.
나의 프롬프트: “너는 10년 차 웹 게임 개발자야. 점심 내기용으로 쓸 수 있는 웹 기반의 경마 게임을 만들어줘. 말들이 왼쪽에서 오른쪽으로 그냥 직선으로 가는 게 아니라, 가운데가 뻥 뚫린 커다란 타원형 트랙을 실제 경주마들처럼 빙글빙글 도는 애니메이션을 자바스크립트로 구현해야 해. 코딩에 필요한 삼각함수나 좌표 계산은 네가 알아서 완벽하게 짜줘.”
엔터 키를 누르자 AI는 캔버스(Canvas) API와 requestAnimationFrame, 그리고 제가 우려했던 복잡한 수학 공식(Math.cos, Math.sin)이 잔뜩 들어간 자바스크립트 코드를 순식간에 토해냈습니다. 저는 이 공식들이 어떻게 작동하는지 전혀 이해하지 못했습니다. 단지 이전처럼 워드프레스에 코드를 복사해서 붙여넣었을 뿐입니다.
화면을 새로고침하자, 놀랍게도 둥근 트랙을 따라 말 모양의 이모지들이 부드럽게 곡선을 그리며 질주하기 시작했습니다!
3. 기획자의 터치: 유치함을 덜어내고 톤앤매너 잡기
애니메이션 로직이 완벽하게 돌아가자, 다시 기획자의 본능인 ‘디테일 다듬기’가 발동했습니다. AI가 코드를 짜주면서 화면 상단에 큼지막하게 달아놓은 초기 타이틀이 제 눈에 묘하게 거슬렸습니다. AI는 말(Horse)을 이모지로 표현했다는 이유로 제목을 아주 직관적으로 지어두었습니다.
하지만 저는 제 웹사이트(흥인)의 서비스들이 퀄리티 있는 미니 게임처럼 보이길 원했습니다. 이모지라는 단어가 들어가니 어딘가 장난스럽고 유치해 보였습니다. 뼈대를 세워준 AI에게 즉시 UI 수정 지시를 내렸습니다.
수정 프롬프트: “‘이모지 경마 제비뽑기’에서 ‘경마 제비뽑기’로 바꿔줘.”
단어 하나를 덜어냈을 뿐인데, 화면은 한결 깔끔해졌고 본격적인 내기 게임 툴다운 무게감이 생겼습니다. 비전공자 기획자가 개발 과정에서 해야 할 일은 수학을 푸는 것이 아니라, 이처럼 유저가 느끼는 아주 미세한 감성의 차이를 잡아내어 텍스트와 디자인을 교정하는 것입니다.
4. 정적 웹페이지 vs 동적 웹 게임 기획 비교
| 기획 요소 | 1차 프로젝트 (로또 번호 생성기) | 2차 프로젝트 (경마 제비뽑기) | AI 의존도 변화 |
| 코어 로직 | 무작위 난수 6개 추출 후 즉시 출력 | 좌표 계산을 통한 타원형 트랙 애니메이션 렌더링 | 고차원적인 수학 로직일수록 AI의 역량이 100% 발휘됨 |
| UX 목적 | 빠르고 직관적인 정보 제공 | 결과를 지켜보는 딜레이와 시각적 긴장감 제공 | 기획자가 프롬프트로 ‘긴장감’을 묘사해야 함 |
| 디버깅 난이도 | 요소가 고정되어 있어 텍스트 수정이 쉬움 | 렌더링 중인 객체의 위치가 꼬일 수 있어 난이도 급상승 | 복잡한 코드는 섣불리 건드리지 않고 텍스트 교정 위주로 접근 |
결론: 복잡한 수학은 AI에게, 직관적인 수정은 인간이
동적인 웹 게임을 만들면서 깨달은 가장 큰 수확은, 내가 코딩의 기저에 깔린 수학적 원리를 전혀 몰라도 완벽한 기능 구현이 가능하다는 점이었습니다. AI는 불평 한마디 없이 지루한 좌표를 계산해 냈고, 저는 그저 화면을 쳐다보며 “제목에서 이모지라는 단어는 빼줘”라고 가볍게 지시하는 관리자의 역할을 훌륭히 수행했습니다.
트랙은 완성되었고 말들은 달리기 시작했습니다. 하지만 완벽한 게임이 되기 위해서는 참가자들이 직접 자신의 이름을 넣고 응원할 수 있어야 합니다. 다음 편에서는 “참가자 1” 같은 재미없는 기본 세팅을 걷어내고, 사용자가 직접 경주마의 이름을 짓고 추가할 수 있도록 동적 UI와 텍스트를 고도화하는 과정을 상세히 들여다보겠습니다.