소개
지난주까지 진행했던 수강생 AI 결과물을 큐레이션하는 웹사이트(https://devmusicvideo.vercel.app/)에 payapp 을 붙여보려고 합니다.
진행 방법
지난주까지 진행했던 수강생 AI 결과물을 큐레이션하는 웹사이트(https://devmusicvideo.vercel.app/)에 payapp 을 붙여보려고 합니다.
먼저 제미나이에게 아래처럼 물어보고 흐름을 파악했어요.
그리고 이제 antigravity 로 갑니다. IDE에 조금 익숙해져서 새 대화창을 열고 작업을 진행합니다. 현재 올라가있는 구매링크는 교보문고 링크이므로 이걸 제가 제작한 PDF 전자책 미리보기로 변경을 해야 해요.
PDF 는 heyzine으로 이전에 작업해둔 미리보기 링크(https://heyzine.com/flip-book/899de4c6cf.html)를 기존 canva 공개보기 링크 대신 넣을 수 있도록 작업을 해야 합니다.
이 작업을 위해 Antigravity 에게 요청해요.
이미 supabase의 DB 연동이 되어 있으므로 아래처럼 sql 을 넣으라고 해요. supabase 역시 데이터베이스로 초기 작업을 해두었으므로 큰 무리가 없었습니다.
책의 상세페이지에서 미리보기를 누르면 heyzine 사이트가 새창으로 열려서 이 부분을 인라인으로 열리도록 다시 수정요청하고 아래처럼 수정되었습니다.
데이터베이스를 확인하니 아래와같이 resource_type을 youtube, canva, heyzine 타입으로 구분하고 해당 url 을 저장했더군요. Antigravity 많이 똑똑합니다.
안되는거 빼고 다됩니다!
여기까지 하고 버전관리가 필요하다고 생각되어 git 저장을 진행했어요. 이거 역시 Antigravity 안티그래비티에게 해달라고 합니다. 터미널을 열어서 git 커맨드를 실행하라고 하는데요, 안티그래비티에서 직접 실행할 수 없냐고 물으니 Git Windows 버전을 설치하고 이걸 Antigravity 에 연결해주면 되더라고요. 또 터미널 역시 이 안에서 창을 열어 실행할 수 있습니다.
이제 결제를 붙여보자!
결제는 payapp.kr 을 붙여봅니다.context 맥락 유지를 위해 antigravity 에서 새 대화창을 열어서 진행합니다.
pdf 파일을 어디엔가 저장해야 하는데, 구글 드라이브를 활용해야 할지 다른 방법이 있는지 다른 브라우저에서 Gemini 제미나이에게 물어봅니다.
구글 드라이브는 전문적이지 않으니 비추천하고, supabase 에 Storage 를 쓸 수 있다고 하네요. 와우!!
이제 안티그래비티에게 다 해달라고 해요.
진행 중 pdf 파일네임이 한글이라 에러가 나서, 이것도 물어보고 해결합니다.
그리고 payapp 도 붙여달라고 하는데요, 연결했다고 하는데 테스트 페이지로 연결해줘서 물어보니 payapp 에서 결제링크를 붙여야 한대요.
이것도 다 알려달라고 해요.
드디어 결제 버튼이 나오고 다양한 결제방법으로 결제할 수 있는 창도 뜹니다.
그리고 정말로 결제가 됩니다!!
그리고 테스트로 결제를 해봅니다. 참고로 payapp은 1,000원부터 결제 가능해서 기본으로 1,000원으로 해두고 결제했는데요, pdf 다운로드 링크가 안보여서 여러번 수정했어요.
아래처럼 테스트도 저한테 시켜요.
이후 pdf 다운로드까지 사용자 흐름을 팝업으로 유도하라고 했지만 잘 되지 않더라고요. 그래서 다시 gemini 제미나이에게 가서 물어봅니다.
Antigravity 는 supabase 에서 public bucket 으로 하라고 했지만 제미나이는 Private bucket 으로 변경하라고 합니다.
자 이제 결제완료되면 버튼이 바뀐다는 안내 팝업이 뜨고, 아래처럼 버튼이 변경되었어요.
PDF 다운로드를 누르니 아직 뭔가 문제가 있는거 같은데요, 추가 수정해보겠습니다.
이 사이트는 https://devmusicvideo.vercel.app/ 에서 확인하실 수 있습니다. 아직은 베타버전이지만 계속 업그레이드 해보려고요.
결과와 배운 점
배운 점과 나만의 꿀팁을 알려주세요.
기본 흐름과 도구는 파악하고 있는게 훨씬 작업이 빠르고, 효율적이다. 몰랐다면 supabase private bucket 을 몰랐을거 같아요.
모르면 AI 에게 물어봐라. 도구 사용법이나 기초 질문은 IDE 가 아닌 다른 창에서 물어보면 더 효과적이다.
supabase storage 를 사용할 수 있고, payapp 은 1000원부터 결제된다. 전 벌써 3천원 썼네요.
supabase 에서 storage 는 1GB까지 된다고 합니다.
과정 중에 어떤 시행착오를 겪었나요?
supabase storage에 파일은 영문으로 띄어쓰기가 없어야 한다.
로그인 없이 결제하는 것, 무언가를 다운로드 받는 결제는 설계를 좀 더 신경써야겠습니다.
아래 블로그에서도 확인하실 수 있습니다.
