소개
교육사업 홍보·모집 자동화를 시작으로 랜딩페이지를 단계적으로 고도화하고, 이후 보다 확장된 기능까지 구현할 계획이었습니다.
그러나 개발을 진행하던 중 결제가 가능한 강의 판매 사이트를 직접 구축해 보고 싶다는 생각이 들어, 해당 주제로 방향을 변경하게 되었습니다.처음에는 결제 기능 구현만을 목표로 하였으나, 예상보다 구현 과정이 수월하여 로그인 기능, 동영상 재생 기능, 관리자 페이지 구현 등 전반적인 기능 개발까지 함께 진행하게 되었습니다.
그 결과 강의 판매에 필요한 핵심 기능 전반을 직접 구현하는 경험을 할 수 있었습니다.
진행 방법
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를 기반으로 기능 명세를 세분화하여 하나씩 구현해 나가는 방식이 가장 효율적일 것으로 생각됩니다.
도움 받은 글 (옵션)
https://www.youtube.com/watch?v=vdGZPF-NSdc
https://www.youtube.com/watch?v=JEfxo-f_-Zo
