React 코드를 번들링해서 index.html에 합치면 GAS 웹앱에서도 칸반 보드 같은 본격적인 웹 애플리케이션을 만들 수 있다. 30분이면 충분하다.
별다른 시행착오 없이 Google Apps Script 프로젝트가 수행되는 것을 보니 생각보다 설정이 잘 된 것 같다.
웹 앱도 잘 만들어지는지 체크를 해보기로 했는데, 아이디어가 딱히 떠오르지 않았다.
이 환경설정이 잘 동작하는지 체크하는 것이 목적이라, 하고 싶은 것보다는 적당히 복잡한 웹 앱을 빠르게 만들어보고 싶었다.
유튜브 검색을 하다보니 칸반보드를 Google Apps Script로 만드는 프로젝트를 찾았다.
언제 이것을 분석해서 만드나? 이럴 땐 이런 꼼수를 쓴다.
유튜브 URL 을 복사해서 Gemini 에게 이 영상을 보고 PRD를 만들어 달라고 요청한다.
Gemini가 영상을 분석해서 PRD를 만들어줬다.
PRD 만들기
setup.sh 로 프로젝트를 만들고, 이번에는 Claude Code 로 진행을 해봤다.
Claude Code 에 PRD 를 그대로 복사해서 그대로 진행해달라고 했다.
Claude Code는 우선 백엔드 API 와 시트를 먼저 구성하고, 그 다음 프론트엔드 화면을 만드는 절차로 진행을 했다.
우선 백엔드 API 구성은 한 번에 성공!
프론트엔드는 구현은 한 번에 성공했지만, 이번에 알게된 사실 있다.
React 코드가 번들링 되어 하나의 html 파일 안에 들어가기만 하면, 일반적인 React 웹사이트에서 할 수 있는 모든 기능을 구현할 수 있다
번들링은 몰라도 되지만, 결국은 React로 만든 결과물이 index.html 에 합쳐지는 개념으로 편하게 이해했다. 바이브 코딩이 잘 되는지 체크해보려고 했는데, 새로운 사실을 알아버렸다.
물론 모든 과정이 순탄하지는 않았다.
배포 실패가 문법 오류로 인해서 2번 있었는데, 배포 오류도 우리가 설치한 gh CLI를 활용해서 코딩 에이전트가 알아서 확인할 수 있도록 CLAUDE.md 파일에 내용을 추가했다.
그리고 커밋하고 원격저장소로 푸시를 하면, 자동으로 Google Apps Script 프로젝트로 배포가 되어야 하는데, 코딩 에이전트가 계속 강제로 clasp push 를 시도하는 것을 발견! 이것도 CLAUDE.md 파일에 추가했다.
그리고 마지막으로 웹앱은 소스를 업데이트 하는 것 외에도 앱 배포라는 절차가 하나가 더 있다. 이것도 해결해줘~ 라고 했더니, 알아서 deploy.yml 파일을 업데이트 해줬다.
이번에 업데이트한 내용을 앞서 만든 템플릿 프로젝트에 업데이틀 하면 사용자들은 위의 오류를 겪지 않을 확률(?)이 높아진다.
이런식으로 완성도를 높여간다. 알림 기능까지 확장하고 싶다면 카카오톡으로 알림 보내기를 참고하고, 비슷한 난이도의 다른 프로젝트가 궁금하면 나만의 로또 추천기 만들기도 재밌다.
결과는 다음과 같이 나왔다. 등록도 되고, 이동도 드래그 앤 드랍으로 잘 동작한다.
타스크를 등록하면 시트에 잘 등록도 된다. 한 30분 정도 걸린 것 같다.
아래에 결과물을 공유한다. 위의 유튜브 링크의 설명란에도 유사한 결과가 있다. 같이 봐도 괜찮을 것 같다.
복사하면 본인의 구글 드라이브로 복사가 되고 권한을 부여하면 위의 결과를 확인할 수 있을 것이다.
재밌네~
불러오는 중...