Jetpack Compose Academy · 강의

접근성과 엣지 투 엣지 UI

TalkBack, 큰 글꼴, 인셋을 지원합니다.

레슨 1/413개 단계

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

출시 전 다듬기

훌륭한 앱은 모든 사람을 위한 앱입니다. 출시 전에 스크린 리더, 큰 글꼴, 최신 전체 화면 레이아웃에서도 사용할 수 있도록 앱을 다듬어야 합니다.

TalkBack에 필요한 것

Android에는 TalkBack이라는 스크린 리더가 있습니다. UI를 소리 내어 읽어 주므로 의미 있는 모든 요소에 명확한 레이블을 지정해야 합니다.

아이콘에 contentDescription 사용하기

아이콘과 이미지에는 텍스트가 없으므로 TalkBack이 contentDescription을 읽습니다. 각 요소에 무엇을 하는지 알려 주는 짧고 의미 있는 문구를 지정하세요.

Icon(
    Icons.Default.Share,
    contentDescription = "Share post"
)

장식 요소를 리더에서 숨기기

장식용 이미지를 읽어 주면 불필요한 정보가 추가됩니다. contentDescription을 null로 설정해 TalkBack이 이를 건너뛰고 중요한 내용에 집중하게 하세요.

Image(
    painter = bg,
    contentDescription = null
)

더 큰 글꼴 고려하기

사용자는 시스템 텍스트 크기를 키울 수 있습니다. 고정된 dp가 아니라 sp로 텍스트 크기를 지정하면 접근성 설정에 따라 레이블도 커져 잘리지 않습니다.

Text("Welcome", fontSize = 16.sp)

터치 영역을 누를 수 있게 유지하기

작은 버튼은 누르기 어렵습니다. 모든 컨트롤을 손가락과 보조 스위치로 편하게 사용할 수 있도록 터치 영역을 최소 48dp로 설정하세요.

Modifier.size(48.dp)

전체 화면으로 전환하기

최신 앱은 상태 표시줄과 탐색 표시줄 뒤까지 화면을 그립니다. Activity에서 enableEdgeToEdge를 호출해 콘텐츠가 화면 전체를 채우게 하세요.

enableEdgeToEdge()
setContent { App() }

시스템 표시줄 뒤에 숨지 않게 하기

전체 화면을 사용하면 콘텐츠가 시스템 표시줄 아래로 들어갈 수 있습니다. WindowInsets는 해당 표시줄이 차지하는 공간을 정확히 알려 주므로 그 주변에 여백을 둘 수 있습니다.

빠른 확인

공유 아이콘 버튼을 추가했습니다. TalkBack이 버튼의 용도를 읽어 주게 하려면 무엇을 사용해야 할까요?

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

간단하게 인셋 적용하기

가장 간단한 해결 방법은 safeDrawing 인셋 수정자입니다. 수동으로 계산하지 않아도 잘라내기 영역과 표시줄에서 콘텐츠가 떨어지도록 여백을 추가합니다.

Modifier.windowInsetsPadding(
    WindowInsets.safeDrawing
)

접근성을 일찍 테스트하기

기기에서 TalkBack과 접근성 스캐너를 켜 보세요. 검토자나 사용자가 발견하기 전에 누락된 레이블과 낮은 대비를 찾아낼 수 있습니다.

복습: 접근성과 몰입감

아이콘에 레이블을 지정하고, 텍스트를 sp로 조정하고, 터치 영역을 48dp로 유지했으며, 인셋을 사용해 전체 화면으로 전환했습니다. 이제 모든 사용자를 환영하는 앱이 되었습니다.

무료로 시작

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

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

코스: 30
레슨: 120

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

자주 묻는 질문