이번 부의 실습은 모두 index.html 파일 하나로 끝나요. 실습마다 vibe-class 안에 새 폴더를 만들고(todo, calc, mole, budget 처럼), 3부에서 만든 AGENTS.md 를 복사해 넣고 시작하세요.
#4-1. 실습 2 · 같은 주문, 네 도구 비교
도구마다 폴더를 따로 만들어요 (todo-claude, todo-codex, todo-antigravity, todo-cursor). 그리고 글자 하나 바꾸지 않은 똑같은 주문을 각 도구에 넣어요.
이 폴더에 index.html 하나로 된 할 일 목록 앱을 만들어 줘.
- 입력칸에 할 일을 쓰고 추가 버튼(또는 Enter)으로 목록에 넣기
- 할 일마다 완료 체크와 삭제 버튼
- 맨 아래에 "남은 일 N개" 표시
- 새로고침해도 목록이 사라지지 않게
- 휴대폰에서도 보기 좋게다 되면 아래 비교표를 채워 보세요. 비교표 내려받기 (CSV, 엑셀에서 열려요)
| 비교 항목 | 확인하는 법 |
|---|---|
| 걸린 시간 | 주문을 넣은 때부터 "다 됐어요"까지 몇 분? |
| 처음 결과 그대로 쓸 수 있었나 | 아무것도 고치지 않고 다섯 가지가 다 되나요? |
| 고쳐 달라고 한 횟수 | 다섯 가지가 다 될 때까지 몇 번 다시 말했나요? |
| 허락을 구한 횟수 | 승인 창이 몇 번 떴나요? |
| 새로고침 | 할 일 세 개를 넣고 F5. 그대로 남아 있나요? |
| 휴대폰 크기 | 브라우저 창을 아주 좁게 줄여 보세요 |
| 파일 개수 | 폴더에 index.html 하나뿐인가요? |
#4-2. 실습 3 · 생활 계산기 골라 만들기
주문 틀의 { } 를 내 상황에 맞게 바꿔요. 예시 그대로 써도 돼요.
아래 요구사항으로 index.html 하나짜리 웹 도구를 만들어 줘.
- 누가 쓰나: 모임 총무가 식당에서 휴대폰으로
- 무엇을 하나: 총액과 인원을 넣으면 1인당 금액. "술 안 마신 사람" 인원을 따로 넣으면 그 사람들은 {음료값 1만 원}을 빼고 계산
- 어떤 화면: 큰 숫자, 버튼 크게
- 완성 기준: 100원 단위로 올림, 결과를 "1인당 ○○원" 문장으로 복사하는 버튼
만들기 전에 이해한 내용을 세 줄로 먼저 요약해 줘.아래 요구사항으로 index.html 하나짜리 웹 도구를 만들어 줘.
- 누가 쓰나: 회의 진행자가 노트북 화면에 띄워 놓고
- 무엇을 하나: 안건 이름과 시간(분)을 여러 개 넣고 시작하면 안건별로 차례대로 카운트다운
- 어떤 화면: 멀리서도 보이는 아주 큰 숫자, 1분 남으면 주황색, 시간이 끝나면 빨간색
- 완성 기준: 안건이 바뀔 때 짧은 알림음 (소리 파일 없이 브라우저에서 만든 소리로)
만들기 전에 이해한 내용을 세 줄로 먼저 요약해 줘.아래 요구사항으로 index.html 하나짜리 웹 도구를 만들어 줘.
- 누가 쓰나: {영어 단어를 외우는 중학생}이 휴대폰으로
- 무엇을 하나: 카드를 누르면 뒤집혀서 뜻이 보이고, "알아요 / 몰라요" 버튼으로 분류. "몰라요" 카드만 다시 풀기
- 어떤 화면: 카드 한 장이 화면 가운데 크게, 뒤집힐 때 부드럽게 돌아가는 효과
- 완성 기준: 단어는 {apple 사과, river 강, borrow 빌리다, …} 10개를 넣어 두고, 화면에서 단어를 더 추가할 수도 있게
만들기 전에 이해한 내용을 세 줄로 먼저 요약해 줘.#4-3. 실습 4 · 그림 보여 주고 디자인 고치기
아래 그림은 이 교실에서 실습용으로 직접 만든 디자인 시안이에요. 마음껏 참고해도 돼요. 그림 내려받기
- 실습 2의
todo폴더 중 하나를 골라 통째로 복사해todo-design폴더를 만들어요 (원본은 남겨 두기) - 도구에서
todo-design폴더를 열고, 위 그림을 입력창에 끌어다 놓거나 붙여 넣어요 - 아래 주문을 함께 보내요
첨부한 그림의 분위기로 이 할 일 목록 앱의 디자인을 바꿔 줘.
- 따라 할 것: 색감(살구색·크림색), 둥근 카드, 넉넉한 여백, 둥근 + 버튼, 체크하면 줄 긋기
- 따라 하지 말 것: 그림 속 날짜·할 일 글자는 넣지 마. 기능은 지금 그대로 둬
- 장식 잎사귀 그림은 이미지 파일 없이 CSS 로 간단히 표현하거나 빼도 돼#4-4. 실습 5 · 두더지 잡기 게임
한 단계가 끝날 때마다 직접 해 보고, 잘 되면 git 저장 지점을 찍고 다음 단계로 가요.
index.html 하나로 두더지 잡기 게임의 기본판만 만들어 줘.
3×3 구멍 9개가 있고, 1초마다 두더지가 무작위 구멍 하나에 나타났다 사라져. 두더지를 누르면 사라지기만 하면 돼.
두더지는 그림 파일 없이 이모지나 CSS 로 그려 줘. 점수나 시간은 아직 넣지 마.두더지를 잡으면 1점, 화면 위에 점수를 보여 줘.
"시작" 버튼을 누르면 30초 카운트다운이 시작되고, 시간이 끝나면 "끝! ○점" 을 크게 보여 줘.두더지를 잡으면 "뿅" 하는 짧은 효과음, 게임이 끝나면 "따단" 소리를 내 줘. 소리 파일 없이 브라우저에서 만든 소리로.
잡은 두더지는 살짝 찌그러지는 효과를 넣고, 시간이 갈수록 두더지가 조금씩 빨리 나오게 해 줘.최고 점수를 기억해서 새로고침해도 남아 있게 해 줘. 최고 점수를 깨면 축하 문구를 보여 줘.
휴대폰에서 손가락으로 눌러도 잘 되게, 화면을 확대하지 않아도 구멍이 충분히 크게 해 줘.#4-5. 실습 6 · 가계부 한 장 대시보드
실습용 가짜 가계부를 내려받아 budget 폴더에 넣어요. 2026년 8~10월, 93줄짜리예요. 가계부 예시 내려받기 (budget-sample.csv)
| 날짜 | 구분 | 항목 | 금액 | 결제수단 |
|---|---|---|---|---|
| 2026-08-01 | 생활 | 관리비 | 180000 | 자동이체 |
| 2026-08-02 | 교통 | 주유 | 65600 | 신용카드 |
| … | … | … | … | … |
budget 폴더에 가계부 대시보드를 index.html 하나로 만들어 줘.
- 화면의 "파일 고르기" 버튼으로 budget-sample.csv 를 고르면 읽어 들여
- CSV 는 날짜, 구분, 항목, 금액, 결제수단, 메모 열이 있어. 구분이 "수입"인 줄은 수입, 나머지는 지출이야
- 맨 위에 가장 최근 달의 수입·지출·남은 돈을 큰 숫자 카드 세 장으로, 위쪽에서 다른 달을 고를 수도 있게
- 구분별 지출을 도넛 차트로, 월별 지출을 막대 차트로
- 아래에 지출이 큰 순서로 상위 5개 항목 표
- 금액은 "123,000원"처럼 쉼표를 넣어 보여 줘