Dev/UIKit

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

Callie_ 2023. 7. 29. 20:42

 

1. iOS 앱 개발의 기본 도구: 코코아 터치 프레임워크와 UIKit

  • 코코아 터치 프레임워크 (Cocoa Touch Framework) iOS 앱을 만들 때 필요한 기본 개발 환경을 말한다. 애플 기기에 최적화되어 있고, 앱 개발에 필요한 기본적인 도구들을 제공한다. 쉽게 말해, iOS 앱을 만드는 데 필요한 모든 필수 도구들이 모여있는 상자라고 생각하면 된다.
  • UIKit 이 상자 안에 있는 가장 대표적인 도구가 바로 UIKit이다. 우리가 아이폰 앱을 사용할 때 보는 버튼, 라벨, 이미지 등 모든 사용자 인터페이스(UI) 요소들을 만들고 관리하는 데 사용된다.
    • UILabel: 텍스트를 표시하는 데 쓰는 도구이다. (예: 글자 내용, 색상, 정렬 등 설정)
    • UIButton: 버튼을 만드는 도구이다. (예: 버튼 제목, 색상 등 설정)
    • UIView: 라벨이나 버튼 같은 모든 UI 요소들의 '바탕'이 되는 가장 기본적인 도구이다. (예: 배경색, 모서리 둥글기 등 시각적인 부분 설정)
  • 💡 참고 💡 SwiftUI는 iOS 13부터 사용할 수 있는 새로운 UI 개발 도구이다. 모든 애플 기기에서 사용할 수 있어서 앞으로 활용도가 더 높아질 예정이니 참고해두자.

 

2. 화면(Scene)과 코드(Class) 연결하기

사용자가 직접 보는 화면을 Scene(씬)이라고 하고, 이 화면이 실제로 작동하도록 뒤에서 움직이는 코드를 Logic(로직) 또는 Class(클래스)라고 한다. 이 둘을 연결해야 앱이 제대로 작동한다.

 

3. 템플릿으로 새 클래스 만들기 (기본 세팅)

새로운 화면에 연결할 코드를 만들 때는 주로 'Cocoa Touch Class' 템플릿을 사용한다.

 

1. 새 파일 만들기: Command + N 단축키를 눌러 'Cocoa Touch Class'를 선택한다.

  • 'Swift File'을 선택하면 아주 기본적인 코드만 있어서 모든 것을 수동으로 입력해야 한다. 'Cocoa Touch Class'를 선택하는 것이 훨씬 편리하다.

 

 

 

2. 정보 입력

 

  • Class 이름: 만들려는 화면(뷰 컨트롤러)과 어울리게 이름을 짓는다.
  • Subclass of (상속): 연결할 스토리보드의 뷰 컨트롤러 종류와 동일하게 지정해야 한다. 예를 들어 UIViewController를 선택한다.

 

 

3. 그룹 및 타겟 설정

  • Group (폴더): 파일이 원하는 폴더에 잘 들어가는지 반드시 확인한다. 그렇지 않으면 나중에 저장 위치가 변경되는 등 문제가 발생할 수 있다.

 

 

 

4. 스토리보드의 Scene과 Class 연결하기

이제 스토리보드에 있는 화면(Scene)과 방금 만든 코드(Class)를 이어줄 차례다.

 

 

  1. 뷰 컨트롤러 선택: 스토리보드에서 연결하려는 **뷰 컨트롤러(VC)**를 클릭한다. (선택되면 파란색 테두리가 나타난다.)
  2. 커스텀 클래스 설정: 인스펙터(오른쪽 네 번째 아이콘)에서 'Custom Class' 섹션을 찾은 다음, 'Class' 항목에 방금 만들었던 클래스 이름을 입력한다. 보통 첫 글자만 쳐도 자동 완성되지만, 한 번 더 확인한다.
  3. 'Inherit Module From Target' 확인: 이 항목이 체크되어 있는지 확인한다.

이 과정을 마쳐야만 이제부터 코드에서 화면 요소를 다룰 수 있게 된다. (IBOutlet과 IBAction 설정 가능)

 

 

 

 

 

 

5. 화면 요소(Label, Button)와 코드 연결하기 (IBOutlet/IBAction)

화면에 있는 레이블이나 버튼 같은 UI 요소들을 코드와 연결하는 방법이다.

  1. 연결할 UI 요소 선택: 스토리보드에서 연결하려는 레이블이나 버튼을 선택한다.
  2. 드래그하여 연결: Control 키를 누른 채 마우스 오른쪽 버튼을 클릭하고, 커서를 해당 UI 요소에서 **뷰 컨트롤러 코드 영역(에디터 창)**으로 드래그하여 놓는다.
  3. 타입 확인: 연결 창이 뜨면 'Type'이 올바르게 설정되었는지 확인한다.
    • 연결할 변수 이름의 첫 글자는 소문자로 쓰는 것이 좋다. 대문자로 시작하면 애플이 미리 정해둔 고유한 이름과 혼동될 가능성이 있기 때문이다.

 

 

 

 

4. 확인하기: 연결이 잘 되었다면, 뷰 컨트롤러 코드에서 @IBOutlet (변수 연결) 또는 @IBAction (동작 연결)이 생긴 것을 확인할 수 있다.

  • IBOutlet에서 IB는 'Interface Builder'를 의미한다. 이는 이 작업이 스토리보드에서 이루어졌음을 나타낸다.

 

 

 

6. 연결이 잘 안 될 때

보통은 위 방법대로 하면 잘 연결되지만, 가끔 예외적인 상황이 발생한다. 이럴 때는 아래처럼 확인해 볼 수 있다.

  • 연결 유무 확인: 인스펙터의 'Connections Inspector' (오른쪽 네 번째 아이콘)에서 연결하려는 아웃렛이나 액션이 목록에 있는지 확인한다. 만약 목록에 없다면 연결이 되지 않은 것이다.

 

  • 역연결 시도: 뷰 컨트롤러 코드 영역에서 연결되지 않은 @IBOutlet이나 @IBAction 옆의 빈 동그라미를 클릭한다. 그대로 마우스 오른쪽 버튼으로 누른 채로, 연결하고 싶었던 스토리보드의 해당 UI 요소(예: 버튼)로 드래그하여 놓으면 연결이 해결된다.