전체 학습 커리큘럼

8주차 동안 진행될 통합 연구소 프로젝트의 세부 계획입니다.

📘 코스 소개

"AI와 함께 만드는 나만의 심리테스트" 코딩을 전혀 몰라도 괜찮습니다! 인공지능(AI) 도구를 활용하여 기획부터 디자인, 개발, 배포까지 나만의 웹 서비스를 만들어보는 4주 완성 프로젝트입니다.

🎯 학습 목표

  1. 나만의 웹앱 완성: 친구들에게 공유할 수 있는 실제 작동하는 MBTI 테스트를 만듭니다.
  2. AI 활용 능력: ChatGPT/Gemini 등 AI에게 코드를 요청하고 수정하는 방법을 배웁니다.
  3. 웹 개발 기초: HTML, CSS, JS의 역할과 기본 구조를 이해합니다.

🗓️ 주차별 계획

1주차: 웹과 AI의 만남 (기획 & 뼈대 잡기)

  • 주제: 웹은 어떻게 돌아갈까? & 무엇을 만들까?
  • 내용:
    • 개발 환경 설정 (VS Code).
    • HTML 태그 이해하기 (뼈대 만들기).
    • AI와 함께 '나만의 MBTI 주제' 선정하고 질문/결과 데이터 만들기.
  • 결과물: index.html 뼈대, data.js 데이터 완성.

2주차: 나만의 디자인 꾸미기 (스타일링)

  • 주제: 못생긴 웹사이트는 싫어요!
  • 내용:
    • CSS의 역할 이해하기 (꾸미기).
    • AI에게 "파스텔 톤 색 조합 추천해줘", "버튼 예쁘게 만들어줘" 요청하기.
    • 내 웹앱에 디자인 입히기.
  • 결과물: 예쁜 메인 화면과 질문 화면.

3주차: 숨 불어넣기 (로직 구현)

  • 주제: 클릭하면 다음으로 넘어가게 해주세요!
  • 내용:
    • JavaScript의 역할 이해하기 (시키기).
    • 조건문(If) 마스터하기.
    • AI에게 "점수 계산하는 코드 짜줘" 요청하고 적용하기.
  • 결과물: 실제로 작동하는 테스트 기능.

4주차: 세상에 보여주기 (배포 & 공유)

  • 주제: 내 작품을 친구들에게 자랑하자!
  • 내용:
    • 결과 페이지 연결하기 (Query String).
    • 카카오톡 공유하기 버튼 만들기.
    • Netlify를 이용해 내 컴퓨터 밖으로 배포하기.
  • 결과물: 공유 가능한 웹사이트 URL.

🛠️ 준비물

  • 노트북 (Windows/Mac)
  • VS Code 설치
  • 구글 크롬 브라우저
  • 생성형 AI 계정 (ChatGPT, Gemini, Claude 중 택 1)

📘 코스 소개

"AI가 내 몸을 인식한다! 포즈로 조종하는 게임 만들기"

코딩을 전혀 몰라도 괜찮습니다! 구글의 티처블머신(Teachable Machine)으로 내 포즈를 학습시키고, 그 포즈로 조종하는 3D 비행기 게임을 만들어보는 4주 완성 프로젝트입니다.

🎯 학습 목표

  1. AI 포즈 인식 이해: 티처블머신으로 AI가 내 몸을 인식하는 원리를 배웁니다.
  2. 인터랙티브 웹 제작: 키보드가 아닌 내 몸으로 조종하는 웹 게임을 만듭니다.
  3. 웹 개발 기초: HTML, CSS, JavaScript로 동적인 웹을 만드는 방법을 이해합니다.
  4. 실전 게임 개발: 장애물, 점수, 충돌 감지 등 실제 게임 로직을 구현합니다.

🗓️ 주차별 계획

1주차: AI가 나를 인식한다! (티처블머신 & 포즈 학습)

  • 주제: AI는 어떻게 내 포즈를 알아볼까?
  • 내용:
    • 티처블머신 소개 및 사이트 접속.
    • 3가지 포즈 학습하기 (왼쪽 기울기 / 중앙 / 오른쪽 기울기).
    • 웹캠으로 실시간 포즈 인식 테스트.
    • HTML에 티처블머신 모델 연결하기.
  • 결과물: 내 포즈를 인식하는 웹페이지 완성.

2주차: 포즈로 움직이는 캐릭터 (기본 게임 메커니즘)

  • 주제: 포즈로 화면 속 캐릭터를 움직여보자!
  • 내용:
    • Canvas 기초 이해하기 (그림판 만들기).
    • 포즈에 따라 원(캐릭터) 좌우로 움직이기.
    • 위에서 떨어지는 장애물 피하기 미니게임 제작.
    • AI에게 "장애물 랜덤 생성 코드 만들어줘" 요청하기.
  • 결과물: 포즈로 조종하는 간단한 피하기 게임.

3주차: 3D 비행기 게임 만들기 (본격 게임 개발)

  • 주제: 하늘을 날아다니는 비행기를 내 포즈로 조종하자!
  • 내용:
    • 3D 효과 구현 (또는 2D Canvas 심화).
    • 포즈로 비행기 좌우 조종하기.
    • 구름(장애물) 생성 및 충돌 감지.
    • 점수 시스템 구현 (AI 도움받기).
    • 게임 오버 화면 만들기.
  • 결과물: 완성된 3D 비행기 게임.

4주차: 나만의 게임으로 업그레이드 (커스터마이징 & 배포)

  • 주제: 내 스타일로 꾸미고 친구들과 공유하자!
  • 내용:
    • 게임 난이도 조절 (속도, 장애물 개수).
    • 시작 화면 / 게임 오버 화면 디자인.
    • 배경 음악 & 효과음 추가 (AI에게 요청).
    • 카카오톡 공유하기 기능 추가.
    • GitHub Pages 또는 Netlify로 배포.
  • 결과물: 공유 가능한 나만의 포즈 게임 URL.

🛠️ 준비물

  • 노트북 (Windows/Mac)
    • 웹캠 필수! (내장 또는 외장)
  • VS Code 설치
  • 구글 크롬 브라우저
  • 티처블머신 계정 (구글 계정으로 로그인)
  • 생성형 AI 계정 (ChatGPT, Gemini, Claude 중 택 1)

💡 특별한 점

  • ⌨️ 키보드 대신 내 몸으로 게임을 조종합니다!
  • 🤖 AI가 나를 학습합니다 (머신러닝 체험).
  • 🎮 실제 게임 로직을 직접 만들어봅니다.
  • 🚀 친구들과 경쟁할 수 있는 웹게임 완성.

🎯 이런 학생에게 추천합니다

  • ✅ 게임 좋아하는 학생
  • ✅ AI에 관심 있는 학생
  • ✅ 몸으로 무언가 해보고 싶은 학생
  • ✅ 코딩이 처음이지만 재밌게 배우고 싶은 학생