SYSTEM BLUEPRINT

학습 상담
신청에서 확정까지

학생과 운영자를 잇는 상담 흐름

스토리보드란?

스토리보드는 실제 개발 전에 화면과 이용 순서를 미리 확인하는 문서입니다. 기존 기능을 보존하면서 추가할 상담 흐름을 보여줍니다.

  1. 학생이 학습 홈에서 상담을 신청하고 결과를 확인
  2. 운영자가 신청을 접수하고 일정을 확정
  3. 기존 기능 검수와 배포 인계 기준 확인

마지막까지 보시면 학생의 신청이 확정 일정으로 이어지는 모습을 확인할 수 있습니다.

학생 시나리오

학습 중 생긴 고민을 상담으로

기존 학습 흐름에서 신청하고 확정 결과를 확인합니다.

로그인

내 정보 확인

학습 확인

필요한 항목 조회

상담 작성

내용과 상태 확인

신청 접수

처리 결과 저장

일정 확인

다음 행동 안내

학생 | 화면 01

학습 홈

학습 관리 / 학습 홈
학생 / 학습 홈김하늘 · 고2

오늘의 학습을 이어가세요

2026.09.08 화요일 · 오늘도 한 걸음씩

학습 고민, 상담으로 풀어보세요

수학 학습 계획을 함께 점검할 수 있어요.

오늘 학습4시간 20분
계획 달성3 / 5
연속 기록12일

오늘의 플래너

수학 · 수열 기출 20문항완료
영어 · 독해 3지문완료
국어 · 비문학 오답 정리진행

나의 학습 기록

공부일기09.07 작성
학습 분석지주간 리포트
다음 스케줄17:00 자습

[화면 개요 및 목적]

기존 플래너와 학습 기록을 유지하며 상담 진입점을 추가합니다. 데모 첫 화면에서 확인합니다.

[핵심 기능 로직]

Firebase 로그인 이후 본인 데이터만 조회합니다. 기존 학습 기능을 변경 후 다시 검수합니다.

  • 기존 학습 흐름 보존
    HTML · JS · CSS
학생 | 화면 02

상담 신청

학습 관리 / 상담 신청
학생 / 상담 신청김하늘 · 고2

학습 상담 신청

희망 일정을 남기면 운영자가 확인 후 확정합니다.

상담 내용

신청 요약

학생김하늘
학년고등학교 2학년
희망일2026.09.10
희망 시간17:30
진행 상태작성 중

신청 전 확인

희망 시간은 확정 일정이 아닙니다.

확정 결과는 내 상담 내역에서 확인할 수 있습니다.

예상 상담 시간 20분

[화면 개요 및 목적]

주제·희망 일정·고민을 입력하고 신청합니다. 데모 Step 2에서 체험합니다.

[핵심 기능 로직]

미확정 희망 일정임을 명시하고 필수값·중복 제출을 검사합니다.

  • 신청과 결과의 안전한 연결
    Firebase · Val Town
학생 | 화면 03

내 상담 내역

학습 관리 / 내 상담 내역
학생 / 내 상담 내역김하늘 · 고2
상담 확정

상담 일정이 확정되었어요

학습 자료와 궁금한 점을 준비해 주세요.

수학 학습 계획

2026.09.10
확정 시간17:30
장소상담실 A
학생김하늘 · 고2
소요 시간20분

수열 문제 풀이와 주간 계획 점검

신청부터 확정까지

신청 접수내용 저장
일정 확정담당자 확인
상담 진행예정

상담 준비

최근 오답 노트와 이번 주 플래너를 가져오세요.

실제 알림 발송 없이 화면 흐름을 체험하는 시안입니다.

[화면 개요 및 목적]

확정 일정과 상담 준비를 확인합니다. 데모 Step 4의 결과 화면입니다.

[핵심 기능 로직]

Val Town의 저장된 상태를 기준으로 본인 신청만 조회합니다.

  • 신청과 결과의 안전한 연결
    Firebase · Val Town
