스토리보드 레퍼런스(Storyboard Reference) 이용해서 메인 스토리보드 분리해서 협업하기(버튼, Navigation Controller이용)

공모전 서류, 면접을 모두 통과해서 다시 본격적으로 iOS 앱 개발을 시작했습니다. 

세 명이 한팀으로 협업해 Xcode를 만져야 하기 때문에, 처음 시작은 Main.storyboard를 쪼개는 게 우선입니다. 꼭 쪼갤 필요는 없지만, 개발이 진행될수록 storyboard가 추가되고 코드가 많아지면 merge시 에러가 발생해 열심히 작업한 결과물들이 모두 날아갈 수 있기 때문에 쪼개는 것이 좋습니다.

 

작년~올해 겨울 동안 개발에 참여했던 앱 UniCalendar에서는 메인 스토리보드가 Tab Bar Controller였기 때문에, 이번에 제작하고자 하는 앱과는 살짝 차이가 있었습니다. 그리고 Storyboard Reference 사용에 있어서 당시 강사님의 도움을 받아서였는지, 정확히 기억이 나지 않아서 기록용으로 글을 작성합니다.

 

우선 제가 구현하고자 했던 화면의 구성은 메인 스토리보드에 버튼이 있고, 버튼을 누르면 다른 storyboard으로 넘어가되, Navigation Bar가 있어서 다시 뒤로(홈으로) 돌아갈 수 있게 하고 싶었습니다. 

 

1. 버튼 추가

Hello와 Bye라는 버튼

이제 Hello를 누르면 Hello.storyboard로, Bye를 누르면 Bye.storyboard로 넘어가게 하겠습니다.

 

2. Storyboard Reference 추가

Hello.storyboard와 Bye.storyboard를 추가해줍니다. 

 

3. Storyboard 설정

손가락 이모지가 가르키는 곳으로

우측 상단 + 버튼을 눌러서 Storyboard Reference을 2개 추가해줍니다.

그리고 Storyboard Reference를 선택하면 Storyboard를 선택할 수 있습니다. 이 부분에 내가 연결시키고 싶은 Storyboard를 클릭해줍니다. 만약 Hello로 가고 싶다면 Hello를, Bye로 가고 싶다면 Bye를!

 

4. Referenced ID 설정

아이디를 설정해줍니다. 저는 Storyboard이름을 대문자로 바꾼 걸 ID로 사용합니다. 이 ID는 Main.storyboard에서 Reference에서 설정한 값을 그대로 연결하고자 하는 스토리보드에 설정해주어야 합니다.

 

Hello 스토리보드에서 ID 설정하는 예시

StoryboardID에 아까 설정해주었던 ID값 그대로 입력

5. 연결(Show)

 

+결과 확인: 전체화면으로 안 나오고 모달로 나옴

 

 

제가 원하는 바는 이런게 아니라 전체 화면 + 뒤로 가는 네비게이션이 존재하는 화면이었는데 이게 뭔가.. 생각해보니

Navigation Controller를 사용해주지 않았으니 당연한 결과라는 걸 깨달았습니다 ㅎㅎ...

 

6. Main storyboard에서 Navigation Controller Embed In 해주기

가장 우측에 있는 게 Embed In

Navigation Controller 선택

추가된 모습

좌측에 생길 백 버튼에 Home으로 돌아간다는 정보를 주고 싶어서 Home이라는 글자를 넣었습니다

 

+ 결과 확인

원하던 대로 잘 나누어졌고, 백 버튼도 생겼습니다.

 

 

예시도 함께 올려두면 좋을 것 같아서 블로그를 작성하며 만든 프로젝트를 함께 업로드합니다.

StoryboardReference.zip

0.04MB