반응형 PRD (개요)¶

학생이 한 명당 태블릿 한 대를 쓰는 환경을 겨냥해, 디바이스를 가리지 않고 디에듀를 쓸 수 있게 만드는 작업이다(MS3). 이 문서는 왜 하는지, 어디까지 하는지, 아직 안 풀린 결정이 무엇인지를 다룬다. 브레이크포인트나 컴포넌트 변형 같은 실제 규칙 값은 responsive에 모아 두고, 여기서는 요지만 짚는다.

목표 & 성공 기준 (지표)¶

목표: 수업노트·질문·피드백을 디바이스 무관하게 상시 확인. 모바일 유입·교육용 태블릿 사용 흡수.
성공 기준(가설): 모바일/태블릿 핵심 플로우 완주율, 레이아웃 깨짐·CLS 회귀 0, 로그인 전 페이지 반응형 완성도.

대상 페르소나¶

학생 — 태블릿으로 강의·문제 풀이·수업노트 확인.
학부모·잠재 고객 — 로그인 전 소개·강사 목록을 모바일에서 탐색. 역할 모델 member.

범위 (포함 / 제외)¶

In: 기존 화면의 디바이스 폭 대응(로그인 전 우선 → 로그인 후 점진). 표현 계층 한정.
Out: 도메인/API 변경, 네이티브 앱.

요구사항 (유저 스토리 · 기능)¶

범위·우선순위 (논의 요약)¶

반응형은 디자인·기획·개발 리소스가 큰 작업이나, 모바일 유입이 많고 교육 환경에서 태블릿/PC 사용이 많아 필수. 방향은 "이왕이면 모바일 우선(Mobile-first)으로 넓혀나간다".
로그인 전 페이지(뭐하는 사이트인지 알림)는 반응형 우선 처리, 로그인 후는 핵심 기능 위주로 점진 적용. 관리 공간은 태블릿/PC 비중이 높을 것으로 추정.

적용 값 요지¶

세부 규칙은 responsive가 갖고 있지만, 감을 잡기 위한 큰 값만 옮겨 두면 이렇다. 브레이크포인트는 1200(PC) / 768(태블릿) / 360(모바일) 세 개다. 1200 이상에선 콘텐츠 폭을 그대로 두고 좌우 여백만 넓히고, 768에선 사이드바(LNB)를 탭으로 바꾸며, 360에선 3열 카드를 1열로 쌓는다.

근거¶

기획 배경(MS3 반응형)과 두 차례 논의에서 방향이 잡혔다. 1차에선 리소스가 크지만 교육 환경 특성상 필수라는 점, 그리고 Mobile-first가 모바일 품질과 리소스 효율 양쪽에 유리하다는 점을 확인했다. 2차에선 브레이크포인트를 셋으로 줄여 확정했다. 사이드바·푸터·카드 2종·프로필 프리뷰 등 화면별 수정 내역은 416 디자인 수정사항에 남아 있다.

오픈 이슈¶

열린 결정 (스터디룸 화면)¶

스터디룸 프로필 추가로 1200 기준 가로 한 번에 표시 어려움 → ① 사이드바 유지(프로필 가로 동반 불가) vs ② LNB 삭제 후 헤더 접근(네비 구조 변경, 수정 범위 큼). 개발 검토 필요.