바이브코딩으로 만드는 나만의 게임과 학습 도구
4차시 / 전체 6차시
사용자 중심 학습 도구 개발하기
오늘부터 내가 진짜로 쓸 도구
4사용자 중심 학습 도구 개발하기
오늘의 흐름 · 45분
00~05분게임에서 도구로
05~12분무엇을 만들까
12~36분내 도구 만들기
36~45분올리고 주소 확인
시간은 안내일 뿐입니다. 막히는 사람이 많으면 실습 시간을 늘립니다.
4사용자 중심 학습 도구 개발하기
게임에서 도구로
이번엔 내가 쓸 것
만들고 끝나는 게 아니라, 오늘부터 실제로 씁니다.
4사용자 중심 학습 도구 개발하기
무엇을 만들까
⏱️
공부 타이머25분 공부 5분 휴식, 횟수 세기직접 정해도 됩니다. 내가 진짜 쓸 것이면 뭐든 좋습니다.
4사용자 중심 학습 도구 개발하기
도구에 꼭 들어갈 것
- 입력하고 추가하는 자리
- 목록으로 쌓이는 화면
- 끝낸 것을 표시하거나 지우는 기능
- 비어 있을 때 보여 줄 안내 문구
- localStorage 저장 — 3차시에 배운 그것
4사용자 중심 학습 도구 개발하기
도구를 뜯어보면
워크벤치에서 미리보기를 눌러 직접 만져 볼 수 있습니다.
4사용자 중심 학습 도구 개발하기
이제 직접
24분, 내 도구 만들기
화면이 예쁜 것보다 내가 쓸 만한가가 중요합니다.
4사용자 중심 학습 도구 개발하기
오늘 끝나기 전에
- 코드를 받아 todo.html처럼 영문으로 이름을 붙인다
- 이름·연락처·학교 이름이 들어 있지 않은지 확인한다
- 내 저장소에 업로드하고 Commit한다
- 내 주소 / todo.html로 열어 본다
올려 두어야 다음 시간에 여기에 로그인을 붙일 수 있습니다.
4사용자 중심 학습 도구 개발하기
내 저장소에 쌓이는 것
차시가 지날수록 내 주소 아래 파일이 하나씩 늘어납니다.
4사용자 중심 학습 도구 개발하기
다음 시간
어디서나 열리게 만들기
내 데이터베이스를 직접 만들어 연결합니다.