Jetpack Compose Academy · 강의

모든 Composable에서 clickable 사용하기

버튼이 아닌 요소도 탭할 수 있게 만듭니다.

레슨 4/413개 단계

모든 Composable에서 clickable 사용하기은(는) CoddyKit의 무료 Jetpack Compose Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Jetpack Compose Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Jetpack Compose Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

무엇이든 탭할 수 있습니다

버튼이 아니라 카드 전체나 행 전체가 탭에 반응하기를 원할 때가 있습니다. clickable 수정자를 사용하면 어떤 컴포저블이든 반응하게 만들 수 있습니다. 👆

clickable 수정자

어떤 요소에든 Modifier.clickable을 추가하고 onClick 람다를 전달하세요. 이제 해당 요소가 버튼처럼 탭을 처리합니다.

Text(
    "Open profile",
    modifier = Modifier.clickable { open() }
)

클릭하면 물결 효과가 나타납니다

기본적으로 clickable은 Material 물결 효과를 추가하여 사용자의 탭이 등록되었다는 즉각적인 시각적 피드백을 제공합니다.

Box(Modifier.clickable { toggle() }) {
    Text("Tap this box")
}

카드 전체를 탭할 수 있게 만들기

목록 항목에서 이 패턴이 특히 유용합니다. 행의 컨테이너에 clickable을 추가하면 어디를 탭해도 상세 화면이 열립니다.

Row(Modifier.clickable { openItem(id) }) {
    Text(item.title)
}

콘텐츠 설명 추가하기

접근성을 위해 탭이 수행하는 작업을 설명하는 onClickLabel을 전달하세요. 그러면 화면 읽기 프로그램이 작업을 명확하게 안내합니다.

Modifier.clickable(
    onClickLabel = "Open profile"
) { open() }

체인의 순서가 중요합니다

여백이 있는 영역 전체를 탭할 수 있게 하려면 clickable을 padding 앞에 배치하고, 내부 콘텐츠로 탭 범위를 제한하려면 뒤에 배치하세요.

Modifier
    .clickable { go() }
    .padding(16.dp)

탭할 때 상태 전환하기

clickable을 상태와 함께 사용하면 사용자 지정 토글을 만들 수 있습니다. 예를 들어 헤더를 탭할 때 확장되는 카드를 만들 수 있습니다.

Modifier.clickable { expanded = !expanded }

clickable 비활성화하기

clickable 수정자도 enabled 플래그를 받습니다. false로 설정하면 비활성화된 버튼처럼 해당 요소가 더 이상 반응하지 않습니다.

Modifier.clickable(enabled = isReady) { next() }

더 많은 동작에는 combinedClickable

길게 누르기나 두 번 탭하기도 필요하신가요? combinedClickable을 사용하세요. onClick과 함께 onLongClick 및 onDoubleClick도 제공합니다.

Modifier.combinedClickable(
    onClick = { open() },
    onLongClick = { showMenu() }
)

버튼과 clickable 비교

명확한 버튼 기본 작업에는 실제 Button을 사용하고, 카드처럼 임의의 표면을 탭할 수 있게 하려면 clickable을 사용하세요.

충분히 큰 탭 대상 유지하기

clickable이 적용된 작은 텍스트는 누르기 어려울 수 있습니다. padding을 추가하여 터치 대상의 높이가 최소 약 48dp가 되도록 하세요.

빠른 확인

목록 행의 어느 곳이나 탭하면 상세 화면이 열리도록 하려고 합니다.

인터랙티브 레슨에서 답해보세요

복습: 무엇이든 탭하기

clickable 수정자를 사용하면 어떤 컴포저블이든 물결 효과, 레이블, enabled 플래그와 함께 탭할 수 있게 된다는 것을 배웠습니다. 카드와 행도 반응할 수 있습니다. 🎉

무료로 시작

AI 튜터와 함께 Kotlin을(를) 배우세요 — 무료

브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.

코스: 30
레슨: 120

무료로 학습 시작 전체 코스 보기

자주 묻는 질문

“모든 Composable에서 clickable 사용하기” 강의는 무료인가요?

네 — “모든 Composable에서 clickable 사용하기” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Jetpack Compose Academy 강의 전체를 잠금 해제할 수 있습니다. Jetpack Compose Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“모든 Composable에서 clickable 사용하기”에서 뭘 배우나요?

버튼이 아닌 요소도 탭할 수 있게 만듭니다. 브라우저에서 직접 실행하는 실습 코드로 Jetpack Compose Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Jetpack Compose Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Jetpack Compose Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.

“모든 Composable에서 clickable 사용하기” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Jetpack Compose Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Jetpack Compose Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Jetpack Compose Academy(으)로 돌아가기