생성형 인공지능이 프로그램도 만들어 준다는 이야기를 많이 들어왔다. 하지만 일반인은 접근하기가 쉽지 않다. 그리고 또 내가 만든 프로그램을 인터넷을 통해 올리고 학생들이 접속하게 하는 것도 어렵다.
그래서 누구나 따라할 수 있는 매뉴얼을 만들어 보았다.
chatGPT 이용해서 html 코드로 만들면 별다른 프로그램 없이 메모장만으로도 프로그램 만드는 것이 가능하다. 테스트 해보고, 잘 작동하면 구글사이트에 올려 보자. 그리고 학생들에게 주소를 공개하고 접속해서 사용하게 해 보자.
주의할 점은 인공지능이 만들어 준 프로그램이 무조건 잘 작동하는 건 아니다. 조금 복잡한 걸 시키면 대부분 제대로 작동하지 않는다. 따라서 약간의 코드에 대한 지식이 있으면 더 좋다. 프로그램에 대한 지식이 없다면 간단한 것을 만들어 보는 것도 좋다.
여기에서는 가장 기본이 되는 html 을 사용하지만 능력이 된다면 파이썬으로 프로그램을 만들면 더 다양한 것들을 만들어 볼 수 있다.
<빙고게임 만들기>
1.chatGPT html5 소스 작성
16칸 짜리 빙고판 만드는 프로그램 html5로 만들어 줘, 빙고판을 누르면 동그라미 표시가 되도록 해 줘.
만들어진 소스코드를 복사해서 메모장에 붙여넣고 실행시켜 봤는데 숫자가 1-16까지 일정하게 나온다. 그래서 추가로 요구를 했다.
간단한 빙고 게임소스가 완성 되었다. 만들어 준 소스 코드를 복사해서 실행시켜 보자. 실행시켜 보고 마음에 들지 않으면 계속해서 소스를 수정해 달라고 요청하고 같은 작업을 반복하면 된다.
2. 메모장에서 html파일로 저장해서 실행시키기
가. 윈도우에 기본으로 있는 메모장을 실행시킨다.
나. chatGPT에서 만들어 준 소스를 복사해서 메모장에 붙여넣기 한다.
다. 파일 – 다른이름으로 저장하기를 누르고 파일형식을 모든파일로 선택하고, 파일이름 뒤에 .html을 붙여서 저장하면 된다. ex.html 파일로 바탕화면에 저장해 보았다.
라. 실행시켜 보기
- 바탕화면에 ex.html 파일을 더블클릭 해서 실행시켜 보자. 그럼 크롬 또는 익스플러에서 실행이 된다. 제대로 실행되는지 확인하고, 이상이 있으면 chatGPT 에게 다시 요구해서 수정해 달라고 하자.
마.마음에 드는 빙고게임이 만들어 지고 실행도 잘 되면 이 html 파일을 학생들에게 직접 보내서 사용하게 할 수 있다.
3. 웹호스팅 하기
이 파일을 인터넷에 올려 학생들이 웹상에서 접속하게 하려면 호스팅 서비스를 이용 해야 한다. 이건 웹 호스팅 사이트에 따로 가입하고, 사용법을 익혀야 한다. 필요에 따라서는 요금을 지불해야 하기 때문에 전문적으로 홈페이지를 운영할 것이 아니라면 권하지 않는다.
여기에서는 구글사이트를 사용하면 무료로 간단하게 웹에 올리는 방법을 설명해 보려 한다.
4. 구글사이트를 이용하여 무료로 웹호스팅 하기
가. 아래 구글사이트에 접속하고 로그인 한다.
https://sites.google.com/
나 새사이트 시작을 눌러 사이트를 만든다.
- 제목없는 사이트가 기본으로 만들어 진다.
다. 사이트 이름과 제목을 입력한다. 필요 없으면 삭제해 버려도 된다.
여러 가지를 다른 설정도 가능하지만 여기에서는 우리가 만든 html 파일만 올려 보겠다.
라. 소스코드 삽입하기
- 제목 입력이 끝났으면 우측에 삽입-삽입을 선택한다.
- 웹에서 삽입창이 나오면 소스코드를 선택하고, ex,html 파일을 메모장에서 열어서 소스코드를 모두 복사한 다음 이곳에 붙여넣기를 한다. 그리고 다음을 누르고 삽입을 누른다.
- 그럼 만든 빙고게임이 화면에 삽입된 것을 확인할 수 있다.
마. 미리보기를 눌러 제대로 작동하는지 확인한다.
잘 작동한다면 웹에 게시하면 된다.
바. 웹에 게시하기
1) 게시를 누르고 웹주소를 입력한다. 이미 사용하고 있는 주소라면 중복되어 사용할 수 없다고 나온다. 그럼 웹주소를 바꾸면 된다.
2) 이상이 없으면 접속주소를 확인하고 게시를 누르면 된다.
3) 그리고 생성된 접속주소를 학생들에게 보내주면, 언제든지 접속해서 빙고게임을 할 수 있다.
5. 결론
chatGPT를 이용하면 간단하게 프로그램을 만들 수 있고, 구글사이트를 이용하여 웹에 올릴 수 있다.
아래는 이런 방식으로 만들어 본 빙고게임이다. chatGPT에게 추가로 요구해서 윗 부분에 직접 원하는 단어를 붙여 넣기 해서 빙고게임을 할 수 있도록 만들어 보았다. 접속해서 실행시켜 보기 바란다.
빙고사이트(직접 단어 입력 가능)
https://sites.google.com/view/kjsbingo/
빙고
페이지 업데이트 시간:
sites.google.com
같은 방법으로 과학에서 사용하는 포물선 운동도 만들어 보았다.
아직 한계가 있지만 html5 만으로도 이정도 만들 수 있다는 것이 놀랍다.
https://sites.google.com/view/kjspm/
포물선 운동
페이지 업데이트 시간:
sites.google.com
이와 같은 방법으로 원하는 프로그램을 만들어 볼 수 있다. 프로그램에 대한 기본지식이 없으면 복잡한 것은 만들기 어렵지만, 구구단과 같은 간단한 게임은 금방 만들 수 있다. 제대로 작동하지 않으면 chatGPT에게 계속 질문해 보는 것도 하나의 방법이다.
프로그램 소스를 조금 볼 수 있다면 많은 것을 할 수 있을 듯 하다.
<추가>
구구단 퀴즈 프로그램, 영어 단어 퀴즈프로그램 등등 다양한 것들을 시도해 보면 좋다.
생각한 숫자 맞추기 게임 등 아주 간단한 것 부터 도전해 보기 바란다.
