[Comopse] Android Compose Theme 살펴보기
·
Android/Compose
왜 Theme가 필요한가?안드로이드 개발에서 UI는 앱의 첫인상을 결정합니다.하지만 화면이 많아질수록 색상, 글꼴, 모서리 둥글기 같은 스타일을 각 화면마다 직접 지정하는 방식은 유지보수가 매우 어렵습니다. 이를 해결하기 위해 Compose는 Theme 개념을 도입하여 앱 전반에 일관된 디자인을 주입합니다.일관성: 버튼, 텍스트, 카드 등 공통 UI 컴포넌트가 동일한 스타일로 표현재사용성: 여러 화면에서 동일한 색상/글꼴/모양을 공유유지보수성: 브랜드 리뉴얼, 다크 모드 대응 시 코드 수정 범위 최소화특히 Compose는 Material Design 3(M3)를 기본 권장하며, MaterialTheme를 통해 색상, 글꼴, 모양을 한 번에 관리할 수 있습니다. MaterialTheme 살펴보기Materi..
[Compose] 한국 이름 입력을 위한 TextField 구현 (+천지인)
·
Android/Compose
한국에서 이름 입력 시, 천지인 키보드와 삼성 한손모아키 키보드의 호환성을 고려해야 합니다. 특히, 두 키보드에서 미들닷(ㆍᆢ)의 표현이 다르기 때문에 이를 적절히 처리하는 정규표현식을 사용해야 합니다. 정규표현식입력 필터링을 위한 정규표현식은 다음과 같습니다:val regex = Regex("^[가-힣ㆍᆞᆢㄱ-ㅎㅏ-ㅣ]*$") 이 정규표현식은 한글 문자(가-힣), 미들닷(ㆍ, ᆢ), 그리고 자음(ㄱ-ㅎ)과 모음(ㅏ-ㅣ)을 포함하여 오직 한국어만 입력받도록 설정합니다.미들닷(ㆍ)이 두 개인 이유는 삼성의 한손모아키에서 사용되는 미들닷(ㆍ)이 천지인과 다르기 때문에이를 모두 대응하기 위해 추가하였습니다. 예시 코드아래는 Compose를 사용하여 한국어 입력을 처리하는 KoreanTextField 컴포저블 ..
[Compose] SMS Retriever API - SMS 인증번호 자동입력
·
Android/Compose
Google Play Service에는 SMS 기반 확인 프로세스를 간소화하는 데 사용할 수 있는 두 가지 API가 있습니다. SMS Retriever APISMS User Consent API SMS Retriever API는 정말 자동화된 사용자 경험을 제공하므로 가능한 경우 사용하는 것이 좋습니다.하지만 메시지 본문에 사용자 정의 해시 코드를 입력해야 하며, 해당 메시지를 보낸 사람이 아니라면 이 작업을 하는 것이 어려울 수 있습니다. 메시지의 내용을 제어할 수 없는 경우(예: 앱이 앱 내에서 결제 거래를 승인하기 전에 사용자 전화번호를 인증할 수 있는 금융 기관과 협력하는 경우) 커스텀 해시 코드가 필요하지 않은 SMS User Consent API를 사용할 수 있습니다. 그러나 사용자에게 앱의 ..
[Compose] SnackBar Duration Custom
·
Android/Compose
SnackBar란? SnackBar는 간단한 메시지를 사용자에게 전달하는 UI 구성 요소로, 주로 아래와 같은 용도로 사용됩니다.정보 전달: 작업의 결과나 상태에 대한 피드백을 제공합니다.사용자 액션 유도: 사용자가 특정 작업을 수행하도록 유도할 수 있습니다(예: "취소" 또는 "다시 시도" 버튼 포함). SnackBar 구현하기 Android Compose에서 SnackBar를 사용하기 위해서는 `Scaffold`와 `SnackbarHost`를 이용해야 합니다.아래는 기본적인 SnackBar 구현 예제입니다.val scope = rememberCoroutineScope()val snackbarHostState = remember { SnackbarHostState() }Scaffold( snack..
[Compose] Modifier Extension - DrawScrollbar
·
Android/Compose
drawScrollbar 함수는 Modifier 클래스에 대한 확장 함수로, LazyColumn에 커스텀 스크롤바를 그릴 수 있게 해줍니다.이 함수는 drawBehind를 사용하여 컴포저블의 캔버스에 직접 스크롤바를 그립니다. 해당 함수는 아래 이슈를 참고하였습니다. Google Issue Tracker issuetracker.google.com /** * LazyColumn을 위한 사용자 정의 스크롤바를 그리기 위한 확장 함수 * * @param state LazyListState로, lazy list의 상태를 포함 * @param barColor 스크롤바의 색상 * @param barWidth 스크롤바의 너비 * @param barBottomPadding 스크롤바의 하단 패딩 */ fun Modifi..
[Compose] Modifier Extension - AddFocusCleaner
·
Android/Compose
이번 포스팅에서는 Jetpack Compose에서 포커스를 해제하는 동작을 손쉽게 추가할 수 있는 확장 함수 addFocusCleaner를 소개하고자 합니다. addFocusCleaner 함수의 개요addFocusCleaner 함수는 Modifier의 확장 함수로, 컴포저블에 포커스 해제 기능을 추가합니다. 이 함수는 다음과 같은 상황에서 유용합니다:사용자 입력이 끝난 후, 다른 영역을 탭했을 때 포커스를 해제하고 싶을 때포커스 해제 시 추가적인 동작을 실행하고자 할 때fun Modifier.addFocusCleaner( focusManager: FocusManager, doOnClear: () -> Unit = {}): Modifier { return this.pointerInput(..