버튼과 클릭
상호작용할 수 있는 버튼을 추가해 보세요.
버튼과 클릭은(는) CoddyKit의 무료 Android Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Android Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Android Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
버튼이란 무엇인가요?
Button은 탭할 수 있는 컴포저블입니다. 사용자가 탭하면 앱이 코드를 실행합니다.
버튼에는 onClick 동작과 표시할 콘텐츠가 필요하며, 일반적으로 Text 라벨을 사용합니다.
Button(onClick = { }) {
Text("Tap me")
}onClick 람다
onClick 매개변수에는 중괄호 { } 안에 작성하는 코드인 람다를 전달합니다. 이 코드는 버튼을 누를 때마다 실행됩니다.
그 안에 로그를 출력하거나 데이터를 변경하는 등 어떤 로직이든 작성할 수 있습니다.
Button(onClick = {
println("Clicked!")
}) {
Text("Click")
}버튼 콘텐츠
뒤따르는 중괄호 안의 콘텐츠는 RowScope입니다. 그 안에 Text, 아이콘 또는 둘 다 배치할 수 있습니다.
대부분의 버튼은 동작을 설명하는 하나의 Text 라벨만 담습니다.
Button(onClick = { }) {
Text("Save")
}상태로 클릭 횟수 세기
탭에 반응하려면 remember와 mutableStateOf를 사용해 값을 저장합니다. 값이 변경되면 UI가 업데이트됩니다.
여기서는 탭할 때마다 count가 1씩 증가합니다.
var count by remember { mutableStateOf(0) }
Button(onClick = { count++ }) {
Text("Count: $count")
}버튼 비활성화하기
enabled 매개변수는 버튼을 탭할 수 있는지를 제어합니다. false로 설정하면 버튼이 회색으로 표시되고 클릭이 차단됩니다.
양식이 완성되지 않은 동안 유용하게 사용할 수 있습니다.
Button(
onClick = { },
enabled = false
) {
Text("Locked")
}OutlinedButton
OutlinedButton은 채우기 없이 테두리만 그립니다. 같은 방식으로 작동하지만 더 가벼운 느낌을 줍니다.
더 강조되는 기본 버튼 옆에서 보조 작업에 사용합니다.
OutlinedButton(onClick = { }) {
Text("Cancel")
}TextButton
TextButton은 테두리나 채우기 없이 레이블만 표시합니다. 가장 가벼운 버튼 스타일입니다.
건너뛰기나 자세히 알아보기처럼 강조가 낮은 작업에 잘 어울립니다.
TextButton(onClick = { }) {
Text("Skip")
}버튼 색상
ButtonDefaults.buttonColors에 배경을 위한 containerColor를 전달해 버튼 색상을 바꿀 수 있습니다.
브랜드와 어울리면서도 읽기 쉬운 색상을 선택합니다.
Button(
onClick = { },
colors = ButtonDefaults.buttonColors(
containerColor = Color.Green
)
) {
Text("Go")
}IconButton
IconButton은 하트나 메뉴처럼 하나의 아이콘을 넣기 위한 작고 둥근 탭 영역입니다.
레이블이 없으므로 도구 모음의 공간을 절약할 수 있습니다.
IconButton(onClick = { }) {
Icon(Icons.Default.Favorite, contentDescription = "Like")
}버튼 모양 만들기
shape 매개변수는 모서리를 변경합니다. 더 둥근 가장자리를 만들려면 dp 값과 함께 RoundedCornerShape을 사용합니다.
숫자가 클수록 더 부드럽고 알약 모양에 가까운 버튼이 됩니다.
Button(
onClick = { },
shape = RoundedCornerShape(16.dp)
) {
Text("Rounded")
}클릭 함수 이름 지정하기
코드를 깔끔하게 유지하려면 인라인 로직 대신 이름이 있는 함수를 onClick에 전달합니다. 그러면 UI를 읽기 쉬워집니다.
함수 참조를 전달하거나 람다 안에서 함수를 호출합니다.
fun onSave() { println("Saved") }
Button(onClick = { onSave() }) {
Text("Save")
}빠른 확인
버튼에 대한 이해도를 확인해 보세요.
복습
Button은 작업에 onClick을 사용하고, 레이블에는 콘텐츠 블록을 사용한다는 것을 배웠습니다. remember를 사용한 상태를 이용하면 클릭으로 UI를 변경할 수 있습니다.
OutlinedButton, TextButton, IconButton과 enabled, 색상, 모양을 설정하는 방법도 살펴보았습니다.
다음에는 padding으로 간격을 제어합니다.
자주 묻는 질문
“버튼과 클릭” 강의는 무료인가요?
네 — “버튼과 클릭” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Android Academy 강의 전체를 잠금 해제할 수 있습니다. Android Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“버튼과 클릭”에서 뭘 배우나요?
상호작용할 수 있는 버튼을 추가해 보세요. 브라우저에서 직접 실행하는 실습 코드로 Android Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Android Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Android Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.
“버튼과 클릭” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Android Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Android Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.