소개
개인 과외 예약 사이트를 만들고싶었습니다. 매번 결제하고, 예약 잡고 하는 작업이 번거로워서 강의 사이트 + 자동화 과외 예약 사이트를 자동화로 만들어보기로했습니다. 제대로 각잡고 개발하려니, 계속 미루게 되어서, 그냥 구글시트와 n8n으로 백엔드를 진행하고자 시도해보았습니다.
진행 방법
클로드: 기획문서 작성
클로드코드 + 커서 : 프론드엔드, 결제 모듈
n8n: 백엔드, 메일발송 등
구글시트: 디비
한국어 앱의 스크린 샷
한국 문자 메시지의 스크린 샷
한국어 웹 사이트의 스크린 샷
머리속에 대충 있던 내용을 클로드와 대화하여, 개발할 수 있는 문서로 산출하고, 해당 내용을 클로드 코드와 커서를 통해 진행하였습니다.
한국어 웹 사이트의 홈페이지
그렇게 나온 결과물입니다. 처음에는 알록달록 예쁘게 해보고싶었으나, 제 디자인 감각 탓인지 아무리 인공지능의 도움을 받아도 촌스럽게 나와서 결국 포기하고 블랙앤화이트로 변경하였습니다.
한국 전자 상거래 웹 사이트의 스크린 샷
사이트에는 온라인강의, 자동화개발 문의 등 메뉴를 많이 넣어두었지만, 가장 먼저 개발하고싶었던 부분은 자동화 과외입니다. 여러명이 일정도 예약해야하고 수업 내용도, 진도도 모두 다르고, 횟수 계산 등 관리가 힘들었던 자동화 과외를 1:1 코칭이라는 이름으로 구성하였고, 여러회를 계속 하시는 분들이 많아 패키지 상품으로 구성해보았습니다.
화면에 한국어 텍스트가있는 모바일 앱
사이트에 로그인 기능은 따로 넣지않았고, 신청시 직접 사용자가 정보를 입력하도록 하였습니다.
결제 옵션을 보여주는 한국 모바일 앱
결제는 토스페이먼츠를 붙여서 구현하였습니다. 이 역시 토스 문서를 커서에 넣고 개발을 시켰습니다.
전화에 한국어 앱의 스크린 샷
결제를 진행하는 화면입니다. 개발모드이기때문에 실제로 금액이 빠져나가지않고 테스트 할 수 있습니다.
한국어 텍스트가있는 검은 색 화면
한국 이메일 페이지의 스크린 샷
결제가 완료되면 사이트에서는 완료 화면이 나오고, 이메일에는 토스에서 결제완료 메일이 도착합니다. 그 이후의 작업은 n8n에게 일임하기로 하였습니다.
컴퓨터 화면에서 플로우 다이어그램의 스크린 샷
구글시트에 미리 주문, 회원, 서비스, 코칭 등 테이블들을 만들어 두고 이를 이용하여 n8n에서 시도하였습니다. 첫번째 플로우는, 주문이 발생하면 웹훅으로 데이터를 받아 이를 구글시트에 등록하고, 어떤 서비스인지에 따라 데이터를 생성 합니다. 여기서는 코칭이라는 데이터를 생성하여 총 9회중에 몇회를 예약했고, 몇회가 실제로진행되었는지 등 관리하는 데이터가 생성됩니다. 이 후 메일을 발송하여, 사용자가 과외 일정 예약을 할 수 있도록 하였습니다.
Google 문서의 스프레드 시트의 예
한국어는 화면에 표시됩니다
날짜와 시간이있는 한국 달력
빨간색 화살표가있는 캘린더
Google 문서의 스프레드 시트의 예
사용자가 이메일에서 받은 링크를 통해, 원하는 과외시간을 예약을 하면, 저의 구글캘린더에 표시가 되고, 구글시트에도 자동적으로 booked 된 일정의 횟수가 증가합니다.
각 과외시간이 진행되면, 사용자에게 과외내용을 요약하여 메일발송을 하고 구글시트에 카운트하는 자동화는 이전에 미리 구현을 해두었습니다.
결과와 배운 점
풀 개발말고 n8n등 자동화툴을 빌리면 비교적 간단히 쉽게 구현할수있지않을까 싶었지만, 생각보다 귀찮았고 아마 개발로 할 것같습니다. 특히 회원관리 뿐 아니라 사이트에 다양한 기능이 생길수록 디비 테이블들도 점점 많아질거라, 이를 n8n에서 하기가 까다로울 것 입니다.
빨간색 버튼이 강조된 화면의 스크린 샷
텍스트 필드와 버튼이있는 웹 페이지의 스크린 샷
그래도 n8n에서 디비관리를 하시고자 하시는 분들은, merge 노드를 통해서 기본적인 조인등을 컴바인이라는 걸 통해서 할수있고, SQL도 사용할 수 있으니 도움이 되길바랍니다.
감사합니다.
