Storyboard 기반의 iOS 앱 개발 - 3편
거의 2주만에 만들게 되는군요. 원래는 이전 편 작성 후 3일 정도 뒤에 완성할 예정이었고 실제로 스크린샷은 이전 편 올린 바로 다음 날 다 찍어뒀습니다만, 몇 가지 일이 겹치면서 이렇게 늦게 되었습니다.
하나는 이전 포스팅에도 나와 있지만, 정말로 뜬금없이 Cubasis 사용법을 익히게 되면서 온갖 잡다한 곡들을 편곡한답시고 붙들고 있었던 거였고,
다른 하나는 모처에 입사지원을 하게 된 것입니다. (입사 완료되면 Profile 란에 업데이트 할 예정)
밤낮이 뒤바뀐 걸 맞추기 위해서 날린 시간도 좀 되고,
이틀 전은 역시 이전 포스팅대로 집의 서버에 fossil-scm 관련한 작업을 수행하느라 늦었습니다. 정작 그 포스팅엔 서버 세팅 부분은 올려놓지 못했네요.
어쨌거나, 잡다한 이야기는 여기서 끝내도록 하겠습니다.
1. 버튼 터치 이벤트에 Segue 를 연결 - Action Segue
지난 번 시간에는 가장 기본적인 단계에서 시작되는 Segue 인, Relationship Segue 연결을 배웠었죠. 여기까지만 하면, 기본적인 화면을 구성하는 것은 가능하지만 딱 거기까지죠. 사용자가 어떤 것을 눌렀을 때 이 화면으로 가야된다거나 저 화면으로 가야된다거나 이런 것을 지시할 수는 없습니다.
그러므로 이번에는 사용자의 특정 동작을 Segue 와 연결시키는 것을 해 보도록 하겠습니다. 그 중 가장 기본적인 사용자 입력 도구인 버튼을 사용하는 것으로요.
우선 지난번까지 진행했던 시점으로 돌아가 보도록 하죠.
일단 Segue 가 끊긴 테이블 뷰 컨트롤러는 저쪽으로 치워둡니다. 뷰 컨트롤러를 몇 개 더 만들 예정이거든요.
뷰 컨트롤러를 선택해서 2개정도 바닥에 더 깔아보죠. 가장 위의 것과 가장 우측의 것이 새로 만든 겁니다. 하단에 있는 테이블 뷰 컨트롤러는 위에서 치워뒀던 거죠.
자 이제 "여긴 비었어. 나 빼고!" 를 바꿔줄 때가 되었습니다! 해당 뷰 컨트롤러를 좌측의 Document Outline 리스트 에서 선택한 다음 (빨간색 테두리 쳐 둔 부분입니다), 만약 뷰 컨트롤러 좌측의 삼각형이 우측을 향하고 있다면, 이를 눌러서 하부 목록들을 나타나게 한 다음, 하부에 소속된 View 를 선택해 줍니다.
이전 그대로 놔뒀다면 당연히 View 가 있겠지만, 실수로 지웠다거나 하면 없을 수도 있습니다. 이 경우는 우측 하단의 오브젝트 라이브러리에서 View 하나를 ViewController 에 내려둔 다음, ViewController 의 Connection Inspector (우착 상단의 윈도에서 가장 오른쪽 탭) 에서 view 속성을 연결해 주면 됩니다. 여기서 자세히 설명할 내용은 아니라서 일단 이렇게 말로만 설명해 둡니다. 잘 모르시겠으면 그냥 지우고 새로 작성하시는 게 낫습니다.
자 이번 파트가 버튼에 연결해 보는 것인 만큼, 버튼을 만들어야겠죠. 만들어 봅시다. 우측 하단의 Object Library 를 보죠.
주욱 리스트를 훑어가다 보면, Round Rect Button 이 나옵니다. 이걸 선택한 다음, 드래그해서 위의 ViewController 에 끌어놓습니다.
이렇게 되죠.
뷰 컨트롤러를 3개 만들었으니 버튼도 3개 있어야겠죠. 나머지도 놓습니다. 뚜다닥.
전 일단 지원되는 가이드를 통해서 가지런히 놓긴 했는데, 당연하지만 대강 놓으셔도 됩니다. 이제 첫 번째 버튼 위에 커서를 두고, Control 키를 누른 다음 드래그를 해서 상단에 있는 뷰 컨트롤러까지 주욱 당겨놓습니다. 이전과 비슷하지만, ViewController 에서 시작하는 것이 아니라, 버튼에서 시작한다는 점이 다르죠!
예 이렇게 말이죠. 마우스를 놓으면, Action Segue 를 선택하라는 팝업이 등장합니다.
예 이렇게 말이죠.
우리는 현재 NavigationController 를 사용하고 있으므로, 가장 기본적인 형태인 push 를 쓰도록 합니다. 차후에 modal 과 custom 에 대해서는 이후 과정에서 따로 설명드리도록 하겠습니다.
선이 연결되었군요! 자 이제, 나머지 버튼들도 같은 방법으로 연결해 봅시다. 두 번째 버튼은 우측의 ViewController 에, 세 번째 버튼은 아래의 TableViewController 에 연결해 봅시다.
잘 되었군요. 여기서 부가작업 하나를 하죠. 상단의 뷰 컨트롤러와 우측의 뷰 컨트롤러가 둘 다 빈 상태라 구분되지 않으니 뭔가 하나 넣어둬야겠습니다.
이전 편에서 했던 대로 Label 하나를 넣은 다음, "나는 첫 번째당." 을 넣었습니다. 이와 함께 버튼 타이틀 역시 "첫 번째 고고" 로 바꿔놨는데요. 뭐 이건 안하셔도 됩니다. 해보신 적이 한 번도 없다면, 한번 찾아봐서 해보시는 것도 나쁘지 않습니다. 전 첫 번째 버튼 이외에 나머지 버튼도 바꿔뒀습니다. 결과는 아래에...
그럼 이제 실행을 해 보죠.
잘 나왔군요. 버튼 타이틀 바꿔뒀다는 건 바로 위에서 설명 드렸죠. 중요한 건 아니니 넘어갑시다.
자 이제, 첫 번째 버튼을 눌러 봅시다. 이거 그냥 하나로 붙이는 게 나을 거 같은데 괜히 3개로 나눴나 봐요.
첫 번째 누르면 이렇게,
두 번째를 누르면 이렇게,
세 번째는 TableViewController 였으니 이렇게 됩니다.
이런 식으로 사용자의 버튼 등, 사용자의 행동에 연동되어 처리되는 Segue 를 Action Segue 라고 합니다. 지난번에 했던 게 Relationship Segue 였죠?
이런 Action Segue 는 버튼 외에도 UI Object 중 사용자의 이벤트를 받는 대표적인 대상 중 하나인 TableViewCell 과도 연결되어 동작할 수 있습니다. 이건 다음 시간에 할 거고요.
Relationship Segue, Action Segue 외에, 이후 코딩과 같이 설명하게 될 Manual Segue 가 있습니다. 이걸 설명하는 건 몇 편 뒤의 이야기가 되겠네요.
아무튼 이렇게, 별다른 코딩 없이도 기본적인 화면 전환까지 만드는 것이 가능합니다. 잘하면 이런 부분들은 적절히 다른 분야와 분업화 할 수 있는 여지가 있지요. 관련 내용에 대해서는 별도의 포스팅으로 써둘 계획입니다만.
이번에는 여기까지입니다. 다음 번 강좌는 다소 오래 기다리셔야 할 거 같네요. 앞으로 2주간은 이러저런 일들이 많다 보니...
