UI 설계 시안
User Story Map
PROJECT OVERVIEW
7-8월 연수 기간 동안 초등학교 교사분들을 위주로 밀당 제품의 학습하기 등의 화면에 초등 교육과정에 적합한 그래픽 탑재에 대한 VoC가 늘어나고 있습니다.
우리 제품은 초등학생부터 고등학생까지의 정규 교과과정을 수강하는 학생들을 고려해야 하며, 타깃에 맞춘 경험을 제공하기 위해서 사용자가 직접 테마를 선택할 수 있는 확장성 있는 사용자 경험을 제공합니다.
VoC를 짧게 정제해봅시다.
PROJECT GOAL Scrrrrr!!
•
SA의 배경, 블록 등의 영역을 사용자가 직접 커스텀이 가능할 수 있도록 기능이 제공된다는 것을 보여주는 가이드 UXUI를 제작하는 것은
•
빠른 호흡으로 기능을 딜리버리 하기 위해 교실 설정에서 테마를 선택하고 적용할 수 있도록 한다.
◦
테마는 티칭, 러닝, 에딧 페이지에 일괄적으로 적용된다.
SOLUTION
교실 정보에서 테마를 변경할 수 있도록 한다.
학습 / 수업 / 편집 화면에서 적용된 테마를 일괄적으로 조회할 수 있어야 한다.
설계전 주의해야할 사항
•
상단 패딩 영역에 대한 작업이 필요한 상황입니다.
◦
모바일에도 반영되어 있으며 학습요약 쪽이 새롭게 작업되며 이부분 대응이 필요합니다.
•
사이드 패널의 넓이 가이드가 어긋났습니다 이부분 체크가 필요합니다.
•
손필기 모드에서는 테마를 제외합니다.
이미 반영된 것들
•
Block AC의 구조가 적절하게 입혀질 수 있도록 설계되어야합니다. (ex. AC 내에 노출될 브레드 크럼 emd)
◦
Block AC 타입 파악
•
•
접근성 대응으로 인해 대본을 활성화 시킨 영상 SA는 Max Width를 벗어나서 최대 패딩 영역까지 넓어짐 → 이에 알맞는 UI가 나올 수 있도록 설계되어야합니다.
요약 →
페이지는 초등학교 교사들을 위한 밀당 제품의 테마를 개선하는 프로젝트로, 2024년 8월 5일부터 9일까지 진행 예정입니다. 주요 목표는 사용자가 테마를 선택할 수 있는 UX를 제공하여 초등학생들에게 적합한 그래픽을 적용하는 것입니다. 프로젝트는 다양한 해상도와 디바이스에 대응하는 학습 화면 설계를 포함하며, 테마 지정 기능을 추가 및 개선할 예정입니다.
상세 스펙 명세서 →
B2C 학습 화면
•
해상도별 대응
◦
Desk Top (Base Display)
◦
Tablet
◦
Mobile (베이스는 아니지만 원할하게 대응될 수 있는 가이드를 수립해야함)
•
설계 범위
◦
배경 영역 가이드
▪
예시용 커스텀 UI : 4종
▪
PC - TA - MO 대응 화면
▪
SA 영역 고스트 타입 / 면 타입
테스트를 통해 제외된 가이드
◦
AC 영역 가이드
▪
예시용 커스텀 UI : 3종
▪
PC - TA - MO 대응 화면
▪
면 타입으로만 제공 (고스트는 의미가 없음)
◦
Block AC / Section 가이드
▪
예시용 커스텀 UI : 3종
▪
PC - TA - MO 대응 화면
▪
면 타입으로만 제공 (고스트는 의미가 없음)
CMS 액티비티 추가 및 편집 화면 (?)
•
테마 지정하기
•
테마 직접 지정하기
2024년 8월 5일
•
테마 UX만의 엣지 케이스
◦
액티비티 영역 외에 16px의 마진을 넣어놓는다.
◦
모바일 해상도에서는 테마 UX의 모든 옵션을 제외한다.
▪
16px마진
▪
테마 컬러
▪
아웃라인 스트로크
◦
테마가 적용되면 아웃라인 스트로크가 적용된다.
◦
테마가 적용되면 Chip(모둠)에 화이트 60% 오파시티 컬러가 삽입된다.
•
학습 요약 엣지 케이스
2024년 8월 6일
•
LMS → 모바일 마진 16px (모바일 대응 안함)
•
데탑, 태블릿 4:2 → 모바일에서는 썸네일 4:3 비율로 변경
2024년 8월 8일
•
LMS - 테마는 상세 편집 화면에서는 제공하지 않는 것으로 스펙 아웃
2024년 8월 9일
모바일에서 상하 패딩 16px이 반영되어 있지 않음. *(좌 : 개발 / 우: 시안)
상하 패딩 16px 통일
지식 태그 마우스호버시 스타일 잘못 적용되어 있음
그래프 / 차트 스타일 깨지는 이슈
•
경민님이랑 확인 필요
반응형 대응 - 수업 모드 버튼이 안사라짐
리치 에디터 / 차트
토스트 아이콘이 빠져있습니다.
교실 정보 레이블 변경