학생, 교사, 관리자별 핵심 여정과 정식 런칭용 화면 구조를 정의한 설계도입니다.
오늘의 과제를 확인하고 음악을 들으며 악보를 따라 학습한 뒤 보상을 확인하는 흐름입니다.
오늘의 과제와 학습 목표 확인
플레이어에서 구간 반복과 현재 위치 확인
현재 마디와 리듬 포인트를 함께 확인
완료율과 반복 필요 구간 자동 표시
성취 배지와 다음 학습 안내 제공
학생이 접속 직후 오늘 무엇을 해야 하는지 이해하는 첫 화면입니다. 과제, 진도, 보상, 태블릿 조작 영역을 크게 배치합니다.
학습 과제를 카드 단위로 보여주고, 진행률과 다음 행동 버튼을 함께 제공해 이탈을 줄입니다.
재생 위치와 악보 현재 마디가 함께 보이는 음악 학습 핵심 화면입니다.
재생 시간, 반복 구간, 현재 마디 강조를 연결해 학생이 듣기와 보기 사이에서 길을 잃지 않게 합니다.
학습 완료 후 진도율과 보상을 즉시 보여주는 피드백 화면입니다.
초등학생에게 완료감이 명확히 전달되도록 숫자, 배지, 다음 학습 안내를 함께 제공합니다.
학급별 진도와 학생별 상태를 확인하고 학습 콘텐츠를 관리하는 흐름입니다.
관리할 학급과 수업 단원 선택
완료, 진행, 도움 필요 학생 구분
반복 구간과 과제 이력 확인
음원과 악보 자료 등록
학습 코멘트와 다음 과제 설정
교사가 수업 전에 학급 전체 상태를 빠르게 파악하는 대시보드입니다.
평균 진도, 미완료 학생, 반복 필요 학생을 상단 지표로 고정해 판단 시간을 줄입니다.
개별 학생의 진도, 반복 구간, 도움 필요 상태를 확인하는 화면입니다.
교사가 어떤 학생에게 어떤 피드백을 줘야 하는지 바로 판단할 수 있도록 상태를 색과 텍스트로 함께 표시합니다.
음원, 악보, 과제 설명을 등록하고 배포 상태를 관리하는 폼 화면입니다.
입력 필드, 파일 업로드, 미리보기, 오류 상태를 디자인 시스템 컴포넌트로 정리합니다.
전체 콘텐츠와 계정, 디자인 시스템 확장 기준을 관리하는 흐름입니다.
음원과 악보 자료 상태 점검
학생과 교사 계정 상태 관리
서비스 사용량과 오류 흐름 확인
디자인 시스템 기준으로 신규 화면 추가
개발 반영 후 화면 차이 확인
서비스 운영 현황과 디자인 시스템 적용 범위를 함께 확인하는 관리자 화면입니다.
운영 지표와 화면 확장 기준을 연결해 유지보수 부담을 줄입니다.
학생 계정 리스트와 상세 상태를 관리하는 운영 화면입니다.
검색, 필터, 상태 배지를 표준 컴포넌트로 설계해 여러 관리 화면에 재사용합니다.
납품 후 내부 팀이 화면을 확장할 때 사용하는 Figma 컴포넌트 라이브러리입니다.
컬러, 타이포그래피, 상태값, 반응형 규칙을 토큰화해 신규 화면에도 일관성을 유지합니다.