Jetpack Compose Academy · 강의

이미지 자르기 및 모양 지정하기

모서리를 둥글게 만들고 원형 아바타를 만듭니다.

레슨 4/413개 단계

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

직사각형을 넘어

이미지는 기본적으로 단순한 직사각형으로 그려집니다. 모서리가 둥근 이미지나 원형 아바타를 만들려면 도형에 맞춰 clip해야 합니다.

Modifier.clip으로 도형 자르기

Modifier.clip 함수는 컴포저블을 지정한 도형에 맞춰 마스킹합니다. 도형 밖에 있는 내용은 그려지지 않습니다.

Image(painter = p, contentDescription = null,
    modifier = Modifier.clip(CircleShape))

아바타에 CircleShape 사용하기

완벽한 원형 아바타를 만들려면 CircleShape으로 clip하세요. 정사각형 크기와 Crop을 함께 사용하면 깔끔하고 둥근 프로필 사진을 만들 수 있습니다.

Modifier.size(64.dp).clip(CircleShape)

둥근 모서리

부드럽고 현대적인 카드에는 RoundedCornerShape을 사용합니다. dp 단위로 모서리 반지름을 지정하면 네 모서리가 균일하게 둥글어집니다.

Modifier.clip(RoundedCornerShape(16.dp))

특정 모서리만 둥글게 만들기

예를 들어 위쪽 모서리만 둥글게 만드는 것처럼, RoundedCornerShape의 각 모서리에 서로 다른 값을 전달할 수 있습니다.

RoundedCornerShape(topStart = 16.dp, topEnd = 16.dp)

순서가 중요합니다: 먼저 Clip하기

수정자는 순서대로 적용됩니다. 이미지 내용뿐 아니라 배경이나 테두리에도 도형 마스크가 적용되도록 clip을 background 또는 border보다 앞에 배치하세요.

위에 테두리 추가하기

클리핑한 이미지에는 어울리는 윤곽선을 추가하면 멋지게 보입니다. clip 바로 뒤에 같은 도형을 사용하는 border를 연결하세요.

Modifier.clip(CircleShape).border(2.dp, Color.White, CircleShape)

Clip과 Crop 함께 사용하기

아바타를 만드는 방법은 두 개의 수정자와 하나의 크기 조정으로 구성됩니다. size를 지정한 다음 CircleShape으로 clip하고, ContentScale.Crop으로 사진이 원을 채우게 하세요.

Image(painter = p, contentDescription = null,
    contentScale = ContentScale.Crop,
    modifier = Modifier.size(64.dp).clip(CircleShape))

사용자 지정 도형

육각형이나 별 모양이 필요하신가요? 경로로 직접 정의한 도형을 포함해 어떤 도형이든 전달하여 원하는 윤곽선으로 clip할 수 있습니다.

자식 요소에 clipToBounds 사용하기

자식 콘텐츠가 컨테이너 밖에 그려지지 않게 하려면 Modifier.clipToBounds를 사용하세요. 이 기능은 요소의 직사각형 경계에 맞춰 클리핑합니다.

그림자와 클리핑

그림자에도 도형이 필요합니다. 둥근 가장자리를 따라 입체감이 적용되도록 클리핑 전에 같은 도형을 사용해 Modifier.shadow를 적용하세요.

Modifier.shadow(4.dp, CircleShape).clip(CircleShape)

빠른 확인

완벽한 원형 아바타를 만들려면 이미지를 어떤 도형에 맞춰 clip해야 할까요?

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

복습: 이미지 모양 만들기

이제 이미지를 CircleShape 또는 RoundedCornerShape에 맞춰 clip하고, 수정자를 올바른 순서로 배치하며, 테두리와 그림자를 추가할 수 있습니다. 과정이 끝났습니다! 🎉

무료로 시작

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

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

코스: 30
레슨: 120

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

자주 묻는 질문

“이미지 자르기 및 모양 지정하기” 강의는 무료인가요?

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

“이미지 자르기 및 모양 지정하기”에서 뭘 배우나요?

모서리를 둥글게 만들고 원형 아바타를 만듭니다. 브라우저에서 직접 실행하는 실습 코드로 Jetpack Compose Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

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

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

“이미지 자르기 및 모양 지정하기” 강의는 얼마나 걸리나요?

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

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

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

이 강의의 모든 강의

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