리더보드가 있는 카드 뒤집기 게임 만들기

01 먼저 빈 폴더를 커서로 연 다음, 간단한 계획을 새우며 시작해봅시다. 커서에게 Sequential Thinking Tools를 활용하여 개발 계획을 세워보라고 합니다.

가장 간단한 웹 기술로 카드 뒤집기 게임을 만들 거야. Sequential Thinking으로 잘 생각해서 개발 계획을 세워봐. 데이터베이스는 Supabase를 사용할 생각이야.

 

02 이후 작업은 커서의 안내를 따라 설계부터 프로토타입 작성까지 진행하면 됩니다. 여기서는 커서에게 구현까지 쭉 진행하라고 지시했습니다.

그래 구현 까지 쭉 진행해

 

03 중간 프로토타입 구현이 끝나면 게임을 한 번 실행해보라고 합니다. 실제로 실행했을 때 이상이 없는지 확인합니다.

 

 

04 문제가 없다면 수파베이스의 데이터베이스 구조를 설계하고 연동까지 마무리하면 됩니다. 이전에 만든 프로젝트의 데이터베이스를 재활용 하라고 하겠습니다. 조금 색다르게 수바베이스 사이트 화면 이미지를 커서에게 주고 알아서 하라고 해보겠습니다. 단 여러분의 프로젝트와 테이블의 상태가 화면을 캡처하고 그 이미지를 커서 채팅창에 붙여넣기를 한 다음 부탁하세요. @Image가 콘텍스트에 있어야 합니다.

@Image 지금 내 수파베이스 프로젝트와 테이블의 상태인데, 이걸 이용해서 연동을 시켜줘.

 

05 그러면 커서가 이미지를 분석하여 프로젝트 이름과 테이블 이름을 참고하여 여러분의 수파베이스에 접근한 다음 데이터베이스 여연동 작업을 합니다. 이제 더 이상 '프로젝트 이름이 무엇이니?', '테이블 이름이 무엇이니?'라고 텍스트를 입력할 필요가 없습니다.

 

06 결과를 보면 게임을 클리어할 때마다 유저 ID와 시도 횟수가 테이블에 저장된다고 합니다. 게임을 한 번 끝까지 진행해봅시다. 게임을 시작하면 먼저 유저 이름을 입력하라고 합니다. 입력 후 게임을 실행합니다.

 

07 게임이 끝나면 점수가 저장되었다고 합니다. 정말 점수가 저장되었는지 확인하기 위해 수파베이스로 다시 돌아갑니다. 새로고침을 해보면 테이블에 여러분의 기록이 저장된 것을 확인할 수 있습니다.

 

08 이제 남은 건 게임 화면에 리더보드를 띄우는 일입니다. 남은 개발을 계속합니다.

나머지 개발을 진행해서 리더보드까지 완성해줘.

 

결과를 보면 리더보드에 방금 저장된 여러분의 기록이 표시됩니다. 수파베이스 데이터베이스와 여러분의 앱이 잘 연동된 것입니다.

 

09 이제 한 가지 재미있는 테스트를 해보겠습니다. 수파베이스의 테이블을 에디터에서 데이터를 삭제하겠습니다. 그러면 리더보드에서도 여러분의 기럭이 사라질 것입니다. 이를 통해 데이터가 실제로 열결되어 있다는 걸 눈으로 확인할 수 있습니다.

 

10 이제 디자인을 다듬어 좀 더 괜찮은 게임처럼 보이게 만들어보겠습니다. 커서에게 다음과 같이 요청합니다.

디자인을 좀 더 게임답게 만들어. Sequential Thinking으로 생각해서 신중하게 디자인해봐. 그리고 카드를 뒤집는 애니메이션 효과도 넣어줘. 중간에 나한테 묻지 말고 끝까지 진행해.

 

데이터베이스가 완벽하게 연동되면서 디자인까지 세련되게 바뀐 카드 뒤집기 게임을 완상되었습니다.

 

11 마지막 단계는 배포입니다. 배포 역시 커서에게 어떤 도구가 적합할지 물어보고 실제 배포를 진행해보겠습니다.

완성한 프로젝트는 어디에 배포하면 좋을까?

 

12 예상대로 가장 먼저 버셀을 추천해줍니다. 

1. 깃허브에 새 저장소를 만들고 링크 복사하기

2. 커서에 링크를 알려주면서 해당 저장소에 add, commit, push를 해달라고 부탁하기

https://github.com/Jangchaeyun/cardflipping.git 여기에 add, commit, push 해줘.

 

 3. 새 저장소에 코드가 업로드된 것을 확인하고 버셀에 깃허브 이용하여 배포하기

 

13 배포가 완료되면 여러분이 배포한 사이트에 접속하여 실제로 카드 뒤집기 게임을 해볼 수 있습니다.