무식한게 용감하다고, 아무것도 모르면서 무작정 AI랑 게임을 만들어봤습니다. 제가 주말에 혼자 만들어봤다가 생각보다 재밌어서 앱에서 정식 출시까지 하게 됐는데요, 저는 개발자도 아니고, DA 출신 PO입니다. 이번 글에서는 비개발자가 AI와 함께 어떻게 미니게임을 만들었는지 그 과정을 공유해보려 합니다. 최대한 쉽고 가볍게, ‘바이브 코딩’ 맛보기용입니다.
이 글이 도움이 될 만한 분들은
- 개발은 잘 모르지만 뭔가 만들어보고 싶으신 분
- 바이브코딩 과정이 궁금하신 분
1. 벌써 돈 쓰기 아까워! 0원으로 시작하는 법
Cursor, Lovable 같은 AI 툴들은 대부분 5-6번 질문하고 나서부터는 결제해야 합니다. 저는 스스로 어느 정도 퀄리티의 결과물을 만들 수 있을지 보장되지 않은 상황에서 결제하기를 누르기가 망설여지더군요. (지금은 Cursor 유료 플랜을 잘 사용하고 있습니다.)
그래서 GPT에게 돈 안 드는 툴을 알려달라고하니 Codepen을 알려줬고, Codepen에서는 무료로 코드의 결과물을 바로 확인 할 수 있었습니다. Codepen은 사실상 시연용이므로, 정말 가벼운 테스트가 필요할 때만 사용하시는 것을 추천합니다.
몇 개 안 되지만, 제가 써본 툴의 장단점은 이렇습니다:
| 툴 이름 | 장점 | 단점 |
| Lovable | AI가 UI까지 자동 생성해 줘서, 초기 구축이 굉장히 빠름 | 무료 사용량이 적고, 구조가 복잡해질수록 코드 수정이 어려움 |
| Cursor | VS Code 기반이라 친숙하고, 실시간 코드 수정이 매우 유용 | 일정 횟수 이상 사용 시 유료, 초보자에겐 어려울 수도 |
| CodePen | 설치 없이 바로 코드 실행 가능. HTML/CSS/JS 구조가 단순함 | 단순한 만큼 실제 배포에 활용하기는 어려움 |
2. 감 놔라 배 놔라, 일단 만들어달라고 하기
프롬프트만 잘 짜면 AI가 꽤 많은 걸 해줍니다. 처음에 미니게임의 구조를 원하는 대로 만들기 위해 다양한 컨셉의 프롬프트를 시도했는데요, 결론부터 말씀드리면 예시 이미지와 함께 설명하는 것이 가장 효율적입니다. 제가 써본 방식은 아래 세 가지였어요.
2.1 텍스트로 구체적인 조건을 설명하기
가장 무난한 방식인데, 주저리 주저리 많이 쓰면 AI는 오히려 방황합니다. 핵심 뼈대만 짧게 설명하는 게 훨씬 좋아요. PRD에 들어갈 만한 큰 주제만 작성하고, 디테일은 나중에 추가해야 합니다. 한 번에 한 가지 일만 시키기!
ex) 미니 게임의 경우, 게임이 총 1단계부터 5단계까지 되어있다면 1단계만 먼저 만들고 단계랑 목숨은 나중에 추가
2.2 기존 사례를 참고하여 비슷하게 만들어달라고 하기
예를 들어 식단 기록 앱을 만들고 싶다면, 이미 있는 앱을 참고하는 방법도 있습니다. 다만 내가 원하는 방향으로 틀이 바뀌는 경우에는 구조가 꼬일 수 있습니다. 그래서 저는 기본적인 시장 조사, 사례조사를 할 때는 무조건 GPT에 물어보며 나의 관심사를 넌지시 알려줍니다. (이전 대화를 기억하는 기능을 켜두었을때 효과가 좋습니다.)
ex) 식단 관리 앱 추천해 줘, 각각의 특징이 뭐야? Noom 같은 식습관 개선 서비스를 만들거야 ...
2.3 상황별 이미지를 첨부하면서 설명하기 💯
가장 추천하는 방식인데요, 이미지 한 장이 백 마디 말보다 빠릅니다. 저는 이미 게임 관련 프롬프트를 여러번 입력한 상황이었어서 GPT가 맥락을 어느정도 이해를 하고 있었는데요, 이때 간단한 이미지를 전달해주면 UI까지 비슷하게 코딩해줍니다.
3. AI 한테 화내지 말기 (aka. 비서)
당연한 말이지만 에러는 정말 많이 납니다. 스스로 개발을 잘 모르는 상태에서 비서가 시키는 대로 하니까 한마디로 개판이었습니다. 무식하게 아무것도 모르고 시작했으니 당연한 결과였고.. 덕분에 이번 기회에 프론트 기본 구조를 이해하게 됐습니다.
한두 번 두들겨 맞으면서 CSS, JS가 뭔지 이해했습니다. 그리고 이제 문제가 생겼을 때 코드의 어떤 부분을 고쳐야할지 판단할 수 있게 됐어요. 예를 들어서 게임 STOP 버튼을 눌러도 동작을 안 한다면,
"STOP 버튼을 눌러도 안 멈추네. JS의 button뭐시기에 문제가 있는 것 같다. function stopGame()에서 콘솔 로그를 찍어보자"
정도로 생각할 수 있는 수준이 되었습니다. 어떻게 고쳐야 할지는 비서님이 대신해주셨고 디버깅도 원하는 만큼 할 줄 알게 됐습니다.
내 코드를 저장해두고 save as 하는 것은 기본이고요, 아래의 스킬들이 가미되면 더욱 좋습니다.
- 오류 메시지를 복사해서 GPT에게 직접 물어보는 것은 기본
- 콘솔에 나온 에러 메시지를 그대로 붙여 넣으면 GPT가 대부분 원인을 찾아줌. (간혹 돌고 돌지만 나만 정신 차리면 됨)
- 예: Uncaught TypeError: Cannot read properties of null → 아, id가 잘못된 거였구나.
- 작게 쪼개서 하나씩 확인하는 스킬이 필요
- "버튼 누르면 이 div가 안 보여야 하는데 계속 보이는 문제가 있다"처럼 구체적으로 명령.
- 한 번에 5개 해달라고 하지 말고, 일감은 1개씩 쪼개서 주도록.
- 주석 달아달라고 하면서 겸사겸사 코드 공부하기
- 코드 일부를 복사해 주면, GPT가 잘못된 부분을 주석 달아가며 알려줍니다.
- 문제가 없어도 저는 웬만하면 주석 달라고 했습니다. 스스로 공부하면서 하기 편했어요.
- AI한테 화내지 말기
- 비서는 죄가 없습니다. 다 상사가 무지해서 발생한 일입니다. (내가 미안하다..)
- 구체적인 현상을 설명하고, 내가 원하는 것을 정확하게 설명해야 합니다.
4. 디자인도 GPT로 될까?
결론 : 아직은 안 됩니다.
- 이미지 생성은 시간이 너무 오래 걸리고
- 말귀를 잘 못 알아듣고
- 원하는 스타일로 수정하는 것도 매우 어렵습니다.
제가 부족한 것일 수도 있지만, 결국 피그마에서 직접 만들었습니다. (성질이 급해서) 디자인 툴도 여러 개가 있는 것 같던데, 나중에는 여러 툴을 비교하는 글도 작성해보겠습니다. 아직은 디자이너나 PM이 대충 손으로 만드는 게 훨씬 빠르지만 코딩처럼 디자인도 원하는대로 해주는 날이 오겠죠.
5. 배포는 어떻게 하지?
배포는 Vercel로 하면 정말 간단합니다. (Codepen은 그냥 링크를 남들에게 알려주기만 하면 되고, 배포 개념은 아닙니다.)
우여곡절 끝에 만든 골프 미니 게임 링크를 팀 내에 공유했는데, 생각보다 반응이 좋았습니다.
그런데 실제 앱에서 출시하려면 생각보다 많은 기능이 필요합니다.
1. 내가 공유하기를 누르면 링크를 생성해야 하고,
2. 누가 내 링크를 클릭했는지 로그를 쌓아야 합니다.
3. 친구가 내 링크를 클릭하면 하트를 3개 충전시켜 줘야 하고,
4. 하트 충전 및 소진 후, 다시 게임으로 되돌아왔을 때 기존 하트 수를 유지해줘야 합니다.
5. 5단계 통과 시 원하는 할인 쿠폰을 자동으로 발급해 줘야 합니다.
그래서 백엔드 개발자가 테이블과 API를 만들어주셨고, 프론트엔드 개발자와 협업했습니다.
특이한 점은, 기술 명세서 등의 문서 대신 제가 만든 HTML/CSS/JS 코드와 User Flow 이미지를 공유했다는 것입니다. PM/PO가 개발자와 협업하는 방식에도 큰 변화가 생길 수 있겠다는 생각이 들었습니다.
6. 느낀 점 : 기획 바뀔 때 코드 수정하기 정말 귀찮구나
위의 느낀 점을 스프린트 회고에서 공유했더니 개발자들이 박수를 치더라는.. ㅎ;; 그들의 고통을 심장으로 이해했습니다. 그렇지만 동시에 기획/디자인이 처음부터 완벽할 수는 없다는 것도 다시 한번 느꼈습니다. 결국 사이좋게 서로에 대한 신뢰를 바탕으로 협업하는 게 답이라는 뻔한 결론으로 합의 완료.
두 번째로 느낀점은, 앞으로는 디자인의 중요성이 점점 더 커질 것이라는 점입니다. 같은 내용도 어떻게 표현하냐에 따라서 천차만별로 달라지고, 기술력이 상향평준화되면서 디자인, 사용성, 브랜딩이 생사를 가르는 순간이 올 것 같습니다. 너무 뻔하지만 언급하지 않을 수 없습니다.
7. 이제는 나 혼자 사이드 프로젝트 도전
간단한게 만들어보고 싶은 서비스가 있었는데, 이번 프로젝트 덕분에 사이드 프로젝트를 혼자 시작할 자신감이 생겼습니다. 다음 글에서는 Supabase를 이용해 백엔드까지 붙여본 경험을 공유해보겠습니다.
머릿속으로 나만의 서비스를 상상만 하던 비개발자 여러분, 뭐든 시작해보시길 바랍니다.
아무것도 하지 않으면 아무 일도 일어나지 않습니다.
'직딩 > AI' 카테고리의 다른 글
| 2025년 6월, openai를 떠나며 (6) | 2025.07.19 |
|---|---|
| AI로 코딩하기 전 반드시 알아야할 웹 기본 개념 – HTML, CSS, JavaScript, React, Next.js 이해하기 (10) | 2025.05.06 |
