← BACK TO SHOWCASEDEMO 05 / 06

INTERACTIVE DEMO

시간표 관리 UI

요일 × 교시 그리드에 수업을 배치·삭제하는 교사용 시간표 관리 화면

React / CSS Grid / 인터랙션 설계

수업 추가:빈 칸 클릭 = 배치 · 수업 클릭 = 삭제

CASE STUDY

01문제 정의

AI 기반 교육용 비디오 스트리밍 플랫폼에서 교사용 화면 전반을 담당했습니다. 교사가 수업을 운영하는 데 필요한 도구 — 시간표 구성, 수업 추가, 실시간 강의 진행 — 를 개발이 익숙하지 않은 사용자도 헤매지 않고 쓸 수 있게 만드는 것이 과제였습니다.

02가설과 접근

교사의 실제 업무 흐름(학기 초 시간표 구성 → 매일의 수업 진행)을 따라 화면을 설계했습니다. 시간표는 요일×교시 그리드에서 클릭만으로 배치·삭제가 되는 직관적 편집을 목표로 했고, 상태가 복잡해지지 않도록 편집 동작을 최소 단위(선택→배치, 재클릭→삭제)로 제한했습니다.

03결과

교사용 시간표 관리·수업 추가 UI가 실시간 강의(포커스타임) 화면과 함께 서비스에 반영됐습니다. 원본 코드는 보유하고 있지 않아, 이 데모는 실제 서비스 화면을 기준으로 그 편집 인터랙션을 재구성한 것입니다.

04배운 것

개발자가 아닌 사용자를 위한 화면은 기능을 늘리는 것보다 동작을 줄이는 것이 답이라는 것 — 인터랙션의 최소 단위를 정하는 일이 UX 설계의 시작이라는 것을 배웠습니다.

기술 노트

  • ·과목 팔레트 선택 → 셀 클릭 배치, 재클릭 삭제의 직관적 편집 플로우
  • ·CSS Grid 기반 요일 × 교시 레이아웃
  • ·교사용 시간표 관리·수업 추가 화면으로 구현

관련 프로젝트

교육용 비디오 스트리밍 플랫폼

다른 데모