교육
온라인 강의 플랫폼 '배움결' — 수강 대시보드
차시를 체크하면 진도율·남은 시간·완료 강의 수가 한꺼번에 다시 계산되는 온라인 강의 플랫폼입니다. 강의 카탈로그는 카테고리·검색·정렬로 걸러 볼 수 있습니다.
비공개·데모 — AI 가상 데이터로 재구성한 예시입니다
문제
LMS는 브로슈어가 아니라 제품이다. 강의를 나열하는 것만으로는 부족하고, 수강생이 '내가 어디까지 들었는지'를 화면에서 확인하고 조작할 수 있어야 한다. 진도·남은 시간·완료 수가 서로 물려 있어 하나를 바꾸면 전부 다시 계산돼야 한다. 차시 하나를 체크하면 그 강의의 진도율과 이어보기 위치가 바뀌고 상단 요약과 사이드바 카운트까지 세 층위가 함께 움직인다. 대시보드에 걸린 차시만 63개라 어긋난 계산은 바로 티가 난다. 강의를 고르는 쪽도 마찬가지여서 카탈로그에는 카테고리·검색·정렬이 필요하다. 데모라 영상 재생도 서버 저장도 없지만 이 조작감만은 실제 서비스처럼 손에 잡혀야 했다.
해결
차시를 체크하면 진도율(39%→44%), 들은 차시(7/18강→8/18강), 이어보기 라벨, 남은 시간, 사이드바의 진행 중·완료 카운트까지 연쇄로 재계산된다. 남은 시간은 아직 안 들은 차시의 길이를 초 단위로 합산해 시·분으로 바꿔 보여 주고, 이어보기 라벨은 다음에 들을 차시의 번호·제목·길이를 가리킨다. 전부 체크하면 버튼이 수료증 보기로 바뀌고, 해제하면 역방향으로 돌아온다. 진도는 브라우저 메모리에만 있어 새로고침하면 처음으로 돌아가는데 가상 수강 데이터라 그게 맞는 동작이다. 차트·상태 관리 라이브러리 없이 바닐라 JS로 짰고 외부 요청은 0건이다. 레퍼런스가 도배하는 할인·타임세일 배너는 이식하지 않고 조용한 앱 UI로 갔다.
- 0
- 외부 의존성
- 63
- 차시(진도 연동)
- 0
- 가로 오버플로
제작 노트
차시 체크가 번지는 범위
대시보드에는 강의 카드 네 개와 63개 차시가 걸려 있습니다. 차시 하나를 누르면 그 강의의 진도 막대와 퍼센트, 들은 차시 수, 섹션별 완료 카운트가 먼저 바뀌고 이어보기 라벨이 다음에 들을 차시의 번호·제목·길이로 갈아 끼워집니다. 이어서 상단 요약의 전체 평균 진도, 들은 차시, 남은 학습 시간, 수료한 강의 수와 사이드바의 진행 중·완료 카운트까지 한 번에 따라 움직입니다. 한 강의의 차시를 모두 체크하면 버튼이 수료증 보기로 바뀌고 해제하면 되돌아옵니다. 사이드바 필터로는 진행 중·완료·위시리스트를 골라 카드 목록을 걸러 봅니다.
라이브러리 없이 상태 계산
진도 상태는 별도 스토어 없이 차시 요소에 붙는 완료 클래스 하나가 원본입니다. 무엇이 바뀌든 재계산 함수가 카드 안 차시를 다시 세고 그 결과를 모아 상단 요약까지 갱신하는 한 방향 구조라 화면끼리 어긋나지 않습니다. 남은 학습 시간도 차시마다 적힌 분·초를 그대로 합산해 만듭니다. 상태 관리·차트 라이브러리를 들이지 않아 페이지가 가볍고 코드가 한 파일이라 고칠 자리도 분명합니다. 진도를 서버나 localStorage에 저장하지 않는 건 의도한 설계로, 가상 수강 데이터라는 전제에 맞게 새로고침하면 처음 상태로 돌아갑니다.
찾는 화면과 듣는 화면
화면은 강의를 찾는 카탈로그와 듣는 대시보드 둘로 나눴습니다. 카탈로그는 카테고리 칩과 검색창, 추천·평점·수강생·가격·신규 다섯 가지 정렬로 13개 강의를 거르고 조건에 맞는 강의 수를 세어 보여 주다가 결과가 없으면 빈 상태 안내를 띄웁니다. 첫 화면 히어로에는 듣던 강의의 이어보기 카드를 놓아 재방문 동선을 클릭 한 번으로 줄였습니다. 대시보드 사이드바에는 이번 주 학습 시간과 다음 목표를 붙여 학습 화면다운 밀도를 만들었습니다. 화면 어디에도 할인 배너를 두지 않고 여백과 숫자 위주의 조용한 톤으로 정리했습니다.
화면
