Corner Radius — 모바일 앱에서 모서리 반경이란

Corner radius란?

Corner radius는 직사각형 요소의 모서리 둥글림 정도를 결정하는 숫자 값입니다. 값이 높을수록 모서리가 더 둥글게 됩니다. 값이 0이면 모서리는 직각(90°)을 유지하고, 짧은 변의 절반과 같은 값이면 요소는 원(정사각형의 경우) 또는 직선 변이 있는 둥근 직사각형(캡슐)이 됩니다.

모바일 디자인에서 corner radius는 다음 용도로 사용됩니다: 카드와 타일, 버튼, 입력 필드, 모달 창, 이미지와 아바타, 진행 표시기, 칩과 배지. 각 요소 유형에는 Material Design 및 Human Interface Guidelines에 기반한 권장 범위의 둥글림이 있습니다.

Material Design 3(Google, 2026)에 따르면 모서리 둥글림은 세 가지 수준으로 분류됩니다: 작음(4 dp) — 버튼 및 입력 필드용, 중간(8~12 dp) — 카드 및 시트용, 큼(16~28 dp) — 대화상자 및 바텀 시트용. Apple HIG(2025)는 시스템 요소(UIButton, UITextField)에 10~12 pt의 통일된 corner radius를, 모달 프레젠테이션에는 20+ pt를 권장합니다.

iOS의 Corner radius: CALayer와 SwiftUI

iOS에서 모서리 둥글림은 CALayer의 cornerRadius 속성을 통해 구현됩니다. UIKit에서 모든 UIView는 cornerRadius를 설정할 수 있는 레이어를 가지고 있습니다. 더 복잡한 둥글림(다른 모서리에 다른 반경)을 위해서는 UIBezierPath와 함께 maskedCorners 및 CACornerMask를 사용합니다.

// UIKit: CALayer를 통한 둥글림
import UIKit

let cardView = UIView()
cardView.backgroundColor = .systemBackground
cardView.layer.cornerRadius = 12
cardView.layer.maskedCorners = [
    .layerMinXMinYCorner,
    .layerMaxXMinYCorner
]

SwiftUI에서는 cornerRadius() 수정자 또는 RoundedRectangle과 함께 ClipShape를 통해 둥글림을 설정합니다. SwiftUI는 clipped() 및 overlay()와 함께 UIRectCorner를 통한 개별 모서리 둥글림도 지원합니다.

// SwiftUI: RoundedRectangle을 통한 둥글림
import SwiftUI

VStack {
    Text("Corner Radius 16")
        .padding()
        .background(
            RoundedRectangle(cornerRadius: 16)
                .fill(Color.blue)
        )
}

// 개별 모서리 둥글림
RoundedRectangle(
    cornerSize: CGSize(width: 16, height: 16),
    style: .continuous
)

Continuous corner radius는 Apple이 iOS 7부터 iOS에서 사용해 온 둥글림 스타일입니다. 클래식 반경(원형)과 달리 연속 반경은 원호 대신 3차 베지어 곡선을 사용하여 더 부드러운 둥글림을 만듭니다. SwiftUI는 RoundedRectangle의 style: .continuous 매개변수를 통해 이 스타일을 지원합니다. Apple은 시각적으로 더 자연스럽기 때문에 모든 시스템 요소에 continuous corner radius를 권장합니다.

Android의 Corner radius: shape과 Compose

Android에서 모서리 둥글림은 전통적으로 res/drawable 폴더의 XML shape 리소스를 통해 구현됩니다. Shape는 cornerRadius 및 solid 매개변수로 배경 모양을 정의합니다. 다른 모서리에는 <corners android:bottomLeftRadius="..." />를 사용합니다. Material Design 3에서는 테마 지원 및 동적 모양을 갖춘 MaterialShapeDrawable이 추가되었습니다.

<!-- res/drawable/bg_card.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/white" />
    <corners android:radius="12dp" />
</shape>

Jetpack Compose에서는 Modifier의 shape 매개변수를 통해 둥글림을 설정합니다. Compose는 각 모서리와 스타일(CircularShape 또는 CutCornerShape)에 대해 다른 반경을 지원하는 RoundedCornerShape을 제공합니다. Compose는 그래픽 스트로크와 함께 RoundedCornerShape을 통해 continuous corner radius도 지원합니다.

// Jetpack Compose: RoundedCornerShape을 통한 둥글림
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

Card(
    shape = RoundedCornerShape(
        topStart = 16.dp,
        topEnd = 16.dp,
        bottomStart = 4.dp,
        bottomEnd = 4.dp
    ),
    elevation = CardDefaults.cardElevation(defaultElevation = 4.dp)
) {
    Text(text = "사용자 정의 둥글림의 Card")
}

Android View 시스템의 MaterialShapeDrawable은 drawable을 다시 생성하지 않고 corner radius를 동적으로 변경할 수 있습니다. 정확한 구성을 위해 ShapeAppearanceModel을 사용하세요: 각 모서리에 대해 개별적으로 cornerFamily(rounded 또는 cut)와 cornerSize를 설정합니다.

올바른 corner radius 선택 방법

Corner radius 선택은 요소 유형, 사용 컨텍스트 및 플랫폼에 따라 달라집니다. 보편적인 규칙은 없지만 Material Design과 Apple HIG는 표준 구성 요소에 대한 명확한 권장 사항을 제공합니다. 주요 원칙: 둥글림은 눈에 띄어야 하지만 콘텐츠를 방해해서는 안 됩니다.

대비 규칙: 동일한 인터페이스에서 서로 다른 corner radius를 가진 요소는 시각적 차이가 눈에 띄도록 최소 4 dp 이상 차이가 나야 합니다. 한 화면에서 3단계의 둥글림을 사용하지 마세요 — 시각적 소음을 만듭니다. Material Design 3는 화면당 두 단계 이하의 둥글림을 권장합니다: 하나는 컨테이너(카드, 대화상자)용, 다른 하나는 대화형 요소(버튼, 필드)용입니다.

Flutter의 Corner radius

Flutter에서 모서리 둥글림은 BorderRadius 클래스를 통해 구현되며, Radius.circular() 또는 Radius.elliptical() 값을 허용합니다. Flutter는 BorderRadius.only() 및 BorderRadius.horizontal()/vertical()을 통한 개별 둥글림을 지원합니다. ClipRRect 위젯은 지정된 BorderRadius에 따라 하위 요소를 자릅니다.

// Flutter: ClipRRect와 Container를 통한 둥글림
import 'package:flutter/material.dart';

Container(
    decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.only(
            topLeft: Radius.circular(16.0),
            topRight: Radius.circular(16.0),
            bottomLeft: Radius.circular(4.0),
            bottomRight: Radius.circular(4.0),
        ),
    ),
    child: Text('사용자 정의 모서리 둥글림'),
)

// Image와 ClipRRect
ClipRRect(
    borderRadius: BorderRadius.circular(12.0),
    child: Image.network(
        'https://example.com/image.jpg',
        fit: BoxFit.cover,
    ),
)

Flutter의 ClipRRect는 이미지나 복잡한 위젯을 둥근 경계선을 따라 자를 필요가 있을 때 사용됩니다. 간단한 배경 컨테이너의 경우 borderRadius와 함께 BoxDecoration으로 충분합니다. 이는 별도의 클리핑 레이어를 만들지 않으므로 더 효율적입니다. Material Flutter 3.22+는 ContinuousRectangleBorder를 통해 continuous corner radius를 지원합니다.