Managing content in your app’s windows

오늘은 애플 공식 article 중

'Managing Content in your app's windows'에 대해 알아보겠습니다!

 

현재 프로젝트에서 사용 중인 pageViewController에 대해 공부하던 중 발견한 글로

viewController와 navigationViewController에 대해

새롭게 알게 된 내용이 많아 글로 남겨봅니다 😆

 

해당 글은 viewController를 통해 유저에게 어떻게 view를 보여주는지, 

또 어떤 방식으로 화면을 교체하고 탐색(navigation)하는 지에 대한 글입니다❗️

 

직접 공식 문서 글을 보고 싶으시다면 아래 링크를 확인해주시고,

저는 공식 문서의 내용과 저의 생각을 함께 정리해보겠습니다.

Managing content in your app’s windows | Apple Developer Documentation

 

그럼 시작해보겠습니다 😤😤 

(아직은 블로그 쓰는게 어색 어색..ㅎ)

---

OverView

 

앱 UI에서 Scene들은 Window 객체와 여러 개의 View 객체를 갖을 수 있습니다.

(위에 문서에서는 window 앞에 'a'가 붙어 window 한 개만 가능한 줄 알았는데,

UIWindowScene 관련 공식 문서를 보니 여러 개도 가능하다고 나와 있습니다..😭 )

 

확인 해보세요!!

https://developer.apple.com/documentation/uikit/uiwindowscene/

 

먼저 scene, window, view, viewController가 뭔지 간단하게 알아보고 넘어 가겠습니다!

(사실 너무 간단하게만 나와서 다른 자료를 찾아보면 더 공부했지만 아직까지 헷갈려요..

그래서 나중에 따로 정리하는 글을 남겨보겠습니다.😎)

 

설명에 앞서 우선 그림으로 대략적인 느낌을 보고 가시죠❗️

 

그림에서 UI가 붙어 있는 이유는 UIKit과 관련된 것이어서 그런 거 같아요..!

 

 Scene은 UI 인스턴스를 나타내기 위해

window와 view를 포함하는 인스턴스를 의미합니다.

---

 Window는 UI의 남는 부분에서 보이지 않는 컨테이너 역할을 하고,

View의 최상 위 컨테이너 역할을 하며 View에 이벤트를 route합니다.

 

또한, window는 가장 오래 살아남는 객체로, 

해당 scene의 전체적인 UI가 사라질 때 dismiss 시킬 수 있습니다.

(다시 말해, scene이 사라질 때 window도 해제시킬 수 있다는 말❗️)

---

View는 유저가 화면에서 보는 실제 컨텐츠로

텍스트, 이미지, 커스텀 타입의 컨텐츠들을 제공합니다.

 

window에 있는 view들은 새로운 컨텐츠나 정보를 나타내고 싶을 때

반복적으로 교체할 수 있습니다.

---

마지막으로 viewController는 UIkit에서 제공하는 것으로,

앱에서 단일 view 세트를 관리하고, 해당 뷰의 정보를 최신 상태로 유지하며

window에서 view를 효율적으로 관리하고 추가, 삭제를 쉽게할 수 있도록 해줍니다.

 

각각의 window는 초기 view를 세팅하기 위해 root view contorller를 갖으며,

이후에 view를 바꾸고 싶을 때 UIKit에 추가적으로 다른 view controller를 present하고, dismiss를 명령합니다.

---

간단하게 정리 하자면...

 

큰 틀에서 Scene은 우리가 보는 UI의 컨테이너 역할을 하는 Window들을 관리해주고, 

Window는 해당 컨테이너를 채워 줄 View 세트들을 관리합니다.

 

View controller는 Window를 도와 컨테이너에서 보여 줄 View 세트를 교체하는 역할을 하며,

해당 View의 데이터를 최신화 하는 역할을 합니다.

 

결론적으로, view controller는 직접적으로 View를 다루기 때문에

