바이브코딩으로 만드는 나만의 게임과 학습 도구
1차시 / 전체 6차시
개발 환경 구축하고 첫 페이지 배포하기
오늘 끝나면 내 주소가 생긴다
1개발 환경 구축하고 첫 페이지 배포하기
오늘의 흐름 · 45분
00~07분바이브코딩과 오늘의 목표
07~22분계정과 내 저장소 만들기
22~36분캔버스로 첫 페이지
36~45분올리고 내 주소 확인
시간은 안내일 뿐입니다. 막히는 사람이 많으면 실습 시간을 늘립니다.
1개발 환경 구축하고 첫 페이지 배포하기
코딩을 몰라도 만들 수 있을까
있습니다.
만들고 싶은 것을 말로 설명하면 AI가 코드를 써 줍니다.
이런 방식을 바이브코딩이라고 합니다.
1개발 환경 구축하고 첫 페이지 배포하기
바이브코딩이란
내가 할 일은 설명하는 것과 확인하는 것. 코드를 쓰는 일은 AI가 합니다.
1개발 환경 구축하고 첫 페이지 배포하기
오늘 끝나면
인터넷에 내 주소가 생깁니다
누구에게나 보낼 수 있는 주소 하나.
오늘은 그 주소를 만들고, 첫 페이지를 올립니다.
1개발 환경 구축하고 첫 페이지 배포하기
오늘 하는 일
- 깃허브에 내 계정을 만든다
- 내 작품을 모아 둘 저장소를 하나 만든다
- 그 저장소를 인터넷에 공개하도록 켠다
- 캔버스로 만든 페이지를 올려서 주소로 열어 본다
앞의 세 가지는 오늘 한 번만 합니다. 다음 시간부터는 올리기만 하면 됩니다.
1개발 환경 구축하고 첫 페이지 배포하기
오늘 만들 구조
이 세 가지가 오늘의 결과물입니다. 다음 시간부터는 파일을 올리기만 하면 됩니다.
1개발 환경 구축하고 첫 페이지 배포하기
깃허브 계정 만들기
github.com에 접속해 Sign up을 누릅니다. 영재원에서 받은 계정 주소로 가입합니다.
1개발 환경 구축하고 첫 페이지 배포하기
계정을 만들 때
1
아이디영문 소문자로 짧게 — 이게 주소가 됩니다아이디는 나중에 바꾸기 번거롭습니다. 실명 대신 영문 별명으로 정하세요.
1개발 환경 구축하고 첫 페이지 배포하기
저장소 만들기
오른쪽 위 + → New repository. 이름은 my-web처럼 영문으로, Public을 고르고 Create를 누릅니다.
1개발 환경 구축하고 첫 페이지 배포하기
인터넷에 공개하기
저장소의 Settings → 왼쪽 Pages → Branch를 main으로 바꾸고 Save. 1~2분 뒤 주소가 나타납니다.
github.com — Settings → Pages
1개발 환경 구축하고 첫 페이지 배포하기
주소 읽는 법
앞은 내 계정, 가운데는 내 저장소, 뒤는 내 파일. 이 세 가지가 주소를 만듭니다.
1개발 환경 구축하고 첫 페이지 배포하기
이제 직접
14분, 내 소개 페이지 만들기
워크벤치의 1차시 프롬프트를 그대로 넣어 보고,
그다음 내 이야기로 바꿔 보세요.
1개발 환경 구축하고 첫 페이지 배포하기
올리는 네 단계
2
이름 바꾸기첫 페이지는 반드시 index.html3
업로드저장소 → Add file → Upload filesindex.html이라는 이름이어야 주소를 눌렀을 때 바로 열립니다.
1개발 환경 구축하고 첫 페이지 배포하기
AI를 쓸 때의 약속
- 이름, 연락처, 주소, 학교 이름은 적지 않는다
- AI가 준 답이 틀릴 때가 있다 — 직접 눌러서 확인한다
- 올린 것은 누구나 볼 수 있다 — 누군가를 놀리는 내용은 만들지 않는다
- AI가 만들었어도 그 결과에 대한 책임은 올린 사람에게 있다
1개발 환경 구축하고 첫 페이지 배포하기
다음 시간
내 게임 만들기
만들고 싶은 게임을 하나 생각해 오세요.
