프로필 카드 만들기
컴포저블을 결합해 화면을 만들어 보세요.
프로필 카드 만들기은(는) CoddyKit의 무료 Android Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Android Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Android Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
목표
지금까지 배운 내용을 조합해 보겠습니다. 이름과 직함을 스타일이 지정된 상자 안에 깔끔하게 쌓은 간단한 프로필 카드를 만듭니다.
그 과정에서 컴포저블의 크기, 간격, 모양을 제어하는 Modifier를 살펴봅니다.
Modifier 알아보기
Modifier는 컴포저블의 모양과 동작을 변경합니다. 대부분의 컴포저블이 허용하는 modifier 매개변수를 통해 전달합니다.
수정자는 패딩, 크기, 배경색, 테두리 등을 처리합니다. Compose에서 UI를 꾸미는 주요 방법입니다.
Text(
"Ada Lovelace",
modifier = Modifier.padding(16.dp)
)수정자 연결하기
점으로 호출을 연결해 수정자를 만듭니다. 각 호출은 새로운 수정자를 반환하므로 여러 수정자를 차례로 적용할 수 있습니다.
순서가 중요합니다. 배경보다 먼저 패딩을 적용하는 것과 배경 다음에 패딩을 적용하는 것은 다릅니다. 레시피처럼 연결을 왼쪽에서 오른쪽으로 읽어 보세요.
Modifier
.padding(16.dp)
.fillMaxWidth()너비 채우기
fillMaxWidth 수정자는 컴포저블을 사용 가능한 모든 가로 공간에 맞게 늘립니다. 화면 전체를 차지해야 하는 카드에 적합합니다.
가로와 세로 양방향에 사용하는 fillMaxSize도 있으며, 고정된 너비와 높이를 설정하는 size도 있습니다.
Column(
modifier = Modifier.fillMaxWidth()
) {
Text("Profile")
}패딩 추가하기
패딩은 컴포저블의 가장자리와 콘텐츠 사이에 내부 공간을 추가합니다. dp 값과 함께 Modifier.padding을 사용합니다.
패딩을 사용하면 텍스트가 카드 가장자리에 닿지 않아 레이아웃이 편안하고 깔끔해 보입니다.
Column(
modifier = Modifier.padding(16.dp)
) {
Text("Ada Lovelace")
Text("Mathematician")
}카드에 배경 추가하기
배경색을 사용하면 카드가 눈에 잘 띕니다. background 수정자와 색상 값을 사용해 적용합니다.
패딩과 함께 사용하면 색상이 적용된 영역과 내부 텍스트 사이에 여유 공간이 생깁니다.
Column(
modifier = Modifier
.background(Color.LightGray)
.padding(16.dp)
) {
Text("Ada Lovelace")
}이름과 직함 쌓기
카드의 Column 안에 두 개의 텍스트를 쌓습니다. 위에는 굵은 이름을, 아래에는 더 가는 직함을 표시합니다.
서로 다른 fontSize와 fontWeight 값을 설정하면 두 텍스트 사이에 명확한 시각적 계층이 생깁니다.
Column {
Text("Ada Lovelace", fontSize = 20.sp, fontWeight = FontWeight.Bold)
Text("Mathematician", fontSize = 14.sp)
}재사용 가능하게 만들기
카드를 name과 title을 매개변수로 받는 재사용 가능한 컴포저블로 바꿔 보겠습니다. 이제 어떤 사람의 정보든 표시할 수 있습니다.
첫 번째 레슨에서 배운 것과 같은 개념입니다. 데이터를 전달하고 UI를 어디서든 재사용합니다.
@Composable
fun ProfileCard(name: String, title: String) {
Column {
Text(name)
Text(title)
}
}완성된 프로필 카드
모든 요소를 조합한 카드입니다. 전체 너비의 열, 회색 배경, 패딩, 스타일이 지정된 두 개의 텍스트 줄로 구성됩니다.
수정자 연결과 열의 자식 요소가 이전 레슨에서 배운 모든 내용을 하나의 깔끔한 컴포저블로 결합하는 방식을 확인해 보세요.
@Composable
fun ProfileCard(name: String, title: String) {
Column(
modifier = Modifier
.fillMaxWidth()
.background(Color.LightGray)
.padding(16.dp)
) {
Text(name, fontSize = 20.sp, fontWeight = FontWeight.Bold)
Text(title, fontSize = 14.sp)
}
}카드 미리보기
@Preview 래퍼를 추가하면 Android Studio에서 카드를 볼 수 있습니다. 래퍼는 샘플 데이터로 ProfileCard를 호출하고 배경을 표시합니다.
이제 패딩이나 색상을 조정하면서 결과가 즉시 업데이트되는 모습을 확인할 수 있습니다.
@Preview(showBackground = true)
@Composable
fun ProfileCardPreview() {
ProfileCard("Ada Lovelace", "Mathematician")
}화면에 표시하기
실행 중인 앱에 카드를 표시하려면 액티비티의 setContent 안에서 카드를 호출합니다. 그러면 컴포저블이 실제 화면에 연결됩니다.
이제 하나의 컴포저블에서 완전하고 재사용 가능한 UI 구성 요소까지 만들었습니다.
setContent {
ProfileCard("Ada Lovelace", "Mathematician")
}빠른 확인
컴포저블에 패딩, 크기, 배경을 적용하는 방법을 복습해 보겠습니다.
복습
Text, Column, Modifier를 조합해 완전한 프로필 카드를 만들었습니다. 수정자를 사용하면 padding, fillMaxWidth, background를 연결해 UI의 형태와 스타일을 지정할 수 있습니다.
name과 title 매개변수를 사용해 카드를 재사용 가능하게 만들고, @Preview로 미리 본 다음 setContent를 통해 표시했습니다. 처음부터 끝까지 완전한 컴포저블 화면을 만든 것입니다. 축하합니다!
자주 묻는 질문
“프로필 카드 만들기” 강의는 무료인가요?
네 — “프로필 카드 만들기” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Android Academy 강의 전체를 잠금 해제할 수 있습니다. Android Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“프로필 카드 만들기”에서 뭘 배우나요?
컴포저블을 결합해 화면을 만들어 보세요. 브라우저에서 직접 실행하는 실습 코드로 Android Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Android Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Android Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.
“프로필 카드 만들기” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Android Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Android Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.