스토리보드
스토리보드는 장점과 단점이 명확한 UI 개발 방법입니다.
스토리보드는 아래와 같은 장점을 가집니다.
- ViewController 간 이동을 한 눈에 볼 수 있음
- ViewController의 모습을 시각적으로 표현해줘서 이해하기 쉬움
- View를 드래그 & 드랍으로 편하게 생성할 수 있음
단점은 이렇습니다.
- Git Merge 시 스토리보드에서 충돌(conflict)이 발생함
- 스토리보드가 여러 개가 되면 파일을 여는 속도가 느려짐
이러한 단점을 해결하기 위해 스토리보드를 사용하지 않고 100% 코드로 구현하거나,
스토리보드 레퍼런스를 이용해 스토리보드를 화면 별로 분리해서 관리합니다.
저는 코드로 UI를 작성하는 것을 선호하는데요.
알고 안 쓰는 것과 몰라서 못 쓰는건 아예 다르니,
오늘은 스토리보드를 화면별로 분리해서 관리하는 방법에 대해 알아봅시다.
간단한 예시를 통해 알아볼 것이고 조만간 작심삼일 프로젝트에도 적용해서 포스팅할 예정입니다.
효율적인 스토리보드 분리 방법
스토리보드 레퍼런스를 알아보기 전에 효율적인 스토리보드 분리 방법에 대해 알아봅시다.
먼저, 화면 1개 당 1개의 스토리보드를 생성하는 것이 좋습니다.
하나의 스토리보드 파일에 여러 개의 화면을 배치하면 눈으로 보기엔 좋지만 위에서 알아본 단점을 해결하기 어렵습니다.
스토리보드를 분리함으로서 협업 부담을 줄이고 파일 오픈 시간을 줄일 수 있습니다.
두 번째로, 스토리보드 파일 이름을 ViewController 클래스 이름과 동일하게 설정하는 것이 좋습니다.
코드로 스토리보드 인스턴스를 생성하기 위해서는 스토리보드의 이름을 설정해야 합니다.
스토리보드 파일 이름이 ViewController 클래스 이름과 동일하다면,
스토리보드 이름을 하드 코딩하는 것이 아니라 VC 클래스 이름을 얻어서 설정할 수 있습니다.
하드 코딩을 줄임으로서 에러의 위험을 줄일 수 있고 코드도 간략화가 가능합니다.
세 번째로 Segue를 이용하지 않고 코드로 화면을 이동하는 것이 좋습니다.
Segue를 이용한 화면 이동은 한 눈에 프로젝트 흐름을 볼 수 있다는 장점이 있지만,
데이터를 주고 받는 흐름을 확인하기는 비교적 어렵습니다.
또한, 실수로 Segue 연결을 끊어버리면 디버깅 하기도 어렵고요.
그렇기 때문에 Segue & prepare 오버라이딩이 아닌 present를 이용하여 화면 이동을 하는 것이 좋습니다.
(개인적으로 화면 이동은 취향 차이 같습니다.
데이터 전달이 적은 프로젝트에서는 한 눈에 흐름을 볼 수 있다는 점에서 Segue가 유리하다는 생각이 듭니다.
그래서 이번 포스팅에서는 Segue를 이용한 화면 전환을 다루고 다음엔 코드로 화면 전환을 해보겠습니다.)
스토리보드 생성
이번 예제에서 사용할 스토리보드를 생성합시다.
위 규칙대로 화면 당 1개의 스토리보드를 만들고 파일 이름을 통일해주었습니다.
Main 스토리보드에는 First VC로 이동하기 위한 버튼을 하나 배치했습니다.
FirstViewController와 SecondViewController는 화면 구분만 할 수 있으면 되서 Label만 넣었어요.
스토리보드 레퍼런스
스토리보드 레퍼런스를 이용해 화면을 이동해보겠습니다.
스토리보드 레퍼런스 준비 작업
스토리보드 레퍼런스를 생성하기 위해서는 레퍼런스를 생성할 스토리보드에 몇 가지 설정을 해줘야 합니다.
지금 예시에서는 First VC 스토리보드에 몇 가지 설정을 해줘야 합니다.
먼저 Storyboard ID를 설정해줘야 합니다.
스토리보드 레퍼런스가 어떤 스토리보드를 참조하는지 알게 하는 역할입니다.
Storyboard ID는 Identity 인스펙터에서 설정할 수 있습니다.
스토리보드 ID는 파일명과 동일하게 해줍니다.
스토리보드 레퍼런스 생성
Main 스토리보드로 돌아와 스토리보드 레퍼런스를 생성해 줍시다.
스토리보드 레퍼런스를 드래그&드롭하여 하나 생성합니다.
그럼 이런 귀여운 친구가 나옵니다.
스토리보드 레퍼런스를 클릭하여 위에서 만든 스토리보드를 참조하도록 합시다.
Storyboard Reference 설정에서 Storyboard는 참조할 스토리보드로 설정해주고,
Referenced ID는 스토리보드에서 설정한 스토리보드 ID로 설정해줍니다.
Referenced ID를 설정하지 않으면 "Unknown class _ViewController in Interface Builder file." 빌드 에러가 발생합니다.
혹시 이 빌드 에러가 발생하면 Referenced ID를 잘 설정했는지 확인해 보세요.
설정을 정상적으로 하셨다면,
스토리보드 레퍼런스가 FirstViewController로 바뀌었을 것입니다.
Segue를 이용해 화면 이동하기
이제 Segue를 이용해 화면을 이동해 봅시다.
사실 이 과정은 기존과 동일하게 Control + 드래그로 당겨서 Segue 설정을 하면 됩니다.
Segue까지 설정한 Main 스토리보드 파일의 모습은 이렇습니다.
화면 두 개가 하나의 스토리보드에 있을 때보다 훨씬 깔끔해졌죠?
이것이 스토리보드 레퍼런스의 힘(?)입니다. ㅎㅎ
실행 결과도 확인해보면,
버튼을 눌렀을 때 화면 이동도 정상적으로 잘 됩니다.
TabBarController 연결하기
스토리보드 레퍼런스를 이용해 TabBar 연결도 해봅시다.
Main 스토리보드에 Tab Bar Controller를 추가해주었습니다.
자동으로 생성되는 ViewController는 다른 스토리보드 레퍼런스를 추가해주면 삭제할거에요.
지금 다른 화면을 추가 안 하고 삭제하면 Xcode가 강제 종료되는 버그(?)가 있습니다 ㅎㅎ;;
Main 스토리보드에 탭바에 넣을 스토리보드 레퍼런스를 생성해주세요.
스토리보드 레퍼런스 생성 방법은 위와 동일합니다.
이번에도 Control + 드래그를 이용해 연결을 해주는데요.
이번에는 Relationship Segue로 연결해 주세요.
Relationship Segue는 화면 전환에 사용되는 다른 Segue와는 달리,
UITabBarController를 load할 때 해당 구성 ViewController의 NIB가 탭바에 포함되게 해줍니다.
FirstViewController와 SecondViewController를 모두 Relationship Segue로 연결해주면
이런 모양이 되는데요.
모두 연결을 해준 뒤 자동으로 생성되는 ViewController를 삭제해주면!
깔끔한 스토리보드 파일이 된답니다.
탭바 아이콘 추가하기
하지만 여기까지 하고 실행하면 한 가지 문제가 생깁니다.
탭바 아이콘이 생성이 되지 않아요.
(적당한 위치를 클릭하면 화면 전환은 된답니다 ㅎㅎ;;)
탭바 아이콘은 각각의 스토리보드에 추가해줘야 합니다.
탭바 아이콘을 추가하고 이미지와 타이틀을 설정하면 스토리보드 상에 탭바 아이콘이 생성됩니다.
모든 스토리보드에 각자의 탭바 아이콘을 추가하고 실행을 해주면
탭바 아이콘까지 제대로 생성이 되었습니다.
감사합니다!
참고
https://developer.apple.com/documentation/technotes/tn3123-refactoring-your-storyboard
아직은 초보 개발자입니다.
더 효율적인 코드 훈수 환영합니다!
공감과 댓글 부탁드립니다.
swift, iOS, iOS 개발, 아이폰, 앱 개발, 개발, 코딩