Storyboard 기반의 iOS 개발 - 1편
회사 그만두고 충분히 쉬기도 했으니, iOS 개발을 정리할 겸 해서 Storyboard 기반의 아이폰 개발 강좌를 써 보려고 합니다. 다른 강좌와 섞어서 진행할 예정입니다. 저도 이래저래 찾아보고 하는 중이라 틀린 부분이 있을 수 있으니, 더 잘 아시는 분들은 지적해주시면 감사하겠습니다.
스토리보드는 iOS 5 SDK 부터 추가된 것으로서, 기존 UI 작업과는 달리, 어플리케이션 내에 화면간의 흐름 제어를 포함한 전체적인 형태를 한 군데에서 작업할 수 있도록 구성한 기능입니다. 비주얼적으로 나타나므로 직관적으로 어플리케이션의 화면 흐름을 볼 수 있고, 인터페이스 빌더만으로도 기본적인 화면 흐름은 대부분 구성이 가능합니다. 인터페이스 빌더로 노출된 함수를 통해 코드와 이벤트 사이를 연결하는 기능까지 제공했던 기존의 방식에서 한 단계 더 진보했다고 할 수 있죠. 이후에 설명드리겠지만, 기존의 UITableViewController 를 구성하는 xib 방식이 가진 문제점도 이번 스토리보드에서 굉장히 직관적인 방법으로 해결하였습니다. 전반적으로 작업하기 많이 편해졌죠.
iOS 5 SDK 시절에는 다소 빈약한 부분들이 있었는데, iOS 6 SDK 와서 몇 가지가 더 보완되었습니다. 이에 따라 여기서는 iOS 6 SDK 를 기준으로 설명드리도록 하겠습니다.
시작하기 전에, 우선 Xcode 설치는 되어야겠죠. 이 부분은 생략하도록 하겠습니다. 뭐 별로 어려운 것도 아니니... 맥 앱스토어에서 Xcode 로 검색하시면 간단합니다.
1. 프로젝트 생성
그럼 실행을 해 보죠.
참고로, 이 화면은 Xcode 처음 실행 외에도, 아무런 창도 띄우지 않은 상태 (프로그램 종료는 아닙니다) 에서 Dock 의 Xcode아이콘을 누르면 바로 볼 수 있습니다.
좌측의 첫 번째 메뉴인 Create a new Xcode project 를 누릅니다. 그럼 다음과 같은 화면이 나타납니다.
일단 빈 프로젝트에서 시작하는 걸로 하죠. 위에서 몇몇 템플릿은 스토리보드를 사용하는 구조로 되어 있으므로, 그 방식을 확인해 보실 분들은 내부 구조를 확인해 보실 겸 하나 만들어보셔도 좋습니다.
이 부분은 별도로 설명드리는 게 낫긴 하지만, 일단 여기서 좀 써보도록 하겠습니다.
Product Name : 어플리케이션 패키지 명칭을 설정합니다. 어플리케이션 빌드 시, 실행 파일 및 번들을 포함한 전체 패키지가 이 파일명으로 설정되죠. 더불어 iOS 앱스토어의 어플리케이션 별 고유성을 상징하는 Bundle Identifier 마지막이 이 값을 기준으로 설정됩니다. 이 값은 처음에 잘 적으시는 편이 좋은 것이, 프로젝트 만든 후에도 바꿀 수 없는 건 아니지만 바꾸려면 손대야 할 부분이 한두 군데가 아니고 골치도 아프니, 처음에 잘 정해 두시는 것이 좋습니다. 다만 이 명칭은 폰에 설치되거나 앱스토어에 배포될 때 나타나는 앱 이름과는 아무런 상관이 없습니다.
Organization Name : 기관명이죠. 적당히 적으시면 됩니다. 어디에서 나타나는지는... 까먹었습니다.
Company Identifier : 회사 구분용도로 쓰는 건데, 실제 역할은 Bundle Identifier 를 결정하는 용도로 쓰입니다. Product Name 과 함께 말이죠. 두 조합을 통해 설정 가능합니다.
Bundle Identifier : iOS 앱의 고유성을 상징하는 식별자로서, 단말 테스트 시점부터 앱스토어 등록 때까지 어느 곳에서나 굉장히 중요한 역할을 하는 부분입니다. 이에 대해서는 여기서 다루기 너무 많으니 생략하도록 하죠. 지금 위의 윈도에서는 직접 입력이 불가능하고, Product Name 과 Company Identifier 의 조합에 의해서만 생성할 수 있지만, 일단 프로젝트가 생성되고 나면, 앱 기본 property list 파일에서 마음대로 편집할 수 있습니다.
Class Prefix : 클래스 생성 시 앞 부분에 자동으로 붙여 줄 접두어를 설정합니다. 이 값을 입력하면, 클래스 생성 창에서 클래스 명칭에 자동으로 앞부분에 여기 입력한 값을 붙여줍니다. 물론 클래스 명칭 자체는 자유로이 설정 가능하며, 편의 기능에 가깝다고 보시면 되겠습니다. 접두어 많이 쓰셨던 분들이라면 나름 편한 기능이죠.
Devices : 기기 설정합니다. iPhone / iPad / Universal 이 있죠. Universal 로 할 경우, 초기 UI 를 자동으로 갈라 줍니다. 이후 작업은 알아서 직접 해야 하지만 -_-;
Use Core Data : 코어 데이터 쓸 경우 체크해 두면, 프레임워크도 미리 연결해 주고, 기본적인 부가 코드도 작성해 줍니다. 이번에는 스토리보드만 쓸 것이니 넘어가도록 하죠.
Use Automatic Reference Counting : 자동 참조 카운팅 기능을 쓸지 말지 묻습니다. iOS 5 부터 추가된 기능이죠. iOS 는 최근의 다른 고급 언어와는 달리 원래 메모리를 수동 관리해주어야 하기 때문에 아무것도 모르고 코딩할 경우 메모리 누수나 잘못된 메모리 접근 등의 문제를 일으킬 가능성이 매우 높습니다. 따라서 처음 개발하시는 경우는 사용하시는 것이 좋고, 역시 복잡한 기법을 사용하는 것이 아니라면 사용하는 것이 코딩량도 줄이고 전체적인 개발 속도도 향상시킵니다. 그러나, 중급 이상의 기법 사용 시 제대로 지원하지 않아 오히려 코딩이 더 복잡해지는 문제가 있기에, 중/고급 개발자라면 상황에 따라 선택하시는 것이 좋습니다. 그런데 중/고급 개발자라면 이 문서를 볼 일이 별로 없을 듯 -_-;
Include Unit Tests : 유닛 테스트용 코드를 추가해 줍니다. 이 부분은 역시 여기서 다루기 너무 크니 패스.
이번에는 테스트로 작성하는 거니 설정 형식은 기본값으로 그대로 두고, 텍스트 창에는 적당히 값을 입력해 두시면 되겠습니다.
폴더는 적당히 선택하시면 됩니다. 참고로 아까 지정한 Product Name 기준으로 폴더를 하나 만들고 그 안에 프로젝트 파일을 생성하므로, 굳이 Product Name 기준의 폴더를 하나 더 만들어두실 필요는 없습니다.
만약 Xcode 내의 Git 을 통해 소스 관리를 하실 거라면, 하단의 Source Control 쪽을 체크해 두시는 것도 좋겠죠. 전 보통 따로 쓰기 때문에 체크해 두진 않습니다. 요즘은 Git 대신 fossil 을 사용중이기도 하구요.
여기까지 하면 프로젝트를 생성하고 기본 창이 나타날 것입니다.
하지만 그거 스샷은 안찍었다는 거.
2. 스토리보드 생성
프로젝트 명칭 바로 아래에는 프로젝트명과 동일한 이름을 가진 그룹이 존재합니다. 보통 일반적인 개발 소스들은 이 아래에 들어갑니다. 다만 이 그룹은 폴더와는 좀 다르니 주의하시길. 관련 부분에 대해서는 나중에 별도 설명드리도록 하겠습니다.
해당하는 그룹을 선택 후 마우스라면 오른쪽 버튼, 트랙패드라면 손가락 두개로 팝업을 호출합니다. 위의 창이 나타나는데요. 여기서 New File 을 선택합니다.
다음과 같은 창이 나타납니다. 좌측에서 iOS 의 User Interface 항목을 선택하고 우측에 나타나는 창에서 Storyboard 아이콘을 선택합니다.
우리는 일단 아이폰 것만 먼저 만들어 볼 예정이니 아이폰을 선택합니다. 기본적으로는 아이폰이 선택되어 있을 테니 다음으로 넘어가죠.
스토리보드 파일 이름을 정합니다. 다른 부분은 건드리실 필요 없이 이름만 적당히 정해주시면 되겠습니다.
생성된 파일을 선택하면, 다음과 같이 모눈종이같은 화면이 나타납니다. iOS 4 SDK 초창기 시절까지만 해도 Interface Builder 가 별개의 어플로 동작했지만, 현재는 Xcode 에 통합되어 동작하죠. 이제 이 화면에서 본격적인 작업을 시작해 보겠습니다.
3. 내비게이션 컨트롤러 기반의 화면 만들기
일단 가장 흔히 쓰이는 내비게이션 컨트롤러를 기반으로 한 UI 를 만들어 보도록 하죠. 모르는 분들을 위해 말씀드리면, 항목을 눌러서 화면이 하나씩 오른쪽에서 나타나 쌓이는 구조로 만들어지는 UI 의 기반이 내비게이션 컨트롤러입니다.
우측 하단의 Objects 창에서 죽 스크롤 해 보면 Navigation Controller 라는 항목이 있습니다. 이걸 선택한 후, 드래그해서 모눈종이 쪽으로 끌어옵니다. 드래그 할 때 보면 굉장히 거대한 항목이 움직이는 걸 볼 수 있습니다.
요렇게 되죠. 우측은 내비게이션 컨트롤러. 좌측은 자동으로 생성된 테이블 뷰 컨트롤러입니다.
내비게이션 컨트롤러는 스택구조, 즉 선입후출 형태의 UI 를 구성하기 위한 기반이라는 것을 위에서 말씀드렸습니다. 그렇기 때문에 그 자체로는 별도의 화면을 가지고 있지 않죠. 따라서 기본적인 동작을 위해서는, 실질적으로 화면 UI 를 가진 개체가 필요합니다. 그래서 자동으로 테이블 뷰 컨트롤러를 하나 생성해 같이 붙여두는 거죠.
컨트롤러 등의 역할에 대해서는 다른 강좌에서 설명드리도록 하고, 여기서는 일단 이렇게 된다 정도애서 끝내고 다음으로 진행하도록 하겠습니다.
4. 스토리보드를 화면 구성 기본요소로 설정
일단 여기까지만 보면, 실행했을 때 테이블 뷰가 나와야 하지 않을까? 생각할 수 있지만, 하나 빼먹은 게 있습니다. 스토리보드를 사용하겠다고 지정하는 부분이죠. 이번엔 그 부분입니다.
우측에 보시면 Main Storyboard 라는 부분과 Main Interface 라는 부분이 보입니다. 스토리보드가 도입되기 전에는 Main Interface 항목만이 존재했죠. 이렇게 말씀드리면 눈치빠른 분들은 대강 아시리라 생각합니다.
Main Storyboard 는 프로그램 실행 시 사용할 스토리보드를 설정하는 곳이고, Main Interface 는 프로그램 실행 시 처음 사용하게 될 UI 를 설정하는 곳입니다. 여기서 중요한 점은, 두 값이 동시에 존재할 수는 없다는 것입니다. 따라서 스토리보드를 시작점으로 사용할 경우 자동적으로 Main Interface 항목은 빈 칸이 되고, UI 뷰 컨트롤러를 시작점으로 삼을 경우 Main Storyboard 는 자동으로 빈 칸이 됩니다.
우리는 스토리보드를 사용할 것이므로 Main Storyboard 항목의 콤보박스를 눌러 봅니다.
만들어 둔 스토리보드 목록이 여기에 나타나게 됩니다. 뭐 만들어 둔 게 하나 뿐이니 그걸 선택하면 되겠죠.
여기까지만 하면 기본 설정이 완료된 것... 처럼 보이지만 실제로는 하나 더 해야 할 일이 있습니다. 우리가 빈 프로젝트로 만들었기에 생성된 자동 생성 코드 중 일부를 비활성해야만 정상 동작하는 것이죠.
어플리케이션 실행 시 진입점으로 사용되는 AppDelegate 파일의 소스를 확인해 봅니다. 만약 처음 프로젝트 생성 시 Class Prefix 를 정해 두셨다면, 해당 클래스 파일명 앞에 해당 접두어가 붙어 있을 것입니다. 지금 이 프로젝트의 경우 아까 GCE 라고 정해두었으므로 GCEAppDelegate 라는 클래스로 생성되었죠.
소스입니다. 스크린샷에 나타나는 메소드가 어플리케이션 실행 시에 호출되는 진입점입니다. 아 물론 실제로는 Supporting Files 그룹 내에 있는 main.m 의 int main 함수가 먼저 호출되고 이후 여기에 진입하지만 말이죠. 이 부분에 대해서는 나중에 역시 따로 설명.
이 메소드 내의 모든 내용을 주석처리, 혹은 삭제해 버립니다. 다만 이 메소드의 반환값이 BOOL 인 만큼, return YES 부분은 남겨 둬야곘죠.
이제 실행해 봅시다.
잘 나오는군요.
이번에는 여기까지 하도록 하겠습니다. 다음편은 언제 쓸 수 있을런지~
