소개
이번 오프라인 스터디에서 에듀테크 스터디장님께 배운 내용으로 학생 발표자 선정이나 조 편성을 보다 공정하고 재미있게 하기 위해, 시각적 룰렛 효과가 있는 ‘랜덤 추첨기’ 웹앱을 만들어보았습니다.
랜덤추첨 / 발표자 순서 정하기 / 그룹나누기 기능구현
진행 방법
어떤 도구를 사용했고, 어떻게 활용하셨나요?
Claude: 구글 앱스 스크립트 코드 생성에 활용했습니다.
Google Apps Script: 생성된 코드를 붙여넣어 스프레드시트와 연동되는 기능을 구현했습니다.
Google Sites: 완성된 스크립트를 웹앱으로 배포하고, 수업 중 바로 사용할 수 있도록 사이트에 게시했습니다.
사용한 프롬프트 (Claude에 입력한 내용):
내 구글 시트는 이거야. https://docs.google.com/spreadsheets/d/1AxSGH6vC7n6Yz-6KGpo3-Rh1NF3pXm5xtNHxAlwr-3A/edit?gid=0#gid=0
구글시트에 있는 명단을 가지고 랜덤 추첨기를 만들려고 해. 구글 앱스스크립트를 사용해서 웹앱으로 추첨기를 만들고 싶은데 코드를 만들어줘 리액트 기능으로 디자인 UI/Ux 적으로 심미적으로 이쁘게 디자인해줘입력된 전체 학생수를 n 조로 나눠달라거나 n명씩 나눠달라고 할 때 가능하게 기능을 추가해줘
발표자 선택을 위해 버튼을 누르면 학생 목록에서 무작위로 한 명을 선택 * 애니메이션 효과로 룰렛처럼 돌아가다가 멈추는 시각적 요소 추가 * 해줘.
발표자순서정하기 기능추가
여기에 기능을 추가하고 싶어. 단추형 메뉴 이름은 발표순서 정하기 이고, 기능은 랜덤추첨 처럼 룰렛이 돌아가는것도 동일하게 표현해. 다면 몇명을 뽑을 지 정할 수 있도록 해줘. 선택된 수 만큼의 인원을 랜덤으로 뽑아줘.최종 결과 화면
https://sites.google.com/view/hodudu0713/%ED%99%88
- 구글 사이트에 게시한 페이지
파이 차트가있는 한국 웹 사이트 스크린 샷
결과와 배운 점
배운 점과 나만의 꿀팁을 알려주세요.
Claude나 ChatGPT를 활용하면 복잡한 Google Apps Script도 빠르게 설계할 수 있었습니다.
구글 사이트에 웹앱을 게시하면 학생들과 즉시 공유 가능한 수업 도구가 완성됩니다.
시행착오
윤스케어님과 스터디 시간에 완성해봤음에도 혼자 다시 하려니 기억이 안나서 애먹었습니다 ㅠㅠ
메모 / 반복은 필수 이다!!
프롬프트 작성시 사용할 구글시트 링크를 아예 넣고 시작하는것이 코드 수정을 줄일 수 있어서 좋았습니다.
앞으로의 계획
다양한 유형의 추첨 방법을 좀더 추가하고 싶습니다.
사운드도 넣어보고 싶어요..
도움받은 글
에듀테크 오프라인 스터디 자료 내용
