INTERACTIVE DEMO
시간표 관리 UI
요일 × 교시 그리드에 수업을 배치·삭제하는 교사용 시간표 관리 화면
React / CSS Grid / 인터랙션 설계
수업 추가:빈 칸 클릭 = 배치 · 수업 클릭 = 삭제
월
화
수
목
금
CASE STUDY
01문제 정의
AI 기반 교육용 비디오 스트리밍 플랫폼에서 교사용 화면 전반을 담당했습니다. 교사가 수업을 운영하는 데 필요한 도구 — 시간표 구성, 수업 추가, 실시간 강의 진행 — 를 개발이 익숙하지 않은 사용자도 헤매지 않고 쓸 수 있게 만드는 것이 과제였습니다.
02가설과 접근
교사의 실제 업무 흐름(학기 초 시간표 구성 → 매일의 수업 진행)을 따라 화면을 설계했습니다. 시간표는 요일×교시 그리드에서 클릭만으로 배치·삭제가 되는 직관적 편집을 목표로 했고, 상태가 복잡해지지 않도록 편집 동작을 최소 단위(선택→배치, 재클릭→삭제)로 제한했습니다.
03결과
교사용 시간표 관리·수업 추가 UI가 실시간 강의(포커스타임) 화면과 함께 서비스에 반영됐습니다. 원본 코드는 보유하고 있지 않아, 이 데모는 실제 서비스 화면을 기준으로 그 편집 인터랙션을 재구성한 것입니다.
04배운 것
개발자가 아닌 사용자를 위한 화면은 기능을 늘리는 것보다 동작을 줄이는 것이 답이라는 것 — 인터랙션의 최소 단위를 정하는 일이 UX 설계의 시작이라는 것을 배웠습니다.
기술 노트
- ·과목 팔레트 선택 → 셀 클릭 배치, 재클릭 삭제의 직관적 편집 플로우
- ·CSS Grid 기반 요일 × 교시 레이아웃
- ·교사용 시간표 관리·수업 추가 화면으로 구현
관련 프로젝트
교육용 비디오 스트리밍 플랫폼
다른 데모