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

인터랙션 & 정보구조 패턴

d-edu 화면 설계의 반복 패턴. 상태 전이·정보구조·내비게이션을 표준화해 디자인↔개발 해석의 여지를 없앤다.

상태 패턴 (모든 화면 필수 정의)

축 값
정보량 Ideal / Min / Max / None (+스켈레톤)
화면 상태 Empty / Loading / Error / Active / Inactive
버튼 상태 Normal / Rollover / MouseDown / Active
액션 시점 최초 방문 / 조건(24h 등) / 트리거
생명주기 다음 페이지에서 소멸 vs 유지

빈 상태는 문구까지 명시(예: "작성된 노트가 없습니다"). 누락 시 개발이 추측 → 버그.

정보구조(IA) & 내비게이션

  • LNB(사이드바) 패턴: PC 사이드바 → 태블릿에서 탭 형식 전환(브레이크포인트 규칙은 반응형 정책).
  • 접근 경로 전수: 뒤로가기·새로고침·저장 시점·화면 내 모든 버튼까지 흐름 정의.
  • 브레드크럼: 상위 진입 경로 명시(홈 > 대시보드 > 스터디룸 상세 > 노트 작성).
  • 화면 전환 흐름: "어디서 왔고 어디로 가는지"를 시안에 표기.

컴포넌트 인터랙션 패턴

  • 컴파운드 패턴: 범용 UI는 Root + Sub(예: DropdownMenu.Trigger/.Content/.Item). 변형은 cva로 관리, Radix Primitives 기반. → design-system.
  • 도메인 위젯: 강결합 UI(Tabs, Filter, MemberProfile.Avatar/.RoleBadge)는 feature 내 컴파운드, generic해지면 shared로 승격.

핸드오프 연결

상태·인터랙션 명세가 곧 개발·QA 기준 문서. 전달 형식은 dev-handoff, 사용성 검증은 ux-decisions.

관련