아이폰 개발을 시작해보자 (4)

시작해봅시다 (튜토리얼) #2

프로젝트를 생성하면 다음과 같은 화면이 나타나게 됩니다.

Workspace

크게 네 부분으로 나누어져 있는데요, 위에는 툴바 영역이 있고 좌측에는 네비게이션 영역이 있으며 중앙에는 에디터 영역이, 우측에는 유틸리티 영역이 있습니다.

툴바 영역에는 작성한 앱을 실제로 실행해볼 수 있는 “실행 버튼”, 실행을 할 때 어디서 실행해볼 것인지 (시뮬레이터 상에서나 혹은 기기 상에서) 선택할 수 있는 “타겟 선택” 부분이 있습니다. 또한 오른쪽에는 보는 방법을 변경할 수 있는 “에디터 버튼”과 “보기 버튼”이 있습니다. 네비게이션 영역에는 일차적으로 현재 작업중인 프로젝트를 구성하는 파을들을 목록의 형태로 볼 수 있습니다. 에디터 영역에서는 소스 파일의 편집 및 프로젝트의 설정 변경, 인터페이스의 구성 등이 가능하고, 오른쪽 유틸리 영역에는 현재 선택된 객체에 대한 세부 정보를 보여주는 부분입니다.

방금 템플릿을 가지고 새로 만든 프로젝트에서는 별다른 수정 없이도 바로 실행이 가능합니다. 어플의 실행을 위해서는 “타겟 선택” 부분에 Scheme이 (프로젝트명) > iPhone 5.x Simulator가 선택되었는지 확인 후에 “실행버튼”을 눌러주세요.

“실행 버튼”을 누르시는 순간 Xcode는 작성된 소스들의 컴파일을 시작하게 됩니다. 컴파일이 완료되면 자동으로 시뮬레이터가 실행이 되고 아래와 같이 빈 창에 어플을 표시하게 됩니다.

First Run

흰색으로 비어있는 화면을 표시하는 앱이 실행되게 되었습니다.


어떤 과정을 거쳐서 이 하얀 화면이 나타나게 되었는가

템플릿을 통해서 생성한 프로젝트이기 때문에 뭔가 자동적으로 알아서 다 세팅이 되어서 흰색 화면이 실행 버튼만 눌러도 나오게 되었지만, 사실 그 과정이 원래부터 간단한 건 아닙니다. C나 C++에 익숙하신 분이라면 의아해하실 부분이 있는데요, 그것은 바로 “main() 함수는 어디 있을까?”일 것입니다.

왼쪽 네비게이터 영역에서 Supporting Files 그룹에 보시면 main.m이라는 파일이 있습니다. 이 파일을 열어보겠습니다. (네비게이션 영역에서 해당 파일을 선택하시면 됩니다.)

int main(int argc, char *argv[])
{
    @autoreleasepool {
        return UIApplicationMain(argc, argv, nil, NSStringFromClass([TNAppDelegate class]));
    }
}

낯익은 main() 함수가 여기 존재하는 것을 보실 수 있습니다. 아이폰 어플도 결국 시작은 main() 함수에서 하는 거죠! 그리고 이제부터 외계어가 나옵니다. @autoreleasepool 이라는 키워드는 iOS 5에서  지원하는 ARC(Automatic Reference Counting)을 지원하기 위해 있는 부분입니다. ARC는 객체를 생성한 후 메모리에서 없애는(해제하는) 순간을 알아서 판단합니다. C/C++에서 free, delete를 까먹어서 메모리가 줄줄 새던 기억이 있으시다면 이건 정말 신세경이야! 하실지도 모르겠습니다.

