등급별 구성
스탠다드
49,000원
기획 문서 6종
디럭스
69,000원
6종 + AI 빌드 스펙팩
프리미엄
89,000원
디럭스 + 디자인 프리셋 3종
판매 준비 중이에요
곧 구매하실 수 있어요. 지금은 아래에서 내용을 미리 확인해 보세요.
사이트 컨셉
직장인과 학원 수강생을 위한 온라인 강의 플랫폼(LMS). 수강생은 강의를 신청해 영상으로 학습하고 과제를 제출하며 수료증을 받는다. 강사는 커리큘럼을 편성하고 영상을 올리며, 수강생의 진도·출결·과제를 관리하고 정산 내역을 확인한다.
메뉴 구조
홈
방문자·수강생·강사 각각에게 맞는 첫 화면을 보여준다
화면 3개
강의 탐색
강의를 찾아보고 수강 신청까지 진행한다
화면 6개
내 강의실
수강 중인 강의를 학습하고 과제를 제출한다
화면 8개
수업 편성
강사가 강의를 개설하고 커리큘럼과 영상을 구성한다
화면 6개
학생 관리
수강생의 진도와 학습 현황을 관리한다
화면 5개
출결·평가
출석과 과제를 평가하고 수료를 처리한다
화면 5개
마이페이지
계정 정보와 수강 이력, 강사 정산을 확인한다
화면 4개
AI가 빠뜨리기 쉬운 예외 화면 8개
“만들어줘” 한 줄로는 잘 나오지 않는, 실제 서비스에 꼭 필요한 화면들입니다.
화면 목록 37개 · 기능 정의
홈
화면 3개| 홈 - 비로그인main | 상단 히어로 배너(핵심 카피 + 강의 검색창 + 수강생 수 지표) · 카테고리 바로가기 8종 아이콘 · 이번 주 인기 강의 8개 카드 · 신규 오픈 강의 캐러셀 · 기획전 배너 2단(신규 할인·패키지) · 분야별 추천 강의 탭 섹션 · 수강 후기 슬라이드 5개 · 강사 지원 유도 배너 · 자주 묻는 질문 아코디언 · 하단 회원가입 유도 CTA |
| 홈 - 수강생 로그인main-student | 이어보기 카드(마지막 시청 강의·현재 차시·진도율) 최상단 고정 · 이번 주 학습 요약 지표 3종(학습 시간·완료 차시·연속 학습일) · 수강 중 강의 목록 카드 · 마감 임박 과제 알림 리스트 · 미답변 질문 알림 · 수료 임박 강의 안내 배너 · 학습 습관 캘린더(잔디 그래프) · 추천 강의 캐러셀 · 관심 분야 신규 강의 · 하단 수강 후기 작성 유도 CTA |
| 홈 - 강사 로그인main-teacher | 핵심 지표 카드 4종(개설 강의 수·총 수강생·채점 대기·이번 달 정산액) · 처리가 필요한 일 목록(검수 대기·채점 대기·진도 미달) · 최근 30일 수강 신청 추이 차트 · 강의별 성과 요약 테이블(수강생·평점·완주율) · 최근 수강 후기 5건 · 미답변 질문 목록 · 진도 미달 학생 요약과 일괄 독려 진입 · 이번 달 정산 예정 요약 · 빠른 실행 버튼 3종 · 플랫폼 공지사항 |
강의 탐색
화면 6개| 강의 목록list | 카테고리·난이도·가격대 필터 · 정렬 드롭다운(인기순/최신순/평점순) · 강의 카드 그리드 12개씩 · 무한 스크롤 또는 페이지네이션 · 검색어 입력창 |
| 강의 목록 - 검색 결과 없음list-empty | 검색어를 포함한 안내 문구 표시 · 일러스트 또는 아이콘 · 필터 초기화 버튼 · 추천 인기 강의 4개 노출 · 검색어 수정 유도 |
| 강의 상세detail | 강의 소개 영상 미리보기 · 커리큘럼 목록(챕터/차시, 각 영상 길이) · 강사 프로필 · 수강 후기와 별점 분포 · 수강 신청 고정 버튼(가격·할인) |
| 수강 신청 - 결제form | 선택 강의 요약 · 쿠폰 코드 입력과 적용 · 결제 수단 선택(카드/간편결제) · 최종 결제 금액 계산 표시 · 환불 규정 동의 체크박스 |
| 수강 신청 - 완료done | 결제 완료 메시지와 주문번호 · 신청 강의 정보 요약 · 영수증 보기 링크 · 바로 학습 시작 버튼 · 내 강의실 이동 버튼 |
| 수강 신청 - 결제 실패error | 실패 사유 안내(한도 초과·카드 오류 등) · 다시 시도 버튼 · 다른 결제 수단 선택 유도 · 고객센터 문의 링크 · 장바구니 유지 안내 |
내 강의실
화면 8개| 내 강의실 - 수강 중list | 수강 중/완료 탭 전환 · 강의별 진도율 막대와 남은 차시 수 · 마지막 학습일 표시 · 이어보기 버튼 · 수료 조건 충족 시 수료증 발급 배지 |
| 내 강의실 - 비어 있음list-empty | 수강 중인 강의가 없다는 안내 · 일러스트 노출 · 강의 둘러보기 유도 버튼 · 인기 강의 추천 4개 · 첫 수강 할인 쿠폰 안내 |
| 강의 재생player | 영상 플레이어(배속·자막·전체화면) · 우측 커리큘럼 목록과 현재 차시 하이라이트 · 이어보기 지점 자동 복원 · 시청 완료 시 다음 차시 자동 이동 · 강의 노트 작성 |
| 강의 재생 - 오류player-error | 영상 로드 실패 안내 문구 · 새로고침 버튼 · 네트워크 확인 안내 · 다른 차시로 이동 링크 · 오류 신고 버튼 |
| 과제 제출form | 과제 안내문과 배점 표시 · 파일 첨부(드래그앤드롭, 용량 제한 안내) · 텍스트 답안 입력 에디터 · 임시 저장 기능 · 마감일까지 남은 시간 표시 |
| 과제 제출 - 마감됨form-closed | 마감 안내 문구와 마감 일시 표시 · 입력 폼 비활성 처리 · 지각 제출 허용 여부 안내 · 강사에게 문의 버튼 · 다른 과제 목록으로 이동 |
| 질문 게시판board | 차시별 질문 목록과 답변 여부 배지 · 질문 작성 폼 · 강사 답변 강조 표시 · 좋아요와 정렬(최신순/답변순) · 내 질문만 보기 필터 |
| 수료증 발급done | 수료 조건 충족 현황 표시(진도율·과제·출석) · 수료증 미리보기 · PDF 다운로드 버튼 · 수료번호 발급 · SNS 공유 버튼 |
수업 편성
화면 6개| 내 강의 목록list | 개설한 강의 카드 목록 · 상태 배지(작성 중/검수 대기/게시 중/게시 중지) · 강의별 수강생 수와 평점 · 새 강의 개설 버튼 · 상태별 필터 |
| 강의 개설 - 기본 정보form | 강의명·부제 입력 · 카테고리와 난이도 선택 · 썸네일 이미지 업로드와 미리보기 · 가격 설정(무료 토글, 할인율) · 강의 소개 리치 텍스트 에디터 |
| 커리큘럼 편성builder | 챕터 추가와 이름 변경 · 챕터 안에 차시 추가 · 드래그앤드롭으로 순서 변경 · 차시별 영상 연결 상태 표시 · 미리보기 허용 차시 지정 · 총 강의 시간 자동 합산 |
| 영상 업로드upload | 드래그앤드롭 업로드 영역 · 업로드 진행률 표시 · 인코딩 상태 안내 · 자막 파일 첨부 · 첨부 자료(PDF 등) 업로드 · 지원 형식과 용량 제한 안내 |
| 영상 업로드 - 실패upload-error | 실패 사유 표시(용량 초과·형식 불일치·네트워크) · 재시도 버튼 · 실패한 파일만 선택적 재업로드 · 지원 형식 재안내 · 고객센터 문의 링크 |
| 강의 게시 - 검수 대기done | 검수 요청 완료 안내 · 예상 소요 기간 표시 · 검수 체크리스트 결과(필수 항목 충족 여부) · 검수 중 수정 불가 안내 · 요청 취소 버튼 |
학생 관리
화면 5개| 수강생 목록list | 강의별 수강생 테이블 · 진도율 막대와 정렬 · 최근 접속일 표시 · 이름·이메일 검색 · 진도 구간 필터(0%/1~49%/50~79%/80%+) · 엑셀 다운로드 |
| 수강생 목록 - 검색 결과 없음list-empty | 검색 조건에 맞는 수강생이 없다는 안내 · 적용된 필터 칩 표시 · 필터 초기화 버튼 · 전체 수강생 수 안내 · 검색 팁 제공 |
| 수강생 상세 - 진도 현황detail | 수강생 기본 정보 · 차시별 시청 완료 여부 체크리스트 · 과제 제출 이력과 점수 · 질문 작성 이력 · 학습 시간 추이 그래프 · 개별 메시지 발송 버튼 |
| 진도 미달자 관리list-filtered | 기준 진도율 미만 수강생 자동 추출 · 미달 기간 표시(N일째 미접속) · 일괄 선택 체크박스 · 독려 메시지 일괄 발송 · 기준 진도율 설정 변경 |
| 알림 발송form | 수신 대상 확인(선택 인원 수) · 발송 채널 선택(이메일·앱 푸시·문자) · 템플릿 선택과 치환 변수 안내 · 메시지 미리보기 · 예약 발송 시간 설정 |
출결·평가
화면 5개| 출석 현황list | 주차별 출석 매트릭스 표 · 출석/지각/결석 색상 구분 · 개인별 출석률 합계 · 기간 선택 필터 · 출석 기준 안내 · 엑셀 내보내기 |
| 과제 채점 목록list | 채점 대기·완료 탭 구분 · 제출일 기준 정렬 · 지각 제출 배지 표시 · 과제별 제출률 표시 · 일괄 채점 진입 · 미채점 건수 강조 |
| 과제 채점 - 상세detail | 제출 답안 본문과 첨부 파일 미리보기 · 채점 기준표(루브릭) 항목별 점수 입력 · 총점 자동 합산 · 피드백 코멘트 작성 · 이전/다음 학생 이동 · 임시 저장 |
| 수료 기준 설정form | 진도율 기준 설정(슬라이더) · 과제 제출 최소 개수 · 출석률 기준 · 최종 평가 점수 기준 · 기준 변경 시 영향받는 인원 실시간 표시 · 수료증 양식 선택 |
| 수료 처리 - 확인confirm | 수료 대상자 명단 최종 확인 · 인원수와 기준 재확인 · 되돌릴 수 없다는 경고 표시 · 수료증 일괄 발급 옵션 · 알림 발송 여부 선택 · 최종 확인 체크박스 |
마이페이지
화면 4개| 내 정보form | 프로필 이미지와 닉네임 수정 · 이메일·비밀번호 변경 · 알림 수신 설정(이메일/푸시/문자) · 강사 전환 신청 버튼 · 회원 탈퇴 링크 |
| 수강 이력list | 수강 완료 강의 목록과 수료 여부 · 결제 내역과 영수증 발급 · 환불 신청 버튼(가능 기간 표시) · 기간별 필터 · 수료증 재발급 |
| 정산 내역list | 월별 정산 금액 요약 카드 · 강의별 매출 상세 내역 · 정산 상태 배지(정산 예정/완료) · 수수료 공제 내역 표시 · 세금계산서 발행 · 정산 계좌 관리 |
| 정산 내역 - 내역 없음list-empty | 선택 기간에 정산 내역이 없다는 안내 · 다른 기간 선택 유도 · 첫 정산 안내 문구 · 정산 주기 안내 · 강의 개설 유도 버튼 |
화면별 AI 생성 프롬프트
화면마다 AI 코딩 도구에 그대로 넣는 프롬프트가 붙어 있습니다. 아래는 3개 예시예요.
수강 신청 - 결제 실패
결제 실패 화면을 만들어줘. 경고 아이콘과 "결제가 완료되지 않았어요" 문구, 실패 사유를 사람이 이해할 수 있는 문장으로 표시(예: 카드 한도를 초과했어요), "다시 시도" 버튼과 "다른 결제 수단 선택" 버튼, 하단에 고객센터 문의 링크. 신청 내용은 유지된다는 안내 문구도 넣어줘.
강의 재생
강의 영상 재생 화면을 만들어줘. 좌측 대부분을 영상 플레이어가 차지하고 (재생/일시정지, 배속 0.5~2배, 자막 토글, 전체화면, 진행 바), 우측에 커리큘럼 사이드바(챕터별 차시 목록, 완료 체크 표시, 현재 차시 하이라이트). 플레이어 아래에는 탭(강의 노트, 첨부 자료, 질문하기). 시청 위치를 저장했다가 다시 들어오면 이어서 재생되게 해줘.
커리큘럼 편성
커리큘럼 편성 화면을 만들어줘. 이 화면이 이 서비스의 핵심이야. 좌측에 챕터 목록(챕터 추가 버튼, 챕터별로 접기/펼치기), 각 챕터 안에 차시 행(차시명, 영상 길이, 영상 연결 상태 아이콘, 미리보기 허용 토글, 삭제), 드래그앤드롭 핸들로 챕터와 차시 순서를 바꿀 수 있게 해줘. 우측 상단에 총 챕터 수, 총 차시 수, 총 강의 시간을 자동 합산해서 표시. 영상이 연결되지 않은 차시는 경고 아이콘으로 표시해줘.
나머지 34개 화면의 프롬프트는 패키지에 들어 있어요.
내 서비스에 맞게 직접 만들 수도 있어요
컨셉과 메뉴만 입력하면 화면 목록부터 화면별 프롬프트까지, 빠지는 화면 없이 설계해드려요.
무료로 시작하기