SYSTEM BLUEPRINT

LearnDash 학습 경험
데이터를 보존하는 화면 전환

제공된 정적 프론트엔드가 실제 수강생과 운영 화면으로 이어지는 흐름을 정의합니다.

스토리보드란?

스토리보드는 제공 디자인이 실제 WordPress와 LearnDash 데이터 안에서 어떻게 작동하는지 미리 확인하는 문서입니다. 수강생과 운영자, 관리자의 흐름을 화면 순서로 배치했습니다.

  1. 수강생이 새 화면에서 강의를 찾고 이어서 학습하는 흐름
  2. 운영자가 PASS·특강·1:1 강의를 관리하는 흐름
  3. 관리자가 테마와 운영 상태를 검증하는 흐름

마지막까지 보시면 기존 LMS를 지키면서 새 학습 경험으로 전환하는 모습이 그려집니다.

수강생 시나리오

강의 탐색에서 이어 학습까지

회원과 수강 상태를 유지한 채 새 화면에서 학습을 완료하는 흐름입니다.

1. 로그인

기존 회원 계정으로
안전하게 진입

2. 강의 탐색

PASS·특강·1:1 수업을
목적별로 탐색

3. 강의 상세

Course·Lesson·Topic과
수강 상태 확인

4. 학습 시작

이어서 학습하고
진도 상태 저장

5. 다음 학습

완료 상태를 반영하고
다음 Lesson으로 이동

수강생 | 화면 01

수강생 홈과 강의 탐색

https://service.local/student
새 프론트엔드 홈
제공 디자인 · WordPress 테마 전환
PASS·특강·1:1 수업 탐색
실제 학습 데이터
Course·Lesson·Topic 연결
기존 회원·수강 정보 · 진도 42%

[화면 개요 및 목적]

로그인한 수강생이 수강 중인 강의와 새로운 PASS·특강·1:1 수업을 한눈에 확인합니다.

[핵심 기능 로직]

WordPress 사용자와 LearnDash 수강 목록, Course·Lesson·Topic과 진도 상태를 조회해 카드 상태와 진입 경로를 결정합니다.

  • 기존 계정 유지
    WordPress User
  • 강의 상태 연결
    LearnDash
수강생 | 화면 02

강의 상세와 수강 진입

https://service.local/course
강의 상세
전체 과정 · 24개 Lesson
현재 진도 42%
이어서 학습하기

[화면 개요 및 목적]

강의 소개, Lesson 구조, 현재 진도와 수강 버튼을 제공해 학습 진입을 분명하게 합니다.

[핵심 기능 로직]

Course와 하위 Lesson·Topic을 조회하고 수강 여부와 완료 상태에 따라 버튼과 진행률을 표시합니다.

  • 얻는 것 (2~6어절)
    실제 기술명
  • 얻는 것 (2~6어절)
    실제 기술명
수강생 | 화면 03

학습 화면과 진도 저장

https://service.local/lesson
학습 화면
Lesson 03 · 핵심 개념
학습 완료 · 진도 58%
다음 Lesson →

[화면 개요 및 목적]

학습 콘텐츠와 다음 Lesson 이동을 한 화면에 배치하고 완료 상태를 확인합니다.

[핵심 기능 로직]

LearnDash 진도 처리와 완료 훅을 사용해 기존 이력과 새 화면 상태를 일치시킵니다.

  • 얻는 것 (2~6어절)
    실제 기술명
  • 얻는 것 (2~6어절)
    실제 기술명
운영자 시나리오

강의 유형과 템플릿 운영

운영자가 기존 강의 데이터를 활용해 새 화면에 맞는 구성을 검수하는 흐름입니다.

1. 강의 확인

기존 Course 구조와
수강 상태 점검

2. 유형 구분

PASS·특강·1:1 수업을
화면에서 구분

3. 콘텐츠 검수

Lesson·Topic 연결과
표시 상태 확인

4. 반응형 검수

모바일과 데스크톱에서
레이아웃 확인

5. 운영 반영

승인된 템플릿을
단계적으로 적용

운영자 | 화면 01

강의 운영 목록

