게임 만들기
테트리스게임 만들어줘
JavaScript
복사
블록이 사라질 때 화려한 기능 추가해줘
JavaScript
복사
다음블럭 미리보기 기능 추가해줘
JavaScript
복사
바이브코딩 5단계
1단계) 아이디어 정리 (코칭 받기)
어떤 앱(목적:누가 뭘 하기 위한 앱)을 만들어줘 나를 코칭해줘.
나는 앱개발에 대해서 완전 초보니까 그 레벨에 맞춰서 설명해줘.
JavaScript
복사
내가 코딩하라고 하기전까지는 코딩하지마.
PRD를 완성하고 코딩할거야
JavaScript
복사
MBTI 앱 개발용 예시
나는 우리 구성원들의 MBTI 성향을 진단하고, 이후에 내가 팀장으로서 맞춤 케어를 할 수 있는 코칭을 해주는 앱을 만들고 싶어.
나를 코칭해줘.
- 나는 앱개발에 대해서 완전 초보니까 그 레벨에 맞춰서 설명해줘.
- 내가 코딩하라고 하기전까지는 코딩하지마. PRD를 완성하고 코딩할거야
JavaScript
복사
2단계) PRD 작성
PRD 만들어줘
JavaScript
복사
다른 대화에서 PRD를 수행했다면 아래 PRD를 붙여줍니다.
목적(누가 뭘 하기 위한 앱) ~~에 대한 PRD 만들어줘
JavaScript
복사
3단계) 코딩시키기
코딩도구를 켜고 (제미나이 기준 Canvas 기능) 아래 프롬프트 입력
코딩해줘
JavaScript
복사
4단계) 수정
~~ 오류 났으니 해결해줘
JavaScript
복사
(화면 캡처) 이 부분 이상하니 해결해줘
JavaScript
복사
좋아, 다른 기능은 그대로 두고 아래 내용만 수정해줘
---
(수정 필요한 내용)
JavaScript
복사
5단계) 사용 & 배포
1.
제미나이 기능을 활용하여 공유
2.
HTML로 저장하여 자신의 브라우저에서 사용
AI가 만든 결과물 저장 & 공유하기
AI가 만들어준 대시보드나 보고서가 HTML 형태라면, 파일로 저장해서 누구에게나 공유할 수 있습니다. 코딩 지식이 전혀 필요 없습니다!
제미나이(Gemini) 캔버스에서 저장하기
1.
캔버스에서 결과물이 완성되면, 우측 상단의 공유() 버튼 클릭
) 버튼 클릭2.
"콘텐츠 복사" 선택 → HTML 코드가 클립보드에 복사됨
3.
메모장(Notepad) 열기 (Windows: 시작 → 메모장 / Mac: 텍스트 편집기)
4.
메모장에 Ctrl+V (붙여넣기)
5.
파일 → 다른 이름으로 저장 → 파일명 끝을 .html로 변경 (예: 초과근무_대시보드.html)
•
Windows 메모장: "파일 형식"을 **"모든 파일"**로 변경 후 저장
•
인코딩은 UTF-8 선택
6.
저장된 .html 파일을 더블클릭하면 브라우저에서 바로 열림!
ChatGPT 캔버스에서 저장하기
1.
캔버스 우측 상단 "Copy" 버튼 클릭
2.
이하 메모장 저장 과정은 제미나이와 동일
공유 방법
•
저장한 .html 파일을 이메일 첨부, 메신저 전송, 사내 공유 폴더 등으로 공유
•
받은 사람은 파일을 더블클릭만 하면 브라우저에서 바로 확인 가능
•
별도 프로그램 설치 불필요!
Tip: HTML 파일은 엑셀이나 PDF와 달리 인터랙티브 차트(마우스 올리면 수치 확인, 필터 변경 등)가 그대로 작동합니다. 정적인 보고서가 아닌, 살아 있는 대시보드를 공유할 수 있는 거죠!