안녕하세요. 스마트요원입니다.
지난 [AI활용] AI로 앱만들기, 정말 10분 만에 가능할까? 전직 개발자의 제작 후기 및 꿀팁 포스팅에 이어서 이번에도 AI로 앱을 만들어보았습니다.
SNS에서 개인이 만든 굿즈나 물품을 판매하는 걸 자주 보는데요. 보통은 구글 폼으로 주문 받으시더라구요. 사용해보신 분들은 아시겠지만 구글 폼에서 구매할 상품 선택과 갯수 선택은 가능하지만 얼마를 입금해야하는지는 구매자가 직접 계산해야해서 좀 불편합니다.
저도 구글 폼을 이용해 무언가 구매한 적이 있는데요. 제가 계산한 금액이 틀릴까봐 여러번 검토하고 계산했던 기억이 있습니다.
구글 설문지로 통신 판매할 때 불편 한 점:
구매자가 상품 선택 후 입금할 금액을 직접 계산해야한다는 점
이 불편한 점을 해결하기 위해 상품과 갯수를 선택하면 자동으로 총 입금액을 계산해주는 기능이 있으면 좋겠다는 생각을 했고, Claude를 이용하여 구글 스프레드시트 기반의 미니 마켓 웹앱을 만들어봤습니다.
💠목차
미니 마켓 미리보기
✅ 미니 마켓 웹앱
(링크 클릭하시면 실제 미니 마켓 웹앱을 확인하실 수 있습니다.)
AI에게 부탁한 주요 요청사항들:
- 구글 스프레드시트에서 상품 정보 가져와서 보여주기
- Amazon처럼 깔끔한 디자인으로 만들기
- 모바일에서도 잘 보이게 반응형으로 만들기
- 재고 관리 기능 넣기, 팔리면 자동으로 차감하기
- 재고가 0이 되어 품절되면 구매 못하게 막기
- 배송받을 주소 입력 받기
- 주문하면 이메일로 확인서 보내기
아쉽게도 결제 기능은 쉽게 붙일 수 없기 때문에 결제는 무조건 입금기반으로 진행된다는 전제하에 만들었습니다. 참고로 일반적인 웹사이트나 앱에서 사용되는 결제 기능은 결제 대행회사(PG사)와 계약해야하므로 개인이 사용하기에는 어려움이 있습니다.
결제 기능은 없지만, 온라인으로 상품을 판매하는데 필요한 판매 상품 세팅, 재고 관리, 주문 정보 관리, 주문 확인서 이메일 전송 등을 제공합니다. 구글 설문지를 이용했을 때보다 판매자도 구매자도 편리하게 이용할 수 있도록 만들었습니다.
미니 마켓 웹앱 사용법
미니 마켓 웹앱을 사용하는 방법을 자세히 알려드리겠습니다.
공유 스프레드시트 사본 만들기
⭐ 공유 스프레드시트: [공유] 미니 마켓 + 웹앱
https://docs.google.com/spreadsheets/d/1S3nANBqoprweOzmg_xMhUTYL_62LriWXlkzU5xHzroE/copy
위 링크에 접속하시면 아래와 같은 화면이 표시됩니다.
위 페이지에서 [사본 만들기] 버튼을 클릭하시면 편집 가능한 스프레드시트가 열립니다.
파일 이름은 원하시는 이름으로 바꾸시면 됩니다.
예시에서는 “[예시] 미니 마켓 + 웹앱”으로 변경했습니다.
“admin”시트에 배송비, 안내 문구, 계좌번호를 설정하기
가장 왼쪽에 있는 admin 시트에는 예시 데이터가 남아있는데요.
B열의 데이터를 지우시고
- 배송비: 배송비로 설정하고 싶은 금액
- 안내 문구: 화면에 표시하고 싶은 안내 문구 (마크다운 문법으로 작성 가능)
- 입금 계좌: 입금 받으실 계좌번호
를 입력하시면 됩니다.
“상품” 시트에 판매하고 싶은 상품을 입력하기
중간에 위치한 상품 시트에는 판매할 상품의 이름, 설명, 가격, 이미지, 재고를 입력하면 됩니다.
- A열 name: 상품의 이름
- B열 desc: 상품의 설명
- C열 price: 상품의 가격
- D열 thumbnail: 상품의 이미지
- E열 stock: 상품의 재고 수량
*주의사항
D열에 이미지를 삽입할 때에는
삽입 > 이미지 > 셀 내에 이미지 삽입 메뉴를 이용하여 이미지를 넣어주시기 바랍니다.
2행에 초당옥수수 1개당 2천원에 재고 20개,
3행에 대저짭짤이토마토 1개 천원에 재고 30개로 설정한 예시 화면입니다.
참고로 가장 오른쪽의 F열 slaes과 G열 remain에는 팔린 갯수와 남은 재고의 갯수를 Apps Script가 자동으로 데이터를 갱신해줍니다.
스프레드시트 웹에 공개하기
스프레드시트에 설정한 이미지를 웹앱에서도 잘 표시하기위해서는 스프레드시트를 누구나 볼 수 있도록 공유해야 합니다.
화면 오른쪽 위에 있는 공유 버튼을 클릭합니다.
일반 액세스에 “제한됨”이라고 되어 있는 드롭다운을 열어
“링크가 있는 모든 사용자”로 변경 후 완료 버튼을 클릭합니다.
그러면 공유 버튼의 아이콘이 지구 모양으로 바뀌고
웹에 공개: 링크가 있는 인터넷상의 모든 사용자가 열 수 있는 상태가 됩니다.
“배송” 시트 분리하기
마지막에 위치한 배송 시트에는 웹앱에서 누군가 상품을 구매하면 주문 정보와 배송 정보가 기록되는 시트입니다.
조금은 번거롭지만, 이 스프레드시트는 웹에 공개되어 있으므로 배송에 필요한 주문자의 이름, 연락처 주소등의 개인 정보가 기록되는 배송 시트는 분리해주는 것이 안전합니다.
시트의 메뉴에서 (시트 이름 옆 ▼모양을 클릭)
다음으로 복사 > 새 스프레드시트 메뉴를 클릭합니다.
팝업창에서 스프레드시트 열기 링크를 클릭합니다.
그러면 새로운 창에서 새로 만들어진 스프레드시트가 열립니다.
배송 시트가 복사되어 있는 것을 확인할 수 있습니다.
파일 이름은 원하시는 이름으로 바꾸시면 됩니다.
예시에서는 “[예시] 미니 마켓 주문 및 배송 정보”으로 변경했습니다.
마지막으로 배송 시트만 있는 이 파일의 URL에서 이 파일의 ID를 메모해둡니다.
파일의 ID는 URL에서 “https://docs.google.com/spreadsheets/d/” 이후에 있는 문자열입니다.
예시 파일의 ID는 1trw로 시작해서 vYk로 끝납니다.
Apps Script에 배송 스프레드시트 파일 ID 붙여넣기
admin과 상품 시트가 있는 원래 파일로 돌아와서 배송 시트는 삭제합니다.
주의 팝업창에서 확인 버튼을 클릭하여 시트를 삭제합니다.
스프레드시트의 준비가 완료되었습니다. 이제 Apps Script로 넘어가겠습니다.
확장 프로그램 > Apps Script 메뉴를 클릭합니다.
Apps Script 화면에 Code.gs가 표시되는 것을 확인할 수 있습니다.
열려있는 code.gs 파일의 가장 위에 있는 DELIVERY_FILE_ID 라는 부분에 아까 메모해둔 배송 시트만 있는 스프레드시트의 파일 ID를 입력해주세요.
(예시 파일의 ID는 1trw로 시작해서 vYk로 끝납니다.)
// code.gs - Google Apps Script 백엔드 코드
//━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
// 📌배송 시트만 있는 스프레드시트 파일 ID를 입력해주세요
const DELIVERY_FILE_ID = "*여기에 파일 ID 입력*";
//━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
파일 아이디 입력 후 저장 버튼을 클릭하여 수정사항을 저장합니다.
Apps Script 실행 권한 부여하기
Apps Script를 실행하기 위해서는 권한 설정이 필요합니다.
권한 설정은 1회만 진행하시면 됩니다.
Apps Script화면에서 실행 버튼을 클릭합니다.
권한 검토 버튼을 클릭한 후 계정 선택 화면에서 본인의 Gmail 계정을 선택합니다.
고급 클릭 후 가장 아래에 있는 “미니마켓(으)로 이동(안전하지 않음)“을 클릭합니다.
모두 선택에 체크한 후 가장 아래에 있는 계속 버튼을 클릭합니다.
Apps Script의 실행 로그에 “실행이 완료됨”이라는 문구가 표시되는 것을 확인합니다.
앱 실행에 필요한 권한 설정이 완료되었습니다.
Apps Script에서 웹 앱으로 배포하기
앱 실행에 필요한 권한을 부여했다면 이제 웹 앱을 배포하겠습니다.
오른쪽 위에 있는 배포 > 새 배포 메뉴를 클릭합니다.
유형 선택에서 웹 앱을 선택합니다.
액세스 권한이 있는 사용자에서 모든 사용자를 선택하고 배포 버튼을 클릭합니다.
배포가 완료되면 이러 화면이 표시됩니다.
웹 앱 URL 링크를 클릭합니다.
미니 마켓 웹 앱에 접속할 수 있습니다.
초당옥수수 2개와 대저짭짤이토마토 3개를 선택 후
화면 아래의 주문하기 버튼을 클릭합니다.
주문 내역 확인 화면에서 선택한 수량과 배송비가 더해진 최종 금액, admin 시트에 입력한 계좌 번호가 표시되는 것을 확인합니다.
화면 아래쪽에 배송 정보를 입력하고 주문 확정하기 버튼을 클릭합니다.
주문을 확정하시겠냐고 물어보는 팝업창에서 확인 버튼을 클릭합니다.
조금 기다리면 주문이 완료되었다는 확인 창이 표시됩니다.
확인 버튼을 클릭합니다.
그러면 처음 화면으로 돌아옵니다.
각 상품의 재고 숫자가 방금 주문한 만큼 줄어있는 것을 확인할 수 있습니다.
배송 시트가 있는 파일을 열어보겠습니다.
배송 시트에서 주문한 상품의 갯수, 총 금액과 배송 정보가 기록된 것을 확인할 수 있습니다.
구매자는 주문할 때 입력한 이메일로 주문 확인서가 도착한 것을 확인할 수 있습니다.
이메일의 내용을 바꾸고 싶다면 Apps Script > Code.gs파일에서 이메일 본문 부분을 수정하시면 됩니다.
마무리
어떠신가요? 저는 결과물이 아주 만족스럽습니다.
구글 설문지를 판매용으로 사용할때 불편했던 점인 구매자가 입금 금액을 직접 계산해야 하는 것이 해결되었고, 추가적으로 판매에 편리한 기능들이 추가되었습니다.
- 상품 선택하면 총액 실시간 계산
- 재고 부족하면 “재고 5개 남음” 이런 식으로 알려줌
- 품절 상품은 아예 주문 못하게 막아버림
- 주문하면 주문정보가 구글 스프레드시트에 자동으로 정리됨
- 이메일로 깔끔한 주문 확인서가 날아옴
스프레드시트 파일 2개, 총 시트 3개만으로 개인 통신 판매를 편리하게 관리하고 운영할 수 있습니다. 트래픽이 엄청 많아지면 문제가 있을 수 있습니다만 개인적으로 소규모로 판매하는 분들께는 구글 설문지보다 훨씬 편하실 거라 생각됩니다.
AI로 직접 만들어보고 싶은 분들을 위해 미니 마켓 웹앱 제작 가이드도 함께 첨부합니다.
미니 마켓 스프레드시트, AI 앱 제작 가이드 공유 링크
- 구글 스프레드시트 링크: [공유] 미니 마켓 + 웹앱
- AI로 만든 웹앱 링크: 미니 마켓 웹앱
- 미니 웹앱 AI 제작 가이드 (Claude)
미니 마켓 사용해보시고 궁금한 점이나 추가되면 편리할 것 같은 기능이 있다면 댓글로 남겨주세요!
스마트요원의 실용구글 
댓글 남기기