하단 막대와 플로팅 동작 버튼
탐색과 주요 동작을 고정합니다.
하단 막대와 플로팅 동작 버튼은(는) CoddyKit의 무료 Jetpack Compose Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Jetpack Compose Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Jetpack Compose Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
하단에 배치하기
휴대전화에서 손가락이 닿기 편한 영역은 하단입니다. Scaffold의 bottomBar와 floatingActionButton 슬롯을 사용하면 주요 컨트롤을 손가락이 닿는 곳에 배치할 수 있습니다. 👍
bottomBar 슬롯
bottomBar 슬롯에 무엇을 넣든 하단에 고정되며, Scaffold가 콘텐츠 영역을 줄여 아무것도 그 뒤로 밀려 들어가지 않게 합니다.
Scaffold(
bottomBar = { BottomAppBar { Text("Tools") } }
) { p -> }BottomAppBar
BottomAppBar는 수정이나 공유처럼 현재 화면과 관련된 동작을 담는 Material 컨테이너입니다. RowScope이므로 하위 요소가 왼쪽에서 오른쪽으로 배치됩니다.
FAB 알아보기
FloatingActionButton은 추가나 작성처럼 화면에서 가장 중요한 단일 동작을 위한 둥글고 돌출된 버튼입니다. ➕
FloatingActionButton(onClick = { }) {
Icon(Icons.Default.Add, "Add")
}FAB 슬롯
FAB는 콘텐츠 안이 아니라 Scaffold의 floatingActionButton 슬롯에 넣으세요. 그러면 Scaffold가 하단 가장자리 위에 올바르게 배치합니다.
Scaffold(
floatingActionButton = { FloatingActionButton(onClick = {}) {} }
) { p -> }화면마다 FAB 하나
FAB는 주요 동작을 나타내므로 화면마다 하나만 사용하세요. 서로 경쟁하는 FAB가 두 개 있으면 사용자는 어느 것이 정말 중요한지 알기 어렵습니다.
FAB 위치
floatingActionButtonPosition으로 FAB의 위치를 제어합니다. 기본값은 오른쪽 아래 모서리지만, 하단 바와 함께 사용할 때는 가운데 배치도 잘 어울립니다.
floatingActionButtonPosition = FabPosition.CenterFAB 크기
표준 FAB 외에도 Material 3는 SmallFloatingActionButton과 LargeFloatingActionButton을 제공하므로 화면의 중요도에 맞는 버튼을 선택할 수 있습니다.
확장 FAB
ExtendedFloatingActionButton은 아이콘과 텍스트 라벨을 함께 표시합니다. 아이콘만으로는 동작 이름을 알기 어려울 때 유용합니다.
ExtendedFloatingActionButton(
onClick = { },
icon = { Icon(Icons.Default.Add, "Add") },
text = { Text("New") }
)바와 FAB 함께 사용하기
Scaffold는 bottomBar와 FAB가 함께 있을 때를 인식하고 FAB를 들어 올려 바와 겹치지 않게 합니다. 두 슬롯을 채우기만 하면 됩니다.
FAB 설명하기
다른 아이콘 버튼과 마찬가지로 FAB의 Icon에 contentDescription을 지정하세요. 설명이 없으면 화면 읽기 프로그램에서 단순한 더하기 기호가 아무 의미도 전달하지 못합니다.
빠른 확인
일반적으로 하나의 화면에 FloatingActionButtons를 몇 개 표시해야 할까요?
복습
화면 동작에는 bottomBar 슬롯을, 하나의 주요 동작에는 floatingActionButton 슬롯을 사용하세요. Scaffold가 둘 사이에 간격을 두어 서로 겹치지 않게 합니다. ✨
AI 튜터와 함께 Kotlin을(를) 배우세요 — 무료
브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.
- 코스
- 30
- 레슨
- 120
자주 묻는 질문
“하단 막대와 플로팅 동작 버튼” 강의는 무료인가요?
네 — “하단 막대와 플로팅 동작 버튼” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Jetpack Compose Academy 강의 전체를 잠금 해제할 수 있습니다. Jetpack Compose Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“하단 막대와 플로팅 동작 버튼”에서 뭘 배우나요?
탐색과 주요 동작을 고정합니다. 브라우저에서 직접 실행하는 실습 코드로 Jetpack Compose Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Jetpack Compose Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Jetpack Compose Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.
“하단 막대와 플로팅 동작 버튼” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Jetpack Compose Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Jetpack Compose Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- Scaffold: 화면의 뼈대
- TopAppBar와 동작 아이콘
- 하단 막대와 플로팅 동작 버튼
- Snackbar와 SnackbarHostState