먼저 캔바 사이트에 회원 가입한다.(추후에 교사 인증을 받으면 프리미엄 버전을 계속 사용할 수 있다.)
바이브 코딩을 할 수 있는 인공지능 종류는 많다. 특별히 캔바를 소개 하는 이유는 캔바는 바이브코딩으로 만든 프로그램을 손쉽게 웹사이트에 공개해서 학생들이 참여할 수 있기 때문이다.
<바이브 코딩으로 프로그램 만들기>
아래 링크에서 타이머 프로그램을 일단 실행시켜서 사용해 보자. 이런 프로그램을 바이브 코딩을 이용해서 만들 생각이다.
https://sciencelove1.my.canva.site/timer
1. 캔바에 로그인 하고 Canva AI 를 선택하고 – 코드생성을 누른다.
2. 직접 입력해도 되지만, 아래쪽에 예시로 제공된 간단한 카운트 다운 타이머를 만들어 보자.
- 간단한 카운트 다운 타이머를 누르면 입력창에 아래 프롬프트가 자동으로 써진다.
| 현대적인 디자인으로 시각적으로 돋보이는 카운트다운 타이머를 만들어 주세요. 맥동하는 애니메이션과 은은한 사운드 알림이 포함된 미니멀한 15분 명상 타이머를 예시부터 보여주세요. 대담한 타이포그래피와 파란색에서 보라색의 차분한 그라데이션 배경을 사용하세요. 시각적 스타일 선호 사항, 원하는 타이머 기능(사운드 경고, 시각 효과 등), 사용 사례(명상, 요리, 프레젠테이션)에 대해 후속 질문을 해주세요. |
- 프롬프트를 그대로 사용해도 되고, 마음에 들게 수정해도 된다. 여기에서는 그대로 사용해 보자.
- 나중에는 직접 자신만의 아이디어를 입력해서 프로그램을 만들어 보자.
3. 다음 화살표를 누르면 자동으로 아래 그림 처럼 프로그램을 만들기 시작한다.(기다리기만 하면 된다.)
4. 약간의 시간이 지나면 완성된 프로그램이 자동으로 실행 된다.
버전1 즉 처음 만든 프로그램이다. 오른쪽 미리보기 창에서 잘 작동하는지 확인해 보고, 추가 요구사항이 있으면 다시 요구하면 된다.
5. 추가 요구사항 입력하고 잠시 기다린다.
6. 그럼 요구사항에 맞춰 프로그램을 수정하고 버전2의 미리보기 창이 나타난다.
7. 마음에 들때 까지 계속 추가로 요구하면 버전이 증가 하면서 프로그램을 수정해 준다.
버전 5까지 요구해서 완성한 프로그램
<추가 요구사항 모음>
버전이 올라가는 동안 계속 요구했던 내용이다. 보는 것 처럼 요구한다고 해서 모두 제대로 만들어지는 건 아니다. 끊임 없이 대화 하면서 내가 원하는 형태가 나올때 까지 요구해야 한다.
추가 요구 사항 1------------
| 1. 시작 시간을 10초로 설정해 줘, 그리고 5분 시간 왼쪽에 +10초 버튼을 추가해서 누를때 마다 시간이 +10초씩 추가되게 수정해 줘 2. 반복 횟수를 1-10회 까지 선택할 수 있게 수정해 줘 - 반복을 선택하면 타이머가 끝났을 때 처음부터 다시 반복해서 자동으로 실행 되야 해 |
추가 요구 사항 2----------------
| 1. 언제든지 초기화 누르면 실행이 중단되고 처음 화면 10초로 돌아오게 해 줘 2. 타이머가 끝날때 마다 beep 소리 내 줘 3. 반복 하게 되면 타이머 끝나고 1초 기다렸다가 자동으로 다시 시작하게 수정해 줘 |
추가 요구사항 3
| 타이머를 반복 할 때 1번 끝나고 나면 잠시대기가 나오고 일시정지로 바뀌고 있어. 일시정질 바뀌지 말고 계속 버튼을 누른 것처럼 자동으로 다시 타이머가 반복되게 해 줘 |
<저장해 두기> - 따로 저장하는 기능이 없다. 링크를 즐겨찾기 해서 보관하자
1. <중요> 마음에 드는 프로그램이 만들어 지면 링크 주소를 복사해서 보관해 둔다. 그럼 다음에 들어와서 추가로 작업할 수 있다. 즐겨찾기 해 두면 된다.
그렇지 않으면 다음에 만들고 있던 프로그램에 다시 접근할 수 없다.(다른 방법이 있는지는 모르겠다)
<완성된 프로그램 웹에 게시하고 학생들 접속해서 사용하게 하기>
완성된 프로그램은 웹으로 출판해서 링크주소를 만들고, 학생들에게 보내서 접속해서 활용하게 하면 된다.
1. 디자인에 적용 – 웹사이트를 선택하고
2. 웹사이트 게시를 누르고 사이트 주소를 입력한다.
- 이때 사이트 주소는 자신만의 고유주소라고 생각하면 좋다. 한번 입력하면 수정할 수 없다. 신중하게 고민해서 입력하기 바란다. 이후로 만드는 모든 프로그램 앞에 이곳에 입력한 사이트주소가 먼저 나오고 뒷 부분만 바뀐다. (본인 이름이나, 도메인 명 등 본인의 개성이 드러나는 사이트 주소를 만들어 사용하자)
- 게시를 누르면 학생들에게 제공할 수 있는 웹사이트가 나타난다.
아래 웹사이트 주소를 복사해서 학생들에게 제공하면, 내가 만든 프로그램을 학생들이 들어와서 실행해 보게 할 수 있다. 끝.
https://sciencelove1.my.canva.site/timer
현대적인 미니멀 15분 명상 타이머 디자인 요청
sciencelove1.my.canva.site
같은 방법으로 원하는 프로그램을 바이브 코딩을 이용해서 잘 설명해서 만들어 사용하면 된다.
이후에 만들어지는 웹사이트 링크 주소는 자신에게 맞게 수정해서 사용하면 된다.
<아래는 캔바AI 로 만들어 본 다양한 프로그램들이다. >
1. 열평형 가상실험 (20번 정도 추가 요구로 만들었다)
https://sciencelove.my.canva.site/dagqu9yu1hm
2.명언 타자 프로그램
https://sciencelove.my.canva.site/dagqvlbu2t0
3. 인공지능이 만들어 준 반응 속도 측정 프로그램
https://sciencelove.my.canva.site/reflextest1
<여담>
그동안 고생하셨습니다?(폭삭 속았수다?)
(웃을까 울을까 망설여지네요...)
1. 토요일(2025.06.14) 신과수 모임에서 바이브 코딩을 함께 하는 시간이 있었다.
캔바 AI 를 이용해서 간단한 과학 시뮬레이션 프로그램을 만들어 보았다.
꽤 수준이 높다.
선생님들이 결과물에 대한 만족도가 높다.
내가 보기에도 이정도면 바로 수업에 사용하기에도 손색이 없다.
2. 한 선생님이
'인공지능이 만들어 준 코드를 보고 있으니, 그동안 김정식 수석님은 인공지능 처럼 500-1000줄의 코드를 직접 쳐서 만드셨다니 정말 대단하세요. ' 라고 하시면서 마지막 한마디 '그동안 고생 많으셨습니다.'
3. 마지막 말이 계속 뇌리에 남아 있다.
그동안????
이젠 나와 같은 능력을 가진 사람들이 필요가 없어지는 구나.!!!
누구나 코딩을 할 수 있는 세상이 오는 구나.
4. 솔직히 내가 봐도 어떤 건 내가 만든 것 보다 더 잘 만들어 준다.
(그래도 아직은 조금 더 버틸 수 있을 것 같다)
내가 어설프게 만든 반응 속도 측정 프로그램과
http://sciencej.cafe24.com/html5/reflextest/reflextest.html
인공지능이 만들어 준 반응 속도 측정 프로그램을
https://sciencelove.my.canva.site/reflextest1
아침에 옆지기에게 보여 주고 냉정한 평가를 해 보라고 하니
인공지능에 1표를 준다.
사실 디테일한 부분은 내게 조금 더 낳거든. ㅠㅠ
그리고 나도 시간 들이면 디자인 잘할 수 있거든. ㅠㅠ. 인공지능 미워!!!
여러분도 한번 비교해 보기 바란다.
p.s. 세상이 변하는 시기에 나중에 보기 위해 기록으로 남겨 본다.
언젠가는 사람이 직접 코딩하는 시대가 있었다는 걸 이 글을 통해 기억해 주길...
더 무서운 건, 이제 시작이라는 점이다. 2-3년 후에는 세상이 어떻게 변할까? 우리는 무엇을 해야 할까? 창의적인 일? 그게 뭘까? 내가 만든 창의력은 곧 인공지능의 학습자료가 되고, 곧 나의 능력을 따라 오지 않을까? 잘 모르겠다.