[iOS] iOS 뷰(View)의 역할 및 그리는 방법

iOS 앱에서 뷰(View)는 사용자 인터페이스(UI)를 구성하는 기본 요소로, 화면에 표시되는 모든 요소를 의미하며, 사용자의 상호 작용을 처리하는 역할을 합니다. 사용자와 상호작용할 수 있는 UI 요소들을 포함하며, 기본적으로 화면에 내용, 버튼, 이미지, 텍스트 등을 표시하는 역할을 합니다.
즉, 뷰는 앱의 화면에 무엇인가를 보여주고 사용자의 입력을 받아들이는 창문과 같은 역할을 한다고 볼 수 있습니다. 

 

 

IOS 앱에서 뷰의 역할

• 앱에서 가지고 있는 데이터를 사용자에게 보여준다
• 사용자의 인터랙션을 받아서 앱에 알려주는 역할

UI 구성 : 버튼, 레이블, 이미지 뷰, 텍스트 필드 등 사용자가 상호작용할 수 있는 다양한 요소들을 포함한다. 뷰는 다양한 UI 요소를 표현하며, 앱의 전체적인 디자인 및 사용자 경험을 결정합니다. 예를 들어, 레이블, 텍스트 필드, 이미지 뷰 등 다양한 뷰를 사용하여 사용자 인터페이스를 구성합니다. 

사용자 상호작용 : 뷰는 버튼 클릭, 스와이프, 탭 등 사용자의 상호작용을 감지하고, 이를 앱에 전달하여 특정 동작을 수행하도록 한다. 예를 들어, 버튼 뷰를 탭 하면 해당 버튼과 연결된 동작이 실행되는 방식이다. 사용자가 버튼을 클릭하거나 스와이프하는 등의 상호작용을 처리할 수 있고, 이를 위해 터치 이벤트나 제스처를 인식하는 기능을 가진다.

화면, 데이터 표시 : 뷰는 텍스트, 이미지, 비디오 등 앱의 데이터를 화면에 시각적으로 표현한다. 사용자는 이러한 뷰를 통해 앱의 정보를 확인하고 이해할 수 있다. 뷰는 앱의 시각적 부분을 담당하며, 앱 화면에 정보를 표시하는 역할을 한다.

컨테이너 역할 : 뷰는 다른 뷰를 포함하는 컨테이너 역할을 할 수도 있다. 이를 통해 복잡한 화면 레이아웃을 구성하고 뷰 간의 관계를 정의할 수 있다. 예를 들어, 뷰 컨트롤러는 여러 개의 뷰를 포함하는 컨테이너 역할을 한다.

레이아웃 관리 : 뷰는 화면에 요소들을 어떻게 배치할지 결정하는 레이아웃 역할도 한다. iOS에서는 Auto Layout 등을 사용하여 화면 크기와 디바이스에 맞는 뷰 레이아웃을 자동으로 조정할 수 있다.

화면 전환 및 네비게이션 : 뷰는 화면 전환을 담당하여 다른 뷰로 이동하거나 이전 화면으로 돌아가는 등의 내비게이션 기능을 제공한다.

애니메이션 지원 : 뷰는 애니메이션을 지원하여 화면 전환이나 버튼 클릭 시 애니메이션 효과를 추가할 수 있다.

 

IOS 앱에서 뷰(View)를 그리는 방법에는 여러 가지가 있지만, 기본적으로는 Storyboard, SwiftUI 또는 UIKit 을 사용할 수 있다. 

 

UI 의 역사

 

 

UIKit(Storyboard) : Storyboard 는 시각적인 UI 디자인 툴로, 드래그 앤 드롭으로 UI 요소들을 배치할 수 있다.

Xcode에서 제공하는 시각적 도구로, 앱의 여러 화면을 한눈에 보고 관리할 수 있다. Storyboard를 사용하면 화면 전환, 뷰 간의 연결을 시각적으로 설정할 수 있고, 뷰 간의 연결 및 제약 조건을 설정하여 반응형 UI를 만들 수 있다.

뷰를 그리려면, Main.storyboard 파일을 열고, 원하는 UI 요소(버튼, 레이블 등)를 드래그하여 뷰에 배치한다. 

• 장점
  • 뷰를 위한 코드를 적게 작성 가능
  • 뷰를 직관적으로 이해하기 쉬움
  • 뷰 작업 속도가 빠름
• 단점
  • 작업내용을 보기가 어려움 -> 컨플릭트 났을때, xml 보고 수정하는 게 힘듦
  • 재사용성이 낮음
  • 뷰의 동적 변화에 있어서 제약

 

UIKit(Code) : UIKit 을 사용하면 코드로 뷰를 정의하고 배치할 수 있다.

UIView, UILabel, UIButton 등의 객체를 생성하여 추가하고, frame, constaraints 등을 설정하여 뷰를 구성한다.

let label = UILabel()
label.text = "Hello, World!"
label.frame = CGRect(x: 50, y: 100, width: 200, height: 50)
self.view.addSubview(label)

• 장점
  • 작업 내용을 보기가 쉬움
  • 재사용성 높음
  • 동적 변화에 제약이 덜함
• 단점
  • 뷰를 위한 코드가 많이 들어감
  • 뷰를 직관적으로 바로 이해하기 어려움
  • 뷰 작업 속도가 느림(재사용성 높아짐에 따라 속도는 향상 가능)

 

SwiftUI : SwiftUI 는 선언적인 UI 프레임워크로, 코드를 통해 UI를 쉽게 정의할 수 있다.

View 구조체를 사용하여 뷰를 선언적으로 작성하며, 다양한 뷰 조합을 통해 복잡한 UI도 간단히 만들 수 있다.

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Hello, World!")
                .font(.largeTitle)
                .padding()
            Button(action: {
                print("Button tapped!")
            }) {
                Text("Tap me")
            }
        }
    }
}

• 장점
  • 작업 내용을 보기가 쉬움
  • 재사용성 높음
  • 뷰를 위한 코드를 적게 작성 가능
  • 뷰를 직관적으로 이해하기 쉬움
  • 뷰 작업 속도가 빠름
• 단점
  • 현재 대부분 프로젝트는 UIKit 기반이 많음
  • ios 버전 별로 되는 UI 가 있어서 분기를 태워 버전별로 관리해줘야 함

 

 

---

 

 

 

UIKit 에서 스토리 보드 vs Code 간 장단점 알기

현재 많은 회사에서 UIKit 기반 프로젝트를 사용하고 있어서, UIKit을 꼭 알아야 한다.

애플에서 앞으로 미래의 UI로 생각하는 기술인 SwiftUI 도 꼭 알아야 한다.

어떤 방법을 사용할지에 따라 뷰 그리는 방식이 달라지니, 자신에게 맞는 방법을 선택하면 되지만, UIKit은 기존 방식이고, SwiftUI는 최신 방식으로 점점 더 많은 IOS 앱에서 사용되고 있다. 결국 UIKit, SwiftUI 둘 다 알아야 한다.