Gemini Canvas 바이브코딩
쉬운 앱에서 데이터 대시보드까지

0️⃣ 학습목표

1️⃣ 오늘의 흐름

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

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

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

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

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

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

3️⃣ Step 1 — 문장 생성기

완성 예시 열기

1차: 칭찬 생성기 만들기

Gemini Canvas에서 실행할 수 있는 간단한 웹앱을 만들어줘.
HTML, CSS, JavaScript만 사용해서 하나의 파일로 만들어줘.

[목표]
이름과 오늘 한 일을 입력하면 칭찬 문장을 만들어주는 앱을 만들고 싶어.

[화면]
- 제목: 칭찬 생성기
- 입력칸: 이름
- 입력칸: 오늘 한 일
- 선택: 말투 (따뜻하게 / 유쾌하게 / 자신감 있게)
- 버튼: 문장 만들기
- 결과 영역: 큰 카드 형태로 문장 표시

[동작]
- 버튼을 누르면 입력값을 바탕으로 칭찬 문장을 만들어줘.
- 말투 선택에 따라 문장 분위기가 달라지게 해줘.
- 입력값이 비어 있으면 안내 문구를 보여줘.

[완료 기준]
Preview에서 이름과 오늘 한 일을 입력하고 버튼을 누르면 결과 카드가 바뀌면 완료야.

2차: 문장 목적 바꾸기

지금 만든 앱 구조는 유지하고,
문장 종류를 선택할 수 있게 개선해줘.

[추가할 선택 메뉴]
문장 종류:
- 칭찬
- 쓴소리
- 응원
- 위로
- 보고용 문장

[동작]
- 칭찬은 따뜻하고 구체적으로 작성해줘.
- 쓴소리는 무례하지 않게, 인정할 점과 개선할 점을 함께 알려줘.
- 응원은 짧고 힘이 나게 작성해줘.
- 위로는 부드럽고 부담스럽지 않게 작성해줘.
- 보고용 문장은 직장에서 바로 쓸 수 있게 정중하고 간결하게 작성해줘.

[화면 개선]
- 선택한 문장 종류에 따라 결과 카드 색상을 다르게 해줘.
- 결과 카드 위에 현재 선택한 종류를 작은 태그로 보여줘.
- 버튼 이름은 "문장 만들기"로 유지해줘.

[완료 기준]
Preview에서 문장 종류를 바꾸면 같은 입력값이어도 결과 문장 분위기가 달라지면 완료야.

3차: 실제로 쓰기 편하게 개선하기

현재 문장 생성기를 실제로 쓰기 편하게 개선해줘.

[추가할 기능]
- 결과 문장 복사 버튼
- 같은 입력값으로 다른 표현 만들기 버튼
- 결과 문장을 3개 후보로 보여주기
- 가장 마음에 드는 문장을 선택하면 강조 표시

[유지할 조건]
- 화면은 복잡하지 않게 유지해줘.
- 결과 문장은 너무 길지 않게 해줘.
- 쓴소리는 비난처럼 들리지 않게 해줘.

[완료 기준]
Preview에서 문장 3개가 나오고, 복사 버튼과 다른 표현 만들기 버튼이 작동하면 완료야.

4️⃣ Step 2 — 2D 게임

완성 예시 열기

1차: 움직이는 게임 만들기

Gemini Canvas에서 실행할 수 있는 2D 미니 게임을 만들어줘.
HTML, CSS, JavaScript만 사용해서 하나의 파일로 만들어줘.

[목표]
처음 보는 사람도 바로 이해할 수 있는 간단한 2D 피하기 게임을 만들고 싶어.

[게임 화면]
- 플레이어는 파란색 캐릭터
- 장애물은 빨간색 블록
- 배경은 밝고 단순하게
- 위쪽에 점수판 표시

[조작]
- 키보드 방향키 또는 화면 버튼으로 좌우 이동
- 장애물을 피하면 점수가 올라감
- 장애물에 닿으면 게임 오버
- 게임 오버 후 재시작 버튼 표시

[완료 기준]
Preview에서 캐릭터를 움직일 수 있고, 장애물에 닿으면 게임 오버가 나오면 완료야.

2차: 게임 규칙 바꾸기

지금 만든 게임 구조는 유지하고,
게임 모드를 선택할 수 있게 개선해줘.

[추가할 게임 모드]
- 피하기 모드: 장애물을 피하면 점수가 올라감
- 별 모으기 모드: 노란 별을 먹으면 점수가 올라감
- 시간 제한 모드: 30초 동안 최대한 높은 점수를 얻음