운영자 시나리오

신청을 놓치지 않는 상담 운영

접수·일정 확인·확정을 거쳐 학생에게 결과를 연결합니다.

권한 확인

내 정보 확인

접수 확인

필요한 항목 조회

내용 검토

내용과 상태 확인

일정 확정

처리 결과 저장

오픈 검수

다음 행동 안내

운영자 | 화면 01

상담 접수 목록

학습 관리 / 상담 접수 목록
운영자 / 상담 접수운영 담당자

학생 상담 접수

아직 처리하지 않은 신청부터 확인합니다.

미처리 신청2건
이번 주 확정8건
오늘 상담3건

전체 신청

대기 우선
학생학년주제희망 일정상태
김하늘고2수학 학습 계획09.10 17:30대기
이서준고1학습 습관 점검09.10 18:00확정
박지우고3모의고사 복습09.11 17:00대기
최도윤고2주간 플래너 점검09.11 18:30확정

허용된 학생의 신청만 표시

운영자 권한으로 접수 내역을 관리합니다. 시안에서는 예시 학생을 사용합니다.

[화면 개요 및 목적]

대기 신청을 먼저 확인합니다. 학생·주제·희망일을 비교하여 누락 없이 접수합니다.

[핵심 기능 로직]

운영자 권한을 서버에서 확인하고 처리 상태별로 목록을 분리합니다.

  • 신청과 결과의 안전한 연결
    Firebase · Val Town
운영자 | 화면 02

일정 확정

학습 관리 / 일정 확정
운영자 / 일정 확정운영 담당자

상담 일정을 확정합니다

학생 요청과 운영 가능한 시간을 함께 확인하세요.

김하늘의 신청

학년고2
주제수학 학습 계획
희망 날짜2026.09.10
희망 시간17:30

상담하고 싶은 내용

수열 문제를 풀 때 시간이 오래 걸려요. 주간 공부 계획을 점검하고 싶습니다.

일정 확인 중

상담실 A · 일정

2026.09.10
17:00
사용 중
17:30
선택
18:00
가능
18:30
가능
19:00
가능
19:30
가능

선택 시간 17:30 · 상담 20분

실제 구현 시 서버에서 중복 배정을 최종 확인합니다.

[화면 개요 및 목적]

학생 요청과 빈 시간을 대조하고 일정을 확정합니다. 데모 Step 3에서 체험합니다.

[핵심 기능 로직]

확정 전 일정 충돌을 서버에서 확인하여 같은 시간의 중복 배정을 방지합니다.

  • 신청과 결과의 안전한 연결
    Firebase · Val Town
운영자 | 화면 03

오픈 점검

학습 관리 / 오픈 점검
운영자 / 오픈 점검운영 담당자

학생 오픈 전 점검

기존 기능과 추가 기능을 같은 기준으로 확인합니다.

검수 후 배포 승인

아래 상태는 검수 계획을 설명하는 예시입니다.

기능별 회귀 검수

플래너 저장·조회완료
공부일기 수정완료
AI 챗봇 오류 안내확인 필요
학습 분석지 표시완료
스케줄·상담 중복완료

인계할 자료

신규·수정 소스코드
GitHub Pages 배포본
Val Town 변경 목록
권한·학생 정보 검수
운영 및 복구 안내
남은 오류 해결 → 재검수 → 배포

[화면 개요 및 목적]

기존 기능 회귀 검수와 배포·소스코드 인계 기준을 확인합니다. 상태는 시안 예시입니다.

[핵심 기능 로직]

점검 결과와 수정 내역을 함께 인계하고 오류가 남으면 재검수 후 배포합니다.

  • 재현 가능한 배포 인계
    GitHub Pages
시나리오

| 화면 01

[화면 개요 및 목적]

[핵심 기능 로직]

    | 화면 02

    [화면 개요 및 목적]

    [핵심 기능 로직]

      | 화면 03

      [화면 개요 및 목적]

      [핵심 기능 로직]