AI만을 이용하여 'Angry Birds' 복제하기

 (twitter.com/javilopen)
3P by GN⁺ | ★ favorite | 댓글 1개
  • Javi Lopez는 GPT-4로 코드를 만들고 Midjourney·DALL·E 3로 그래픽을 생성해 Angry Birds풍 2D 물리 게임인 Angry Pumpkins를 제작함
  • 결과물은 웹에서 플레이할 수 있지만 모바일에서는 동작하지 않으며, 게임 화면 아래 설명을 따라 자신만의 레벨도 만들 수 있음
  • 그래픽은 AI 이미지 생성으로 대부분 만들고, 일부 스프라이트는 Photoshop/Photopea로 배경 제거와 크롭을 거쳐 게임에 맞게 다듬음
  • 코드는 matter.js와 p5.js 기반으로 시작해 발사 방식, 충돌, 파티클, 몬스터 형태, 간접 충격 판정을 GPT-4와 반복 수정하며 확장됨
  • 전체 코드는 약 600줄이며 직접 코드를 쓰지는 않았지만, 한 번의 프롬프트로 완성된 게임을 얻기보다 오류를 설명하고 고치는 반복 과정이 필요했음

Angry Pumpkins 결과물

  • Angry Pumpkins는 Angry Birds와 비슷한 방식의 2D 물리 게임으로, GPT-4, Midjourney, DALL·E 3를 활용해 제작됨
  • 플레이 가능한 게임은 Angry Pumpkins에서 확인할 수 있음
    • 현재 모바일에서는 동작하지 않음
    • 게임 화면 아래 설명을 읽으면 직접 레벨을 만들고 플레이하는 방법을 확인할 수 있음
  • Javi Lopez는 자연어만으로 무언가를 만드는 새 작업 방식이 가능해지고 있으며, 이를 “역사적 순간”으로 봄

그래픽과 코드 제작 흐름

  • 이미지 생성과 스프라이트 작업

    • DALL·E 3는 Halloween 분위기의 홈 화면, “Angry Pumpkins” 로고, Play 버튼이 있는 타이틀 화면 생성에 사용됨
    • Midjourney는 묘지 배경, 2D 지형, 호박 캐릭터, 초록 몬스터, 나무 상자, 뼈, 돌, 나무 판자 같은 게임 오브젝트를 만드는 데 쓰임
    • 오브젝트는 “sprite stylesheets” 형태로 만든 뒤 Photoshop/Photopea로 크롭하고 배경을 제거함
    • 작은 세부 요소는 Midjourney의 inpainting으로 보완함

  • GPT-4로 만든 게임 로직

    • 전체 소스는 sketch.js에 공개돼 있음
    • 게임 코드는 약 600줄이며, Javi Lopez는 직접 작성한 코드가 없다고 밝힘
    • 시작 프롬프트는 matter.js와 p5.js를 사용해 마우스로 각도와 힘을 조절해 공을 쏘고, 2D 물리로 쌓인 상자를 맞히는 간단한 게임을 만드는 것이었음
    • 이후 Angry Birds식 마우스 발사 방식, Uncaught ReferenceError: Constraint is not defined 오류 수정, 횃불 파티클 효과, 원형 몬스터 처리, 간접 충격 판정 등을 반복적으로 요청함

단일 프롬프트보다 중요한 반복 수정

  • 핵심은 완성된 게임을 한 번에 요구하는 방식이 아니라, 단순한 동작 기반에서 시작해 계속 확장하고 고치는 흐름임
  • 문제가 생길 때마다 오류를 명확히 설명하고 GPT-4가 수정하도록 했음
  • 현재 GPT-4는 단일 프롬프트만으로 전체 게임을 생성하는 단계는 아니지만, 앞으로는 요청만으로 AAA급 비디오 게임을 만들 수 있을 것이라는 기대가 담겨 있음

함께 보면 좋은 글 β

