SwiftUI Border에 대해서: 왜 border 굵기가 다르게 보일까?

SwiftUI는 Apple이 제공하는 UI 프레임워크로, 코드를 통해 간결하고 직관적인 UI 디자인이 가능합니다. 그러나 SwiftUI를 사용하다 보면 같은 명령을 사용했는데도 경계선(Border)의 굵기가 다르게 보이는 현상을 경험할 수 있습니다. 이 글에서는 이러한 현상을 이해하고 올바르게 처리하는 방법에 대해 알아보겠습니다.

경계선(Border) 적용 방법

SwiftUI에서 경계선을 적용하는 방법은 상당히 간단합니다. border 수정자를 사용하면 되는데요, 색상과 두께를 지정할 수 있습니다. 다음은 예제 코드입니다.

swift
import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Hello, World!")
            .padding()
            .border(Color.red, width: 5)
    }
}

위의 코드는 빨간색의 두께가 5인 경계선을 텍스트 뷰 주위에 그립니다. 간단하죠? 그러나 이 코드가 항상 의도한 대로 작동하지 않을 때도 있습니다.

문제 발생: 경계선 굵기가 다르게 보이는 이유

경계선 굵기가 다르게 보이는 문제의 주요 원인은 SwiftUI의 레이아웃 시스템에 있습니다. SwiftUI는 다양한 요소들을 배치하면서 뷰의 크기와 경계선의 위치를 조정합니다. 이때 화면 해상도와 뷰의 배율(scale factor) 및 컨테이너 뷰의 종류 등이 경계선의 굵기에 영향을 미칩니다.

배율과 해상도

iPhone이나 iPad와 같은 Apple 디바이스는 다양한 해상도와 배율을 가지고 있습니다. 예를 들어 iPhone의 Retina 디스플레이는 2x 배율을 가지며, 이는 픽셀이 두 배로 확대되어 표시된다는 의미입니다. 이런 상황에서 1픽셀의 경계선이 2픽셀 또는 3픽셀로 확대될 수 있습니다.

레이아웃의 영향을 받는 경우

SwiftUI의 레이아웃 시스템은 뷰가 화면에 어떻게 배치될지를 결정합니다. 이때, 뷰의 크기와 위치에 따라 경계선의 두께가 달라질 수 있습니다. 예를 들어, 아래의 코드에서 각기 다른 배율을 갖는 두 가지 텍스트 뷰를 비교해보겠습니다.

swift
import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Hello, World!")
                .padding()
                .border(Color.red, width: 5)
                .scaleEffect(2.0) // 배율을 키움
    
            Text("Hello, SwiftUI!")
                .padding()
                .border(Color.blue, width: 5)
        }
    }
}

위의 예제에서 첫 번째 텍스트 뷰에는 배율을 키워서 scaleEffect(2.0)를 적용했습니다. 이로 인해 빨간색 경계선은 두께가 두 배로 표시될 수 있습니다. 반면, 두 번째 텍스트 뷰는 배율을 조정하지 않았기 때문에 원래 두께로 표시됩니다.

해결 방법

이 문제를 해결하기 위해서는 몇 가지 접근 방법이 있습니다.

정적으로 경계선 적용

경계선의 굵기를 고정된 크기로 설정하여 일관성을 유지할 수 있습니다. 예를 들어, border 대신 overlay와 Rectangle을 사용하여 정적 경계선을 만들 수 있습니다.

swift
Text("Hello, World!")
    .padding()
    .overlay(
        Rectangle()
            .stroke(Color.red, lineWidth: 2)
    )

이 방법은 경계선의 두께를 특정한 값으로 고정하므로, 배율이나 해상도의 영향을 덜 받습니다.

배율에 따라 동적으로 조정

경계선의 두께를 배율이나 해상도에 따라 동적으로 조정할 수도 있습니다. 이 방법은 복잡할 수 있지만 더 세밀한 제어가 가능합니다.

swift
import SwiftUI

struct ContentView: View {
    var body: some View {
        GeometryReader { geometry in
            Text("Hello, World!")
                .padding()
                .border(Color.red, width: geometry.size.width * 0.01) // 동적 경계선 두께
        }
    }
}

여기서 GeometryReader를 사용하여 뷰의 크기에 따라 경계선 두께를 동적으로 조정할 수 있습니다.

결론

SwiftUI에서 경계선의 굵기가 다르게 보이는 현상은 레이아웃 시스템, 화면 해상도, 배율 등이 복합적으로 작용한 결과입니다. 이를 해결하기 위해서는 정적으로 경계선을 설정하거나, 동적으로 조정하는 방법을 고려해야 합니다. 이러한 방법들을 통해 더 일관성 있고, 시각적으로 완성도 높은 UI를 만들 수 있습니다.