📁

표 그리기 블록 (& 표 문항 블록)

연관 자료

이슈 관리 :

프로젝트 자료

User Story Map
UIUX Figma
Tech Spec [Back-end]
Tech Spec [Front-end]
이슈 관리
백로그

에픽명 : 표 그리기 블록 / 표 문항 블록

Summary

표 형태로 이미지를 삽입해 제동하는 콘텐츠와 표 내부에 학습 콘텐츠를 넣을 수 있는 표 기능이 필요함.

Theme from Roadmap

자유로운 표 제작 방식을 통해 확장성 있는 학습 콘텐츠 경험을 제시한다.

Targeted Release Date

1차 배포 : 2월 28일 2차 배포 : 3월 7일 → 14일

The Goals

다양한 학습 시나리오에서 재사용이 가능하도록, 확장성과 가독성이 높은 표 서식 시스템을 개발하고 제공한다.”

 Problem Alignment

블록 고유 속성에 관하여
표는 블록과 속성이 동일하기 때문에 셀렉트, 포커스를 풀때 액티비티 영역 내부를 클릭해야한다.
향후에 ~
표 그리기
표 문항
현재는 블록 자체를 클릭하면, 빈칸 채우기 사이드 패널이 선택됨 (확장성 X)
향후에는 셀 하나에 따라 사이드 패널이 변형되는 UX로 구성되어야 함

상세 진행 배경

 The Success

가치 (1) :

 Solution Alignment

Key features

ex) AIDT

Policy & Ubiqutous Language

기본 정책 설계

표 그리기

Cell (Table 하위)
Size
min width : 50px / max : 전체 표 기준을 따름
Table (Cell의 집합)
Size : 대지 영역을 따름
기본 : 736px (양옆 16px 패딩 존재)
넓게 : 1568px (양옆 16px 패딩 존재) → 1600

표 문항

핵심 표 문항의 표 내부에는 빈칸 맞추기 등, 또 다른 유형이 들어올 것을 염두해 확장성을 열어둬야 한다.

버튼 정책

해상도 정책

표 그리기와 다르게 반응형으로 대응한다. (대지 설정의 100%)

Block Type

Edit
Study
Result (선생님)
Result (학생)

고려되어야 하는 화면

LMS - 실시간 정규 수업, 우측 패널 정/오답 툴팁
B2C - 학습하기 화면 노출
CMS - 제작 화면

고려되어야 하는 정책

일반 정/오답 기준
빈칸 채우기 - 정책 씽크
건너띈 문항
재도전
SU type에 따른 블록 UI 대응
일괄채점 SU에서 블록 disable 처리필요
참고 영상

유효성 케이스 정책

CMS → 표 문항에 블록이 삽입되지 않을 경우 발행이 불가능합니다. @현수 이, @현영 유

Cell 정책

CMS : 대지 사이즈
행 개수 (생성 가능)
열 개수 (생성 가능)
기본 대지 옵션
10개
최대 6개
넓게 대지 옵션
10개
최대 8개

정답 처리 기준

정/오답 기준
건너띄었을 경우
재도전
일괄 채점
 정답
표 내부 n개 빈칸이 모두 정답일 경우
-
 오답
n개중 1개라도 오답일 경우
오답 처리
빈칸 맞추기 [Spec Out]
변경 필요 사항
블록 header 워딩 : 표 문항 -> 표로 변경필요
표 내부에 핸들 노출되지 않도록 처리 필요
고려사항
LMS 학습목록에 학생답안이 노출되는 것 고려필요
건너뛴 문항 기능 고려필요 (관련 시안)
블록별 edit, study, result 모드 UI 필요
result의 경우 선생님화면, 학생 화면 다르기때문에 추가 처리 필요
엘살에도 배포되는 기능이라면?
재도전 기능 고려 필요합니다 (관련 시안)

논의사항 백업

