콘텐츠로 이동

반응형 정책

디자이너가 주요 분기점(브레이크포인트)을 잡고 그 사이 값은 개발이 처리한다. 모바일 유입이 많아 반응형은 필수지만, 실제 사용 환경(태블릿/PC) 비중에 따라 우선순위를 차등 적용한다.

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

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

원칙

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

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

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

미해결 — 스터디룸 화면

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

관련