[UIKit/Storyboard] 씬(Scene)과 Class 연결

 

 

🔖  Cocoa Touch Framework 

 

- iOS나 OS 환경에서 실행해야하는 소프트웨어 프로그램을 빌드하기 위해 필요한 애플리케이션 개발 환경. (애플 최적화 & 최상위 레벨의 프레임워크) -> iOS 앱을 만드는데 필요한 기초적인 툴 

- UIKit = 대표적인 UI 도구 : iOS 환경의 씬 구성에서 유저 인터스페이스에서 동일성이 존재하는 이유가 바로 동일한 유저 인터스페이스를 사용하여 씬을 구성하기 때문. 

• UIKit 안에 UILabel과 UIButton이 있고, 여기에 UIView가 상속되어 있다.
  • UILabel : text, textColor, textAligment .... 
  • UIButton : SetTitle, SetTitleColor...
  • UIView : layer(cornerRadius, borderColor, borderWidth...), backgroundColor....

** swiftUI 는 iOS 13 이상부터 사용 가능. 모든 애플 플랫폼과 호환이 가능하기 때문에 앞으로 사용률이 더 높아질 것으로 예상 중.

 

 

🔖  씬(Scene)과 Class 연결하기

** Scene 은 사용자가 보는 화면, Logic은 사용자가 보는 화면이 작동하도록 하는 작업이다.

 

 

⚒️ 탬플릿을 사용하여 생성하기

 

[기본세팅]

 

1. 단축키 (Command + N) 

 

- Cocoa Touch Class 선택하기.

 

** Swift File을 선택하면 아주 기초적인 것(foundation)부터 수동적으로 내가 입력해야 한다.

 

 

2. 정보 입력 해주기.

- class는 내가 스토리보드에서 연결하려 하는 ControllerView를 고려해서 이름을 지어준다.

- Subclass of 는 상속받는 슈퍼클래스를 지정하는 것으로 스토리보드에 추가한 ViewController와 같은 종류여야 함. 

 

 

 

3. Group과 Targets 설정

 

 

- Group은 폴더로 연결되어 있는지 꼭 확인할 것. -> 폴더로 지정되어 있지 않으면, 나중에 저장 위치가 변경 되는 등 문제가 발생할 수 있음.

 

 

 

4. 연결하기

 

 

• VC(=ViewController) 상단 첫번째 아이콘(선택시 파란색이 됨)을 통해 해당 VC를 선택 후 custom class (인스펙터 영역 오른쪽에서 네번째)에서 Cocoa Touch Class에서 만들었던 클래스 이름을 찾아 매칭 시켜주기. 보통 첫 글자만 쳐도 자동완성 되지만, 확인 할 것.
• Inherit Module From Target 체크.

위 과정을 마쳐야만 IBOulet 과 IBAction (변수)를 설정할 수 있다!

 

 

 

[Scene 연결하는 방법]

 

 

 

1.

 

 

Scene 연결은 비교적 간단하다.

 

레이블 또는 버튼를 선택한 후 마우스의 오른쪽 버튼을 누르고 커서를 뷰컨트롤러 영역으로 끌어놓으면 연결된다. 이때 Type 선택이 잘 되어있는지 확인해주어야한다. 이름을 정할 땐 첫글자는 소문자로 쓰는 것이 좋다. (대문자로 쓰면 apple이 정해둔 고유한 키와 혼동될 가능성 높음)

 

 

 

2.

 

scene 연결이 잘 되어 있다면 VC 영역에서 @IBAOutlet 으로 나오는 걸 확인할 수 있다. 

IBOulet → IB = Interface Builder란 의미로, 이 작업은 스토리보드에서 일어나고 있다! 란 의미와 같다.

 

**보통의 경우 씬에서 잘 연결이 되지만, 안 될 때가 있다. 그럴 땐 시뮬레이터이나 디버깅 영역에서 연결이 되지 않아 작동이 안 되는 걸 확인할 수 있는데, 이럴 때 해결방안은 아래와 같다.

 

 

 

 

 

우선, 연결의 유무를 확실히 파악해야한다. 인스펙터의 (triggered) segues 영역에 해당 아울렛이 없으면 연결이 되지 않았음을 알 수 있다.

 

 

 

 

 

viewcontroller 영역에서 선택되지 않은 outlet의 화살표 부분을 클릭 + 그대로 오른쪽 마우스 버튼을 누른 채로 연결하려던 뷰객체 부분으로 연결해주면 해결된다. 참고로, IBAction 연결 과정도 똑같다.