3월 6일
figma 시안엔 표 항목의 최소한의 activity가 표기된다.
Study중에 표 항목 블록 아래 tooltip이 새로 추가된다.
validation 문구는 줄바꿈이 되어도 지금은 괜찮다.
추가 feature 사항 - 3시 50분…
실시간 정규 수업 오른쪽 패널의 팝오버는 기존 팝오버와 동일하게 답안이 그냥 나열되기만 하면 됨.
표 내부의 스타일은 표의 내용물이 터져나가지만 않으면 됨.
해설이 기존처럼 나와야 함. (없앴다가 UX 고려되어 다시 추가됨)
일단 나가야 하니, 정답만 표 순서대로 나열되면 된다.
힌트가 기존처럼 나와야 함.
일괄 채점이 기존 사양대로 되어야 함.
일괄 채점의 경우 이미 푼 문제가 read-only(조작 불가 상태)가 되어야 하고 Alert이 떠야한다.
이미 되어 있을 것.
재도전 기능이 기존처럼 되어야 함. (뺄 수 있으면 뺀다.)
이미 되어 있을 것.
건너띈 경우의 문제가 기존처럼 나와야 함. (칩 확인)
이미 되어 있을 것.
3월 7일
성대님 작업 진행상황
표 문항에서만 반응형 너비에 column 100% 동일 고정되게 변경
선택적으로 resize 기능이 되도록 조정
column, row 제한은 코드 확인 정도만 들어가 있고 후순위 작업으로 진행 예정
미리보기 채점 이슈
기존 설계는 표 문항의 답안을 가지고 있지 않음 = 미리보기 채점을 할 수 없음. = 현수님과의 논의 필요. → 논의 중…
표 내부 핸들 노출 결정 - done
표 그리기의 모든 핸들들은 그대로 노출
미래엔 일정 기한을 고려해 기존 Hover 영역인 100% (=표 그리기와 동일)로 적용하는 것으로 합의합니다.
디자인 정책 마킹 완료
건너띈 문항, 재도전, 일괄채점 고려하기
재도전은 일단 고려 X (현재 엘살의 주관식, 객관식만 들어감)
건너띈 문항 (코드상 분기 옵션) : Chip 노출되어야 함
다시풀기 (코드상 분기 옵션)
활동형에서도 노출되도록 되어있음.
별도의 작은은 없을 것으로 예상됨.
일괄 채점 (코드상 분기 옵션)
 현재 CMS에서 표 문항의 데이터들을 전달하는데 문제가 있다.
성대님이 진행 중 백엔드의 설계대로 하기엔 어려운 점이 있다고 현수님께 전달.
다음주 월요일까지 진행해보고 안되면 도움 요청이 필요.
경준님은 우선 합의된 데이터 형태가 올 것으로 예상하고, 해설 및 popover 구현을 진행.
3월 10일(월)
표 행, 열 추가 제한 및 스타일 이슈 해결 - 7470, 성대
feature 배포 후 이슈 사항
테이블이 하나의 editor에서 2개 이상이면 발행 안됨
드래그 셀 선택이 안됨. - 성대님
테이블에 호버하고 마우스가 벗어났는데도 controller가 무조건 뜨는 문제
처음부터 테이블 발행 경고문구가 뜨는 문제. → 발행시에만 적용되도록 변경
표 문항에선 오른쪽 사이드 패널에서 디자인의 블록 스타일이 안보이도록 하기 (아우 쵝오)
삭제할 때 쪼그라드는 이슈
3월 11일 (화)
SpecOut :
답안 입력 순서 상관없이 정답 인정
향후 새로운 블록이 추가될 경우, 빈칸 채우기 방식만을 허용하는 정책이 순서와 관계없이 정답을 인정하는 기능과 혼선을 초래할 수 있음. *확장성을 위해, 코드 아키텍처 측면에서도 해당 케이스를 배제하는 방식으로 제작되어 있음
3월 12일 (수)
프로드에 배포된 표 문항은 14일 오후에 스테이지로 땡겨오는 것으로 한다. @경준 우 @한준 김
3월 13일 (목)
표 문항 수식 입력모드가 표 문항을 가려버리는 이슈 해결됨 -
이어서 풀기 포커스 안되는 이슈 해결됨 -
빈칸 채우기 괄호가 터져나오는 이슈는 기존 빈칸 채우기에 사이드 이펙트가 있어 블록 전체적으로 논의 필요 = 이번 QA가 아닌 백로그로 다루기로 함. + 솔루션까지 논의하여 댓글에 추가
TODO: CMS와 이외 영역들의 대지영역 통일 이슈 해결하기로 함.
TODO: 표 그리기의 셀 영역 안에서 줄 바꿈을 한 것이 B2C에서 적용되지 않음. → 재현이 되지 않아 후순위로 미룸.

Business Model

Open Issues

Search
Asked by
Question
Status
Answered by
Remarks : if "Yes" or unsure
파일

 Launch Checklist

Launch Checklist

Area
Checklist
Answer
Instructions if "Yes" or unsure
Stackholders

문서