n8n 자동화에서 출발해 로그인·결제·영상까지 구현한 EduVibe 플랫폼 구축기

좌 좌성훈2026. 3. 29.조회 1

소개

한국산업인력공단의 교육사업 시작 전에 홍보부터 훈련생 모집까지의 전 과정을 자동화하여, 실제 운영 가능성을 먼저 검증하고자 했습니다.

완벽한 시스템보다는 2일 안에 돌아가는 MVP를 만들어 실험하는 것을 목표로, n8n + Notion + Google Sheets로 핵심 워크플로우 4개를 구축했습니다. 이 자동화 시스템이 실제로 작동하는지, 교육사업이 실현 가능한지를 빠르게 검증한 후, 다음 주부터 2차, 3차에 걸쳐 고도화할 계획입니다.

"일단 만들어보고, 안 되면 빠르게 수정한다" - 이것이 이 프로젝트의 핵심 철학입니다.

진행 방법

전체 워크 플로우

AI교육 홍보콘텐츠 자동배포(n8n)
랜딩페이지 개발(google ai studio)
구글 신청폼 작성(google form)
신청 접수 자동화(n8n)
3일 후 팔로업 자동화(n8n)
일일 성과 리포트 자동 발송 자동화(n8n)

모든 자동화 기획 및 워크플로우 작성은 Claude로 진행

AI교육 홍보콘텐츠 자동배포

Claude로 워크플로우 기획 및 n8n json 생성
notion 데이터베이스 만들 때 Gemini로 구조 만들고 노션 AI 기능(/AI)을 활용하여 생성
LinkedIn은 사용하지 않아 LinkedIn 포스팅은 이후 진행 예정
카카오톡 (알림톡/친구톡), Telegram / Discord, Facebook Page, Instagram, 네이버 블로그, 티스토리, WordPress, Thread 등 연동 예정

랜딩페이지 개발(Google AI Studio Build)

Claude로 랜딩페이지 기획
Claude로 Google AI Studio Build 프롬프트 생성
Build 기능으로 랜딩페이지 구현
"무료 상당 신청하기" 버튼 클릭 시 구글 폼으로 이동
이후 Lovable로 구현해 볼 예정

구글 신청폼 작성

Claude로 Google Form 설계
Gemini로 Google Form을 자동 생성하는 Apps Script 구현
Google Form에서 Apps Script를 실행하여 교육 신청폼 자동 작성
다음단계 n8n webhook과 연결하기 위해서 Apps Script 트리거 생성

신청 접수 자동화(n8n)

Claude로 워크플로우 기획 및 n8n json 생성
"[Master DB] 생성형 AI 교육 신청자 및 운영 통합 관리" 구글 시트를 생성하기 위해 Claude로 기획 진행
Gemini에서 기획된 결과를 바탕으로 Apps Script 작성
Apps Script 실행하여 구글시트 작성
- 제목 : [Master DB] 생성형 AI 교육 신청자 및 운영 통합 관리
  - 신청자_관리
  - 성과_대시보드
  - 훈련기관_정산
  - 설정
- 팁 : 구글 시트 명은 성과/대시보드 처럼 '/'를 넣으면 코드노트에서 처리가 힘들어 지기 때문에 '/'를 '_'로 변경해서 진행하세요.

3일 후 팔로업 자동화(n8n)

Claude로 워크플로우 기획 및 n8n json 생성
코드노드가 프로그래밍이 잘못 된 것들이 있어 Gemini로 재작성 진행

일일 성과 리포트 자동 발송 자동화(n8n)

Claude로 워크플로우 기획 및 n8n json 생성

사용도구

Claude : 전체 기획 및 워크플로우 구현

Gemini : Apps Script 구현, 자동화 구축 시 질의 / 응답

Google AI Studio Build : 랜딩페이지 개발

Notion AI : 데이터베이스 자동 작성

n8n : 자동화 워크플로우 구축

결과와 배운 점

Claude와의 대화를 통해 홍보→신청→팔로업→리포트라는 전체 플로우를 단계적으로 이해할 수 있었고, 이를 바탕으로 자동화 시나리오를 설계했습니다.

놀라운 점은 Claude가 생성한 n8n 워크플로우 JSON을 그대로 복사-붙여넣기만 해도 80% 이상 작동했다는 것입니다. 각 노드의 인증 정보만 재설정하고, 복잡한 코드 노드는 Gemini와 협업하며 완성해 나갔습니다. 2일 만에 실제로 돌아가는 MVP를 만들 수 있었습니다.

소개

교육사업 홍보·모집 자동화를 시작으로 랜딩페이지를 단계적으로 고도화하고, 이후 보다 확장된 기능까지 구현할 계획이었습니다.

그러나 개발을 진행하던 중 결제가 가능한 강의 판매 사이트를 직접 구축해 보고 싶다는 생각이 들어, 해당 주제로 방향을 변경하게 되었습니다.처음에는 결제 기능 구현만을 목표로 하였으나, 예상보다 구현 과정이 수월하여 로그인 기능, 동영상 재생 기능, 관리자 페이지 구현 등 전반적인 기능 개발까지 함께 진행하게 되었습니다.