UI를 위해 중요한 역할을 수행한다는 것을 알 수 있습니다.

---

Define view controllers for each unique page of content

새로운 앱의 UI를 디자인 할 때,

먼저 UI를 컨텐츠의 별개의 페이지로 나눕니다.

 

그리고 각 페이지들은 앱의 맞춤 데이터를 나타내는 특별한 방식을 제시합니다.

 

예를 들어, 페이지 마다 다른 방식을 제시할 수 있는데

데이터를 테이블의 행으로 표시하거나, 격자 이미지로 데이터를 보여줄 수 있습니다. 

만약 데이터 캡처를 필요로 하는 페이지가 있다면  text field를 표시하는 구성을 갖을 수 있습니다.

(데이터 캡처는 사용자가 데이터를 바꾸거나 입력하는 것을 의미)

 

바로 아래 이미지에 보이는 것처럼

각 페이지를 다른 방식으로 만들고 필요로 하는 방식으로 데이터를 보여주면 되는 것 입니다.❗️

 

 

 

정리하자면❗️

 

많은 앱들은 다양한 페이지 구성을 갖고 있는데,

 

만약 같은 구성의 페이지(그러나 다른 데이터를 보여 줘야 하는)를 보여줘야 한다면

해당 페이지를 재활용하여 다른 데이터를 보여주면 된다는 말입니다.

 

(미리 페이지 틀을 만들어 두고, 다른 데이터를 채워서 재활용하자 😎)

 

그러니까 우리는 원하는 데이터를 보여 줄 view를 잘 그려두고(재사용 가능한 view),

해당 view를 이용하여 데이터를 잘 보여주면 된다는 것❗️

 

 

그러면 이제..

해당 view를 잘 관리하고, 데이터를 잘 넣어 주기 위해서는 

우리가 뭘 해야하는 지가 의문이 듭니다!

(의문이 안들어도 궁금한 척 😆)

 

여기서 등장하는 것이 바로 View Controller 입니다.👍

 

우리는 view controller를 정의하여,

해당하는 페이지를 잘 보여주고, 일치하는 view를 잘 관리해주면 되는 것 입니다.

 

다시 말해,

 

view controller는

view에 데이터를 채우고, 데이터가 바뀔 때 view를 업데이트하면서

데이터 모델 객체에게 데이터가 바꼈음을 알리는 역할을 합니다.

 

또한, 현재 환경에 맞게 view 사이즈, 위치, 가시성 등을 조정하고

다른 컨텐츠 페이지 전환을 용이하게 합니다.

 

view controller의 역할에 대해 더 자세하게 알고 싶다면 아래 내용 참고해주세요 ❗️

Displaying and managing views with a view controller

 

 

추가로❗️

해당 글에서 view controller를 정의하는 것이

항상 서브 클래스화와 커스텀 행동을 포함 (subclassing and adding custom behavior)한다고 하는데..

 

이건 새로운 view controller를 정의할 때,

항상 UIViewController를 상속 받아 새로운 클래스를  정의하고,

새로운 기능을 위해 여러 프로퍼티나 메서드를 추가히기 때문에 

서브 클래스화와 커스텀 행동을 포함한다고 표현하는 것 같습니다.

(아마도..?)

class newViewController: UIViewController {
    var newProperty = ""
    
    func newMethod() {
        newProperty = "adding custom behavior"
        }
}

 

---

Choos the navigation model for your content

이제 navigaton model에 대해 알아보겠습니다.

사실 이 글을 보면서 navigaion model이라는 키워드를 처음 알았습니다 😭

 

사실 앱을 한 번이라도 만들어 보셨다면

UINavigationController, UITabBarController를 들어보신 적이 있을 겁니다.

(아니라면.. 이번 기회에 저처럼 더 알아가면 되죠❗️)

 

이것들이 바로 navigation model입니다.

 

물론 아래 이미지 처럼 모델이 더 있지만, 많이 사용하는 걸로는 

