분할 화면 레이아웃 시스템
목적
Split-Screen Layout System은 듀얼 패널 웹 페이지를 표준화되고 반응형이며 접근성 높은 디자인 프레임워크로 구조화합니다. 분할 화면 디자인은 뷰포트를 두 개의 구분된 가로 또는 세로 영역으로 나누며, 일반적으로 시각적/미디어 패널(브랜드 일러스트, 비디오, 인터랙티브 제품 캔버스, 추천사 스포트라이트)과 대화형/콘텐츠 패널(인증 폼, 온보딩 단계, 가치 제안 내러티브, 기능 구성기)을 짝지어 구성합니다.
효과적인 분할 화면 인터페이스를 설계하려면 공간 비율 균형 유지, 두 패널 간의 동등하거나 의도적인 시각적 계층 구조 보장, 이중 스크롤바 버그 없이 개별 패널 스크롤 독립성 유지, 비대칭 배경 색상 테마 간의 고대비 전환 관리, WCAG 2.1 AA 기준을 충족하는 논리적 읽기 순서와 포커스 관리를 유지하는 반응형 모바일 스태킹 구현이 필요합니다.
사용 사례
- 인증 및 게이트웨이 인터페이스 (로그인 / 회원가입): 한쪽 패널에는 대화형 로그인 또는 등록 폼을 배치하고, 인접 패널에는 임팩트 있는 브랜드 아트워크, 고객 추천사, 제품 기능 하이라이트를 배치합니다.
- 제품 랜딩 페이지 히어로: 왼쪽 패널에 전환율이 높은 헤드라인 내러티브와 주요 CTA를 배치하고, 오른쪽 패널에는 인터랙티브 3D 모델, 앱 UI 미리보기, 또는 비디오 데모를 전시합니다.
- 온보딩 및 다단계 마법사 플로우: 한쪽에는 지속적인 단계 안내, 진행률 표시기, 또는 미리보기 시각 자료를 결합하고, 다른 쪽에는 활성 입력 필드를 배치합니다.
- 비교 및 듀얼 기능 쇼케이스: 두 개의 대조되는 제품, 요금제, 또는 '전후 변환'을 독립적인 시각적 계층 구조로 나란히 표시합니다.
- 이벤트 및 웨비나 등록 페이지: 발표자 약력과 일정 아젠다를 고정 등록 폼 옆에 구조화합니다.
사용하지 말아야 할 경우
- 다중 레코드 애플리케이션 대시보드: 활성 레코드 작업 공간 옆에 연속적인 목록 탐색이 필요한 생산성 소프트웨어(예: 이메일 받은 편지함, CRM 헬프데스크)에는
master-detail-layout-system을 사용하세요. - 복잡한 다중 열 앱 레이아웃: 지속적인 세로 사이드바 탐색, 상단 명령 모음, 위젯 그리드가 필요한 SaaS 대시보드에는
dashboard-layout-system또는sidebar-navigation-system을 사용하세요. - 고밀도 데이터 그리드: 여러 행과 열에 걸친 구조화된 표 데이터에는
data-table-ui-system또는responsive-grid-system을 사용하세요. - 단일 컬럼 에디토리얼 기사: 방해 없이 세로로 읽기 위한 장문 텍스트 문서나 블로그 게시물에는
article-layout-system또는section-composition-system을 사용하세요.
입력값
- 분할 비율 및 공간 의도: 선호하는 비율(50/50 균형 분할, 60/40 히어로 중심 분할, 또는 40/60 폼 중심 분할).
- 패널 역할 할당: 패널 A(시각적/미디어/브랜드 패널)와 패널 B(대화형/폼/콘텐츠 패널)의 목적 정의.
- 표면 및 테마 페어링 토큰:
accessible-color-system및dark-theme-design-system의 표면 색상 및 테마(예: 어두운 브랜드 아트워크 패널 + 밝은 폼 패널, 또는 이중 밝은 표면). - 미디어 및 콘텐츠 밀도 자산: 임베드할 시각적 자산(이미지, SVG, 비디오 캔버스, 제품 목업) 및 폼/콘텐츠 스키마.
출력값
- 듀얼 패널 캔버스 사양: 데스크톱 분할 비율, 컨테이너 높이 고정(
100vh/100%), 매끄러운 패널 경계에 대한 CSS Grid 레이아웃 정의. - 미디어 포함 및 배경 대비 규칙: 이미지 스케일링(
object-fit: cover), 배경 그라데이션, 시각적 무게 분배, 가독성 오버레이에 대한 CSS 규칙. - 반응형 스태킹 및 모바일 플로우 모델: 가로 나란히 배치된 패널을 DOM 읽기 순서와 우선 콘텐츠 가시성을 유지하면서 세로 쌓임 행으로 변환하는 반응형 중단점 규칙.
- 접근성 ARIA 및 키보드 포커스 청사진: ARIA 랜드마크 영역 정의(
role="region"또는 시맨틱<main>/<aside>), 제목 계층 규칙, WCAG AA 포커스 표시기 관리.
워크플로우
1. 뷰포트 컨테이너 및 패널 형상 설정
외부 분할 화면 래퍼를 구성하고 원치 않는 브라우저 스크롤바를 방지하기 위해 레이아웃 경계를 설정합니다.
- 뷰포트 높이 고정: 전체 화면 경험(예: 인증 페이지 또는 랜딩 히어로)의 경우, 메인 컨테이너를
display: grid; min-height: 100vh; width: 100%; overflow: hidden;으로 설정합니다. - 데스크톱 열 비율:
- 50/50 균형 분할:
grid-template-columns: 1fr 1fr;(동등한 가치 제안이나 인증 페이지에 이상적). - 60/40 기능 분할:
grid-template-columns: 3fr 2fr;(인터랙티브 제품 미리보기에 더 많은 공간을 제공). - 40/60 폼 중심 분할:
grid-template-columns: 2fr 3fr;(브랜드 컨텍스트를 유지하면서 다중 필드 폼 작성을 우선시).
- 50/50 균형 분할:
- 독립 패널 포함: 개별 패널이 오버플로를 적절히 처리(
overflow-y: auto; height: 100%;)하여 하나의 긴 패널이 전체 뷰포트를 늘리거나 이중 스크롤바를 유발하지 않도록 합니다.
2. 시각적 및 미디어 패널 구성 (패널 A)
시각적 패널은 즉각적인 브랜드 참여와 감정적 공감대를 형성합니다.
- 배경 레이어링 및 대비: 패널 A가 어두운 브랜드 색상이나 사진을 사용하는 경우, 내부 타이포그래피가 WCAG AA 대비(≥4.5:1)를 충족하는지 확인합니다.
- 미디어 스케일링 및 프레이밍: 아트워크나 제품 목업을 엄격한 크기 제어(
width: 100%; height: 100%; object-fit: cover;또는object-fit: contain;)가 적용된 컨테이너 요소로 감쌉니다. - 장식 vs. 정보 제공 시각 자료:
- 이미지가 순수하게 장식적인 경우
alt=""및aria-hidden="true"를 적용합니다. - 이미지에 텍스트나 제품 스크린샷이 포함된 경우, 설명적인
alt텍스트나 짝을 이루는 캡션 타이포그래피를 제공합니다.
- 이미지가 순수하게 장식적인 경우
3. 대화형 및 콘텐츠 패널 구성 (패널 B)
대화형 패널은 사용자 행동(폼 입력, 전환 클릭, 읽기)을 유도합니다.
- 콘텐츠 정렬 및 패딩:
display: flex; flex-direction: column; justify-content: center; align-items: center; padding: clamp(2rem, 5vw, 4rem);을 사용하여 패널 B 내에서 콘텐츠를 세로 중앙에 정렬합니다. - 폼 너비 고정: 폼 요소를 읽을 수 있는 최대 너비(
max-width: 440px; width: 100%;)로 제한하여 초광각 화면에서 입력 필드가 불편할 정도로 넓게 늘어나지 않도록 합니다. - 터치 대상 및 입력 계층 구조:
button-and-action-system및form-design-system을 사용하여 기본 버튼, 폼 입력 및 링크를 표준화하고, 터치 뷰포트에서 최소 44x44px의 탭 대상을 보장합니다.
4. 반응형 모바일 스태킹 및 우선 순위 흐름 구성
모바일 뷰포트(일반적으로 < 768px 또는 < 1024px)에서는 나란히 배치된 패널이 비좁아져 읽을 수 없게 됩니다.
- 중단점 스태킹 전환:
grid-template-columns를 단일 열 레이아웃(grid-template-columns: 1fr; min-height: auto; overflow: visible;)으로 전환합니다. - DOM 순서 vs. 시각적 스태킹 우선 순위:
- 인증 및 폼 페이지: 대화형 폼(패널 B)이 주요 사용자 목표입니다. 패널 B를 DOM에서 먼저 배치하여 모바일 사용자가 긴 마케팅 아트워크를 스크롤하지 않고 입력 필드를 즉시 볼 수 있도록 합니다. CSS
order또는 자연스러운 DOM 배치를 사용합니다. - 히어로 및 쇼케이스 페이지: 내러티브 헤드라인(패널 B)을 먼저 배치하고, 제품 시각 자료(패널 A)를 그 뒤에 배치합니다.
- 인증 및 폼 페이지: 대화형 폼(패널 B)이 주요 사용자 목표입니다. 패널 B를 DOM에서 먼저 배치하여 모바일 사용자가 긴 마케팅 아트워크를 스크롤하지 않고 입력 필드를 즉시 볼 수 있도록 합니다. CSS
- 미디어 높이 축소: 모바일 스택 뷰에서는 시각적 패널 높이를 줄여(
max-height: 280px또는aspect-ratio: 16/9) 모바일 화면 전체를 지배하지 않도록 합니다.
5. 키보드 포커스 및 ARIA 랜드마크 구현
- 시맨틱 구조 및 랜드마크:
- 기본 콘텐츠/폼 패널을
<main>또는role="main"으로 감쌉니다. - 시각적/브랜드 프레젠테이션 패널을
<aside aria-label="Product Showcase">또는<section aria-label="Brand Highlights">로 감쌉니다.
- 기본 콘텐츠/폼 패널을
- 읽기 및 포커스 순서: DOM 탭 순서가 혼란스러운 tabindex 점프(
tabindex="0"또는 자연 포커스) 없이 시각적 레이아웃과 일치하도록 왼쪽에서 오른쪽(또는 모바일에서는 위에서 아래로) 자연스럽게 흐르도록 합니다. - 테마 경계를 넘는 포커스 링: 포커스 링이 어두운 시각적 패널과 밝은 폼 패널 모두에서 3:1 대비를 유지하도록 합니다(
outline: 2px solid var(--focus-ring); outline-offset: 2px;).
결정 규칙
레이아웃 분할 비율 및 사용 사례 매핑
| 페이지 유형 | 데스크톱 분할 비율 | 모바일 스택 순서 | 권장 패널 역할 |
|---|---|---|---|
| 로그인 / 회원가입 인증 | 50 / 50 분할 | 폼 상단, 미디어 하단 | 패널 A: 브랜드 아트 / 추천사; 패널 B: 로그인 폼 (<main>) |
| 제품 히어로 섹션 | 60 / 40 분할 | 카피 상단, 미디어 하단 | 패널 A: 카피 및 CTA (<main>); 패널 B: 인터랙티브 앱 캔버스 |
| 온보딩 마법사 | 40 / 60 분할 | 단계 상단, 입력 하단 | 패널 A: 단계 체크리스트 / 미리보기; 패널 B: 활성 폼 필드 |
| 이중 비교 | 50 / 50 분할 | 옵션 A 상단, 옵션 B 하단 | 패널 A: 티어 A / 전; 패널 B: 티어 B / 후 |
비대칭 배경 대비 가이드라인
- 어두운 시각적 패널 + 밝은 폼 패널: 각 패널에 대해 독립적인 CSS 사용자 정의 속성(
--pane-bg,--pane-text,--pane-border)을 설정합니다. 분할 경계를 넘어 텍스트 색상을 상속하지 마십시오. - 분할 구분선: 이중 밝음 또는 이중 어두움 분할의 경우, 미묘한 1px 테두리(
border-right: 1px solid var(--border-subtle))를 삽입하여 패널 간의 시각적 분리를 설정합니다.
제약 조건
- 접근성 (WCAG 2.1 AA):
- SC 1.4.3 대비 (최소): 두 패널의 텍스트는 각각의 배경에 대해 최소 4.5:1의 명암비를 충족해야 합니다.
- SC 1.3.2 의미 있는 순서: 시각적 탭 순서와 스크린 리더 읽기 순서는 페이지의 논리적 우선 순위(인증 페이지에서는 대화형 폼 우선, 히어로 페이지에서는 가치 제안 헤드라인 우선)와 일치해야 합니다.
- SC 2.4.7 포커스 가시성: 포커스된 입력 필드와 버튼은 패널 표면 색상 대비 ≥3:1인 잘린 포커스 표시기를 가져야 합니다.
- SC 2.5.8 대상 크기: 모든 대화형 트리거는 최소 탭 대상(최소 24x24px, 터치 환경에서는 44x44px 권장)을 충족해야 합니다.
- 레이아웃 이동 및 오버플로 방지: 전체 화면 데스크톱 분할 레이아웃은 메인 래퍼에
overflow: hidden을 사용하고 개별 스크롤 가능 패널 내부에overflow-y: auto를 사용하여 창 수준의 레이아웃 쓰랙싱(thrashing)과 이중 스크롤바를 방지해야 합니다. - 타이포그래피 줄 길이: 두 패널의 텍스트 측정값은 편안한 가독성을 유지하기 위해 줄당 45~75자(
ch단위) 사이를 유지해야 합니다.
일반적인 실패 패턴
- 이중 스크롤바 함정: 하위 요소에
height: 100vh를 설정하면서 컨테이너 오버플로를 잠그지 않아 브라우저 창과 하위 패널 모두에 독립적인 세로 스크롤바가 표시되는 경우. - 모바일 기본 콘텐츠 가림: 모바일 DOM 순서에서 로그인 폼보다 거대한 시각적 아트 패널을 먼저 배치하여 모바일 사용자가 사용자 이름 필드에 도달하기 위해 600px의 마케팅 이미지를 스크롤해야 하는 경우.
- 아트 위의 확인되지 않은 텍스트 과부하: 어두운 그라데이션 오버레이(
rgba(0,0,0,0.6)) 없이 상세한 배경 사진 위에 직접 텍스트를 렌더링하여 텍스트를 읽을 수 없게 만들고 WCAG AA 대비를 충족하지 못하는 경우. - 제한 없는 폼 입력 늘어남: 50/50 분할 데스크톱 뷰에서 폼 필드가 800px 너비로 늘어나 어색한 터치 대상과 시각적 왜곡을 생성하는 경우.
- 불균등한 시각적 무게: 한 패널을 지나치게 어둡고 채도가 높게 만드는 반면, 인접 패널은 작은 텍스트가 있는 평범한 흰색으로 만들어 시각적 불균형과 높은 눈의 피로를 유발하는 경우.
검증 기준
- 뷰포트 컨테이너가 창 이중 스크롤바 없이 데스크톱 분할 비율(
50/50또는60/40)을 깔끔하게 관리합니다. - 반응형 모바일 중단점(
<768px)이 미디어 요소에 적절한 높이 제약 조건과 함께 패널을 단일 열로 쌓습니다. - DOM 읽기 순서가 기본 작업(예: 모바일 로그인 화면에서 인증 폼 우선)을 우선시합니다.
- 어둡고 밝은 분할 패널 모두에서 텍스트 대비가 WCAG AA(≥4.5:1 비율)를 충족합니다.
- 대화형 입력 및 버튼이 제한된 너비(
max-width: 440px)와 ≥44x44px의 터치 대상을 갖습니다. - 시맨틱 ARIA 랜드마크(
<main>,<aside>,role="region")가 두 패널을 적절히 구분합니다.