UIApplicationMain() 함수를 호출하게 되면 UIApplication 객체와 AppDelegate 객체가 생성이 됩니다. App delegate의 핵심 역할은 어플의 내용이 보여질 창(window)를 제공하고 어플이 보여지기 전에 필요한 동작들을 수행하는 것입니다. Delegation이라는 디자인 패턴과 관련된 내용이므로 후에 보다 자세하게 접하실 기회가 있을 것입니다. iOS 앱에서 window는 화면을 표시하고 사용자의 입력을 받으며 기기 방향이 바뀌는 등의 이벤트가 발생하는 것을 감지하는 역할을 합니다.

UIApplicationMain()을 호출하면 Info.plist 파일을 불러오는 작업 또한 수행하게 됩니다. Info.plist 파일은 어플의 기본적인 설정 값을 담고 있는 key - value 조합입니다. 마찬가지로 Supporting Files 그룹에 보시면 “{생성한 프로젝트명}-Info.plist” 파일이  있습니다. 이 파일을 선택하면 아래처럼 보이게 됩니다.

plist

지난 포스팅에서 프로젝트를 생성할 때 스토리보드를 사용한다고 했기 때문에 Main storyboard file base name 항목에 해당하는 스토리보드 파일 이름이 적혀 있습니다. 스토리보드(Storyboard)는 앱의 UI에 사용되는 객체들과 트랜지션, 커넥션들이 하나의 파일로 압축되어 있는 형태입니다. 앱이 실행되는 순간 Storyboard가 로딩이 되어 initial view controller로 지정되어 있는 객체가 화면에 나타나게 됩니다. Initial view controller는 스토리보드에서 제일 먼저 보여주기로 미리 지정한 객체입니다.

initial view controller가 어떤 녀석인지 더 알아보겠습니다. 스토리보드를 선택하시면 왼쪽에 화살표가 달린 객체가 있을 것입니다.

SC1

저 화살표가 달린 녀석이 initial view controller인데요, 화면에 뜨고 있는 객체가 이게 맞는지 확인하기 위해서 배경 색을 바꿔보겠습니다. 흰색 부분을 선택한 상태에서 오른 쪽에 Background를 Scroll View Texture로 변경하여 다시 실행을 해보겠습니다. 아까 흰색 화면이 떴던 것과는 다른 결과를 보실 수 있습니다.

SC2

여기서 배경 색을 바꾼 녀석을 view 라고 합니다. View는 사용자에게 보여질 부분을 출력하고 사용자의 입력을 받는 역할을 합니다. 아까 Window의 개념과도 조금 비슷하다고 느끼실 수도 있는데요, 실제로는 window는 하나만 존재할 수 있고 이 안에 여러 개의 view가 들어있습니다. View는 내부적으로 다른 view를 포함할 수 있고, 이러한 view를 subview라고 합니다. subview 입장에서 그 view는 parent view가 됩니다.

그러면 이제는 스토리보드 편집 화면을 좀 더 자세하게 볼까요? 스토리보드를 선택하면 아래와 같은 화면이 나옵니다. 왼쪽에는 아웃라인 뷰라고 해서 오른쪽 “캔버스”에 존재하는 객체들을 논리적인 구조로 보여줍니다. 부모 - 자식 관계도 잘 표현이 되어 있습니다. 오른쪽 캔버스에는 UI를 구성하는 요소들이 배치가 되어 있습니다. 한 번에 하나의 화면을 구성하는 단위를 “씬(Scene)”이라고 하는데요, iOS 앱에서 화면이 전환되거나 바뀔 때에는 주로 씬이 바뀐다고 생각하시면 됩니다. 그리고 아까 말씀드린 화살표(initial scene indicator)도 확인하실 수 있을 것입니다.

Canvas

스토리보드에는 씬(scene)과 이것들을 연결해주는 segue로 구성이 되어 있습니다. Segue는 어떻게 번역을 해야 할지 난감한 표현인데요. 화면간의 전환이라고 생각하시면 될 것입니다. 프로젝트를 생성할 때 Single View를 선택하였기 때문에 Initial view controller인 view controller가 하나만 존재하고 있습니다.

comments powered by Disqus