FOUNDATIONS
모바일 배치
좁은 화면에서 본문·하단 행동·키보드와 패널의 공간을 나눕니다.
최대 폭·열 전환·스크롤·하단 CTA 배치와 레이어·Elevation 규칙을 함께 확인하세요.
모바일 화면 구성
본문만 스크롤하고 상하단 영역이 실제 공간을 차지합니다. 앱이 안전 영역·키보드 상태를 전달하며 가장 아래에 표시되는 영역에만 하단 여백을 적용합니다. Native 기기의 키보드와 창 크기 보정은 앱에서 연결하세요.
문서 플랫폼을 확인하는 중…
구현 방법
상단·본문·하단을 형제로 배치하고 본문만 스크롤합니다. 키보드와 안전 영역은 모의 값이며 실제 앱에서는 기기 정보를 연결합니다.
문서 플랫폼을 확인하는 중…
하단 CTA와 본문
하단 행동 영역만큼 본문 공간을 확보하세요
검토 목록의 마지막 항목을 확인한 뒤 저장하는 모바일 화면입니다. 같은 콘텐츠·CTA·하단 탐색을 사용해 본문과 하단 영역의 관계를 비교합니다.
적용 조건 · 본문만 스크롤하고 주요 행동과 탐색을 하단에 유지하는 화면에 적용합니다. 예제는 마지막 항목에서 시작하며 위아래로 스크롤할 수 있습니다.
주의 · 안전 여백은 맨 아래 BottomNavigation에만 24px로 모의 적용합니다. 위의 BottomActionBar와 본문에 중복 적용하지 않습니다. 실제 안전 여백은 적용 앱이 전달합니다.
같은 화면 폭과 색상·서체에서 배치와 문구의 차이를 비교하세요.
같은 화면 폭과 색상·서체에서 배치와 문구의 차이를 비교하세요.
구현 방법
권장 배치의 본문은 남은 높이를 사용하고 하단 행동은 실제 공간을 차지합니다. 안전 여백은 가장 아래의 내비게이션에 한 번 적용합니다.
문서 플랫폼을 확인하는 중…
관련 기본 사용법 · BottomActionBar · BottomNavigation
키보드 표시 시 배치
키보드가 나타나면 가용 높이를 다시 나누세요
프로젝트 이름을 편집하는 모바일 화면입니다. 전후 모두 220px 키보드 모의 영역과 같은 입력·CTA를 사용하고 가용 높이의 처리만 바꿉니다.
적용 조건 · 키보드 표시 중에도 입력 확인과 제출이 필요한 화면에 적용합니다. 모의 영역을 켜고 꺼도 입력값은 유지됩니다.
주의 · 이 사례는 배치 원리를 설명하는 시뮬레이션입니다. OS 키보드·visualViewport·인셋 수신을 구현하거나 iOS·Android 기기에서 검증한 예제가 아닙니다. 키보드 위에서는 하단 안전 여백을 중복 적용하지 않습니다.
같은 화면 폭과 색상·서체에서 배치와 문구의 차이를 비교하세요.
같은 화면 폭과 색상·서체에서 배치와 문구의 차이를 비교하세요.
구현 방법
220px 모의 키보드가 차지한 높이를 한 번 제외합니다. 실제 앱에서는 키보드 회피와 창 크기 변화를 연결하며 이 예제 자체는 OS 키보드를 감지하지 않습니다.
문서 플랫폼을 확인하는 중…
관련 기본 사용법 · Input · BottomActionBar
하단 Drawer · BottomSheet 레시피
Drawer position=bottom으로 하단 패널을 엽니다. 스냅·드래그·끌어 닫기는 제공하지 않습니다. 내부 입력과 키보드의 가림 방지는 소비 화면의 별도 검증이 필요합니다.
문서 플랫폼을 확인하는 중…
구현 방법
Drawer의 하단 배치와 열림 상태를 연결합니다. 내부 선택값은 패널을 닫아도 유지하며 스냅·드래그 동작을 추가하지 않습니다.
문서 플랫폼을 확인하는 중…