https://service.local/manage/courses
강의 운영
WordPress · 연결됨
LearnDash · 연결됨
PASS · 공개 · 24개 Lesson
특강 · 예약 · 4개 Lesson
1:1 수업 · 비공개

[화면 개요 및 목적]

운영자가 강의 유형과 공개 상태, 템플릿 적용 대상을 빠르게 확인합니다.

[핵심 기능 로직]

WordPress 관리자 권한과 LearnDash 콘텐츠 목록을 기준으로 운영 상태를 표시합니다.

  • 얻는 것 (2~6어절)
    실제 기술명
  • 얻는 것 (2~6어절)
    실제 기술명
운영자 | 화면 02

콘텐츠 템플릿 미리보기

https://service.local/manage/preview
템플릿 미리보기
Course 헤더 · 정상
Lesson 목록 · 정상
모바일 줄바꿈 · 점검

[화면 개요 및 목적]

실제 콘텐츠가 제공된 디자인 안에서 어떻게 보이는지 화면 유형별로 확인합니다.

[핵심 기능 로직]

템플릿 변수와 LearnDash 필드를 결합해 운영 데이터 기준의 미리보기를 제공합니다.

  • 얻는 것 (2~6어절)
    실제 기술명
  • 얻는 것 (2~6어절)
    실제 기술명
운영자 | 화면 03

반응형 검수 보드

https://service.local/manage/qa
반응형 검수
데스크톱 · 통과
태블릿 · 통과
모바일 · 버튼 간격 수정

[화면 개요 및 목적]

주요 화면의 데스크톱과 모바일 상태를 나란히 비교해 누락을 찾습니다.

[핵심 기능 로직]

대표 화면 크기별 캡처와 상호작용 점검 목록으로 전환 품질을 기록합니다.

  • 얻는 것 (2~6어절)
    실제 기술명
  • 얻는 것 (2~6어절)
    실제 기술명
관리자 시나리오

운영 전환과 인수인계

관리자가 백업·배포·문서를 확인하고 안정적으로 운영을 넘겨받는 흐름입니다.

1. 스테이징

운영 데이터 영향 없이
새 테마 적용

2. 회귀 점검

로그인·수강·진도와
다음 Lesson 확인

3. 백업

파일과 데이터베이스를
복구 가능하게 보관

4. 운영 배포

단계 적용 후
핵심 상태 재확인

5. 인수인계

소스와 구조 문서,
운영 매뉴얼 전달

관리자 | 화면 01

스테이징 전환 상태

https://service.local/admin/deploy
스테이징 전환
테마 파일 · 준비 완료
LearnDash 연결 · 확인 필요
운영 전환 · 대기

[화면 개요 및 목적]

운영 전환 전 현재 테마와 새 테마의 적용 상태, 검증 범위를 확인합니다.

[핵심 기능 로직]

배포 전 체크 목록과 승인 상태를 분리해 운영 환경 변경을 통제합니다.

  • 얻는 것 (2~6어절)
    실제 기술명
  • 얻는 것 (2~6어절)
    실제 기술명
관리자 | 화면 02

회귀 테스트 결과

https://service.local/admin/qa
회귀 테스트
로그인 · 통과
이어 학습 · 통과
진도 저장 · 통과
모바일 학습 · 통과

[화면 개요 및 목적]

기존 수강생의 핵심 행동이 새 화면에서도 같은 결과를 내는지 확인합니다.

[핵심 기능 로직]

회원·수강·진도·반응형 경로를 독립 체크해 실패 지점을 기록합니다.

  • 얻는 것 (2~6어절)
    실제 기술명
  • 얻는 것 (2~6어절)
    실제 기술명
관리자 | 화면 03

인수인계 문서 묶음

https://service.local/admin/docs
운영 문서
WordPress 테마 구조 · 준비
LearnDash 연동 설명 · 준비
배포 운영 매뉴얼 · 준비

[화면 개요 및 목적]

발주사가 이후에도 테마와 LearnDash 연결 구조를 이해하고 운영할 수 있게 합니다.

[핵심 기능 로직]

소스 구조, 데이터 연결 지점, 배포와 복구 절차를 문서 단위로 정리합니다.

  • 얻는 것 (2~6어절)
    실제 기술명
  • 얻는 것 (2~6어절)
    실제 기술명