(2024.4.11. 게임 업그레이드 추가)
안녕하세요! 10기 AtoZ캠프 김이언입니다.
API 라는 신세계를 만난 후, 챗봇 외에 어떻게 이용할 수 있을지 찾아보다가 간단한 게임 페이지를 만들어보았습니다. 같은 그림 카드 2장을 맞추는 메모리 카드 게임을 만들기 위해 포켓몬 API를 이용했습니다.
목표
API를 활용한다.
Claude Opus로 HTML, CSS와 JavaScript 코딩을 한다.
포켓몬 메모리 카드 게임 페이지를 제작한다.
웹에 배포하여 실제로 사용한다.
개요
게임 구상하기
포켓몬 API 이용하기
포켓몬 메모리 게임의 웹 페이지 코드 제작하기
게임 방식과 디자인 수정하기
포켓몬 메모리 게임 배포하기
피드백을 반영하여 게임 업그레이드하기
1. 게임 구상하기
깜박 깜박하는 기억력 증진을 위해 ;-)
간단하고 시각적인 게임을 위해 메모리 카드 게임을 선택
Claude에게 메모리 카드 게임의 구성을 묻고 파악하기
2. 포켓몬 API 이용하기
Pokemon API는 모든 포켓몬 데이터를 무료로 접근할 수 있는 API
특정한 포켓몬 이름을 보내면, 해당 포켓몬의 정보를 응답
Claude에게 Pokemon API 사용법 질문하기
(하략)
3. 포켓몬 메모리 게임 의 웹 페이지 코드 작성하기
게임 방식을 상세하게 구상하고 정리하기
HTML과 CSS, JavaScript를 이용하여 웹 페이지 구현하도록 프롬프트를 작성하여 코딩하기
(하략)
CodePen(https://codepen.io/)에서 테스트하기
4. 게임 방식과 디자인 수정하기
웹 페이지의 형태와 동작 방식에 대해 계속 테스트하며 수정하기
ChatGPT Dall-e 3로 게임 로고를 제작하기
제작한 로고를 웹 페이지에 넣기 위해, Adobe Express(https://www.adobe.com/kr/express/) 또는 Photoshop 등을 이용해 배경을 제거하고 불필요한 부분을 자른 후, logo.png로 저장하기
5. 포켓몬 메모리 게임 배포하기
내 컴퓨터에 pokemon이라는 새 폴더를 만들기
메모장 등의 에디터를 이용해 HTML, CSS, JavaScript 코드를 각각 index.html, style.css, script.js로 pokemon 폴더에 저장, 로고 이미지 logo.png도 함께 저장하기
클라우드 서버인 netlify(https://www.netlify.com/)를 이용하기
계정 홈 - Sites - Add New Site - Import an existing project 에서 pokemon 폴더를 업로드
Site Configuration에서 사이트 이름을 변경하기
변경된 이름으로 나오는 url에 서 게임을 확인하기
6. 피드백을 반영하여 게임 업그레이드하기
게임을 사용하신 분들의 피드백을 받고, 프롬프트로 정리하기
Claude를 이용하여 수정 및 개선하기
업그레이드한 게임 URL(https://pokemon-memory-card-game-3.netlify.app/)
게임 페이지를 로드하면 전체 카드를 순차적으로 보여주고 다시 뒤집기
Start 버튼을 클릭하면 게임 시작하기
게임이 종료된 후 Retry 버튼을 클릭하면 다시 위와 같이 작동하기
카드에 다양한 포켓몬 이미지가 나타나게 하기
카드를 뒤집거나 원래대로 돌아오는 속도를 2배로 높이기
화면에 로고 이미지와 카드들만 보일 때 세로로 중앙보다 위쪽에 배치하여, 카드 하단에 결과 메시지(You Win 등)와 버튼들이 나와도 위치가 변경되지 않게 하기
정리
API의 의미를 알면 AI로 코딩할 수 있으므로 다양한 활용이 가능하겠습니다.
이전에 ChatGPT 4로 웹 페이지를 제작한 경험과 비교하였을 때, Claude Opus는 프롬프트를 더 잘 이해하고 오류가 적은 코드를 제공하였습니다.
카드를 넘길 때 효과음을 넣는 등 동적인 효과를 더하고, 결과를 저장하여 순위를 보여주는 등으로 확장할 수 있을 것입니다.
나에게 필요한 앱을 직접 제작하는 데에 흥미를 느끼게 되었습니다. 다음엔 실용적인 앱에 도전해보고 싶습니다아~
피드백 주신 선생님들 감사합니다. 게임 구성에 대해 깊이 생각해볼 수 있었어요! :-)
#10기AiAtoZ