안녕하세요. 스마트요원입니다.
최근에 유튜브에서 정말 흥미로운 영상을 발견해서 직접 따라 해보고 후기를 남겨보려고 합니다. 바로 “10분 만에 앱 완성” 이제 구글 시트로 다 됩니다! 완전 무료, AI 초보자도 OK! (역대급 업데이트)라는 제목의 영상인데요.
처음엔 “설마 정말 10분 만에?”라고 반신반의했지만, 영상을 보니 정말 뚝딱!하고 만들어지더라구요.
이 영상이 임팩트가 컸던 이유는 구글 시트와 AI를 활용해서 앱을 제작했다는 점입니다.
구글 스프레드시트를 메인 주제로 삼고 있고, Apps Script 콘텐츠도 업로드하고 있는 블로거로서 도전해 보지 않을 수 없었습니다. 그리고 저는 웹사이트를 만든 적이 있는 개발자 출신입니다. 정말로 코드를 한 줄도 작성하지 않고 앱 제작이 가능한지도 궁금했습니다.
제작 방법에 대해서는 첨부한 유튜브를 참고하시는 것이 더 좋을 것 같아서 제작 과정을 상세하게 적는 대신에 포스팅 마지막에 주간 계획표 웹 앱이 포함된 구글 스프레드시트와 웹앱을 만들 수 있는 AI 제작 가이드를 함께 공유해 드리겠습니다.
이번에 만들어본 웹앱은 주간 계획표입니다.
이전에 업로드한 달력 템플릿 콘텐츠인 [스프레드시트 활용] 공휴일과 기념일 표시되는 월간 연간 달력 템플릿 공유 및 사용방법 포스팅이 생각보다 인기가 있었기 때문에 주간 계획표 템플릿을 포스팅하려고 준비 중이었는데요. 템플릿이 아니라 웹 앱으로 만들어 보기로 했습니다.
💠목차
데이터를 입력할 스프레드시트 준비
가장 먼저 준비한 것은 일정 정보를 저장할 수 있는 스프레드시트입니다.
시트의 구성은 아주 심플합니다.
- A열 date : 일정의 날짜
- B열 title : 일정의 제목
- C열 content: 일정의 상세 내용
위쪽에는 올해의 공휴일과 많이 알려진 기념일 그리고 24절기를 입력해두었습니다. 아래쪽에는 인터넷에서 이번주에 해다아는 일정을 검색해서 입력해두었습니다.
AI와 함께 웹앱 만들기
그리고나서 유튜브를 보며 Claude를 이용하여 이 시트에 입력된 일정 중에 이번주 일정을 표시하는 주간 계획표 웹앱을 만들어달라고 했습니다.
다만 유튜브 영상처럼 10분만에 완성하지는 못했습니다. 함께 만든 AI에게 소요 시간을 물어보니 약 3시간 정도 걸린 것 같습니다. Cluade 유료 사용중이라 문제가 없었지만 무료 사용자라면 사용량 제한이 걸릴 수도 있을 것 같습니다.
제가 원하는 앱의 이미지, 기능이 있었는데 초반에는 원하는 모양으로 만들어주지 않았고, 시트에서 일정 데이터를 가지고 오지 못하는 오류가 발생하기도 했습니다. 오류를 수정하고, 조금씩 원하는 기능을 추가했더니 코드의 버전이 38까지 올라갔습니다.
AI에게 요청한 주간 계획표 웹앱의 주요 기능
- 주간 캘린더 뷰 – 일요일부터 토요일까지 7개 컬럼
- 실시간 구글 시트 연동 – 시트 수정 시 반영
- 내용에 마크다운 지원 – 볼드, 이탤릭, 리스트, 링크 등
- 주간 네비게이션 – 지난주/이번주/다음주 이동
- 제목의 색상 카테고리 – 시트 배경색으로 일정 구분
- 반응형 디자인 – 모바일/태블릿/데스크톱 대응
AI로 만든 웹앱: 주간 계획표
이렇게 만들어진 주간 계획표 웹앱입니다.
일반 공개해두어서 링크에 접속하시면 직접 확인할 수 있습니다.
접속 시 초반 로딩이나, 지난주, 이번주, 다음주 버튼을 클릭했을 때 새로운 날짜와 그에 해당하는 일정을 표시하는 속도가 느린 편이긴 합니다. 실시간으로 빠르게 반응해야 하는 기능이라면 어울리지 않을 수도 있습니다.
하지만 예시로 만든 주간 계획표처럼 조금 느려도 크게 상관없는 기능이라면 이렇게 웹앱으로 만들어서 사용해보는 것도 괜찮을 것 같습니다.
원하는 화면과 기능을 AI에 요청하는 것만으로 앱을 만들 수 있다는 점에 정말로 놀랐습니다.
AI로 앱만들 때 도움되는 꿀팁
코딩을 전혀 모르지만 앱 만들기에 도전하시는 분들께 AI로 앱 만드는데 도움이 되는 조언을 몇가지 알려드리겠습니다.
전직 개발자가 직접 만들어본 경험을 통해 깨달은 AI활용의 핵심은
- 구체적이고 상세한 요구사항
- 단계적으로 기능 추가하기
- 원하는 것이 나올 때까지 반복할 수 있는 인내심
- 오류가 해결되지 않을 때 불필요한 코드 삭제 요청
입니다.
이번에 만든 주간 계획표를 예시로 정리해보자면
- 명확한 목적 – “주간 계획표 웹앱을 만들고 싶다”
- 구체적인 기능 – “구글 시트 연동, 마크다운 지원, 주간 네비게이션”
- 기술 스택 명시 – “구글 Apps Script + HTML/CSS/JS”
- 디자인 요구사항 – “모던하고 반응형인 디자인”
- 데이터 구조 – “날짜, 제목, 내용 컬럼”
이런식으로 구체적으로 요청하는 것입니다.
그리고 요청 한번에 오류없이 뚝딱 만들어지지는 않았습니다. 단계적으로 기능을 추가하는 것을 추천드립니다.
제가 요청한 프롬프트에 부족한 부분이 있었던 거겠지만, 우리는 사람이기때문에(?) 한번에 완벽한 프롬프트를 입력할 수 없습니다. 어쩔 수 없이 시행착오를 겪어가면서 앱을 다듬어야 합니다.
여러가지 기능을 한번에 만들면 어디에서 문제가 발생했는지 찾기가 어렵습니다. 가장 기본이 되는 기능 구현부터 시작하고, 오류가 발생하면 수정 요청해서 고치고, 원하는 모양과 기능이 잘 만들어졌는 지 확인하고 조정한 다음에 새로운 기능을 추가하는 것이 좋습니다.
주간 계획표 앱 제작의 단계를 간략하게 정리하면 아래와 같습니다.
- 구글 시트에 있는 일정 중 이번주 일정을 표시하는 기능 제작
- 원하는 디자인 제시
- 오류가 발생하면 수정 요청
- 원하는 모양으로 표시되는지 확인 및 조정
- 일정 내용에 마크다운으로 작성하면 html로 표시하는 기능을 추가
- 오류가 발생하면 수정 요청
- 원하는 모양으로 표시되는 지, 기능하는 지 확인 및 조정
- 제목과 일정 테이블 사이에 지난주, 이번주, 다음주 버튼을 추가
- 오류가 발생하면 수정 요청
- 버튼이 잘 기능하는 지 확인 및 조정
이런 단계적 진행 방식은 실제로 개발을 할 때 진행하는 방식이기도 합니다.
이 작업에서 필요한 것은 다름 아닌 인내심입니다.ㅎ
오류가 해결될 때까지, 마음에 드는 게 나올 때까지 반복할 수 있는 인내심.
그리고 AI가 만들어준 코드에도 문제가 있을 수 있습니다. AI도 실수를 하더라구요. 오류가 계속 발생하길래 AI가 작성해준 코드를 확인해보니 수정 전 코드가 애매하게 남은 것이 원인이었습니다.
여러번 요청해도 오류가 해결되지 않을 때, 수정전 코드나 불필요한 코드를 삭제해달라고 요청해보시는 것을 추천드립니다.
마무리
이전부터 구글 스프레드시트와 Apps Script의 조합은 간단한 맞춤 프로그램을 만들기에 아주 유용한 도구라고 생각했습니다. 그래서 블로그에 Apps Script 컨텐츠를 포스팅해왔습니다. 서버를 따로 준비하거나 별도의 프로그래밍 툴도 필요없기때문에 간단한 프로그램 만들기에 최적입니다.
다만, 약간의 프로그래밍 지식이 필요했기때문에 아마도 많은 분들이 시도해볼 생각조차 안하셨을 것 같습니다. 이제는 코딩을 하나도 모르더라도 AI에게 요청하는 것만으로 앱 제작이 가능해졌습니다. 제가 알려드린 AI 활용 꿀팁을 참고하셔서 업무에 필요한 기능을 AI와 함께 만들어보시는 건 어떠실까요?
대 AI 시대에 발맞추어 앞으로 이 블로그에서도 구글 Workspace + AI 활용법들을 더 많이 다뤄보려고 합니다.
스프레드시트, AI 앱 제작 가이드 공유 링크
- 구글 스프레드시트 링크: [공유] 주간 계획표 + 웹 앱
- AI로 만든 웹앱 링크: 주간 계획표
- 구글 시트 기반 주간 계획표 웹앱 제작 가이드
주간 계획표 웹앱에 대해 궁금한 점이 있으시다면 댓글로 남겨주세요.
스마트요원의 실용구글 
댓글 남기기