바이브 코딩으로 만든 html 파일 웹에 올려서 공유하는 방법

바이브 코딩으로 만든 html 파일을 활용하는 방법에는 여러가지가 있다.

1. 제일 쉬운 방법은 다운 받아서 활용하는 방법이다.

  - 그런데 이건 내 컴퓨터에서 실행할 수는 있지만, 학생들이 접근할 수는 없다.

2. 두번째 방법은 제미나이에서 만든 바이브 코딩을 아래 그림처럼 바로 공유하는 방법이다. 

https://gemini.google.com/share/7426d3568bc2

그런데 이건 제미나이 자체에서 공유되는 거라, 제미나이를 통해서 들어간다. 
가능은 하지만 뭔가 시작 화면부터 뭔가 불편하다. 

3. 웹계정을 구입해서 html 파일을 올려 배포하는 방법이 있다. 그런데 이건 돈이 든다. 

  - 필자가 사용하고 있는 방법이다. 좋은점도 있지만, 만약 사용자가 많아지면 비용이 추가로 발생할 수 있다. 

https://sciencej1.cafe24.com/html5/sci2/ion2.html

 

<구글 스크립트로 배포하는 방법> - 오늘 소개할 방법이다. 

 

구글 스크립를 통해 배포하면 웹계정이 없어도 배포할 수 있고, 제미나이를 통하지 않고도 배포할 수 있다. 

구글스프레드시트에서 Apps scripts 로 만들어 배포하면 된다.

처음에는 어렵게 느껴지지만 실제 몇번 배포해보면 상당히 편리하다. 

1. 일단 아래 구글스프레드시트를 사본 복사해 간다.

https://docs.google.com/spreadsheets/d/1K4RS-USth2nZ_tDyYey4gN71kS4mH4Nnu8oZz08HARg/edit?usp=sharing

2. 복사된 사본 메뉴에서 확장프로그램 - Apps Scripts 를 선택한다.

3. index.html 파일을 선택하고 안에 적혀 있는 코드를 모두 지운 다음 자신이 바이브코딩으로 만든 html 코드를 붙여 넣고 저장 한다. 

html 코드는 제미나이의 경우 바이브 코딩으로 만든 프로그램이 잘 작동하는지 미리보기로 확인하고 이상이 없으면

공유 - 콘텐츠 복사 를 눌러 복사 해 오면 된다.

4. 배포해서 링크 주소를 학생들에게 보내면 학생들이 링크로 접속해서 사용할 수 있다.

배포-새배포-  다음사용자로 인증은 나로 두고, 엑세스 권한이 있는 사용자는 모든 사용자로 두면 된다. 그리고 배포를 누르면 된다.

그리고 웹앱 url 을 복사해서 보내 주면 된다. 

아래는 그렇게 해서 만든 url 이다. 직접 접속해서 확인해 보기 바란다.

https://script.google.com/macros/s/AKfycbwtYGTt8GBnrteagImB5dvSTsO-2wzUmvP4kioCEPBexDZo9fk3R4NuFUEzsfmK3w-W/exec

url을 단축해서 보내 주면 좋다

http://edgo.kr/U4aw5

 

<추가 - 코드를 수정하는 경우>

index.html 파일에 수정된 코드를 붙여 넣고 저장한 다음 - 배포 - 배포 관리에 가서 - 수정을 선택하고 버전드롭박스를 열어서 새버전을 선택한 후 배포하면 된다.

그럼 링크 주소가 바뀌지 않고 새로 바뀐 프로그램이 적용되기 때문에 학생들은 원래 처음에 공유했던 링크로 접속해서 사용하면 된다. 

만약 배포-새배포를 눌러서 만들면 링크 주소가 바뀌기 때문에 링크 주소를 새로 복사해서 나눠줘야 한다.

2가지 다 장단점이 있다.

새배포를 눌러 배포하는 경우, 기존에 사용하던 바이브 코딩 주소는 그대로 살아 있어서, 이전 버전도 사용할 수 있다.

이전버전과 지금 버전이 다 필요한 경우에는 새 배포를 하는 것이 좋다.

배포관리에서 새버전을 사용하는 경우에는 기존에 사용하던 공유링크 주소가 변하지 않는다. 사소한 오타 수정이라던가, 이전 버전이 필요 없는 경우에는 배포관리를 통해 새 버전으로 배포하면 기존에 사용하던 링크주소를 바꾸지 않아도 된다. 

 

 

<추가> 필요하면 url을 단축해서 보내면 좋다.

https://sciencelove.com/483029

URL 단축 및 QR코드 만들기2.2(edgo.kr) - sciencelove.com 전용