GN⁺   [-]
Hacker News 의견들

  • Angry Birds에서 PM으로 일했는데, 이건 정말 훌륭한 데모임
    원작은 Box2D, Lua 스크립팅을 썼고, 당연히 적과 레벨도 직접 만들어야 했음
    현재 기술 상태로 히트 게임을 만들 거라는 기대는 없고, 자기 실력보다 기술 한계에 묶일 가능성이 큼
    그래도 빠른 아이디어 검증, 시제품, 게임 잼에는 판도를 바꾸는 도구이고, 아이들이 아이디어를 가지고 놀 수 있는 Scratch 대안으로도 좋아 보임

  • 최근 잘 모르는 프레임워크 2개로 기본적인 REST API와 CRUD 프런트엔드를 만들어야 해서 비슷한 실험을 했고, GPT-4가 모든 코드를 생성하게 했음
    그냥 문서 보면서 직접 짜는 것보다 느렸을 가능성이 크고, 해당 프레임워크에 익숙한 사람이면 훨씬 더 빨랐을 것 같음
    복잡한 부분은 아주 구체적이고 긴 프롬프트가 필요했고, 전체 앱을 만드는 데 약 5시간 걸렸으며, 상당 시간은 느린 ChatGPT 출력을 기다리는 데 썼음
    익숙한 프레임워크였다면 2시간 안에도 끝냈을 듯함
    올바른 방식으로 하고 있는지 확인하는 데는 확실히 유용했고, 질문할 수 있는 전문가가 대기 중인 느낌이었음
    형식이 잘 맞는 보일러플레이트 코드를 생성하는 데도 좋았지만, 일상 개발에 지금보다 더 많이 쓰진 않을 것 같음
    대부분의 경우 프레임워크를 잘 익히고 직접 작성하는 편이 더 빠름

    • 올바른 방식인지 확인하는 용도로는 놀랄 만큼 좋았음
      “{foo} 플랫폼 프로젝트의 디렉터리 구조는 뭐가 좋은가?”나 “{language y}에서 {x}를 관용적으로 하는 방법은?” 같은 질문을 자주 하게 됨
      여러 언어의 많은 프로젝트를 봤다는 장점이 있어서, 어떤 질문에는 그 자체로 꽤 좋은 답으로 이어짐
    • 내 경험도 비슷함
      여전히 프로그래밍을 이해해야 하고, 단지 자연어 영어로 코드를 타이핑하는 셈임
    • 간과하는 건 대부분의 사람이 하루에 최고 생산성으로 빡세게 코딩할 수 있는 시간이 몇 시간뿐이라는 점임
      GPT-4를 3시간 돌보며 코드를 쓰게 해도, 그날 아직 “소모하지 않은” 최고 코딩 생산성 3시간이 남아 있을 수 있음
    • GPT-4를 ChatGPT Plus로 쓰는지 API로 쓰는지 궁금함
      API라면 보통 어떤 도구로 접근하는지도 궁금함
    • 직접 작성하는 데 걸리는 시간을 추측하지 말고 실제로 재보는 게 좋음
      결과가 의외일 수 있음

  • “ChatGPT로 30분 만에 iOS 앱 만들었다!” 같은 글 홍수보다 이게 더 흥미로움
    그런 글은 단순 Hello World만 만든 것일 수도 있어서 큰 의미가 없는데, 이건 최소한 완성물을 보여주고 있고 실제로 꽤 인상적임
    다만 알아야 할 세부사항은 걸린 시간, 프롬프트 수, 필요한 방향 수정 횟수, 그리고 만든 사람이 관련 기술에 얼마나 능숙했는지임
    개인적으로 ChatGPT가 여러 상황에서 큰 힘이 된다고 느꼈지만, 코드 생성은 그중 하나가 아니었음

    • https://twitter.com/javilopen/status/1719363669685916095가 관련 있음
      “게임은 600줄뿐이고 내가 한 줄도 쓰지 않았지만, [게임 코딩]이 가장 어려운 부분이었다”는 내용임
      Hello World는 아니지만 쇼핑 목록보다 훨씬 어렵다고 보기도 힘듦
      그래도 600줄과 라이브러리 몇 개로 Angry Birds를 만들 수 있다는 점이 가장 인상적임
    • ChatGPT 코드 생성으로 Flask, Python, HTML+JS+CSS, SQLite 기반의 사이트 전체를 만들어 봤는데 놀라웠음
      운영 중인 코드가 5천 줄 정도 있고 전부 동작함. 트래픽은 많지 않지만 그래도 운영 환경임
      한계를 알고 프롬프트를 더 잘 쓰는 것, 환각 가능성을 알아보고 위험을 묻는 것이 아주 큰 요소임
      특히 잘 모르는 기술에서 가장 좋았음. Android 개발자인데 15년쯤 직접 해보지 않은 웹사이트 제작에 쓰고 있음
      가장 멋졌던 부분은 시스템 관리와 서버 운영 도움이고, gunicorn 오류 디버깅 능력이 좋음
      프로젝트가 커지고 문맥을 잃으면 출력 코드를 수정해야 하지만, 더 큰 프로젝트에서 가장 큰 장애물은 문맥 길이 제한이고 곧 완화될 것 같음
      최근 만든 사이트는 코드의 약 95%를 ChatGPT가 작성한 https://cosmictrip.space/이고, GPT-4로 프롬프트를 생성한 뒤 DALL-E로 우주 이미지를 만듦
      단순한 사이트지만, 지금 GPT+DALL-E 기반의 개방형 이미지+텍스트 AI 어드벤처 게임도 만들고 있음
      DALL-E 3 API가 나오면 11월 6일 전 출시를 기대하고 있고, 이 어드벤처 게임도 코드의 95% 이상을 ChatGPT가 작성함
      코드 생성이 너무 잘돼서 직접 만드는 에이전트에 GPT-4 API를 쓰고 있음
      함수 호출로 구조화된 하위 작업을 만들고, 에이전트가 그 코드를 작성하게 하며, 파일을 문맥으로 포함하거나 코드와 대화하는 기능도 붙였음
      아직 공개할 수준은 아니지만 GPT-4의 코드 생성 능력은 정말 대단하고, 다만 프롬프트 경험이 필요함
      처음 쓴 프롬프트가 좋을 가능성은 낮아서, 내가 만드는 에이전트가 그 부분을 잘 해결하길 바람
      아이디어는 Jira/칸반 스타일 보드에서 AI 코더를 작업에 배정하고, 사람이 승인·수정하며, AI가 작업을 확인하면서 티켓이 자동으로 컬럼을 이동하는 방식임
    • 오픈소스 Angry Birds 클론이 많아서, 보기만큼 인상적이진 않음
      기존 템플릿이 수십 개 없는 새 게임을 프로그래밍하는 편이 더 나은 리트머스 시험지가 될 것임
    • 또 하나 흥미로운 질문은 “영상에 나오지 않은 다른 모든 경우에는 어떻게 동작하느냐”임
    • 솔직히 믿기 좀 어려움
      GPT-4가 이런 작업을 잘하긴 하지만, 내 경험상 반복적 개선은 잘 안 됨
      대화가 길어질수록 이전 문맥을 잃고 생성 코드가 이전 동작에서 벗어남
      예를 들어 “이 버그 고쳐줘”가 다른 기능을 깨는 해결책으로 쉽게 이어질 수 있음
      스레드의 코드(1)가 최종 결과(2)에 존재하는 것으로 보이는데, 코드 최상단이라는 점을 보면 ChatGPT가 600줄 이상 단위로 반복 생성하게 했다는 뜻일 수 있음
      이건 상당히 의심스러움
      500번째 줄에 정의된 뒤 20번째 줄에서 새 Slingshot을 만드는 건, 그렇게 하라고 구체적으로 지시하지 않는 한 매우 가능성이 낮음
      loadImage('stone2.png');도 우연히 올바른 파일명과 스프라이트 크기를 골랐다는 건가? 그걸 모두 프롬프트에 제공했고 코드가 작성됐다는 건가? 실제 사용한 프롬프트를 보여줘야 함
      훨씬 그럴듯한 시나리오는 클래스 객체들을 비교적 독립적으로 생성한 뒤 사람이 큰 파일로 조립하고, 전체를 입력으로 복사한 다음 “이런 함수를 작성해줘” 같은 코드 프롬프트를 만든 것임
      주장처럼 프롬프트만 썼을 가능성이 불가능하진 않지만, 좋아요와 평판을 위해 “코딩을 전부 시켰다”는 부분을 크게 과장하는 것처럼 느껴짐
      손으로 일부 코드를 작성하거나 조립한 뒤 입력으로 넣고 “이것도 해줘” 식으로 프롬프트했을 가능성이 높아 보임
      그래서 출력은 “100% 생성”일 수 있지만, 사람들이 가정하는 방식은 아닐 수 있음
      이런 접근은 GPT-4가 기존 코드를 다시 쓰게 만들지만, 코드 전체에 의도를 설명하는 주석을 명시적으로 요청하거나 추가하지 않으면 이전 기능에서 서서히 표류함
      테스트 모음이 없으면 이런 미묘한 표류를 알아차리지 못하고 기능이 깨짐
      작성자가 이런 일을 했다는 언급도 없음
      게다가 이 사람은 AI 교육 자료를 판매하는 이해관계(4)가 있어서, 이 분야 전문가처럼 보이는 것이 이득이며, X에서 질문받았을 때도 추가 세부사항, 단계별 Git 히스토리, 실제 사용 프롬프트를 제공하지 않았음
      세부사항 부족과 믿기 어려운 결과를 보면, 이 경우에는 회의적으로 보는 게 타당함
      CodeLlama 34B나 GPT-3.5 같은 모델로 이런 종류의 결과물을 만들 수는 있겠지만, 설명된 방식으로는 아닐 것임
      GPT-4로도 가능한지 확신이 안 섬. 프롬프트가 실제 같지 않을 만큼 허술해 보임(5)
      다만 더 많은 세부사항으로 반박해 준다면 좋겠고, GPT-4가 좋은 도구인 건 맞음
      [1] - https://nitter.net/pic/orig/media%2FF9xoI8mXgAAn7v9.jpg
      [2] - https://bestaiprompts.art/angry-pumpkins/sketch.js
      [3] - https://nitter.net/javilopen/status/1719363669685916095#m
      [4] - https://javilopen.substack.com/
      [5] - “Now, make the monsters circular, and be very careful: apply the same technique that already exists for the rectangular ones regarding scaling and collision area, and don't mess it up like before. ”

  • 아들이 로딩 스피너를 화난 듯 계속 탭하는 걸 보고, 한가한 일요일 오후에 나와 GPT가 이 게임을 코딩했음
    https://spinner.franzai.com/
    상호작용형 로딩 스피너 게임은 흥미로운 UX 패턴이 될 수 있다고 봄
    뭔가 기다리는 중에도 사용자의 행동이 영향을 준다는 피드백을 줄 수 있음

    • 로딩 화면에 대한 흥미로운 접근이고, 개인적으로는 이런 기능을 쓰는 게임이 훨씬 많을 줄 알았음
      물론 AAA 게임이 아니라 인디 게임 쪽에서 말임
      예전에 이 특허가 만료됐다는 뉴스를 본 기억이 뚜렷한데, 찾아보니 그 “예전”이 벌써 8년 전이었음
      https://www.eff.org/deeplinks/2015/12/loading-screen-game-pa...
    • 재미있는 사실로, 로딩 미니게임에는 그런 개발을 막아온 특허가 있었음
      Namco가 소유한 것으로 알고 있고, Ridge Racer에서 볼 수 있음
    • 손가락 탭 테스트:
      https://psycnet.apa.org/record/2014-37068-023
    • Budokai 3(PS2) 로딩 화면에서 아날로그 스틱을 마구 돌리며 Saibamen이 자라는 걸 보던 기억이 남

  • AI가 개발을 바꿔놓는다는 건 이제 의심할 여지가 없음
    지난주에만 중간 규모 서비스 2개를 만들 수 있었고, 수천 줄의 Python 코드였는데 Python은 10년 넘게 쓰지 않았던 언어였음
    정말 인상적인 건 대체로 내가 직접 썼을 코드보다 더 낫다는 점임
    멋진 README.md가 필요하면 라우트, CLI 인자 등이 들어 있는 소스 코드를 주면 생성해 줌
    테스트도 원하면 만들어 줌. 개발자에게 이렇게 쉬운 때는 없었음
    코드 생성에서는 GPT-4가 GPT-3.5를 압도함
    GPT-3.5는 아주 촘촘한 예시를 주면 복사는 괜찮게 하지만, GPT-4는 어느 정도 “생각”하는 느낌임
    경험상 GPT-4 32k 문맥은 꽤 자주 실패함
    예를 들어 1만 토큰 이상, 대략 3만 자 이상을 생성한다면 몇 번 다시 시도해야 할 수 있음
    또 ChatGPT는 사소하지 않은 작업에 이상적인 인터페이스가 아님
    API를 직접 쓰거나 32k 문맥을 쓸 수 있는 Azure OpenAI Chat Playground 같은 것을 쓰는 게 좋음
    홍보를 겸하자면, 프롬프트 생성의 반복 잡무를 자동화하는 오픈소스 앱을 만들었음: https://github.com/codespin-ai/codespin-cli

  • 지난 10년 동안 노코드 도구에 엄청난 투자가 들어갔는데, 이제 ChatGPT가 코드를 너무 잘 써서 기술적 감각은 있지만 코딩을 하지 않는 사람에게는 아마 더 빠르고, 더 유연하고, 사용성도 비슷한 수준에 가까워지고 있다는 점이 흥미로움
    최근 Mendix로 REST 서비스를 소비하고 발행하는 데모 앱을 만들어야 했는데, 세부사항을 파악하는 데 며칠이 걸렸음
    같은 일을 ChatGPT로 어떤 언어든, 예를 들어 bash로 했다면 몇 분이면 됐을 것 같음
    배포와 버전 관리는 PaaS/IaaS로 큰 기술력 없이 해결할 수 있고, 특히 기업용 노코드 플랫폼 비용과 비교한다면 더 그렇음
    개인적 편향일 수 있지만, 진지한 일을 하려면 노코드 플랫폼이 더 번거롭게 느껴져서 늘 싫어했고, 비슷한 이유로 ActiveRecord ORM도 싫어함
    그래도 노코드는 꽤 곧 구식이 될 것처럼 보임
    물어보고 복사·붙여넣기만 하면 되는데 누가 드래그 앤 드롭을 하고 싶겠음?

    • 개념적으로는 거의 완벽에 가까운 해법 같음
      노코드는 쉽지만 경직되어 있고, 코딩은 유연하지만 지루하고 오류가 나기 쉬움
      원하는 것을 말로 풀어 빠르게 코드를 얻고, 그 코드가 깔끔하기만 하다면 필요에 따라 조정할 유연성이 생김
      어떤 경우에는, 이 사례처럼 조정조차 필요 없을 수도 있음
      앞으로가 기대됨
    • 정말 몇 분이었을까? 직접 해보고 추측이 아니라 실제 피드백을 주면 좋겠음
      오래 걸리지 않을 것 같음

  • 이건 통계적 표절 세탁이라 꽤 근사함
    개인적으로는 HAL을 막는 척하면서 현재의 큰 곡괭이 판매자들에게 시장 해자를 만들어주는 것보다, 세탁 골드러시를 막는 일이 법적으로 더 긴급한 우선순위라고 봄

  • GPT-4와 AI 도구를 제대로 써서 생산성을 100배 올린 프리랜서나 원격 노동자가 분명 있을 것 같음
    이런 멋진 꼼수가 진공 속에만 존재한다고는 상상하기 어려움
    2년 뒤에 무엇이 가능할지 생각해 보면, 이미 요정은 병에서 나왔음

    • 100배라면 원래 그렇게 생산적이지 않았던 것 아닐까
      ChatGPT로 생산성을 “100배” 올리는 팁을 안다면 공유해 줬으면 함

  • 솔직히 이런 글을 볼 때마다 내 고용 가능성이 점점 더 걱정됨
    백업 플랜도 없고 소프트웨어 엔지니어링을 배우는 데 너무 많은 시간을 쏟았는데, 상황이 좋아 보이지 않음

    • 그 부분은 진심으로 걱정하지 않음
      다른 이들도 말했듯, 일반 사람들이 LLM이 필요한 동작 소프트웨어를 만들 수 있을 만큼 상세한 제품 명세를 작성하게 되면 프로그래머가 곤란해질 것임
      그런데 그건 프로그래밍과 꽤 비슷하게 들림
      우리의 일은 바뀔 것이라 봄. 키보드로 코드를 치는 시간은 줄고, 무엇을 만들지 생각하는 시간이 늘어날 것임
      오히려 우리는 더 가치 있어질 가능성이 큼. 훨씬 더 많은 일을 해낼 수 있게 될 테니까

  • 잠재적인 RPG 게임용으로 팔라딘의 탑다운 애니메이션 스프라이트 시트를 얻어보려고 해봤고, 실패 과정은 여기 있음: https://imgur.com/a/2uJyUT3
    실제 순서는 먼저 탑다운 변형들을 시도했고, 마지막에는 궁금해서 측면 시점을 넣어본 것임

    • 예전에 Midjourney로 TTRPG 토큰을 만들었는데, 가장 잘 먹힌 방법은 aerial view라고 쓰는 것이었음
      top down은 제대로 될 때도 있고 아닐 때도 있어 매우 불안정했음
      DALL-E 3에도 같은 식의 안내가 필요한지 궁금함
답변달기