일단 사용해보기 👉 https://ai-study-lms.vercel.app
1. Introduction — 왜 LMS를 만들게 되었는가
AI 스터디를 운영하면서 참여자들에게 가장 미안했던 부분은…
기본 정보조차 한 번에 찾기 어려운 구조였다는 점이었어요.
줌 링크 → 게시판
공지 → 카톡
다시보기 → 문자/메일
과제 제출 여부 → 직접 물어봐야 함
마감일 → 기억하거나 다시 찾아야 함
경험의 흐름이 너무 파편적이었고,
운영자와 참여자 모두 불필요한 에너지를 계속 소모하고 있었죠.
그래서 결심했습니다:
“참여자 경험을 하나로 정리한 ‘전용 LMS’를 직접 만들자.”
결과물 살짝 맛보기
로그인은 결제데이터 중 해당기수 결제 상태 success이고 전화번호가 일치한 데이터가 있으면 통과시키고, 아닌 경우 권한없음 모달이 뜸
한국 웹사이트 홈페이지 스크린샷
한국사이트 스크린샷
2. Planning — 어떻게 시작했는가
이번 프로젝트는 사내 워크숍의 일환이었기 때문에, 처음부터 구조적인 프로세스가 있었어요.
① 내부 설문 → 바이브코딩 패키지.md 제공
먼저 “무엇을 만들고 싶은가?”에 대한 가벼운 설문을 제출하면
지피터스 내부에서 만든 시스템인 바이브코딩 패키지.md 파일을 받게 돼요.
이 파일이 사실상 “프로젝트 설계 청사진(blueprint)” 역할을 합니다.
어떤 단계를 어떤 순 서로 진행해야 하는지 전체 계획을 정리해주는 문서예요.
② 패키지를 기반으로 ‘기획.md’ 생성
패키지.md에 기반해
클코에게 “이거 기반으로 기획.md 파일 하나 만들어줘!”라고 요청했습니다.
그럼 AI가 전체 기능·플로우를 정리한
초기 기획 문서를 자동으로 만들어줍니다.
③ Phase 단위 개발 방식
전체 기획은 여러 Phase로 나뉘는데, 저는 다음 방식으로 진행했어요:
Phase 시작 전 → Plan Mode로 “이 Phase는 어떻게 구현할지 계획 먼저 세워줘!”
계획이 적절하면 Auto Mode로 전환 → 실행
완료되면 다음 Phase로 이동
다시 Plan Mode → Auto Mode… 반복
즉, “계획 → 실행 → 검증”을 AI와 함께 반복하며
제품이 점점 형태를 갖추기 시작합니다.
④ 주요 기능 완성 후 → 세부 조정(Start polishing)
전체 구조가 완성되면 본격적인 디테일 작업을 진행합니다.
DB를 Supabase → Airtable로 완전 전환
각 페이지별 기능 추가
디자인시스템.md 적용
로그인 기능 붙이기
토큰 절약을 위한 맥락 정리
UI/UX 조정
이 단계에서 서비스가 진짜 “사용 가능한 제품”의 형태가 됩니다.
다시보기 페이지 디자인 개선 자랑
before
한국어 홈페이지 스크린샷
after
한국사이트 스크린샷
버블로 웹앱 개발했던 경험이 왜 클코 명령에 도움이 됨
예전에 Bubble(버블) 같은 노코드 툴로 웹앱을 만들 때,
데이터를 가져올 때마다 마우스로 클릭해서
어떤 테이블에서
어떤 조건(필터)로
어떤 값을 가져올지
하나하나 내가 직접 논리적으로 지정해야 했다.
이 경험이 나중에 클코에게 명령할 때 큰 도움이 됐다.
왜냐하면 내가 그때처럼 정확한 논리와 조건을 말로 전달할 수 있었기 때문이다.
예:
“결제(Sync) 데이터 중
기수=19이고상태=Success인 레코드에서 ~~ 값을 가져와.”
에어테이블 필드가 복잡할수록 ‘명확한 명령’이 중요했다
처음엔 에어테이블 필드가 너무 많고 복잡해서
클코가 헷갈릴까 봐 모든 테이블의 필드 정의를 문서로 정리해서 주는 방법을 시도했다.
하지만 곧 깨달았다.
아무리 문서를 잘 만들어도 데이터 구조를 가장 잘 아는 건 결국 나 자신이라는 사실을.
즉, 문서화보다 더 중요한 건
클코에게 명확하고 구체적으로 조건을 말해주는 것이었다.
클코가 헷갈리는 지점
클코가 헤매는 이유는 크게 두 가지였다.
비슷한 필드명 때문에 어떤 필드가 어떤 역할인지 판단하기 어렵다.
필드 타입을 처음에 숫자라고 했다가 뒤에서 string이라고 하면
이 모순을 해결하느라 토큰을 계속 낭비하며 맴도는 문제가 생긴다.
해결책: 필드명과 값을 ‘정확히’ 지정하기
필드명과 값, 타입을 처음부터 딱 정확히 지정해주자
클코가 헤매는 느낌이 확 줄었다.
결론적으로, 가장 효과적인 방법은
“문서를 많이 주는 것”이 아니라
명령 자체를 Bubble에서 클릭하듯 정확한 논리·조건으로 전달하는 것이었다.
발견한 꿀팁
클코 창 여러 개 띄워놓고 동시 작업시키기
클코 터미널 창 2개 띄워두고 하나는 DB 연동 수정, 하나는 프론트 UI 수정 일을 시킴. 서로 방해 안되는 선에서 구분함
텍스트 편집기를 보여주는 컴퓨터 화면의 스크린샷
과거 버전을 잠깐 보고 싶을 때 - 과거 커밋 버전으로 돌아가기
깃 커밋 번호(문자열)을 클코한테 주면서 이 버전으로 돌아가달라고 하기
그래도 현재 버전이 이미 커밋 푸시 되어있으므로 안날아감. 필요하면 현재버전 커밋번호 주고 돌아가면 됨
근데 과거 버전에서 다시 수정하고 커밋해버리면 충돌나므로, 절대 커밋 안하기
필요하면 별도 브랜치 만들어서 커밋하기
한국 페이스북 페이지 스크린샷
서버 포트가 여러 개로 계속 뜰 경우
클코한테 next.js 서버를 모두 종료시켜줘 - 라고 하면 다 꺼지고, 다시 1개의 포트에서만 실행될 것
참여자 before & after
📌 참여자 경험 비교 정리
❗ 기존 참여자 경험: 반복적 탐색 + 높은 인지적 부담
Zoom 링크 찾기 번거로움
매번 수업 들어갈 때마다 게시판에 접속해서 Zoom 링크를 일일이 찾아야 함.
공지 확인 동선 분산
주요 공지는 카카오톡방에서만 확인 가능해, 정보가 흩어져 있음.
과제 안내 불명확 → 매번 스터디장에게 문의
“과제를 어디에 제출하나요?”
“언제까지 제출해야 하죠?”
→ 이런 질문을 매주 반복하며 인지적 부담이 큼.
내 과제 제출 여부를 스스로 확인 불가
제출했는지, 누락했는지 스스로 체크할 수단이 없음.
다시보기 접근성 낮음
문자/메일로 받은 링크를 다시 찾아 들어가야 해서 번거롭고 자주 잃어버림.
✅ LMS 도입 후 참여자 경험: 단일 플랫폼 + 자동화된 관리
Zoom 입장, 공지 확인, 다시보기를 모두 한 곳에서
LMS 안에서 바로 Zoom 참여 가능
공지도 LMS 내에서 통합 확인
다시보기 영상도 동일한 페이지에서 바로 시청 가능
과제 현황 페이지로 제출 정보 한눈에 확인
어떤 과제를 언제까지 제출해야 하는지 명확하게 표시
내가 제출한 과제/미제출 과제를 바로 확인 가능
과제 제출 → 다시보기 자동 권한 부여
과제를 제출하면 해당 회차의 다시보기 권한이 자동으로 활성화
더 이상 운영팀이 수동으로 관리하지 않아도 됨
참여자도 “왜 다시보기가 안 보이지?” 같은 혼란이 사라짐
계획
과제제출 쪽에 게시글 데이터 물리기 (요일별 마감일 표기 포함)
본인 수강신청한 스터디가 보여지게 하기
챌린지 인증도 이 lms에서 하면 자동으로 카톡봇이 카톡방에 올려주면 좋겠다..
(학습 관점) 우선 맥락관리, 토큰관리 무시하고 기능구현에 집중하고 - 익숙해지면 그때 해야지..
문제해결
전화번호 넣고 로그인할 때 결제데이터 있는지 찾아서 있으면 통과, 없으면 미통과 시켜주고 있는데 레코드 하나하나 돌면서 찾는 것 같음
여러 줄의 코드를 보여주는 컴퓨터 화면의 스크린샷
> 로그인 기능이 현재 전화번호 입력하면 결제 데이터 중에 상태=Success, 기수=19기, 전화번호=입력한값 인 데이터가 있으면 통과, 없으면
미통과 시키고 있는데 이때 너무 오래걸려. 지금 어떻게 구현되어있는지 확인해줘. 
한국 컴퓨터 화면의 스크린샷
