화면 배치

콘텐츠에 맞는 폭과 여백

1. 콘텐츠 목적에 따라 최대 폭을 고릅니다

읽기·입력 중심

720px

긴 본문과 폼을 한 열로 읽는 화면

목록·보조 정보 중심

1200px

본문과 보조 정보를 함께 보는 일반 화면

최대 폭은 좌우 여백을 포함하며 가운데 정렬합니다. 비교할 열이 많은 데이터 화면은 콘텐츠의 최소 가독 폭에 맞춰 넓힐 수 있습니다.

2. 가용 폭에 맞춰 바깥 여백을 정합니다

가용 폭은 화면에서 사이드바처럼 항상 자리를 차지하는 영역을 제외한 너비입니다. 이 폭을 기준으로 좌우 여백과 영역 사이 간격을 선택하세요.

좌우 여백은 한쪽 기준입니다. Web은 CSS px, Native는 같은 숫자의 논리 단위를 사용합니다. 여백을 바꾸는 기준과 두 열로 전환하는 기준은 별개입니다.

내용의 관계를 드러내는 세로 간격

관련된 내용은 가깝게 묶고, 주제가 달라지면 간격을 넓힙니다. 아래 견본은 표시된 간격을 실제 CSS px로 보여줍니다.

간격 값 선택 기준

보조 정보가 필요할 때 두 열로

폼과 긴 본문은 넓은 화면에서도 한 열이 기본입니다. 변경 기록·담당자 같은 보조 정보가 있고 가용 폭이 1024px 이상일 때 본문과 보조 영역을 2:1로 나눕니다.

두 열의 최소 가독 폭을 확보할 수 없으면 한 열을 유지합니다. 폭이 바뀌어도 필수 입력은 본문에 모으고 입력값과 읽기·Tab 순서를 유지하세요.

열 전환 확인하기

문서 플랫폼을 확인하는 중…

스크롤할 영역 정하기

일반 페이지는 내용만큼 늘어나게 합니다. 상단과 하단 행동을 계속 보여줘야 하는 앱 화면은 높이를 정하고 가운데 본문만 스크롤하게 하세요.

• Modal·Drawer는 오버레이 본문을 스크롤하고 배경 스크롤을 제한합니다.
• 넓은 표의 가로 스크롤은 표 영역 안에 두고, 해당 영역에 접근 가능한 이름을 제공합니다.
• 같은 방향의 스크롤 영역을 불필요하게 중첩하지 않습니다.

/* 화면 높이는 적용 환경에 맞춰 정합니다. */
.screen {
  height: 100dvh;
  display: flex;
  flex-direction: column;
}
.screen-header, .screen-footer { flex-shrink: 0; }
.screen-body {
  flex: 1;
  min-height: 0;
  min-width: 0;
  overflow: auto;
}
.table-region { max-width: 100%; overflow-x: auto; }

하단 행동의 공간 확보하기

하단 영역이 실제 공간을 차지하는 배치를 기본으로 사용하세요. 본문은 남은 높이 안에서 스크롤하므로, 버튼 문구가 길어져도 마지막 콘텐츠가 가려지지 않습니다.

본문 위에 겹쳐야 하는 경우

하단 행동을 콘텐츠 위에 띄워야 할 때만 겹치는 배치를 선택하세요. 본문 끝에는 하단 전체 높이 + 16px의 여백을 확보하고, 하단 높이가 바뀔 때마다 갱신합니다.

하단 전체 높이는 CTA·내비게이션·안전 영역을 포함합니다. Web은 ResizeObserver, Native는 onLayout으로 측정합니다. 예제의 absolute 배치와 앱의 fixed 배치 모두 같은 여백 계산을 사용합니다.

안전 영역은 가장 아래에 한 번만

• 내비게이션이 있으면 내비게이션 아래에 적용합니다.
• 내비게이션이 없으면 CTA 아래에 적용합니다.
• 측정한 하단 높이에 안전 영역이 포함되어 있으면 다시 더하지 않습니다.

키보드가 나타나도 저장 행동에 도달하게

입력 필드와 저장 버튼이 키보드에 가려지지 않도록 앱에서 키보드 회피와 창 크기 변화를 연결합니다. 예제의 키보드 버튼은 높이 변화를 모의 적용하며 실제 기기 키보드를 감지하지 않습니다.

하단 배치 확인하기

긴 CTA 문구와 키보드 상태를 적용하고, 본문을 끝까지 스크롤해 마지막 콘텐츠가 보이는지 확인하세요.

문서 플랫폼을 확인하는 중…

BottomActionBar 기본 사용법하단 CTA 구현 방법키보드 배치 구현 방법

BottomActionBar는 자동으로 고정되지 않습니다. 배치 방식과 실제 안전 영역 값은 적용 앱에서 정합니다.

배치를 적용한 뒤 확인할 것

좁은 화면·긴 한국어·200% 확대와 실제 기기 키보드에서 아래 결과를 확인하세요.

• 페이지 전체에 불필요한 가로 스크롤이 생기지 않는다.
• 열이 바뀌어도 입력값과 본문 → 보조 정보의 읽기·Tab 순서가 유지된다.
• 본문 끝까지 스크롤하면 마지막 콘텐츠가 CTA 위에 온전히 보인다.
• CTA 문구가 여러 줄이 되어도 본문 공간과 끝 여백이 함께 바뀐다.
• 키보드가 나타나도 입력 필드와 저장 버튼에 도달할 수 있다.
• 내비게이션 표시 여부가 바뀌어도 안전 영역을 중복 적용하지 않는다.

Native Web 예제의 확인만으로 실제 기기의 키보드·안전 영역 동작을 검증할 수는 없습니다.

레이어·Elevation프로젝트 색상·서체 연결