fl!p fl!p 개발기 2부: 거리의 역설

 _flip flip logo_ <link-preview url="https://w0nder.land/s/flip-flip-dev-1-vibe-coding" title="flipflip 1부" target="_blank" image="https://w0nder.land/api/og/t-001?url=https%3A%2F%2Fw0nder.land%2Fposts%2F35-fl!p%2520fl!p%2520%25EA%25B0%259C%25EB%25B0%259C%25EA%25B8%25B0%25201%25EB%25B6%2580%253A%2520%25EB%25B0%2594%25EC%259D%25B4%25EB%25B8%258C%2520%25EC%25BD%2594%25EB%2594%25A9"> </link-preview> 물리 엔진이 안정화되고, '바이브 코딩'의 원칙도 정리된 시점에서 본격적인 게임 테스트를 시작했다. 그런데 플레이를 이어가다 보니 흥미로운 사실을 발견했다. 게임을 시작하면 엔딩을 보는 것이 정말 어렵다는 점이었다. 처음에는 버그라고 생각했지만, 자세히 관찰해보니 그것은 게임 자체에 내재된 메커니즘이 만들어낸 결과였다. 게임의 흐름을 분석해 보니 이렇다. 플레이어와 AI가 각각 위아래에서 시작해 서로의 영역을 침범한다. 내가 더 많은 땅을 차지할수록 내 영역은 깊어지고, 공이 다시 돌아와 새로운 땅을 먹으러 가는 데 더 오랜 시간이 걸린다. 성공할수록 이동 거리가 늘어나 오히려 속도가 느려지는 것이다. 그 사이 상대방은 내 영역을 조금씩 빼앗는다. 반대로 내가 열세일 때는 이동 거리가 짧아져 더 빠른 반격이 가능하다. 그 결과 게임은 자연스럽게 팽팽한 균형을 유지한다. 전통적인 '강자가 계속 이기는' 구조와는 정반대의 형태였다. 이렇게 해서 우연히, 그러나 자연스럽게 균형을 맞추는 시스템이 완성된 셈이었다. 나는 이 우연히 만들어진 시스템을 '거리의 역설'이라 부르기로 했다. 관찰을 이어가니 또 다른 흥미로운 현상이 보였다. 게임이 진행되다 보면 위아래 전투가 좌우 전투로 바뀌거나, 심지어 땅의 위치가 뒤바뀌기도 한다. 공의 움직임에 따라 게임의 방향성 자체가 변화하는 것이다. 이런 예기치 못한 변화는 게임을 더욱 다이내믹하게 만든다. 같은 규칙이지만 매번 다른 패턴으로 전개되기에 지루할 틈이 없다. 마치 자연 현상을 관찰하는 듯, 매 순간 변화를 예측할 수 없는 묘한 매력이 있었다. 다만 한 가지 아쉬운 점이 있었다. 플레이어가 직접 개입할 수 있는 요소가 거의 없어, 그저 관객처럼 게임을 지켜보는 느낌이 들었다. 그래서 조작 요소를 하나 추가했다. 게임 중 공을 클릭하면 '별모드'가 발동해 4초간 속도가 2배로 빨라지는 기능이다. 이 짧은 시간 동안 플레이어는 더 많은 땅을 차지할 수 있다. 별모드 중에는 공 주변에 별 모양 이펙트를 넣어 시각적 즐거움도 더했다. 여전히 엔딩을 보는 건 쉽지 않지만, 그 난이도가 오히려 게임의 매력이 되었다. 별모드 추가 후, 게임은 제법 완성된 모습을 갖췄다. 주변 사람들에게 게임을 보여주자 다양한 아이디어가 쏟아졌다. “랜덤으로 선물 상자가 나와서 주변 땅을 더 먹게 하면?”, “별모드에서 공을 한 번 더 클릭하면 공이 하나 더 나오게 하면?”, “각도가 랜덤으로 바뀌는 이벤트는?” 등등. 구현이 다소 복잡해 보이지만, 어차피 바이브 코딩이니 천천히 하나씩 시도해볼 생각이다. flip flip은 아직 완성작이라 하기 어렵다. 하지만 그 안에는 이미 나름의 흐름과 규칙이 자리 잡았다. 게임은 아직 덜컹거리지만, 공 하나가 구르고 있다는 것만으로도 즐겁다. 무언가를 만들 때는 거창한 설계보다, 가볍게 시작해 조금씩 고쳐가는 방식이 자연스럽다. 바이브 코딩 속에서 ‘거리의 역설’처럼 뜻밖의 질서가 만들어지기도 했다. 이제는 앱으로 옮겨보려 한다. React Native로 뼈대를 세우고, 배포와 업데이트 환경을 갖추며, 오프라인에서도 돌아가도록 만들어볼 생각이다. <link-preview url="https://flipflip.cc/" title="flipflip" target="_blank" image="/posts/35/assets/flipflip-og.png"> </link-preview>