소개
앞서 만든 사례를 업그레이드 시켜 다른 사용자도 이용이 가능하도록 확장성에 염두를 둔 두 가지 종류의 랜덤 추첨기 웹앱을 구글 앱스 스크립트(Apps Script)로 만들어 보았습니다.
기존에 명단이 정리된 구글 시트를 활용하는 '범용 추첨기'
추첨 명단을 입력받아 사용하는 '즉석 명단 입력 추첨기'
진행 방법
사용한 도구
Gemini (제미나이) : 구글 앱스 스크립트 코드 생성에 활용
Google Sheets : 학생명단 기재
Google Apps Script: 생성된 코드를 붙여넣어 스프레드시트와 연동되는 기능을 구현
Google Sites: 완성된 스크립트를 웹앱으로 배포하고, 수업 중 바로 사용할 수 있도록 사이트에 게시
첫번째 - 범용추첨기
이 추첨기는 이미 명단이 작성된 구글 시트만 있다면 어디서든 활용할 수 있는 범용성을 목표로 했습니다.
워크플로우:
명단이 등록되어 있는 구글시트 ID 확인
제미나이에서 코드 생성하기 ( 앞선 사례에서 사용한 채팅에 이어서)
위 내용 그대로 할건데 앱스스크립트 따로, 구글시트 따로 하고싶어. 구글시트 아이디를 받아오는 방식으로 할거야. 코드 구성해독립실행형 앱스스크립트 프로젝트
앱스스크립트 대시보드에서 범용추첨기 앱스스크립트 생성 후 코드 입력 , 웹앱 배포
검은 색 화면에서 한국어의 스크린 샷
>> 실행
한국어 텍스트가있는 페이지
구글시트 ID,음원 ID 를 입력해야지만 작동하므로 예시 ID 를 구글사이트 도구에 적어둠.
🎁결과 1 - 범용추첨기
두번째. 즉석 명단 입력 추첨기
이 추첨기는 두 개의 앱스 스크립트로 구성됩니다. 첫 번째는 명단 입력을 위한 웹페이지, 두 번째는 추첨을 진행하는 웹페이지입니다.
실패없는 성공!! 워크플로우:
앱스스크립트 대시보드에서 명단입력 역할 하는 1번 앱스스크립트 생성.
제미나이로 코드제작 후 웹앱 배포
(웹페이지에서 추첨 명단 입력 받기, 한꺼번에 대량으로 입력받아서 특정 구글시트에 명단 저장하기)
해당링크 구글사이트에 게시
한국어 텍스트가있는 페이지
게시된 첫 번째 웹앱 페이지에서 사용자가 직접 추첨 대상 명단을 입력.
데이터 저장: 입력된 명단은 지정된 구글 시트에 자동으로 저장.
추첨 진행하는 2번 앱스스크립트 코드제작
( 특정 구글시트 아이디를 받아와서 랜덤추첨기 코드 제작 )
웹앱 배포
해당링크 구글사이트에 게시
추첨 진행: 두 번째 웹앱 페이지에서 '추첨 시작' 버튼을 누르면, 구글 시트에 저장된 명단을 불러와 랜덤으로 추첨.
구글사이트도구에서
두 페이지 간 원활한 이동을 위해 [다음단계로 이동], [명단 다시 입력하기]
버튼 추가하여 페이지 간 연결하기
🎁 결과2 - 즉석명단입력 랜덤뽑기
https://sites.google.com/view/hodudu0713/명단입력
배운 점과 나만의 꿀팁을 알려주세요.
앱스스크립트 작동 방식이 두가지가 있는것을 알게되었어요 ( 아래는 제미나이 답변)
네, 궁금해하시는 두 가지 방식을 구분하는 공식적인 용어가 있습니다.
바로 '바운드 스크립트(Bound Script)'와 '스탠드어론 스크립트(Standalone Script)'입니다.
검은 색 화면에서 한국어의 스크린 샷
이번 랜덤뽑기 2종은 독립적인 스크립트 프로젝트라 다른 사용자도 사용하기가 좋을것 같다는것.
바이브 코딩의 무한한 가능성과 한계를 체험하는 재밌는 시간이었습니다.
디자인 일부만 수정하고 싶은데 제미나이로 완벽하게 바꾸는 것이 더 오래걸리더라구요
CSS 직접 수정하는것이 훨씬 빠를수도 있다는거..
코딩을 몰라도 되지만 알면 더더 좋더라..
시행착오
두번째 즉석입력랜덤추첨기 코딩시 엄청난(?) 실패를 반복하였습니다.. 20트라이째 배포를 멈추고 앱스스크립트를 두개로 나눠서 입력페이지, 룰렛페이지 2개의 웹페이지로 나눠서 만들었습니다.
처음 계획했을 때 당연히 2개의 웹페이지로 나눠서 하려고 했으나, 혹시? 혹시나? 호옥시나 하는 생각에 끝까지 진행해봤는데 안되더라구요.. 룰렛 구현 접근방식에서의 문제였던것 같았어요 ㅠ
이를 통해 배운 점은 정말 아니다 싶으면 빠르게 방향전환을 하자 입니다 🤣 🤣
