콘텐츠로 이동
✍️ 수정가능누구나 고쳐도 됩니다. 고치면 하단 frontmatter의 갱신일·작성자·변경요약을 남겨 주세요.작성 Claude · 2026-06-04 · v12 재편·raw 컴파일·인간화

반응형 정책

반응형 규칙은 여기 한 곳에서 정의하고, 기능 페이지(반응형 기능)는 이 문서를 가리킨다. 핵심은 셋이다. 디자이너가 주요 브레이크포인트를 잡고, 그 사이 값은 개발이 처리하며, 화면마다 비중이 다르니 우선순위를 차등한다.

브레이크포인트 (2차 논의에서 3개로 축소)

분기점 폭 규칙
PC 1200px 기준. 1200 이상은 내부 콘텐츠 폭 유지 + 좌우 여백 확대
태블릿 768px 내부 콘텐츠 폭 축소 → LNB(사이드바)를 탭 형식으로 전환
모바일 360px 3열 카드 → 세로 1열 스택, 한 손 조작 최적화

원칙

  • Mobile-first 지향: 제약 큰 모바일을 먼저 설계하면 핵심 우선순위가 잡히고 브레이크포인트도 최소화. (데스크탑 우선 + 모바일 '추가' 방식은 모바일 품질 저하 + 리소스 과다.)
  • 화면별 비중 차등: 모바일 유입은 많지만 실제 작업이 태블릿/PC인 케이스(관리 공간)는 모바일을 보조 채널로. 로그인 전 페이지는 반응형 우선, 로그인 후는 핵심 콘텐츠만 남기고 기능 덜어냄.
  • 반응형은 고비용: 디자인(시안 수)·기획(디바이스별 UX)·개발(분기 CSS·QA 디바이스)에 리소스 소요 → 우선순위 합의가 선행. 작업 순서: 기획 → 디자인 → 개발 순차.

1차 개선 범위 (모바일 반응형 대상)

모바일 반응형을 먼저 입힐 화면은 다음으로 좁혔다.

  • 로그인 전(비회원): 서비스 소개, 강사 목록(상단바 접근).
  • 로그인 후 대시보드: 수업노트 확인(작성 X), 학생 질문 확인, 보유 학생 수·스터디룸 확인.

미해결 — 스터디룸 화면

스터디룸 프로필 추가로 1200px 가로 한 화면에 다 못 담음. 두 안 대기: - (A) LNB 삭제 + 헤더 접근 — 네비 구조 변경, 수정 범위 큼. - (B) 사이드바 유지 — 단 스터디룸 프로필 가로 동시 노출 불가.

관련