이 익숙함은 어디서 오는 걸까?

이 익숙함은 어디서 오는 걸까?: Navigation Controller 안녕하세요. 크몽에서 iOS 앱 개발을 하고 있는 제나입니다. 오늘은 누군가는 관심가져 본 적 없을 수도 있지만 누군가는 궁금했을 수도 있는 이야기를 해보려고합니다 하루에도 몇번씩 들여다보는 아이폰. 여러가지 종류의 앱을 사용하지만 어딘가 비슷한 느낌을 받습니다. 다양한 색과 레이아웃 등등 화면은 다 다르지만 어딘가 모르게 비슷한 느낌을 주는 것. 무엇인지아시겠나요? 대부분의 아이폰 앱을 보면 마치 모두가 약속하기라도 한 듯, 화면 맨 위에 있는 같은 높이의 바 영역을 갖고 있고 화면 전환할 때의 좌우로 이동하는 애니메이션도 똑같습니다. 수많은 사람들이 다 각자 방식으로 개발한 앱인데도 말이죠. 어떻게 이럴 수있을까요? 관찰하기 네비게이션 바가 있는 화면이 전환 될 때 애니메이션을 주의깊게 본 적 있나요? 너무 빨리 지나간다면 천천히 스와이프 하면서 뒤로 가보세요. 이때의 애니메이션을보면: 쿠폰 화면에서 마이크몽으로 뒤로 이동하는 그순간! 네비게이션 바 영역은 이동하지 않고 고정되어 있습니다. 하단의 컨텐츠 영역에만 그림자가 지면서 이동하고있어요. 네비게이션 바의 타이틀과 버튼이 페이드 인 아웃되며 자연스럽게바뀝니다. 다음 화면으로 이동할 땐 네비게이션 바 좌측에 백 버튼이생깁니다. 오늘의 주인공, 네비게이션컨트롤러 이러한 화면 전환에 필요한 동작들은 사실 네비게이션 컨트롤러가 제공합니다. 아주 편리하기 때문에 많은 앱에서 기본적으로 사용하는 컨트롤러입니다. 게다가 네비게이션 컨트롤러가 네비게이션 바도 제공하기 때문에 새로운 화면이 추가될 때마다 네비게이션 바를 만들 필요가 없습니다. 네비게이션 컨트롤러를 생성할 때 한번만 네비게이션 바의 색상이나 폰트같은 뷰(View)적인 부분들 대해 세팅을 해주면 끝난답니다. 때문에 개발자는 작업을 위해 새 화면 디자인 가이드을 볼 때 네비게이션 바 부분에 대해서는 타이틀의 내용과 거기에 들어가는 새로운 바 버튼(Bar button)만을 고려합니다. 좀더 이해하기 쉽게 예를 들어 설명 해 볼까요? DETAIL이라는 화면을 추가한다고 합시다. 기존에는 LIST라는 화면이 있고 그 LIST화면에서 항목을 누르면 DETAIL로 이동합니다. 개발자는 새 화면을 추가하고 타이틀 내용을 DETAIL로, 바 버튼에 대한 세팅을 하고 네비게이션 바 아래의 영역만을 만들기시작합니다. 추가된 화면에 대해 실제로 뷰를 그리는 작업이 필요한 부분은 네비게이션 바 아래 부분 뿐입니다. 그리고 LIST 항목을 누르는 액션에 이런 명령을 입력해둡니다. [DETAIL 화면을 현재 네비게이션 컨트롤러에 PUSH해주세요.] 이제 화면을 다 만들었습니다! 사용자는 앱을 실행해서 어떤 플로우에 따라 LIST 화면으로 진입합니다. 이 경우에는 MAIN화면을 거쳐 LIST화면으로 들어왔네요. 사용자가 LIST의 항목을 누릅니다. 개발자가 입력한 명령이 실행됩니다. [DETAIL 화면을 현재 네비게이션 컨트롤러에 PUSH해주세요.] 네비게이션 아이템 스택에는 이미 LIST 이전 화면에 대한 정보가들어있습니다. 이제 네비게이션 컨트롤러가 일을 하기 시작합니다. 네비게이션 컨트롤러가 알아서 이전 화면들의 내용들을 네비게이션 컨트롤러의 [네비게이션 아이템 스택]과 [화면 스택] 안에 저장하고 새로운 화면을표시해줍니다. 반대로, 뒤로가기를 누르면 [이 화면을 현재 네비게이션 컨트롤러에서 POP 해주세요.] 라는 명령이 실행됩니다. 표시중인 화면을 삭제하고 저장하고 있던 바로 이전 화면의 내용들을 다시 꺼내와서 보여줍니다. 이건 개발자가 명령을 입력할 것도 없이 네비게이션 컨트롤러가 알아서! 잘!해줍니다 정확한 표현은 아니지만 대략 이런느낌입니다. 이렇게 네비게이션 컨트롤러가 PUSH & POP 동작에 따라 알맞게 처리해주고 있었던 것입니다. 우리가 익숙하게 느끼던 모든 앱에서 똑같이말이죠! 네비게이션 바 여기서 한가지 알 수 있는 또다른 사실은 네비게이션 바는 각 화면이 가지고 있는 부분이 아니라는 것입니다. 네비게이션 컨트롤러에 들어가는 화면이 서로 공용으로 사용하는 컴포넌트인것이죠. 하나의 네비게이션 바를 모든 화면이 공유하고 있기 때문에 특정 화면에서 [네비게이션 바의 배경색을 빨간색으로!]라고 변경하면 어딘가에서 [네비게이션 바의 배경색을 파란색으로!] 라고 변경할 때까지 계속 빨간색을 유지하게됩니다. 때문에 한 네비게이션 컨트롤러가 갖고 있는 네비게이션 바의 색상, 타이틀 크기, 하단 그림자 등의 뷰(View) 적인 요소는 동일하게 유지하는 것이 좋습니다. 그래도 특정화면에서 바꾸고 싶다면? 그 화면이 PUSH되는 순간에 색을 바꾸고 다시 POP 할때 색을 되돌려 놓는 섬세함이필요합니다 결론 여기까지 잘 읽어보셨나요? 정리하자면 다음과같습니다. 많은 앱에서 화면 전환이 비슷하게 느껴지는 이유는 네비게이션 컨트롤러를 사용하기때문이다. 네비게이션 컨트롤러는 네비게이션 바와 뒤로가기 기능을제공한다. 네비게이션 컨트롤러는 이전 화면 정보를 스택에 저장해두고 PUSH & POP 동작에 따라 화면을전환해준다. 마치며 사실 이 글은 네비게이션 컨트롤러만을 이야기 하려고 한 것은 아니었어요. 처음 이야기하고 싶었던것은: 좌우로 슬라이드 되어 나타나는 화면과 아래에서 위로 뜨는 화면이 뭐가다른가! 이건 아래에서 위로 뜨는 화면으로 하는게 좋을거 같은데 뒤로 버튼이 있네 어떻게설명하지? 이것에 대해 이야기 하고 싶었는데, 그 전에 좌 우로 슬라이드 되는 이유, 네비게이션 컨트롤러에 대한 설명이 먼저 필요해 보였습니다. 좌우 슬라이드로 전환되는 화면은 주체가 네비게이션 컨트롤러라면, 아래에서 위로 뜨는 모달 방식은 주체가 다르기 때문이죠.(이것은 또 다른 포스팅에계속) 그리고 설명하기 위해 고민하는 데 생각보다 많은 시간이필요했습니다. 글로 설명하자니, 나도 읽기가 싫다. 그림은 어떻게 그려야 잘 이해가될까! 초간단 테스트앱. 이런저런실험. 결국 이번 포스팅에는 이렇게 네비게이션 컨트롤러에 대한 설명만 하게 되었지만 다음포스팅에서는: 아래에서 위로 뜨는 모달 방식은 뭐가다른가! 모달 방식은 언제쓰는가! 쓰다보면 생각나는 또 다른 이야기들등등 연말인데 코로나 때문에 갇혀있는 생활, 답답하시겠지만 모두들 힘내 봅시다. 그럼 모두들 건강 관리 잘하시고 다음 포스팅까지 안녕히 계시길! 이 익숙함은 어디서 오는 걸까? was originally published in kmong on Medium, where people are continuing the conversation by highlighting and responding to this story.