[동작]
- 게임 시작 전에 모드를 선택하게 해줘.
- 선택한 모드에 따라 점수 규칙이 달라지게 해줘.
- 현재 모드를 화면 위쪽에 표시해줘.

[완료 기준]
Preview에서 게임 모드를 바꾸면 플레이 방식과 점수 규칙이 달라지면 완료야.

3차: 재미와 완성도 높이기

현재 2D 게임을 더 완성도 있게 개선해줘.

[추가할 기능]
- 점수가 올라갈수록 속도가 조금씩 빨라지기
- 최고 점수 저장
- 게임 오버 화면에 최종 점수와 최고 점수 표시
- 재시작 버튼 크게 표시
- 캐릭터가 아이템을 먹거나 충돌할 때 짧은 시각 효과

[유지할 조건]
- 조작은 어렵지 않게 유지해줘.
- 화면 요소가 겹치지 않게 해줘.
- 모바일에서도 버튼으로 플레이할 수 있게 해줘.

[완료 기준]
Preview에서 점수, 최고 점수, 게임 오버, 재시작 흐름이 자연스럽게 작동하면 완료야.

5️⃣ Step 3 — 통계 CSV 대시보드

완성 예시 열기

1차: CSV 업로드 대시보드 만들기

Gemini Canvas에서 실행할 수 있는 데이터 대시보드 웹앱을 만들어줘.
HTML, CSS, JavaScript만 사용해서 하나의 파일로 만들어줘.
서버나 API 연결 없이 Preview에서 바로 확인할 수 있어야 해.

[목표]
통계청에서 직접 다운로드한 CSV 파일을 업로드하면 표와 차트로 보여주는 대시보드를 만들고 싶어.

[데이터]
사용자는 통계청 사이트에서 CSV 파일을 직접 다운로드한 뒤 이 앱에 업로드한다.
앱은 CSV 파일을 읽어서 화면에 보여준다.

[화면]
- 제목: 통계 CSV 대시보드
- CSV 파일 업로드 영역
- 데이터 표 영역
- 요약 카드: 행 개수, 컬럼 개수
- 차트 영역

[동작]
- CSV 파일을 업로드하면 내용을 표로 보여줘.
- 숫자 컬럼을 자동으로 찾아 차트 선택에 사용할 수 있게 해줘.
- 사용자가 X축 컬럼과 Y축 컬럼을 선택하면 차트를 보여줘.

[완료 기준]
Preview에서 CSV 파일을 업로드하면 표가 나타나고, 컬럼을 선택해 차트가 그려지면 완료야.

2차: 보는 방식 바꾸기

지금 만든 CSV 대시보드 구조는 유지하고,
데이터를 보는 방식을 선택할 수 있게 개선해줘.

[추가할 보기 방식]
- 표 보기
- 요약 보기
- 차트 보기

[동작]
- 표 보기는 CSV 데이터를 표로 보여줘.
- 요약 보기는 행 개수, 컬럼 개수, 숫자 컬럼의 합계/평균/최대값을 카드로 보여줘.
- 차트 보기는 X축과 Y축 컬럼을 선택해 막대 차트 또는 선 차트를 보여줘.

[화면 개선]
- 업로드한 파일 이름을 표시해줘.
- 데이터가 없을 때는 통계청 CSV 다운로드 후 업로드하라는 안내를 보여줘.
- 숫자 컬럼만 Y축 선택에 나오게 해줘.

[완료 기준]
Preview에서 보기 방식을 바꾸면 같은 CSV 데이터가 표, 요약, 차트로 다르게 보이면 완료야.

3차: 실무형 대시보드로 개선하기

현재 CSV 대시보드를 실무에서 보기 편하게 개선해줘.

[추가할 기능]
- 검색어로 표 필터링
- 특정 컬럼 값으로 필터링
- 표는 처음에 앞 20행만 보여주기
- 전체 행 개수와 현재 표시 중인 행 개수 보여주기
- 차트 아래에 현재 선택한 X축과 Y축을 문장으로 설명하기

[유지할 조건]
- API 연결은 하지 마.
- 사용자가 직접 다운로드한 CSV 파일만 사용해.
- 복잡한 통계 분석보다 바로 이해할 수 있는 화면을 우선해.
- 업무용 대시보드처럼 깔끔하게 만들어줘.

[완료 기준]
Preview에서 CSV 업로드 후 검색, 필터, 요약 카드, 차트가 한 화면 흐름으로 자연스럽게 작동하면 완료야.

6️⃣ 막혔을 때 다시 요청하는 법