마스터-디테일 레이아웃 시스템
목적
마스터-디테일 레이아웃 시스템(분할 창 또는 목록-상세 UI라고도 함)은 기본 항목 목록(마스터 창)을 탐색하면서 현재 선택된 레코드의 포괄적인 속성, 컨텍스트 작업 및 깊이 중첩된 기록을 인접한 동기화된 작업 공간(디테일 창)에 표시하는 표준화된 시각적 레이아웃 및 상호작용 프레임워크를 제공합니다.
마스터-디테일 패턴은 이메일 클라이언트, 고객 지원 헬프데스크, CRM 거래 조회기, 코드 리뷰 플랫폼, 감사 로그, 클라우드 리소스 콘솔과 같은 고효율 웹 생산성 애플리케이션의 기본입니다.
효과적인 마스터-디테일 인터페이스를 설계하려면 정확한 공간 비율 설정, 독립적인 수직 컨테이너(전역 페이지 스크롤 방지), 명확한 시각적 선택 상태, 원활한 다중 창 동기화, 그리고 모바일 뷰포트에서 분할 창에서 단일 창 뒤로 가기 스택 탐색으로의 부드러운 전환이 필요하며, 이 모든 과정은 포커스 관리 및 키보드 탐색을 위한 WCAG 2.1 AA 접근성 지침을 엄격히 준수해야 합니다.
사용 사례
- 헬프데스크 및 고객 지원 포털: 마스터 창에서 열린 티켓 목록을 탐색하면서 디테일 창에서 전체 스레드 대화, 고객 기록, 내부 메모를 읽습니다.
- 엔터프라이즈 CRM 및 영업 파이프라인: 마스터 창에서 연락처 또는 계정을 스캔하면서 디테일 창에서 거래 단계 기록, 예정된 활동, 연락처 세부 정보를 검사합니다.
- 웹메일 및 메시징 애플리케이션: 왼쪽 마스터 열에서 받은 편지함 피드를 검토하면서 오른쪽 디테일 창에서 활성 메시지를 읽거나, 답장하거나, 보관합니다.
- DevOps 및 클라우드 인스펙터 대시보드: 마스터 창에서 서버 인스턴스, 로그 스트림 또는 배포 파이프라인을 필터링하면서 디테일 창에서 실시간 메트릭, 오류 추적 및 YAML 구성을 검사합니다.
- HR 및 지원자 추적 시스템(ATS):) 지원자 애플리케이션을 탐색하면서 이력서, 면접관 평가 및 일정 도구를 나란히 검토합니다.
사용하지 말아야 할 경우
- 다중 행 비교가 필요한 테이블 형식 데이터 작업 공간: 사용자가 여러 구조화된 속성에서 수십 개의 레코드를 동시에 비교해야 하는 경우
data-table-ui-system을 사용하세요. - 워크플로 파이프라인 보드: 카드가 개별 파이프라인 단계를 가로질러 수평으로 이동되는 상태-열 워크플로의 경우
kanban-board-ui-system을 사용하세요. - 계층적 문서 트리: 깊이 중첩된 트리 구조 문서 탐색(예: 파일 시스템 디렉터리 트리)의 경우
tree-view-navigation-system을 사용하세요. - 선형 단계별 마법사: 각 보기가 이전 보기를 기반으로 하는 순차적 다중 단계 양식의 경우
step-progress-system또는multi-step-form-implementation을 사용하세요. - 간단한 독립형 랜딩 페이지: 콘텐츠가 단일 열에서 수직으로 흐르는 마케팅 랜딩 페이지 또는 간단한 선형 기사 피드의 경우
article-layout-system또는section-composition-system을 사용하세요.
입력
- 정보 아키텍처 및 항목 스키마: 마스터 항목 카드(예: 상태 배지, 제목/주제, 기본 메타데이터, 타임스탬프)와 디테일 작업 공간(전체 레코드 본문, 활동 기록, 관련 레코드, 컨텍스트 작업 모음)에 렌더링할 속성입니다.
- 뷰포트 셸 컨텍스트: 외부 애플리케이션 셸(
dashboard-layout-system또는sidebar-navigation-system)에서 제공하는 레이아웃 경계입니다. - 창 너비 비율 기본 설정: 열 크기 조정 요구 사항(예: 고정 마스터 너비
360px+ 유동 디테일flex: 1, 또는 백분율 분할35% / 65%). - 디자인 토큰: 표면 고도, 중립 테두리, 포커스 링 표시기 및 타이포그래피 척도(
accessible-color-system,elevation-and-depth-system,fluid-spacing-system).
출력
- 분할 창 레이아웃 사양: 고정 대 유동 창 비율, 독립적인 수직 스크롤 컨테이너(
overflow-y: auto), 시각적 구분선에 대한 CSS Grid / Flexbox 공간 정의입니다. - 마스터 항목 선택 및 활성 상태 청사진: 읽지 않음, 호버, 포커스, 선택됨(
aria-selected="true"), 목록 내 다중 선택 체크박스 상태에 대한 시각적 사양입니다. - 디테일 작업 공간 계층 구조 및 헤더 해부학: 디테일 보기 작업 모음(고정 헤더, 뒤로 가기 버튼, 상태 컨트롤, 기본/보조 작업 트리거) 및 콘텐츠 탭/섹션의 공간 레이아웃입니다.
- 반응형 뷰포트 적응 모델: 데스크톱/노트북의 이중 창 분할 보기에서 태블릿/모바일 화면의 단일 창 뒤로 가기 스택 탐색(애니메이션 패널 슬라이드 포함)으로 전환하는 단계별 레이아웃 전환 규칙입니다.
- 접근 가능한 키보드 및 ARIA 상호작용 모델: 포커스 트래핑, 로빙
tabindex또는 APG Listbox 포커스 라우팅, ARIA 랜드마크(role="region",aria-controls),aria-live="polite"를 통한 화면 판독기 상태 알림입니다.
워크플로
1. 이중 창 캔버스 컨테이너 설정
애플리케이션 셸(dashboard-layout-system) 내에 외부 마스터-디테일 래퍼를 구성합니다:
- 컨테이너 뷰포트 잠금: 외부 래퍼를
display: flex; height: 100vh; max-height: 100vh; overflow: hidden;(또는 부모 대시보드 콘텐츠 영역 내에 맞춤)으로 설정하여 전체 레이아웃 높이를 고정하고 브라우저 수준의 창 스크롤을 제거합니다. - 분할 비율 열 그리드: CSS Grid 또는 Flexbox를 사용하여 분할 창 비율을 정의합니다:
- 고정 마스터 패턴(받은 편지함/CRM에 권장):
grid-template-columns: minmax(300px, 380px) 1fr;(마스터 창은 300px에서 380px 사이의 편안한 스캔 너비를 유지하고, 디테일 창은 나머지 모든 가로 공간을 차지합니다). - 비례 분할 패턴: 밀집 검사 도구의 경우
grid-template-columns: 35% 65%;또는40% 60%.
- 고정 마스터 패턴(받은 편지함/CRM에 권장):
- 시각적 창 구분선: 창 사이에 1px 실선 테두리(
border-right: 1px solid var(--border-subtle)) 또는 접근 가능한 크기 조절 가능 분할 막대(accessible-split-pane-implementation)를 삽입합니다.
2. 마스터 목록 창 구조 설계
마스터 창은 레코드 컬렉션의 빠른 스캔 인덱스 역할을 합니다:
- 고정 헤더 영역: 마스터 창 상단에 고정 검색 및 필터 컨트롤 막대를 배치합니다(
flex-shrink: 0; padding: 12px 16px; border-bottom: 1px solid var(--border-subtle); background: var(--surface-card)). 빠른 검색 필드(search-interface-system), 필터 칩 및 대량 작업 트리거를 포함합니다. - 독립적인 스크롤 가능 항목 목록: 목록 항목을
flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;(role="list"또는role="listbox")가 있는 컨테이너로 감쌉니다. - 마스터 항목 카드 해부학:
- 상단 행: 기본 식별자 / 작성자(
font-weight: 600; font-size: 0.875rem; color: var(--text-primary)), 상태 알약/배지, 타임스탬프(font-size: 0.75rem; color: var(--text-muted)). - 중간 행: 항목 주제 또는 제목(
font-weight: 500; font-size: 0.875rem; color: var(--text-primary); text-truncate: 1 line). - 하단 행: 스니펫 또는 미리보기 텍스트(
font-size: 0.8125rem; color: var(--text-secondary); line-clamp: 2), 태그/카테고리, 담당자 아바타(user-avatar-system).
- 상단 행: 기본 식별자 / 작성자(
- 상태 스타일 지정 규칙:
- 읽지 않음 / 처리되지 않음 상태: 굵은 제목 텍스트와 미묘한 시각적 단서(예: 왼쪽에 8x8px 기본 강조 점).
- 호버 상태: 배경 강조(
background: var(--surface-hover); cursor: pointer). - 활성 / 선택됨 상태: 뚜렷한 활성 표면 배경(
background: var(--surface-active-subtle)), 왼쪽 테두리에 3px 실선 기본 강조 표시기 스트립(border-left: 3px solid var(--brand-primary)),aria-selected="true". - 포커스 표시 상태: 매우 잘 보이는 포커스 윤곽선(
outline: 2px solid var(--focus-ring); outline-offset: -2px).
3. 디테일 작업 공간 창 구조 구축
디테일 창은 활성 레코드의 전체 컨텍스트와 작업 공간을 렌더링합니다:
- 빈 상태 표시: 마스터 창에서 레코드가 선택되지 않은 경우 디테일 창에 접근 가능한 빈 상태(
empty-state-system)를 표시합니다. 미묘한 아이콘, 명확한 헤드라인("선택된 레코드 없음"), 유용한 힌트("세부 정보를 보려면 목록에서 항목을 선택하세요")를 포함합니다. - 고정 디테일 작업 모음: 디테일 창 내부에 지속적인 상단 헤더 막대를 렌더링합니다(
position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; padding: 12px 24px; border-bottom: 1px solid var(--border-subtle); background: var(--surface-card)):- 모바일 뒤로 가기 트리거: 데스크톱에서 숨겨진 "목록으로 돌아가기" 버튼을 포함합니다(
<button class="mobile-back-btn">← 뒤로</button>). - 레코드 식별: 레코드 ID / 제목 요약(
font-weight: 600; font-size: 1rem). - 액션 컨트롤: 기본 액션 버튼(예: "답장", "편집", "할당", "삭제")은
button-and-action-system을 사용하여 스타일이 지정됩니다.
- 모바일 뒤로 가기 트리거: 데스크톱에서 숨겨진 "목록으로 돌아가기" 버튼을 포함합니다(
- 독립적인 콘텐츠 스크롤 영역: 주요 디테일 콘텐츠 본문을 스크롤 컨테이너로 감쌉니다(
flex: 1; overflow-y: auto; padding: 24px). - 디테일 콘텐츠 레이아웃:
- 헤더 섹션: H1 레코드 제목, 상태 배지, 메타데이터 그리드(생성 날짜, 작성자, 우선순위, 담당자).
- 기본 본문 영역: 전체 설명, HTML 스레드 메시지 또는 구성 코드 블록.
- 탭이 있는 하위 섹션: "활동 기록", "첨부 파일", "감사 로그", "관련 레코드"를 구분하려면 탭(
tab-ui-system)을 사용합니다.
4. 모바일 및 태블릿 반응형 뒤로 가기 스택 탐색 구현
768px(또는 밀집 앱의 경우 1024px)보다 좁은 화면에서는 나란히 표시되는 창으로 인해 읽을 수 없고 좁은 텍스트와 비좁은 버튼이 발생합니다. 레이아웃을 단일 창 뒤로 가기 스택 모델로 변환합니다:
- 모바일 단일 창 보기: 한 번에 하나의 창만 전체 뷰포트 너비(
width: 100%)로 렌더링합니다. - 탐색 상태 머신:
- 상태 A (마스터 활성): 마스터 목록 창이 100% 너비를 차지합니다. 디테일 창은 시각적으로 숨겨집니다(
display: none또는transform: translateX(100%)로 화면 밖으로 변환). - 상태 B (디테일 활성): 사용자가 마스터 항목을 탭하면 뷰포트가 전환됩니다. 디테일 창이 100% 너비를 차지하고 마스터 창은 숨겨집니다.
- 상태 A (마스터 활성): 마스터 목록 창이 100% 너비를 차지합니다. 디테일 창은 시각적으로 숨겨집니다(
- 모바일 뒤로 가기 버튼: 상태 B에서 디테일 창은 눈에 띄는 왼쪽 상단 "목록으로 돌아가기" 버튼을 표시합니다. 버튼을 탭하면 상태 머신이 상태 A로 재설정되고 키보드 포커스가 이전에 선택된 마스터 목록 항목으로 돌아갑니다.
- 뷰포트 애니메이션: 부드러운 슬라이딩 보기 전환(
view-transitions-implementation또는 수평 CSS 변환transform 0.25s ease-in-out)을 사용하여 방향 탐색을 강화합니다(디테일 안으로 왼쪽으로 슬라이드, 마스터 목록으로 오른쪽으로 슬라이드).
5. 접근 가능한 포커스 및 화면 판독기 상호작용 보장
- ARIA 랜드마크 및 영역 역할: 마스터 창 컨테이너에
role="region" aria-label="항목 목록"을 할당하고 디테일 창 컨테이너에role="region" aria-label="항목 디테일 작업 공간"을 할당합니다. - Listbox / 선택 마크업: 마스터 목록이 단일 선택 위젯으로 동작하는 경우 목록에
role="listbox" aria-label="..."을 적용하고 목록 항목에role="option" aria-selected="true|false"를 적용합니다. 또는aria-current="page"또는aria-current="true"와 함께 표준<nav>를 사용합니다. - 레코드 선택 시 포커스 관리: 사용자가 키보드나 포인터를 사용하여 마스터 항목을 선택하는 경우:
- 사용자가 화살표 키(
위/아래)로 빠르게 스캔하는 경우 키보드 포커스를 마스터 목록 안에 유지합니다. - 디테일 창 DOM을 비동기식으로 업데이트하고
aria-live="polite"상태 영역을 통해 레코드 로딩을 알립니다: "티켓 #1042 로드됨: 결제 처리 오류". - 사용자가 선택한 목록 항목에서
Enter또는Tab을 누르면 디테일 창의 기본 작업 또는 헤더 H1(tabindex="-1")로 포커스를 원활하게 이동합니다.
- 사용자가 화살표 키(
- 모바일 뷰포트 포커스 트랩 및 복원: 모바일에서 디테일 보기로 전환할 때 자동으로 포커스를 모바일 뒤로 가기 버튼 또는 디테일 헤더로 이동합니다. 마스터 보기로 돌아갈 때 이전에 활성 상태였던 마스터 항목으로 포커스를 복원합니다.
결정 규칙
창 레이아웃 및 분할 전략
| 뷰포트 너비 | 권장 레이아웃 패턴 | 마스터 창 너비 | 디테일 창 너비 |
|---|---|---|---|
| 와이드 데스크톱 (>1280px) | 이중 창 분할 보기(또는 사이드바가 있는 3창) | 고정 360px - 400px | 유동 flex: 1 (min-width: 600px) |
| 표준 데스크톱 (1024px - 1279px) | 이중 창 분할 보기 | 고정 320px - 350px | 유동 flex: 1 (min-width: 480px) |
| 태블릿 (768px - 1023px) | 좁은 이중 창 또는 단일 창 스택 | 고정 280px - 300px (또는 접을 수 있음) | 유동 flex: 1 |
| 모바일 (<768px) | 단일 창 뒤로 가기 스택 보기 | 100% (상태 A) | 100% (상태 B) |
마스터 목록 선택 대 포커스 모델
- 포커스 시 자동 선택 (빠른 스캔):
위또는아래화살표 키를 누르면 활성 선택이 즉시 변경되고 디테일 창이 실시간으로 업데이트됩니다. 이메일 읽기, 로그 감사, 대량 티켓 검사에 권장됩니다. - 작업 시 명시적 선택 (Enter / 클릭 누름): 화살표 키로 마스터 항목을 탐색하면 디테일 창을 업데이트하지 않고 시각적 포커스 링만 이동합니다. 디테일 창은 사용자가
Enter,Space를 명시적으로 누르거나 클릭할 때만 업데이트됩니다. 디테일 레코드 로딩에 무거운 네트워크 API 요청이나 양식 상태 편집이 포함될 때 권장됩니다.
제약 조건
- 접근성 (WCAG 2.1 AA):
- SC 2.1.1 키보드: 사용자는 키보드 컨트롤만으로 마스터 항목을 스크롤하고, 레코드를 선택하고, 디테일 작업 공간으로 이동하고, 작업을 트리거하고, 마스터 목록으로 돌아올 수 있어야 합니다.
- SC 2.4.7 포커스 표시: 활성 및 포커스된 마스터 항목은 배경에 대해 최소 3:1 대비 비율을 충족하는 클리핑되지 않은 포커스 링을 제공해야 합니다.
- SC 4.1.2 이름, 역할, 값: 마스터 항목은
aria-selected="true"또는aria-current="true"를 통해 보조 기술에 활성/선택 상태를 명시적으로 전달해야 합니다. - SC 2.5.8 대상 크기: 마스터 목록 항목 및 디테일 작업 버튼의 탭 대상은 최소 24x24px의 대상 영역을 제공해야 합니다(모바일 터치 디스플레이에서는 44x44px 권장).
- 레이아웃 포함 및 CLS: ...
[번역을 위해 잘림]