Storyboard 사용해보기

 이번 개인프로젝트를 위해 간~단한 토이프로젝트를 진행해 보았습니다.

ios 개발은 처음이기 때문에 접근성이 좋은 Storyboard를 사용하려고 합니다.

android studio, java window builder, unity등을 써봤습니다만..

이렇게 낯설지는 상상도 못했네요🥲

제 삽질이 다른 어떤 누군가에겐 도움이 되길 바라며, 포스팅 시작해보겠습니다.

 

new project부터 시작해 보겠습니다!

 다른 포스팅들 보면 버젼이 달라서 new project의 구성부터 다르더군요.

iOS 개발을 할것이니 iOS탭에서 App을 클릭해 줍니다. 그리고 next!

 

그럼 이런 화면이 뜰텐데요, 보통 다른 프로그램들은 딱히 설정할 필요가 없겠지만...

현재 ios applicationd의 개발방식은 Storyboard와 SwiftUI 두가지 방식이 있기때문에

Interface 항목에서 하나를 선택해 주어야 합니다.

(스토리보드없이 개발할수도 있지만, 선택할수있는게 두가지니까 일단 그렇다고 치겠슴다)

 

---

Interface에서 SwuftUI를 선택하게 되면 LifeCycle도 선택할 수 있습니다.

SwiftUI App을 사용하면 sence 생명주기를,

UIKit App Delegate를 사용사면 기존의 App 생명주기를 사용하는 어플리케이션을 개발할 수 있습니다.

이 둘의 차이에 대해선 제가 포스팅해둔 글이 있으니, 궁금하시다면 참고해주시면 되겠습니다.

greensky0026.tistory.com/90

---

Product Name을 얼추 설정하고 next를 누르면 아래와 같은 화면이 나오게 됩니다.

 

아마 처음이시라면  '코드는 어딧고 레이아웃 아이템들은 어딨지?' 싶으실텐데요(제가 그랬습니다)

차근차근 가겠습니다.

 

 첫번째로, storyboard를 코딩할 UIViewController와 연결을 해야합니다.

물론 처음 생성되있는 스토리보드는 미리 연결된 UIViewController가 존재하지만,

뷰 하나로 작업할건 아니잖아요? ㅎㅎ 설명드리겠습니다.

 

 좌측 view controller scene를 선택하면 우측에 custom class의 class명이 보이시죠?

이름 우측에 화살표 모양을 누르시면 해당 swift파일로 이동하게 됩니다.

잘못된 클래스명이나 없는 클래스를 지정하면 아무 작동도 하지 않으니 정확히 기입하셔야 합니다.

 

그 다음, 상태바의 Editor탭에서 Assistant를 켜주면....

이렇게 옆에 바로 띄워주고요, 이제 뷰의 아이템을 생성해 작동할 준비가 된 것입니다.

Assistant기능의 경우 연결된 클래스가 UIViewController를 상속받아야 사용할 수 있습니다.

만약 원하는 UIViewController를 상속한 클래스로 이동이 되지 않았다면,

코드 영역 위의 Automatic을 눌러줘 수동으로 연결할 수 있습니다.

자, 이제 세팅은 끝났고 뷰에 아이템을 채워넣을 차례입니다.

 

상단의 저 조그마한 +버튼을 누르거나, 쉬프트 + 펑션 + L을 누르게 되면

이렇게  오브젝트 목록을 볼 수 있습니다.

 

---

만약 스토리보드를 추가로 생성하셧다면

이런 화면이 나올겁니다 여기서는 오브젝트 목록에서

뷰 컨트롤러를 더블클릭해 주시면 뷰 화면이 출력되게 됩니다.

 

---

 여튼, 오브젝트 목록에서 원하는 오브젝트를 드래그해서 오브젝트 창 밖으로 꺼내

storyboard의 원하는 위치에 두게 되면...

 이렇게 부착이 됩니다. 정말로 뷰에 부착 '만' 됩니다.

저희는 뷰에 그림을 그리는게 아니라 상호작용을 구현해야 합니다.

하지만 정작 우측의 swift 파일에는 코드한토씨 추가된게 없습니다.

당황하지 마세요! 저희가 직접 작업해주면 됩니다.

 

해당 오브젝트를 우클릭해 드래그를 하면 위처럼 파란줄 줄이 커서를 따라 연결되게 되는데요,

원하는 라인에 커서를 두고 우클릭을 떼면...

이런 창이 뜨게 되고, type을 weak로 선택해 connect를 누르면! 

 이렇게 입력되며 아울렛 레퍼런스가 연결됩니다.

그런데, 좌측에 라인수가 쓰여질 부분에 왠 원이 꽉 차있습니다.

이건 뷰의 아이템과 연결됬다는 뜻이구요, 반대로 연결되지 않았다면 빈 원이 생기게 됩니다.

원을 좌클릭해 스토리보드의 오브젝트와 연결하는 방법또한 가능합니다.

주의할점은, 'Outlet' 레퍼런스 관계를 설정하면 선언된 라인을 지운다고 관계가 없어지지 않습니다.

 

 오브젝트를 우클릭해 관계를 직접 끊어주셔야 합니다.

전 이게 참 생소하더라구요... 이부분에서 어문데에 삽질을 좀 했었네요 저는 ㅠㅠ

불필요한 아웃렛 레퍼런스 연결은 빌드시 에러를 초래할수 있다는점, 숙지하시길...(제가 또 당했습니다)

 

그럼 간단히 테스트를 한번 해보도록 하겠습니다.

버튼을 만들어 버튼을 터치할때마다 라벨의 숫자가 1씩 증가하도록 해볼게요,

버튼의 아울렛 레퍼런스를 생성할떄 type은 꼭 UIButton으로 해주는것 잊지 말아주세요!

 

import UIKit

class ViewController: UIViewController {
    
    @IBOutlet weak var lblTest: UILabel!
    var num = 0

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }

    @IBAction func btnTest(_ sender: UIButton) {
        num += 1
        lblTest.text = String(num)
    }
    
}

요로코롬 간단히 코딩을 해주고 실행해봅시다.

네 정상적으로 작동합니다!

이제 프로젝트를 본격적으로 착수할 일만 남았네요!