학생 시험 대시보드 와이어프레임 디자인

KPI 우선 학생 대시보드

Zentou AI · Portal WIREFRAME v0.1은 데스크톱 학생 포털을 저충실도 탐색안으로 보여 줍니다. 선택된 콘셉트는 DATA-FORWARD라고 표시된 “B · ダッシュボード”이며, 명시된 구조에서는 KPI를 가장 앞에 두어 학습자가 세부 내용으로 스크롤하기 전에 현재 위치를 파악할 수 있게 합니다.

대시보드는 motoki.daisuke에게 인사하고 정적인 기간 라벨 세 개(今週, 今月, 通算)를 보여 주며, 그중 今月이 강조되어 있습니다. 카드 네 개에는 基礎認定이 붙은 認定ランク A2, +3.2 前回比가 붙은 偏差値 39, 04/19 10:00이 붙은 次回まで 1日, 練習進捗 62%가 표시됩니다. 이 카드들은 랭크, 비교, 긴급도, 활동을 구분하며, HTML은 기간 라벨을 데이터 변경에 연결하지 않습니다.

여기에는 의도된 밀도의 절충이 있습니다. 카드 네 개는 빠른 비교를 돕지만, 값이 어떻게 계산되는지 또는 서로 어떤 관계인지는 설명하지 않습니다. 이 결과물에서 카드의 값은 시각 디자인 속 샘플 콘텐츠일 뿐, 실제 평가 데이터나 연동된 학생 기록의 증거가 아닙니다.

01

랭크

A2와 基礎認定은 숫자인 偏差値와는 별개인 범주형 인증 상태를 전달합니다.

02

변화

39와 ↑ +3.2 前回比는 현재 점수와 비교값을 짝지어 변화를 암시하지만 비교 기간은 정의하지 않습니다.

03

긴급도

1日와 04/19 10:00은 다음 시험을 기한 중심의 상태로 바꿉니다.

04

활동

분할 막대가 있는 62%는 완료 정도를 시사하지만, 바탕이 되는 활동의 정의는 열어 둡니다.

구성이 뒷받침하는 학습 결정

이 레이아웃은 포털을 연 학생이 다음에 무엇을 할지 정할 때 유용합니다. 왼쪽 내비게이션 열에는 ダッシュボード, 試験日程, 成績一覧, 練習問題, 学習計画가 나열되고, 메인 영역은 요약에서 근거로, 그리고 행동으로 이어집니다. 이 순서 덕분에 현재 상태를 보기 전에 이동할 곳을 먼저 고를 필요가 줄어듭니다.

CHART · 偏差値推移는 빨간 선과 찍힌 점을 사용하고, SUBJECTS · 科目別는 원문 라벨 開発 / 国 / 数 / 英 / 理 아래에 해칭 막대 다섯 개를 사용합니다. 패널에는 손으로 그린 축선이 있지만 숫자 눈금, 날짜, 막대별 값은 없습니다. 측정된 성과 데이터를 제공하지 않으면서도, 제안된 점수 추이와 과목 비교를 구분해 보여 줍니다.

하단의 “NEXT STEP / 次にやること” 패널에는 시험 신청을 마치기, 취약 영역 論理 문제 열 개 풀기라는 구체적인 행동 두 가지가 나열됩니다. 진단에서 행동으로 넘어가는 유용한 전환입니다. 다만 이 디자인은 완료 상태, 담당자, 추천이 생성되는 방식은 보여 주지 않은 채 행동 라벨만 제안한다는 한계가 있습니다.

포털 진입에서 다음 단계까지

눈에 보이는 읽기 흐름은 포털 라벨 “zentou-ai.jp / portal / dashboard”에서 시작해 학습자 인사말과 기간 컨트롤을 거쳐 KPI 카드 네 개에 이릅니다. 이로써 신원과 시간 범위에서 현재 상태로 이어지는 작업 공간의 순서가 만들어집니다. 기간 전환기는 今月을 눈에 띄게 강조하지만, 캡처만으로는 이 컨트롤이 실행 시 데이터를 바꾼다고 확인할 수 없습니다.

KPI 아래의 차트와 과목 패널은 서로 다른 형태의 맥락을 제공합니다. 차트는 과목 패널보다 넓으며, 이는 패널 그리드의 1.4fr 대 1fr이라는 CSS 관계와 일치합니다. 이 비율은 추이에 더 많은 공간을 주면서 비교 패널은 간결하게 유지합니다. 변화에 초점을 둔 대시보드의 강조점을 뒷받침하지만, 눈금이 지정되지 않았는데도 차트에 더 큰 시각적 권위를 부여하는 효과도 있습니다.

공지는 お知らせ（直近 3 件）라는 라벨이 붙은 점선 컨테이너에 이어지고, 그 아래에 빨간 테두리의 다음 단계 영역이 놓입니다. 이 순서는 수동적인 정보를 명시적인 행동보다 앞에 둡니다. 실제 서비스로 옮길 때는 긴급한 과제를 공지 위로 올릴지 시험해 볼 수 있지만, 이는 이 샘플이 보여 주는 동작이 아니라 제안되는 변경입니다.

1. 개요 화면 진입

   포털 경로와 인사말은 대시보드를 학습자의 시작 작업 공간으로 설정하며, 내비게이션은 왼쪽에 있습니다.

2. 현재 상태 확인

   기간 컨트롤과 KPI 카드 네 개가 선택된 시간 보기, 점수 맥락, 기한, 연습 진행률의 틀을 만듭니다.

3. 보조 보기 살펴보기

   추이 패널과 과목 패널은 관측에 따른 변화와 과목별 상대 분포라는 서로 다른 종류의 맥락을 제공합니다.

4. 추천에 따라 행동하기

   NEXT STEP 블록은 개요를 두 가지 제안 과제, 즉 시험 신청을 마치거나 취약 영역 論理를 연습하는 일로 바꿉니다.

보이는 구조와 기능의 경계

이 공식 OpenDesign 번들 예제는 정적인 B 대시보드 캔버스 하나입니다. A, C, D 콘셉트 탭과 page-1 / 5 스티커 메모는 추가로 작성된 화면이 있다는 근거가 되지 않으며, 탭, 기간, 사이드바 항목, 다음 단계에는 클릭 핸들러가 없습니다. 학생 신원, 날짜, 랭크, 진행률 값은 예시입니다. 이 와이어프레임은 시각적 위계를 보여 줄 뿐, 실제 포털, 저장된 기록, 시험 제출, 검증된 교육 성과를 보여 주지 않습니다.

이 디자인에서 가장 재사용하기 좋은 교훈은 구조적입니다. 추이, 과목, 공지, 행동 영역을 보여 주기 전에 범주형 상태, 숫자 비교, 기한, 연습 완료율을 분리하는 것입니다. 적용할 때는 각 지표의 의미와 출처를 정의하고, 차트 단위와 시간 범위를 추가하며, 어떤 컨트롤과 추천이 실제로 동작할지 정한 뒤에야 이 와이어프레임을 운영 대시보드로 다룰 수 있습니다.