본문 바로가기
스마트러닝/스마트러닝

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

by 민서아빠(과학사랑) 2026. 6. 2.

바이브 코딩으로 만든 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 전용

sciencelove.com 에서 만든 교수 학습용 프로그램의 링크 주소를 짧게 줄이고 QR코드를 만들 수 있다.http://edgo.kredgo.kr (education go) 교육하러 가자 라는 의미다.단, 다른 사이트 링크 주소는 사용할 수

sciencelove.com