반응형 디자인¶

반응형은 새 화면을 그리는 일이 아니라 이미 있는 화면을 디바이스 폭에 맞춰 변형하는 일이다. 그래서 디자인 산출물도 responsive의 규칙을 각 화면에 적용한 변형 시안이 된다. 이 문서는 그 변형을 화면 차원에서 어떻게 적용하는지에 대한 메모이고, 기획 배경은 prd, 구현은 frd에 있다.

사용자 플로우¶

변형 대상은 기존 화면(로그인 전 소개·강사 목록, 로그인 후 대시보드·스터디룸). 신규 플로우 없음.
1차 적용 범위: 로그인 전 페이지 우선(반응형 전면), 로그인 후는 핵심 콘텐츠 위주 점진 적용.

화면 · 컴포넌트 (Figma 링크)¶

핵심 변형 컴포넌트: LNB(사이드바) ↔ 탭 전환(태블릿 768), 3열 카드 ↔ 1열 스택(모바일 360).
사이드바·푸터·카드 2종·프로필 프리뷰 등 화면별 수정 내역은 416 디자인 수정사항에 남아 있다.
토큰·컴포넌트 → design-system. 변형 규칙 단일 출처 responsive.

인터랙션 · 상태¶

태블릿에서 LNB가 탭으로 바뀔 때 하위 스터디룸 리스트 접근 경로 보존. 모바일은 한 손 조작 최적화.
브레이크포인트 경계에서 레이아웃 깨짐·시프트 방지. 상세 패턴은 responsive §원칙.

접근성¶

LNB↔탭 전환 시 포커스·랜드마크 유지. 디바이스별 터치 타깃 크기·대비 확보.

개발 핸드오프 노트¶

브레이크포인트(1200/768/360)·여백 조정·디바이스별 A11y는 responsive를 단일 출처로 참조. 브레이크포인트별 분기 처리·SSR/CSR 영향은 frd. 핸드오프 규약 → dev-handoff.

미해결(디자인↔개발 합의 필요): 스터디룸 화면은 프로필 추가로 1200px 한 화면 수용 불가 → (A) LNB 삭제+헤더 접근(수정 범위 큼) vs (B) 사이드바 유지(프로필 가로 동반 불가). 출처 반응형 논의 2차 · responsive §미해결.