UINavigationController나 UITabBarController라고 생각합니다.

(물론, 현업은 잘 몰라요.. 그냥 저의 짧은 공부 기간에서는 이렇게 생각한다는 것..)

 

 

이제 naviagtion model에 대해 조금 더 자세히 알아보겠습니다 ❗️

 

우선,

navigation model이 왜 필요한 지에 대해 알아봅시다.

 

간단한 앱의 경우 화면 분량이 매우 적지만, 

대부분의 앱은 컨텐츠를 나타내기 위해 다양한 분량의 화면을 갖습니다.

 

이때 화면들 사이를 쉽게 이동할 수 있도록(= 탐색할 수 있도록 = navigating)

도와주는 것이 navigation model입니다.

 

 

이제 위에 말을 조금 더 어렵고? 깊이? 설명하자면

 

다양한 view controller들 사이를 쉽게 탐색할 수 있도록 navigation model이 필요한데,

UIKit은 navigation model 구현을 위해 container view controller를 제공해줍니다.

 

(설명하는 나도 어렵다 ㅎㅎ)

 

아까 위에서 설명했는데

페이지(view)를 관리하기 위해서 각 페이지에 view controller를 정의해야 한다고 했습니다 !

또 각 페이지를 전환하는 역할을 하는 것도 view controller입니다 !

(다시 말해, 페이지들끼리 전환할 할 때 view controller들끼리 서로 전환을 시킨다는 뜻..)

 

이제 본론으로 돌아오면

view controller 사이를 쉽게 왔다 갔다 할 수 있게 도와주는 것이 navigation model 이라는 말이고,

UIKit은 이 모델을 위해 container view controller라는 것을 지원해준다는 말❗️

 

(UIkit이 뭔지 모르신다면,, 일단은 view를 그리기 위한 프레임워크 정도로 생각하고 일단 패쓰 😅

프레임워크도 모르신다면....

나중에 시간이 된다면 UIKit, SwiftUI, 프레임 워크 등.. 용어 설명 글을 작성해 보겠습니다..)

 

 

이제 container view controller에 대해 알아보겠습니다.

 

 

container view controller는 자식 view contrellr로 알려진 view controller를 관리하는

특별한 타입의 view controller입니다.

 

여기서 container의 역할은 자신의 view (container view controller) 경계 내에서 

자식 view controller의 root view의 위치를 지정해주는 곳이고, 

한 번에 하나의 자식만 presnet하거나, container view controller의 방식에 따라 

동시에 여러 자식 view controlelr를 나타 낼 수 있습니다.

 

또한 container는 그들의 자식 view controller의 view를 스크린 위나 밖에서

애니메이션을 적용하여 효과적으로 navigation 유형에 대해 시각적 피드백을 제공할 수 있습니다.

(ex. UIPageViewControlelr에 경우, 책을 넘기는 것 같은 애니메이션을 제공해줍니다 👍)

---

container view controller와 container에 대해 더 자세히 설명하고 싶지만...

너무 길어질 거 같으니 일단은 참고 자료를 올리고 나중에 따로 정리 해보겠습니다 🌝

https://woozzang.tistory.com/145

 

 

그러니까 ❗️

우리는 일반적으로 navigation model 기능이 필요로 한다면,

그리고 UIKit을 사용한다면

UIKit에서 지원해주는 container view controller를 사용하면 됩니다 😆

 

왜??? 

Apple이 그렇다니까 ~

 

---

 

이제 아까 위에서 언급한 navigation model 들에 대해

간략하게 알아보겠습니다.

 

우선 사진 먼저❗️

navigation model

---

첫 번째로는 UINavigationController입니다.

 

UINavigationController의

navigation interface는 자식 view controller의 스택을 관리해줍니다.

 

새로운 자식 view controller를 보이고 싶다면 스택에 push 하여 

이전 view controller를 대체합니다. 

 

