[iOS] 뷰와 뷰의 계층

뷰와 뷰의 계층

iOS 앱에서 UI를 구성하는 기본적인 단위는 View(뷰) 입니다. View는 사용자가 화면에서 보는 UI 요소들을 나타내며, 다양한 속성과 메서드를 제공합니다. View들은 계층적으로 구성될 수 있으며, 이렇게 구성된 View 계층을 View Hierarchy(뷰 계층)라고 합니다.

 

클래스 계층도

iOS 앱에서 View는 UIView 클래스를 상속한 클래스로 구현됩니다. UIView는 화면에서 사각형 영역을 나타내며, 다양한 시각적 컨텐츠를 그리기 위한 메서드와 속성을 제공합니다.

 

 

앱내의 View 인스턴스 포함관계

예를 들어, 라벨, 버튼, 이미지 뷰 등의 다양한 UI 요소는 모두 UIView를 상속받아 만들어집니다. UIView 클래스의 하위 클래스로는 UILabel, UIButton, UIImageView 등이 있으며, 이들 클래스에서는 추가적인 기능을 제공합니다.

 

View는 계층적으로 구성될 수 있습니다. 이러한 계층 구조에서 View들은 부모-자식 관계를 가집니다. 부모 View는 자식 View를 포함하는 Container View(컨테이너 뷰) 역할을 하며, 자식 View는 부모 View 위에 올라가게 됩니다.

 

iOS 앱에서 View 계층 구조를 구성하는 방법은 다양합니다. Interface Builder를 사용하여 시각적으로 구성할 수도 있고, 코드로 직접 구현할 수도 있습니다. 하지만, 모든 View 구성 방법에서 View 계층 구조를 이해하고 다룰 수 있어야 합니다.

 

아래에 코드와 대입해서 생각해볼 수 있다.

// ViewController.swift

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        
        let firstFrame = CGRect(x: 160, y: 240, 
		width: 100, height: 150)
        let firstView = UIView(frame: firstFrame)
        firstView.backgroundColor = UIColor.blue

        view.addSubview(firstView)
    }
}

 

 

화면이 그려지는 과정

iOS 화면이 그려지는 과정은 크게 두 가지 단계로 나눌 수 있습니다. 첫 번째는 Layout(레이아웃) 단계이고, 두 번째는 Rendering(렌더링) 단계입니다.

 

1. Layout(레이아웃) 단계

Layout 단계는 View들이 화면에 배치되는 과정입니다. 이 단계에서는 View들이 화면에서 어떻게 배치되어야 하는지 계산됩니다. 이 계산은 Auto Layout 시스템에 의해 수행됩니다. Auto Layout은 View들 간의 관계를 기반으로 각 View의 크기와 위치를 결정하는 시스템입니다.

 

Auto Layout은 Constraints(제약)를 사용하여 View들 간의 관계를 나타냅니다. 예를 들어, "이 View는 부모 View의 왼쪽에 붙어 있어야 한다"와 같은 제약을 설정할 수 있습니다. Auto Layout은 이러한 제약을 바탕으로 View의 크기와 위치를 결정합니다.

 

2. Rendering(렌더링) 단계

Rendering 단계에서는 View들이 화면에 그려지는 과정입니다. 이 단계에서는 View들이 배치된 위치와 크기를 기반으로 실제로 화면에 그려집니다. 이 과정은 Core Graphics(코어 그래픽스) 프레임워크를 사용하여 수행됩니다.

 

Core Graphics는 View의 그리기 요소를 처리하고, GPU(그래픽 처리 장치)에 전송하여 실제로 화면에 그려집니다. 이 과정에서 View의 배경색, 테두리, 텍스트 등의 시각적 요소들이 그려집니다.

 

두 단계를 모두 수행하면, iOS 화면에 View들이 화면에 그려지게 됩니다. 이러한 과정은 매우 빠르게 수행되며, 사용자가 앱을 사용하는 동안 View들이 실시간으로 업데이트되는 것처럼 보이게 됩니다.

 

iOS 화면이 그려지는 과정에서 Layout 단계와 Rendering 단계는 서로 다른 시점에 수행됩니다. Layout 단계는 View가 생성되거나 변경되는 경우마다 수행됩니다. 즉, View의 크기나 위치가 변경되거나, 새로운 View가 추가되는 경우 Layout 단계가 수행됩니다. 반면에 Rendering 단계는 Layout 단계 이후에 수행됩니다. 즉, View들의 크기와 위치가 결정된 후에 Rendering이 수행됩니다.

 

iOS 화면이 그려지는 과정에서 Layout 단계와 Rendering 단계는 앱의 성능과 관련이 있습니다. Layout 단계에서는 Auto Layout 시스템이 제약을 계산하여 View의 크기와 위치를 결정합니다. 이 과정은 매우 복잡하고 계산량이 많은 작업입니다. 따라서 Auto Layout 시스템은 가능한 한 효율적으로 동작하도록 최적화되어 있습니다.

 

반면에 Rendering 단계는 Core Graphics 프레임워크를 사용하여 View들을 그리는 작업입니다. 이 과정은 렌더링되는 View의 수와 복잡도에 따라 성능이 달라집니다. 따라서 앱의 성능을 최적화하기 위해서는 View들의 수를 최소화하고, 가능한 한 간단하게 디자인하는 것이 중요합니다.

 

아래에 코드를 도식화

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        
        let firstFrame = CGRect(x: 160, y: 240, width: 100, height: 150)
        let firstView = UIView(frame: firstFrame)
        firstView.backgroundColor = UIColor.blue
        view.addSubview(firstView)
        
        let secondFrame = CGRect(x: 20, y: 30, width: 50, height: 50)
        let secondView = UIView(frame: secondFrame)
        secondView.backgroundColor = UIColor.green
        view.addSubview(secondView)
    }
}

아래 코드를 도식화

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        
        …
        let secondFrame = CGRect(x: 20, y: 30, width: 50, height: 50)
        let secondView = UIView(frame: secondFrame)
        secondView.backgroundColor = UIColor.green
        firstView.addSubview(secondView)
    }
}