💥 CustomLabel 컴포저블의 Material3 Shape 라운딩 문제

문제 정의

Jetpack Compose에서 CustomLabel 컴포저블을 구현할 때 MaterialTheme.shapes.small을 사용해 배경 모양을 설정했다. 초기 프리뷰에서는 외곽선이 각지게 보이는 문제가 있었다. 이후 다시 프리뷰를 확인하니 둥글게 보였지만, 이 과정에서 MaterialTheme.shapes의 모양이 사실상 완전히 둥근 것이 아님을 알게 되었다. 현재 컴포저블의 라벨 크기가 작아 프리뷰에서는 둥글게 보였을 뿐, 완전한 원형이 아니었다.

문제 해결 방법

• Material3의 Shapes 클래스는 Extra Small부터 Extra Large까지 제공하는 다양한 크기의 둥글기를 포함하고 있지만, 완전한 원형을 제공하지 않는다.
  • 위에 대한 내용은 Material3 문서에 Shapes 제목으로 추가해두었다.
    • Material3
• 이를 해결하기 위해 둥글기 설정을 위한 RoundedCornerShape나 완전한 원형을 구현하는 CircleShape를 사용할 수 있다.

문제 해결 진행

1. 초기 접근 및 문제 발생: MaterialTheme.shapes.small과 RoundedCornerShape(50)을 사용했지만, 프리뷰에서 외곽선이 각지게 보였다.
2. 프리뷰 확인 및 둥글기 문제 재인식: 다시 프리뷰를 확인하니 둥글게 보였으나, MaterialTheme.shapes에서 제공하는 모양이 완전한 원형이 아니라는 점을 발견했다. 현재 라벨의 크기가 작아 둥글게 보일 뿐, 실제로는 완전한 원형이 아니었다.
3. RoundedCornerShape와 CircleShape 비교: RoundedCornerShape는 각 모서리의 둥글기를 직접 설정할 수 있지만, 완전한 원형을 제공하기에는 한계가 있다. 반면, CircleShape는 완전한 원형을 구현하므로, 이를 적용하기로 결정했다.
4. CircleShape 적용 및 문제 해결: 완전한 원형 모양을 구현하기 위해 CircleShape로 수정하여 최종적으로 문제를 해결했다.

결과

MaterialTheme.shapes의 기본 제공 크기는 완전한 원형을 지원하지 않으므로, RoundedCornerShape나 CircleShape를 활용해 모양을 조정할 필요가 있다. CircleShape를 사용하여 CustomLabel 컴포저블의 양쪽 끝을 완전히 둥글게 만들 수 있었다.