서론: 완벽한 트랙, 하지만 주인공이 빠졌다
타원형 트랙을 따라 말들이 뱅글뱅글 도는 애니메이션이 완성되었을 때의 쾌감은 이루 말할 수 없었습니다. 하지만 기쁨도 잠시, 치명적인 문제점을 발견했습니다. 트랙 위를 달리는 말들은 그저 ‘참가자 1’, ‘참가자 2’라는 무미건조한 꼬리표를 달고 달리고 있었기 때문입니다.
점심 내기나 워크숍 벌칙자를 정할 때, 사람들은 자신이 응원하는 대상에 감정을 이입해야 열광합니다. ‘김대리’나 ‘박과장’처럼 실제 참가자의 이름이 부여되지 않은 제비뽑기는 아무런 긴장감을 주지 못합니다. 게임이 진정한 재미를 갖추려면, 사용자가 직접 화면에 텍스트를 입력하고 원하는 수만큼 캐릭터를 생성할 수 있는 ‘동적 UI(Dynamic User Interface)’가 필요했습니다. 이번 편에서는 딱딱한 입력창을 몰입감 넘치는 게임 세팅 화면으로 탈바꿈시킨 텍스트 수정의 마법을 소개합니다.
1. AI의 기본 세팅: 기능엔 충실하지만 낭만이 없다
AI에게 “사용자가 이름을 입력하고 추가할 수 있는 기능도 넣어줘”라고 지시하자, 트랙 애니메이션 아래쪽에 텍스트를 입력할 수 있는 빈칸과 버튼 하나가 뚝딱 생성되었습니다. 기능적으로는 나무랄 데가 없었습니다. 빈칸에 이름을 쓰고 버튼을 누르면 트랙 위에 새로운 말이 하나씩 짠 하고 나타났으니까요.
하지만 화면을 구성하는 ‘단어’들이 문제였습니다. AI는 입력창 상단에 **’참가자 설정’**이라는 텍스트를, 입력 버튼에는 **’+ 추가’**라는 아주 건조하고 사무적인 텍스트를 달아놓았습니다.
경마장이라는 역동적인 콘셉트의 웹페이지에 ‘참가자 설정’이라니요? 마치 설문조사 폼이나 엑셀 관리자 페이지를 보는 듯한 착각이 들었습니다. 코드는 완벽했지만, 기획의 톤앤매너(Tone and Manner)가 완전히 무너져 내린 순간이었습니다.
2. 몰입감을 높이는 기획자의 언어 교정
코딩 초보인 저는 자바스크립트의 배열(Array)에 데이터를 집어넣고 화면을 다시 그리는 복잡한 로직(DOM 조작)은 1도 모릅니다. 하지만 사용자에게 어떤 단어를 보여주어야 클릭하고 싶어지는지는 잘 알고 있습니다.
곧바로 AI 채팅창을 열어 직관적인 수정을 요구했습니다. 이전에 로또 번호 생성기의 텍스트를 다듬었던 경험을 살려, 이번에는 아예 두 가지를 한 번에 지시했습니다.
수정 프롬프트: “참가자 설정을 경주마 이름 정하기로 바꿔주고 + 추가에 + 경주마 추가로 바꿔줘.”
수정된 코드를 덮어씌우자, 화면의 분위기가 180도 달라졌습니다. ‘참가자 설정’이라는 딱딱한 제목은 **’경주마 이름 정하기’**로 바뀌어 당장이라도 말에게 이름을 지어주고 싶은 욕구를 자극했습니다. 그저 ‘+ 추가’였던 밋밋한 버튼은 **’+ 경주마 추가’**로 바뀌며 버튼을 누를 때마다 내 소유의 든든한 경주마가 트랙에 투입되는 듯한 쾌감을 주었습니다.
3. 마법처럼 생성되는 동적 요소 (DOM 이해하기)
비전공자 입장에서 가장 신기했던 것은, 새로고침을 하지 않아도 ‘+ 경주마 추가’ 버튼을 누를 때마다 화면에 말들이 실시간으로 생겨난다는 점이었습니다.
나중에 알게 된 사실이지만, 이것이 바로 자바스크립트가 하는 가장 중요한 역할 중 하나인 ‘문서 객체 모델(DOM) 조작’이었습니다. 제가 입력창에 ‘김대리’라고 쓰고 버튼을 누르면, AI가 짜둔 코드가 이를 감지하여 트랙 위에 ‘김대리’라는 텍스트를 붙인 말 이미지를 새롭게 ‘그려내는(Rendering)’ 것입니다. 코딩을 몰라도, 제가 기획한 단어들이 이 복잡한 로직의 겉면을 아름답게 포장하고 유저와 소통하는 핵심 창구 역할을 톡톡히 해냈습니다.
4. UI 텍스트 수정을 통한 게임 몰입도 비교
| UI 요소 | 초기 AI 생성 버전 (기능 중심) | 기획자 수정 버전 (감성/테마 중심) | 유저 경험(UX)의 변화 |
| 섹션 제목 | 참가자 설정 | 경주마 이름 정하기 | 관리자 페이지 느낌 탈피, 게임의 주인공을 세팅하는 주도적 경험 제공 |
| 액션 버튼 | + 추가 | + 경주마 추가 | 단순한 데이터 입력을 넘어, 레이스에 출전시킬 말을 소환하는 시각적 기대감 상승 |
| 전체적인 톤 | 엑셀, 설문지 폼 | 내기용 미니 게임 | 서비스의 테마(경마장)와 일치하는 일관된 브랜딩 확보 |
결론: 코드는 기계가, 감성은 인간이 채운다
이번 경험을 통해 다시 한번 뼈저리게 느꼈습니다. 아무리 AI가 화려한 타원형 트랙을 그려주고, 실시간으로 요소를 추가하는 복잡한 자바스크립트를 단 10초 만에 짜준다고 해도, 최종적으로 이 서비스에 **’인간적인 재미와 감성’**을 불어넣는 것은 오롯이 기획자의 몫이라는 것을요.
‘경주마 이름 정하기’ 창을 통해 각자의 이름을 단 말들이 트랙 위에 준비를 마쳤습니다. 이제 이 말들이 진짜 숨 막히는 레이스를 펼칠 시간입니다. 다음 9편에서는 엎치락뒤치락하는 순위 변동을 위해 자바스크립트로 역동적인 속도 변화 난수를 생성하고, 마침내 1등이 결승선을 통과했을 때 화면을 수놓는 화려한 축하 폭죽 효과를 구현해 낸 짜릿한 과정을 이야기해 보겠습니다.
