1. Overview

Members, enrollments and their status, playback position and completion per video, lesson notes, material downloads and course structure are saved in the browser. Video files uploaded in the admin screen are also stored in the browser, so they stay after a refresh or a return visit.

Connected at rollout: card payment and automatic payment matching, email and text notifications, certificates, admin login and role-based permissions, video copy protection, and server storage for using one account across devices.

2. Challenges

1. Only enrolled students can watch, and only for a set period.

Videos must stay locked until payment is confirmed, and close when the period ends. Still, preview videos should play without login, because that is what brings in enrollments.

2. People do not watch a drawing lesson in one sitting.

They pick up a brush, follow along, stop, and come back days later. To finish the course, they need to resume where they stopped and see at a glance how far they have come.

3. The operator needs to know who is where.

When payment checks, extensions and progress checks are split across spreadsheets and messengers, people slip through. Everything from enrollment to progress should be on one screen, and the operator should be able to change lesson order and videos directly.

3. Structure

Student screens (classes, my classroom, classroom) and admin screens (enrollments, progress, course editing) are separated by URL. Enrollment opens inside the class detail page, and the same enrollment record moves through enroll → payment confirmed → classroom. The back button and refresh keep you on the screen you were viewing.

4. Key Features

Classroom — Resume and Completion

When you pause a video, the position is saved. When you return, it starts from that spot with the message "0:08부터 이어서 재생합니다" (Resuming from 0:08). Watching 90% or more marks the lesson as complete, and the checkmark in the curriculum and the progress bar update right away. Lesson notes written for each video are saved automatically, and the class practice sheet can be downloaded.

Enrollment and Payment Check

Enroll with the depositor's name and you get an application number (CL-date-sequence) and the bank account for payment. Videos stay locked until then. When the operator clicks "confirm payment," access opens for 90 days from that day. Extensions and cancellations are also kept on record. When the period ends, the student's status changes to "expired." If they enroll again, their progress carries over. In the admin screen, student names, emails and depositor names are masked, like 정*은 and d***@example.com, and the progress CSV exports the masked values too.

Course Editing — Order, Visibility, Video Upload

Move videos up and down within a part, and set preview and visibility for each video. When you upload a video file, its length is read and it goes live right away. A video added without a file is marked "영상 준비 중" (Video in preparation) and cannot be published. Non-video files and files over 200MB are rejected.

Student Progress and CSV Download

Each student is one row: completed videos and percentage, last video watched and when, material downloads, and remaining days. Filter by class and download the current list as a CSV file. The CSV is saved so Korean text does not break in Excel.

• My ClassroomShows status, progress, end date and days left for each enrolled class. "Resume" takes you straight to the last video you watched. Enrollments not yet paid can be canceled here.
• Preview and Locked VideosThe first video of each class plays without login. The other videos stay locked with a different message depending on whether the viewer is logged out, unpaid or expired, and the video file is not loaded.
• Sign Up and LoginSign up with name, email and password. Empty fields, invalid email format, an already registered email, a password under 8 characters and unchecked terms each get their own message. After login you return to the screen you were on. Passwords are not stored as typed.
• Class List and DetailFilter by level and sort by recommended, lowest price or shortest video. Classes you are taking are marked. The detail page lists the introduction, supplies, curriculum by part and video lengths. The side box changes its button based on enrollment status.

6. QA

Results from opening the site on PC 1440 and mobile 390 screens and clicking through in the order a real user would. We also checked that saved data is still there after a refresh. (2026-09-23)

The 19 function tests: level filter and price sort · preview playback without login, other videos locked · sign-up input checks and duplicate email blocked · my classroom after sign-up · enrollment and application number · videos locked before payment · access starts when admin confirms payment · my classroom after refresh · position saved and resume · lesson complete and progress updated after watching to the end · lesson notes saved and kept · learning material download · progress table and CSV download · reorder lessons and block publishing of videos in preparation · upload a video file, publish it, play after refresh · wrong password blocked and login · cancel unpaid enrollment and status kept · 30-day extension · resume and back button

Speed & quality scores (out of 100; mobile measured three times on a slow connection, median shown · runs: 97, 94, 97)

Mobile: First Contentful Paint 1.2s · Largest Contentful Paint 2.6s · Layout shift 0 · Blocking time 0ms PC: First Contentful Paint 0.3s · Largest Contentful Paint 0.6s · Layout shift 0 · Blocking time 0ms

7. Result