그리고 pop은 기존 view controller를 없애고

아래 view controller를 보이게 합니다.

(push는 이전 view controller를 없애는게 아니라, 그 위로 쌓는 다는 의미입니다.

pop은 맨 위에 위치한 자식 view controller를 없애는 것❗️)

 

---

다음으로는, UISplitViewController입니다.

 

UISplitViewController는 화면에서 공간이 가능할 때

split-view interface에서 양 옆 사이드로 두 개의 자식 view controller를 관리합니다.

 

다시 말해, 공간이 부족하다면 사용할 수 없고, 

이 경우에는 navigation interface로 나타납니다.

 

그리고 해당  interface는 primary-detail interface입니다.

 

이것은 두 개의 섹션으로 나누어, 하나는 주로 목록이나 카테고리를 보여주는 primary 섹션,

다른 하나는 사용자가 선택한 항목의 상세 정보를 보여주는 detail 섹션으로 구성하는 interface를 뜻합니다. 

(GPT 짱 👍)

 

---

다음으로는, UITabBarController입니다.

 

tab-bar interface는 하단에 일련의 버튼을 나타내고,

버튼을 선택하면 버튼과 관련된 자식 view controller를 나타냅니다.

 

---

다음으로, UIPageViewController입니다.

 

UIPageViewController는 순서가 지정되어 있는 자식 view controller를 관리하고,

paged interface에서 한 번에 한 개 또는 두 개의 페이지를 preset 합니다.

 

사용자는 swiping(옆으로 넘기기) 또는 tapping(터치하여 넘기기)으로

자식 view controller 사이를 이동할 수 있습니다.

 

현재 진행중인 프로젝트에서 UIPageViewController를 사용하고 있어 

많은 고난과 시련을 겪었는데.. 나중에 프로젝트가 끝나면 해당 내용에 대해서도

글을 작성해보겠습니다 😆

(빨리 프로젝트가 끝났으면..)

 

---

마지막으로 custom container view controller 입니다.

 

엥 ❓❓❓

위에 사진은 4개인데 왜 더 있지.. 싶지만

 

apple에서 지원해주는 것만 쓸 수 있다면 너무 재미없으니까..

(난 이것만 해도 재미있을 거 같은데 🌝)

apple에서는 저희가 원하는 방식으로 커스텀할 수 있게 방식을 마련해줬습니다.

 

커스텀 방식으로는 

다양한 UIKit container view controller를 결합할 수 있습니다.

 

예를 들어 split-view interfae의 왼쪽 창에 UINavigationController를 두는 것은 흔한 커스텀 방식입니다.

(전체적으로 UISplitViewController로 구현하고,

외쪽 섹션인 자식 view controller 자리에 UINavigationViewController를 설정한다는 말 ❗️)

 

또한, 전체적으로 새롭게 만드는 것도 가능하기 때문에,

자신만의 새로운 container view controller를 만들 수도 있습니다.

 

---

지금까지 container view controller에 대해서 설명했는데..

호옥시 한 가지 질문이 있을 수  있습니다.

(없어도 궁금한 척..😅)

 

continer view controller를 사용하지 않아도

새로운 view controller를 present하면 이전 view controller를 덮고 다른 view를 보여 줄 수 있는데 

굳이 container view controller를 써야 하나 ❓

 

네 ❗️

 

물론 view controller에 새로운 view controller를 계속해서 present 해주면

우리가 원하는 flow 대로 화면을 보여줄 수 있겠지만

 

apple에서는 container view contorller의 사용을 권장하고 있습니다.

(apple이 그렇다면 따라야지..😤)

 

복잡한 탐색 체계에서는 위에 방식으로 앱을 구성한다면

스택 관리가 어려울 뿐더러, 화면 전환 시에도 어려움이 많아 질 것입니다.

 

(예를 들어, 이전 화면으로 돌아가야 해서 똑같은 view controller를 계속해서 초기화하여 스택에 쌓는 상황..)

 

