Gemini CLI와 GitHub MCP를 활용해 4x4 카드 매칭 웹게임 GitHub Pages에 게시하기

❇️ 소개

시도하고자 했던 것과 그 이유를 알려주세요.

Gemini CLI를 이용해 만든 4x4 카드 매칭 웹게임(html)을 다른 사람들과 공유하고 싶었습니다.
내 PC에서는 잘 구동되지만, 다른 PC에서 실행하려면 html 파일과 이미지 폴더까지 함께 전달해야 하는 번거로움이 있었습니다.
이 문제를 해결하기 위해 GitHub Pages를 통해 누구나 접근 가능한 웹사이트 형태로 게시해 보고자 했습니다.

❇️ 진행 방법

어떤 도구를 사용했고, 어떻게 활용하셨나요?

1. Gemini CLI 설치

Gemini CLI는 에듀테크 두 스터디장님이 운영하는 카카오톡 Gemini 방에서 몇 달전에 올라온 채팅을 보고 Gemini CLI 를 설치하였습니다.

• Node.js 설치 확인 및 버전확인 (버전 18이상, 권장 20이상)

Node.js 버전 확인
node -v

(버전이 20 미만이거나 설치되어 있지 않다면 Node.js 공식 웹사이트에서 LTS 버전을 다운로드하여 설치 필요)

• PowerShell에 Gemini CLI 설치 명령어 입력

  사본

  npm install -g @google/gemini-cli

• 실행 및 초기 설정

  사본

  gemini

  조금 오래 전에 설치해서 초기 설정은 잘 기억이 안남. 😮‍💨😮‍💨😮‍💨

  👉 Gemini CLI 실행화면

  

  👉 설치 후 간단한 프롬프트로 웹게임과 웹페이지를 내 로컬PC에서 Gemini를 무료로 이용할 수 있어서 좋았습니다.

  • 활용 프롬프트 예시:

  

  ALT

  한국어 프로그램의 스크린 샷

  • Gemini CLI가 처음 만들어준 테트리스 실행 화면

  

  ALT

  테트리스 게임 - 스크린 샷

• 이후로 간단한 웹페이지와 수업에서 사용할 웹게임 등을 만들었는데 내 컴퓨터에서는 잘 구동이 되지만 다른 PC에서 구동이 되려면 html 파일 자체를 공유해야 하는 번거로움과 이미지 파일들이 있을 경우는 이미지 파일 폴더까지 공유해야 제대로 작동이 되는 번거로움이 있어서 이때부터 깃허브 사이트 페이지에 게시하고 싶다는 생각을 했던 것 같습니다

2. GitHub와 연결하기 시도

• 사용하다 보니 PowerShell보다 VScode 터미널에서 Gemini CLI를 실행하는 것이 편리했습니다.

• 초반에는 GitHub MCP가 없어 VScode에서 직접 GitHub repository에 push 했습니다.

  [ VScode 실행 화면 ]
  

  

3. MCP 실험 (Notion MCP)

• 지피터스 16기 모각에서 했던 Claud 데스크탑에 Notion MCP 연결했던 것을 바탕으로 Gemini CLI에 Notion MCP 연결 시

• settings.json 파일을 작성해 Notion MCP 연결 성공
  

  

  [Gemini CLI Notion MCP 연결 화면 ]

  

  • 그러나 이후에는 활용하지 못했습니다. 😥😥😥

4. GitHub MCP 연결

• 9월 10일 에듀테크 스터디 후토크에서 테크권님이 알려주신 Smithery.ai에서 Gemini CLI GitHub MCP를 Auto 설치
  

  

  ALT

  git 서버의 터미널 명령 스크린 샷

• 처음에는 CLI에 잘못 명령어를 입력해 실패 → PowerShell에서 다시 입력 후 성공

5. GitHub Repository에 파일 push

• GitHub MCP를 연결은 했지만 GitHub에 인증 토큰에 저장소를 생성할 수 있는 권한이 없다며 나보고 직접 만들라고 함. ㅠ.ㅜ

ALT

한국어 화면의 스크린 샷

• GitHub Personal Access Token 생성 필요
  

  • [링크] https://github.com/settings/tokens/new
    

  • repo 권한만 체크 후 Generate
    

    [토큰 생성 방법]

    

• 하지만 계속적으로 인증문제로 포기하려다가 VScode에서 Gemini CLI 실행.

• VScode에 GitHub가 이미 연결되어 있었기에 인증 문제 없이 push 가능

• 최종적으로 Gemini CLI + GitHub MCP 조합으로 카드 매칭 게임 파일을 repository에 업로드 성공
  

  

  [ 4x4 카드 매칭 웹게임 GitHub 사이트 페이지에 게시]

  게임 실행 : 👉 GitHub 웹페이 링크

ALT

컴퓨터 화면에서 메모리 게임의 스크린 샷

• [VScode_Gemini CLI_GitHub MCP 활용 화면]

ALT

컴퓨터에서 코드 편집기의 스크린 샷

❇️ 결과와 배운 점

💬 배운 점과 나만의 꿀팁

• 인증 문제 해결이 핵심 → GitHub Personal Access Token 필수

• VScode 환경에서 Gemini CLI를 실행하면 GitHub MCP 인증 문제가 훨씬 줄어듦

• 시행착오를 거치며 “실패도 기록이 된다”는 교훈을 얻음

😅 시행착오

• 처음에는 파일이 repository에 올라가지 않아 한참 헤맸습니다.

• CLI와 PowerShell, VScode 환경 차이 때문에 혼동이 많았습니다.

🗓️ 앞으로의 계획

• GitHub Pages에 게시한 다른 Gemini CLI 산출물들도 정리해 공개할 예정

• MCP 활용법을 정리해 에듀테크 스터디원들과 공유하고 싶습니다.
  
  

❇️ 도움 받은 글 (옵션)

• 윤스케어&도로시J의 재미나게 Gemini(GPTers) 카카오 톡방

• 지피터스 스터디 후토크 (테크권님 GitHub MCP 연결 팁)

• Gemini 공식 문서: Gemini CLI GitHub MCP

• ChatGPT를 통한 설치 & 에러 해결 Q&A