개요
현황 및 히스토리
•
블록 유형별 크고 단순한 스타일 반영 일정이 급하게 이루어지면서 시안과 이격이 많이 발생하였고 크고 단순한 스타일 변경으로 인해 작고 세밀한 스타일까지 영향을 받아 전체적인 플랫폼 UI 퀄리티가 낮아진 상태입니다.
•
시안과 이격이 많이 발생할 경우 추후 개발-디자인 간의 커뮤니케이션 비용이 증가하여 업무 비효율을 일으킵니다. (어떤게 맞는지 모르는 상황)
•
1차 배포 이후 유저 피드백을 기반으로 UX 문제도 함께 해결합니다.
요구사항
전반적인 디자인 통일성을 높이고 시안과의 이격을 줄입니다.
업무 효율을 위한 컴포넌트 공통화 작업을 진행합니다.
정오답 표기 방식을 개선합니다.
과제 목표
1.
피그마 시안과의 이격 0% 목표 & UI 깨지는 이슈 전부 제거
2.
모든 콘텐츠에 범용적으로 사용가능한 표기 방식으로 변경합니다.
범위
1.
블록 전체 유형
a.
답안 블록 10개, 활동 블록 6개, 기타 1개, 콘텐츠 블록 2개
2.
블록 전체 스타일
a.
작고 세밀한 / 크고 단순한
3.
preview, result, study 가 사용되는 주요 화면 4곳
a.
CMS / 수업 미리보기
b.
LMS / 정규 수업 편집
c.
LMS / 수업 모드
d.
B2C / 학습하기
UI 공통 확인 사항
1.
모든 컴포넌트 내에서 줄바꿈이 잘 되는가?
2.
24pt를 기준으로 봤을 때 컴포넌트의 높이가 동일한가?
컴포넌트 공통화 정책
1. 학습지 노드
•
Container : 학습지 노드 전체의 구조와 스타일 속성을 담당하는 최상위 컴포넌트이다.
◦
Button : 유저의 인터랙션(수정, 삭제 등)을 담당하는 버튼 컴포넌트이다.
◦
Input : 텍스트를 입력하는 입력 영역이다.
◦
Pill : 정답 선택/확인 등 선택형 답변 구성 요소이다. 시각적 피드백을 제공하는 것을 목적으로 사용된다.
Pill 상세 속성
◦
Edge case : 대상찾기의 지칭 노드는 공통화에 포함되지 않는다.
Type | property 01 | property 02 | property 03 |
Container | Bracket on/off | spacing 스타일로 분류 | |
button | state(inactive,hover) | Variant (fill, transparency) | item (icon or chip) |
Input | state(focus, active) | Variant (fill, transparency) | item (icon or chip) |
Pill | state(inactive, hover, selected, focused) | Variant(correct, incorrect, solution, hint) | item (icon or chip) |
추가 고민
2. Block_Wrapper
Type | property 01 | property 02 |
wrapper | state (correct, incorrect, solution ) | size (PC,mobile) |