그 결과 강의 판매에 필요한 핵심 기능 전반을 직접 구현하는 경험을 할 수 있었습니다.

진행 방법

1. PRD 및 Lovable 프롬프트 작성(ChatGPT)

PRD 작성

사본

당신은 LMS(Learning Management System) 개발 전문가입니다. 첨부된 그림은 참조하세요. 저는 EduVibe를 개발하고 싶습니다. PRD를 작성해 주세요. PRD에는 프론트 엔드 중점으로 작성해 주세요.

첨부파일 : xxx교육센터

프롬프트 보다는 첨부파일을 참조하게 하는것이 더 좋은 방법입니다.

Lovable 프롬프트 작성

사본

당신은 Lovable 프롬프트 전문가입니다. Lovable 프롬프트로 다시 작성해 주세요.

2. Lovable 프롬프트 실행

EduVibe 초안 구현

사본

ChatGPT로 구현한 Lovable 프롬프트 실행

GitHub 연동
- GitHub연동을 하면 Lovable에서 프롬프트를 실행 할 때마다 Commit이 되어 소스 관리가 편한 장점이 있습니다.
일반 로그인, 구글 ID 로그인 구현

토스페이먼트 결제 구현

사본

아래 토스페이먼트 개발자센터에 있는 결제 연동하기 페이지를 확인하고 결제 기능을 구현해 주세요.

웹사이트 주소 : https://docs.tosspayments.com/guides/v2/payment-widget/integration

첨부된 결제연동 소스인 zip 파일도 참고하세요.

- 로그인이 되어 있고 "수강 신청하기" 버튼을 클릭하면 결제 페이지로 이동해야 됩니다.
- 로그인이 안되어 있으면 로그인 페이지로 이동해야 됩니다.

첨부파일은 토스페이먼트 개발자 센터에서 다운로드한 javascript-node.zip을 첨부했으나 Lovable에서 인식 못했습니다. 에러가 몇번 발생 했으나 Lovable로 티키타카 하면서 금방 해결했습니다.

그리고 zip 파일이 없어도 잘 구현되었습니다.

팁 : 결재 기능 테스트 시 꼭 publish 된 상태에서 결제 테스트를 진행하셔야 됩니다.

"수강 신청하기" 버튼 기능 향상
사본
```
if ("로그인이 됨" == 참 && "본인 수강 강의" == 거짓)
  "수강 신청하기" 버튼을 클릭하면 결제 페이지로 이동
else if ("로그인이 안됨" == 참)
  "결제 페이지 이동"

그리고 결제가 완료가 된다면 데이터베이스에 해당 강의에 결제정보가 저장되어야 되.
위에 있는 로직과 데이터베이스 테이블도 생성해줘.
```
수강 신청하기 로직을 프롬프트로 진행하려 했으나 말이 꼬여서 슈도코드로 프롬프트를 작성해 보았습니다. 확실히 컴퓨터는 슈도코드를 잘 이해한다는 것을 느낄 수 있었습니다.
그리고 위 프롬프트를 보시면 2개의 기능이 있습니다. 하나의 프롬프트로 두개의 기능이 정상적으로 구현이 되는지 보고 싶었습니다.
결과는 백엔드 데이터베이스도 구현이 잘 되었습니다.
역시 Lovable이 풀스택 엔지니어구나 라는 것을 다시 한번 느낄수 있었습니다.

3.관리자 페이지 프롬프트 작성(Gemini)

관리자 페이지 작성(zip 파일)
사본
```
나는 eduvibe 라는 LMS 사이트를 Lovable로 구현하고 있어. 첨부된 파일은 지금까지 구현한 소스 코드야. 지금부터는 관리자 페이지를 만들고 싶어. 관리자 페이지를 만들 수 있는 Lovable 프롬프트 작성해줘.
```
참조파일 : eduvibe-flow-main.zip
zip파일에 있는 파일개수가 10개 이상이라 gemini에서 인식을 하지 못했습니다. 아래는 gemini 가이드입니다.
- Gemini 앱은 대부분의 파일 형식을 지원합니다.
- 하나의 프롬프트에 최대 10개의 파일을 업로드할 수 있습니다.
- 동영상 1개의 최대 크기는 2GB, 지원되는 다른 파일 형식의 최대 크기는 100MB입니다.
- 업로드할 수 있는 총 동영상 길이는 최대 5분입니다. Google AI Pro 또는 Google AI Ultra로 업그레이드하면 최대 1시간까지 가능합니다.
- 업로드할 수 있는 총 오디오 길이는 최대 10분입니다. Google AI Pro 또는 Google AI Ultra로 업그레이드하면 최대 3시간까지 가능합니다.
- 1개의 채팅에는 코드 폴더 1개 또는 GitHub 저장소 1개를 추가할 수 있습니다(파일 최대 5,000개, 최대 100MB). GitHub 저장소 추가에 대해 자세히 알아보세요.

