버튼 상태 4종
문항 생성기본
문항 생성호버
문항 생성비활성
생성 중로딩
과제로 보내기보조
리포트 내보내기텍스트
한 화면에 채운 버튼은 하나. 나머지는 보조·텍스트 버튼.
Design system · v0.3
컴포넌트 가이드
시안의 모든 화면은 아래 토큰과 컴포넌트만으로 조립합니다. 납품 때는 같은 내용이 Figma 라이브러리와 스타일 가이드 문서로 전달됩니다.
색 토큰 9
본문 대비 4.5:1 이상. 상태색은 막대와 점에만 쓰고, 글자에는 한 단계 진한 색을 씁니다. 상태는 색만으로 구분하지 않고 글자 라벨을 함께 둡니다.
서체와 크기
숫자와 영문 제목은 Space Grotesk, 한글은 Pretendard. 크기는 다섯 단계만 씁니다.
36/600지표 숫자
74%
24/700화면 제목
5학년 2반 대시보드
18/600카드 제목
AI가 찾은 취약 단원
15/400본문
최근 과제 3회의 응답을 바탕으로 정리했습니다.
13/500보조·라벨
근거 · 응답 437건
간격 · 모서리
4px 단위, 12열 그리드. 카드 모서리 14px, 칩은 완전한 둥근 끝.
- 4아이콘과 글자
- 8칩 사이, 라벨과 값
- 12카드 안 요소
- 16카드 안쪽 여백
- 24카드 사이
- 40구역 사이
카드 14
버튼 10
칩 999
컴포넌트
입력 기본 · 포커스 · 오류
카드 · 배지
과제 제출률
91%
21/23명 제출
양호
보완
도움 필요
5학년 2반
새 문항 5
표 행 390px에서는 카드
학생취약 단원점수상태
김하늘분수의 나눗셈36도움 필요
윤채원소수의 곱셈49보완
AI 응답 블록 결론 · 근거 · 교사 확인
AI
역수로 바꾸는 단계에서 막힙니다
교사 확인 전나눗셈을 곱셈으로 바꿀 때 나누는 수를 뒤집지 않는 오답이 반복됩니다. 그림으로 나누기 개념을 먼저 짚은 뒤 기초 문항 3개를 권합니다.
근거 · 최근 오답 14개 중 9개가 같은 유형 (11/1~11/14)
AI 결과에는 근거 줄과 교사 확인 단계를 항상 붙입니다.
빈 상태
아직 만든 문항이 없습니다취약 단원 카드에서 맞춤 문항을 만들면 여기에 쌓입니다.
문항 만들러 가기작업 일정 11일
14일 기한 안에서 11일에 납품하고, 남는 3일은 수정 반영에 씁니다. 세종 사무실 방문은 첫날과 6일째 두 번입니다.
- D1화면 목록 확정 방문세종 첫 방문 미팅 · 대상 화면과 우선순위 확정
- D2~4핵심 3화면 + 토큰대시보드·문항 생성·리포트 시안, 색·서체·간격 토큰
- D5~8나머지 화면핵심 컴포넌트로 남은 화면 전개, 모바일 배치
- D6중간 점검 방문세종 두 번째 방문 · 핵심 화면 피드백 반영
- D9~10가이드 정리컴포넌트 상태·사용 규칙 문서화, 개발 전달용 정리
- D11납품 납품Figma 원본과 UI 스타일 가이드 전달
- D12~14수정 여유납품 뒤 피드백 반영, 개발 전달 질의 응답