그렇기 때문에 간단한 flow가 아니라면

container view controller 사용을 우선 고려해야 합니다.

 

아까, 위에서 언급했던 자신만의 container view controller 만들기에 대해

관심이 있으신 분은 아래 문서를 참고해주세요❗️

Creating a custom container view controller

---

Assing a root view controller to each window

아까 위에서 root view controller 키워드를 언급한 적이 있는데,

이번에는 root view controller에 대해 조금 더 알아보겠습니다.

 

root view controller는 window의 초기 탐색 모델을 정의합니다.

 

이게 무슨 말인지 위에 내용 바탕으로 다시 생각해보면..

 

window는 scene의 컨테이너 역할을 하며 view를 보여준다고 했습니다.

그리고 view가 보여지기 위해서는 view controller가 필요하고, view controller가 view를 조절한다고 했습니다.

 

맞죠 ❓❓❓

(기억안나면 다시 위로..)

 

그런데 해당 앱을 처음 켰을 때 window에 의해 첫 화면이 보여줘야 하는데

만약 초기 화면에 대해 아무 설정이 되어 있지 않다면,

많은 view controller 중에 어떤 것을 먼저 보여 줘야 할 지 모르는 상황이 발생합니다.

 

이때 첫 view controller를 뜻하는게 바로 root view controller입니다❗️

 

---

만약 우리의 앱이 scene-based app이라면

root view controller는 scene's stroyboard file의 첫 view controller입니다.

 

(scene-based app은 간단하게 설명해서 iOS 13 이상에서 사용되는 앱 아키텍처의 개념으로,

이전 iOS에서는 단일 window를 기반으로 앱이 동작했는데, scene-based로 오면서

여러 scene을 동시에 지원할 수 있도록 되었다는 말입니다. )

(GPT 짱 👍)

 

반대로, code base로 window를 생성한다면, window가 화면에 나타나기 전에 

rootViewController 프로퍼티에 우리가 직접 값을 할당해줘야 합니다.

 

말이 좀 어려운데 간단하게 말하자면..

 

프로젝트를 xcode에서 생성할 때 처음 생성되어 있는 storyboard가 root view controller로 설정 되어 있고,

code-base로 프로젝트를 진행한다면 직접 window의 root view controller를 설정해줘야 한다는 말입니다❗️

 

---

만약 root view controller가 아래 사진과 같이

container view controller일 때,

 

해당 container에 의해 보이는 자식 view controller는 직접 구성해줘야 합니다.

 

또한, 대부분의 container view controller는 그들만의 최소 UI를 제공하기 때문에, 

자식 view contorller는 container view controlle의 나머지를 채워줘야 합니다.

 

(예를 들어, UISplitViewController에 의해 제공되는 유일한 UI는 왼쪽, 오른쪽에 위치한

자식 view controller를 나누는 선만 있습니다.

그렇기 때문에 우리는 자식 view controller를 이용하여 나머지 UI를 그려줘야 합니다.)

 

 

---

마무리

해당 문서를 해석하면서, 내용까지 추가하려니 글이 너무 길어졌습니다..

중간 중간 애매하게 알고 있던 개념들을 함께 공부하니 많은 도움이 된 거서 같습니다.

 

navigation model이라는 것을 새롭게 알게 되었고, contanier view controller에 필요성에 대해서도 알게 되었습니다.

 

앞으로 정리해보고 싶은 글들은 많지만.. 저는 제가 잘 안할 것을 알기에..

일주일에 글 한 개라는 목표를 지키기위해 꾸준하게 공부하겠습니다.

 

---

잘못된 내용이나 피드백 해주실 게 있다면 꼭 댓글 부탁드립니다 🍎 🍎 🍎

감사합니다.

 

2024년 개발 공부와 영어 공부 꾸준하게 해보자.

아자 아자❗️  화이팅❤️‍🔥