관리자 페이지 작성(Github 저장소 추가)
GitHub repository를 private에서 public으로 변경합니다.(Lovable은 기본 private)
GitHub repository > Settings 클릭 > 하단에 위치
Gemini GitHub repository 추가

4. 관리자페이지 구현(Lovable)

3번에서 만들어진 프롬프트 실행

사본

현재 구축 중인 LMS 'eduvibe'의 관리자 페이지(/admin)를 새롭게 만들고 싶어. 다음 요구사항을 반영해서 구현해줘:

1. 레이아웃 및 내바게이션:
- 좌측 사이드바가 있는 관리자 전용 레이아웃을 만들어줘.
- 메뉴 구성: 대시보드(통계), 회원 관리, 강좌 관리, 결제 내역 관리.
- 현재 앱의 디자인 시스템(Shadcn UI, Tailwind)과 일관성을 유지해줘.

2. 관리자 대시보드 (Dashboard):
- 상단에 주요 지표 카드를 배치해줘 (총 사용자 수, 이번 달 총 매출액, 활성 강좌 수, 신규 수강신청 건수).
- Recharts를 사용하여 최근 7일간의 일일 매출 추이를 보여주는 차트를 포함해줘.

3. 회원 관리 (User Management):
- Supabase의 'profiles' 테이블과 연동된 사용자 목록 테이블을 만들어줘.
- 사용자 검색 기능과 상태(활성/정지) 필터 기능을 포함해줘.
- 특정 사용자의 상세 정보와 수강 중인 강좌 목록을 볼 수 있는 모달이나 상세 페이지를 구현해줘.

4. 강좌 관리 (Course Management):
- 'mockData.ts'의 구조를 기반으로 한 강좌 목록 테이블을 만들어줘 (id, 제목, 강사, 가격 등).
- 새로운 강좌를 등록하거나 기존 강좌를 수정할 수 있는 폼(Form)을 구현해줘 (제목, 설명, 가격, 썸네일 이미지 업로드 포함).

5. 결제 및 수강 내역 (Enrollment Management):
- Supabase의 'enrollments' 테이블 데이터를 리스트 형태로 보여줘.
- 결제 상태(status: SUCCESS, PENDING, FAIL)별 배지(Badge)를 표시하고, 결제 금액과 결제 수단을 확인할 수 있게 해줘.

6. 접근 제어 및 라우팅:
- App.tsx에 '/admin' 경로 및 하위 경로들을 추가해줘.
- (선택 사항) 우선은 UI 구현에 집중하고, 나중에 관리자 권한(Role) 체크 로직을 추가할 수 있도록 구조를 잡아줘.

기존에 설치된 lucide-react 아이콘들과 shadcn/ui 컴포넌트들을 적극적으로 활용해서 깔끔하게 만들어줘.

5. 기타 사항

에러 부분들은 재 프롬프팅을 통해 진행을 하였다. 에러 해결은 크롬에 "개발자 도구" > "콘솔"이 매우 큰 도움이 되었습니다.

한 화면에 안나오는 경우는 전체 페이지를 캡처하기 위해 GoFullPage 크롬 인스텐션을 사용하였습니다.

Supabase 테이블 초기화

사본

delete courses;
delete enrollments;
delete lessons;
delete profiles;
commit;

Supabase 스토리지 초기화

사본

do $$
declare
  r record;
begin
  for r in select id from storage.buckets loop
    delete from storage.objects where bucket_id = r.id;
    perform storage.delete_bucket(r.id);
  end loop;
end $$;

Lovable에서 파일 올리기
이미지를 분석하여 해당 이미지의 내용에 적합한 파일명을 자동으로 추천해 줍니다.
구현을 하다면 코드가 꼬였을 때는 Revert 기능을 사용하시면 됩니다.

사용툴

Lovable
ChatGPT
Gemini

결과와 배운 점

Lovable이 스스로를 Full Stack Engineer라고 소개하고 있어 이번에 실제로 강도 높게 사용해 보았습니다. Supabase가 기본적으로 연동되어 있어 백엔드 영역, 특히 테이블 제어, 스토리지 관리, SQL 실행과 관련된 기능들이 매우 인상적이었습니다. 또한 프론트엔드 구현 측면에서도 완성도가 상당히 높다는 점을 확인할 수 있었습니다.

다만 개발 과정 중 코드 구조가 한 번 꼬이기 시작하면, 여러 차례 수정과 재시도를 하더라도 문제를 원활하게 해결하기 어려운 부분이 있었으며, 이로 인해 실제 프로덕션 단계까지 이어가기에는 다소 한계가 있을 것으로 판단되었습니다.

이에 따라 Lovable은 프로토타입 수준에서 빠르게 기능을 구현하는 용도로 활용하고, 생성된 소스 코드를 Claude Code로 분석하여 PRD를 보다 정밀하게 재정의한 뒤, 해당 PRD를 기반으로 기능 명세를 세분화하여 하나씩 구현해 나가는 방식이 가장 효율적일 것으로 생각됩니다.

댓글 0개

로그인하고 댓글을 작성하세요