ViewModifier: 그것이 뭐며, SwiftUI에서 View 모디파이어

SwiftUI에서 ViewModifier란 뭐인가?

ViewModifier는 임의의 View 타입에 적용할 수 있는 모디파이어를 만드는 계약을 정의하는 SwiftUI 프로토콜입니다. protocol ViewModifier { associatedtype Body: View; func body(content: Content) -> Body }로 선언되며, Content는 모디파이어에 전달된 원본 View의 타입입니다.

ViewModifier 프로토콜은 SwiftUI의 첫 버전과 함께 iOS 13에서 나타났으며, iOS 18+까지 안정적으로 유지되고 있습니다. 주요 목적은 개발자에게 반복되는 모디파이어 체인을 단일 재사용 가능한 타입으로 캡슐화하는 메커니즘을 제공하는 것입니다. ViewModifier가 없다면, 동일한 스타일 세트를 적용할 때마다 모든 모디파이어를 수동으로 반복해야 했습니다.

Swift by Sundell (2023)에 따르면, ViewModifier는 동일한 모디파이어 세트가 세 곳 이상에서 사용될 때 SwiftUI 프로젝트에서 스타일을 조직하는 선호되는 방법입니다. 일회성 조합에는 View에 내장 모디파이어를 직접 체인으로 연결하는 것으로 착하다.

프로토콜 구문

ViewModifier 프로토콜은 하나의 메소드 body(content:)를 구현해야 하며, 선택적으로 커스텀 모디파이어의 초기화 파라미터를 통해 동작을 커스텀마이즈하는 프로퍼티를 제공할 수 있습니다.

ViewModifier 프로토콜 작동 방식

ViewModifier 프로토콜는 body(content:) 메소드를 정의하며, 원본 View(Content 타입)를 받아 수정된 View(Body 타입)를 반환합니다. SwiftUI는 모디파이어를 View에 content로 전달하여 적용하고, 결과를 표시에 사용합니다.

struct CardStyle: ViewModifier {
    func body(content: Content) -> some View {
        content
            .padding(16)
            .background(Color.white)
            .cornerRadius(12)
            .shadow(radius: 4, x: 0, y: 2)
    }
}

// 사용법:
Text("안녕, SwiftUI!")
    .modifier(CardStyle())

.modifier(CardStyle())를 호출하면, SwiftUI는 원본 View와 모디파이어를 저장하는 ModifiedContent<Text, CardStyle>의 인스턴스를 생성합니다. 렌더링 중에 SwiftUI는 CardStyle.body(content: text)를 호출하여 padding, background, cornerRadius 및 shadow가 있는 수정된 View를 얻습니다.

중요한 차이점: ViewModifier.body는 View가 업데이트될 때마다 호출되므로 body 내에서 무거운 계산이나 시드 이펙트가 없어야 합니다. 모디파이어가 외부 데이터(State, Environment)에 의존하는 경우 초기화 파라미터를 통해 전달하십시오.

내장 모디파이어 vs 커스텀: 차이점

SwiftUI의 내장 모디파이어(font, foregroundColor, frame, padding)는 ModifiedContent 타입을 반환하는 View 프로토콜의 확장 메소드입니다. 이들은 ViewModifier를 직접 구현하지 않습니다 — SwiftUI는 각 내장 모디파이어에 대해 내부 최적화되 구현을 사용합니다.

커스텀 ViewModifier는 동일한 모디파이어 조합이 둘 이상의 곳에서 사용될 때 필요합니다. 일회성 적용에는 직접 모디파이어 체인이 더 좋습니다 — 코드가 가독성을 유지하고 컴파일러가 더 잘 최적화합니다.

WWDC 2023에 따르면, Apple은 애플리케이션의 디자인 시스템과 관련된 스타일(카드, 버튼, 입력 필드)에 대해 커스텀 ViewModifier를 만들 것을 권장합니다. 이를 통해 일관성을 확보하고 디자인 변경 시 유지보수가 간소화됩니다.

ViewModifier 사용 패턴

패턴 1: 디자인 시스템 캡슐화. ViewModifier의 가장 일반적인 사용 사례는 애플리케이션에서 시각적 스타일을 위한 단일 진리 공급원을 만드는 것입니다. 각 디자인 시스템 요소(카드, 버튼, 제목)는 각자 고유의 모디파이어를 가집니다.

struct PrimaryButton: ViewModifier {
    var isEnabled: Bool

    func body(content: Content) -> some View {
        content
            .font(.headline.weight(.semibold))
            .foregroundColor(.white)
            .padding(EdgeInsets(top: 12, leading: 24, bottom: 12, trailing: 24))
            .background(isEnabled ? Color.blue : Color.gray)
            .cornerRadius(8)
            .opacity(isEnabled ? 1.0 : 0.6)
    }
}

패턴 2: 조건부 모디파이어 적용. 때때로 특정 조건에서만 모디파이어를 적용해야 할 때가 있습니다. 부울 매개변수가 있는 ViewModifier는 이 로직을 body 내에서 캡슐화할 수 있습니다.

패턴 3: 모디파이어 조합. ViewModifier는 자기 body 내에서 다른 ViewModifier를 적용할 수 있습니다. 이를 통해 각 모디파이어가 시각적 표현의 고유 측면을 담당하는 모디파이어의 계층 구조를 강축할 수 있습니다. 예를 들어 CardStyle은 내부적으로 ShadowStyle과 BorderStyle을 적용할 수 있습니다.

Point-Free (2024)에 따르면, ViewModifier를 통한 모디파이어의 조합이 상속보다 더 좋습니다: 각 모디파이어는 하나의 작업을 담당하고, 독립적으로 조합할 수 있습니다. 이는 SwiftUI에서 단일 책임 원칙을 따릅니다.

성능과 모디파이어 조합

ViewModifier의 성능은 각 적용시 생성되는 ModifiedContent 래퍼의 수에 따라 달라집니다. SwiftUI는 렌더링 단계에서 디핑을 통해 모디파이어 체인을 최적화하지만, 모디파이어가 과도하게 많으면 업데이트가 느려질 수 있습니다.

최적화: 동일한 타입의 여러 순차 모디파이어(예: 여러 padding)를 하나로 합치세요. PreferenceKey는 필요한 경우에만 사용하세요 — 설정을 읽는 모디파이어는 추가 렌더링 패스를 유발합니다.

일반 규칙: View에 10개 이상의 모디파이어가 있는 경우, 그중 일부를 커스텀 ViewModifier로 추출하기 권장합니다. 이를 통해 가독성이 향상되고 SwiftUI가 업데이트를 최적화할 수 있습니다. SwiftUI Lab (2024)에 따르면, ViewModifier에 모디파이어를 그룹화하면 복잡한 Views의 렌더링 시간이 15–30% 줄어봅니다.