0️⃣ 학습목표

<aside> 🚩

오늘의 목표는 코딩 문법을 외우는 것이 아니라, Gemini Canvas에서 작게 만들고 Preview를 보며 단계별로 고치는 흐름을 경험하는 것입니다.

</aside>

  1. Gemini Canvas에서 간단한 앱을 만들고 Preview로 확인한다.
  2. 결과를 보고 단계별로 수정 요청하는 방법을 익힌다.
  3. 같은 앱 구조를 다른 목적의 앱으로 바꾸는 감각을 익힌다.

1️⃣ 오늘의 흐름

<aside> 💡

처음부터 완성본을 요구하지 않고, 작게 만든 뒤 결과를 보며 고칩니다.

</aside>

Step 실습 핵심 경험 개선 방향
Step 1 문장 생성기 입력, 선택, 버튼, 결과 카드 칭찬에서 쓴소리, 응원, 위로, 보고용 문장으로 확장
Step 2 2D 게임 조작, 점수, 충돌, 재시작 게임 모드와 점수 규칙 변경
Step 3 통계 CSV 대시보드 CSV 업로드, 표, 요약, 차트 표 보기, 요약 보기, 차트 보기, 검색과 필터 추가

오늘은 API 연결, 이미지 생성, 실시간 데이터 호출을 하지 않습니다. Gemini Canvas 안에서 바로 확인 가능한 웹앱만 만듭니다.

2️⃣ 바이브코딩 기본 공식

<aside> 📖

좋은 요청은 목표, 화면, 동작, 스타일, 완료 기준을 함께 말합니다.

</aside>

기본 구조

[목표]
무엇을 만들고 싶은지 한 문장으로 말한다.

[화면]
화면에 보여야 할 입력창, 버튼, 결과 영역을 적는다.

[동작]
사용자가 누르거나 선택했을 때 무엇이 바뀌는지 적는다.

[스타일]
색감, 분위기, 레이아웃을 말한다.

[완료 기준]
Preview에서 어떤 상태가 되면 성공인지 적는다.

수정 요청의 기준

아쉬운 요청 더 좋은 요청
더 좋게 만들어줘 결과 카드를 더 크게 만들고, 선택한 종류에 따라 색이 바뀌게 해줘
이상해요 CSV를 업로드했는데 표는 보이지만 차트 선택 메뉴가 비어 있어
다시 만들어줘 현재 구조는 유지하고 점수 규칙만 시간 제한 방식으로 바꿔줘

3️⃣ Step 1 — 문장 생성기

<aside> ✍️

💻 실습: 1 — 칭찬 생성기로 시작해서, 같은 입력 구조를 여러 목적의 문장 생성기로 단계별 개선합니다.

</aside>