ScaledMetric

@ScaledMetric란?

• SwiftUI에서 숫자 값을 Dynamic Type 환경에 맞춰 자동 스케일링하는 프로퍼티 래퍼
• 텍스트 자체가 아닌 레이아웃 수치를 조절하는 도구로서의 성격
• 사용자가 시스템 글자 크기를 변경했을 때 주변 레이아웃이 자연스럽게 동기화되도록 설계된 접근성 기능

주요 용도

다음과 같은 수치 항목에 적용 가능

• 패딩(Padding) 값
• 뷰 간 간격(Spacing)
• 버튼 높이 및 고정 크기
• 아이콘 크기
• 코너 반경(Corner Radius)
• 최소 터치 영역 확보

텍스트 스타일 변경용이 아닌 수치 기반 레이아웃의 접근성 대응을 위한 용도로 구분

기본 형태

가장 단순한 기본 선언 구조

@ScaledMetric private var iconSize = 18

특정 텍스트 스타일을 기준으로 스케일 비율을 지정하는 구조

@ScaledMetric(relativeTo: .body) private var buttonHeight = 36

동작 원리 및 의미

• 우측 숫자는 시스템 기본 글자 크기(Large) 기준의 수치
• 시스템 설정 변경 시 해당 값도 비례하여 변동
• relativeTo: 옵션을 통해 기준이 될 텍스트 스타일 정의

사용 예시

아이콘 크기 적용

struct BookmarkButton: View {
    @ScaledMetric(relativeTo: .body) private var iconSize = 18

    var body: some View {
        Image(systemName: "bookmark.fill")
            .font(.system(size: iconSize))
    }
}

카드 내부 패딩 적용

struct SummaryCard: View {
    @ScaledMetric(relativeTo: .body) private var contentPadding = 16

    var body: some View {
        VStack(alignment: .leading, spacing: 8) {
            Text("Weekly Summary")
            Text("5 tasks completed")
        }
        .padding(contentPadding)
        .background(.thinMaterial)
        .clipShape(RoundedRectangle(cornerRadius: 12))
    }
}

칩 높이 및 수평 여백 적용

struct StatusChip: View {
    let title: String
    @ScaledMetric(relativeTo: .body) private var chipHeight = 32
    @ScaledMetric(relativeTo: .body) private var horizontalPadding = 12

    var body: some View {
        Text(title)
            .padding(.horizontal, horizontalPadding)
            .frame(minHeight: chipHeight)
            .background(Capsule().fill(Color.gray.opacity(0.2)))
    }
}

섹션 간 간격 적용

struct SettingsSectionView: View {
    @ScaledMetric(relativeTo: .body) private var sectionSpacing = 20

    var body: some View {
        VStack(alignment: .leading, spacing: sectionSpacing) {
            Text("Account")
            Text("Notifications")
            Text("Privacy")
        }
    }
}

장점

• Dynamic Type 대응 난이도 하락 및 유연한 인터페이스 구현 가능
• 텍스트와 주변 요소 간의 시각적 비례 유지 기능
• 복잡한 레이아웃 분기 처리 없이 접근성을 확보할 수 있는 실용성

주의점

• 직접적인 폰트 메트릭 계산 도구가 아닌 시스템 스케일링 규칙에 따른 수치 변환 방식
• 정밀한 타이포그래피 설계보다는 접근성 확보와 레이아웃 비율 유지에 최적화된 특성
• 정확한 픽셀 단위 일치가 필수적인 경우 별도의 수단 검토 필요