소개
챗GPT강사 정옥선입니다. 현재 LLM과 다양한 AI툴을 활용한 강의를 하고 있습니다.
비개발자로 요즘 자동화에 관심이 생겨 '나만의 웹사이트 만들기' 스터디를 청강하게 되었습니다.
제가 운영하는 협회의 홈페이지를 제작하고 싶었지만, 생각보다 복잡하고 진행이 어려워 일단 재미있는 것 부터 하나 만들어보자라고 생각하여 게임을 하나 만들어 보았습니다.
스터디장님이 알려주신 내용을 다 숙지는 못했지만 Antigravity를 처음 사용해보면서 놀라웠던 점, 아무것도 모르는 입문자가 만든 게임 만드는 방법을 공유 해 봅니다.
Antigravity 설치 후 게임만들기
배포를 위해 Antigravity로 Vercel 연결
Google AI Studio로 AI 음성 만들기
Suno AI로 음악 만들어 싸이트에 연결
만든 게임 [리듬게임]
https://deployclean-tau.vercel.app/
진행 방법
Antigravity 설치 후 게임 만들기
(1) 처음엔 머리속에 있는 내용을 글로 적고 만들어달라고 했어요.
Tip) 안티그래비티가 영어로 답하면 '앞으로 한국어로 답해줘' 라고 입력하면 한국어로 답변을 줍니다.
(2) 만들어진 결과물을 보면서 테스트를 하고 지속적으로 수정해달라고 텍스트를 적거나 캡처한 이미지를 넣었어요.
게임에서 제공하는 단어 외 내가 넣은 이미지와 단어를 이용한 리듬게임을 할 수 있는 커스텀마이징을 할 수 있게 시도 해 보았어요. 구글에서 바로 이미지를 클릭하면 바로 업로드를 하고 싶었지만, 거기까진 안되더라구요. 그래서 구글 접속까지 넣고, 이미지를 직접업로드하고 단어를 입력하는 식으로 추가했어요.
효과음을 넣어 달라고 요청도 햇어요.
배포를 위해 Antigravity로 Vercel 연결
안티그래비티로 vercel 배포 전 아래 링크로 들어가서 vercel 가입을 먼저 해야 합니다.
Google AI Studio로 AI 음성 만들어 싸이트에 연결
구글 AI 스튜디오로 들어가면 [Home] 아래 하단에 text to audio가 있어요.
Single-speaker audio를 눌러 쓰리,투,원,고!를 입력 후 [Run]을 클릭하면 바로 음성이 만들어집니다. 저는 자체 생성한 html 음성이 마음에 안들어 팥,빵,밤,밥 음성도 만들었어요.
음성이 만들어지면 다운로드 한 후 구글창에 '음악 자르기' 검색하시면 무료 싸이트가 나와요.
팥,빵,밤,밥 음성을 각각 잘라 4개의 mp3파일을 만들었어요.
(참고로, 구글AI스튜디오 오디오 기능은 최근까지 무료였었는데 지금은 API를 연결해야 음성을 생성할 수 있습니다. )
음악 자르는 싸이트는 아래 사용했어요. 로그인 없이 이용가능해요.
만든 음성을 폴더 안에 넣어줍니다.
Suno AI로 음악 만들어 싸이트에 연결
노래는 하루 5번 무료 생성 후 다운로드 가능한 Suno ai를 이용했어요.
가사는 챗GPT에게 단어리듬게임을 만드는데 배경음악에 맞는 가사를 라임을 맞춰 반복적인 가사를 만들어달라고 했어요.
수노에 [Create] - [Custom] 탭에서 [가사]와 [스타일]을 입력 후 주황색버튼 [Create]를 눌러주면 2곡이 생성됩니다.
마음에 드는 곳에 마우스를 드롭하면 메뉴(점3개)를 클릭 후 다운로드 해주세요.
저는 곡 중에 제가 사용하고 싶은 부분만 잘라서 폴더에 넣어줬어요.
이제 음성과 음악을 만들었기에 안티그래비티에게 폴더안에 있는 배경음악과 음성을 게임에 넣어달라고 요청했어요.
추가로 BGM 오프버튼, 음량조절버튼도 만들어달라고 요청했어요.
이후, 계속 오류가 나던 부분을 수정하거나 추가로 요청해서 완성했습니다!!
만든 게임 [리듬게임]
결과와 배운 점
처음 만든 결과물이기에 갈길이 아직 멀지만, 비개발자도 바이브코딩으로 앱을 개발할 수 있다는 자신감을 얻게 되었습니다.
커서나 클로드코드도 해 보고 싶었지만, 처음에 벽을 느끼게 되어 흥미가 바로 떨어져버리더라구요.
하지만 이번 수업으로 인해 제가 도전해보고 싶었던 부분을 바로 알게되고 결과물을 이렇게 낼 수 있다는 사실에 너무 놀랍고 재미있습니다!
앞으로 웹싸이트도 도전하여 스터디 마치기 전에 결과물을 만들어보고 싶습니다.
참고 사항
같은 파일에 수정을 반복하다보니 처음에 만들었던 상태로 돌아가버렸어요.
즉, 모두 삭제가 되어 ㅠㅠ 초기에 요청했던 상태에 수정요청사항을 넣었더라구요.
10시간 넘게 씨름했던게 사라져 물거품이 되어 너무 속상했습니다.
하지만!! 지금까지 추가했던 사항들을 디테일하게 챗GPT에게 작성한 후 앱을 만들수 있도록 프롬프트를 기획해달라고 했어요!
챗GPT가 설계한 프롬프트를 이용하여 다시 만들었더니!! 제가 만들던 게임과 가깝게 되더라구요^^
배운점!!
아래처럼 만들면서 중간 중간 폴더를 새로 생성해서 만들기를 요청하시면 됩니다.
안티그래비티에게 '앞으로 heaven_stair_step2 폴더를 새로 생성해서 거기에 넣어줘.'라고 말만하면 폴더가 짠! 하고 생기더라구요~
이후 다른 게임을 만들면서 폴더를 추가로 계속 생성하면서 했더니 마음이 놓였습니다!!!
도움 받은 글 및 마무리
20기 나만의 웹써비스 만들기 스터디장 '기획자민지'님의 도움으로 만들 수 있었습니다. 추가 알려주신 내용도 숙지하여 서버도 연결해보고 싶습니다.
