Xcode 4 사용자 인터페이스 디자인

Xcode 3 통합 개발 환경에서는, Xcode 와 인터페이스 빌더로 어플이 분할되어 있었다. Xcode 4 에서는 인터페이스 빌더가 Xcode 어플 안에 포함되어 있다. Xcode 3 인터페이스 빌더 대부분의 기능은 Xcode 4 와 동일하지만, 일부 차이점이 있다. 이 강좌에서는 두 버전의 주요 차이점을 설명할 것이다.

Xcode 4 에 완전 통합된 인터페이스 빌더

Xcode 4 에서, 인터페이스 빌더는 프로젝트 내비게이터에서 nib 파일을 선택하면 웍스페이스 윈도우의 편집기 영역에서 표시된다. nib 파일은 직접 대입한 사용자 인터페이스의 디자인 정보를 포함하는 인터페이스 빌더로부터 생성된 파일이다. nib 파일은 파일 확장자로 nib 나 xib 를 갖는다. nib 파일을 열었을 때 인터페이스 빌더 inspector 는 유틸리티 영역에 자리를 잡는다. 인터페이스 빌터 팬에서 선택한 객체에 관계된 파일들을 보여주기 위해 Assistant 편집기를 열 수도 있다. “인터페이스 빌더와 Assistant 편집기 사용” 편을 참고해라. 라이브러리 팬에서 인터페이스 빌더 객체들을 선택하여 인터페이스 빌더 캔버스에 드래그&드롭할 수 있다. 그림 4-1 은 웍스페이스 윈도우에서 열린 인터페이스 빌더와 관련 팬을 보여준다.

그림 4-1  웍스페이스 윈도우의 인터페이스 빌더

라이브러리나 파일 메뉴로 새로운 Nib 파일 생성

 File > New > New File 을 선택하거나 프로젝트 내비게이터의 라이브러리에서 인터페이스 파일을 드래그 & 드롭하여 프로젝트에 새로운 nib 파일을 추가할 수 있다. 프로젝트 내비게이터로 드래그 & 드롭했을 때, 드롭을 원하는 그룹이 그림 4-2 와 같이 드롭하기전에 선택된 상태인지 확인해야 한다. 다른 파일로 잘못 드롭하게 되면 원하는 결과를 얻을 수 없다.

그림 4-2  리소스 그룹에 nib 파일 드롭

New File 을 고르거나 파일 라이브러리로부터 nib 파일을 드래그&드롭할 때, 올바른 플랫폼의 해당 파일을 선택했는지 확인해야 한다. 예를 들어, Application 이라는 이름의 nib 템플릿은 iPhone 용, iPad 용, Cocoa 용으로 3 가지가 있다.

인터페이스 소스 코드와 작업을 위한 Assistant 편집기 사용

인터페이스에 사용자 서브클래스를 사용하거나 콘트롤러에 아웃렛과 액션을 추가할 때, 인터페이스 디자인과 인터페이스 코드를 동시에 작업하기 위해서 Assistant 편집기를 사용할 수 있다. 그렇게 하려면, 인터페이스 빌더를 열기 위해서 프로젝트 내비게이터에서 nib 파일을 선택하고, Assistant 편집기 팬을 역기 위해서 Assistant 편집기 버튼을 클릭하도록 한다. 디폴트로 Assistant 편집기는 수동 모드로 열린다. 인터페이스 빌더에서 선택한 객체와 관련된 소스 파일을 선택하려면 Assistant 편집기 내비게이션 바를 사용해야 한다. Assistant 모드 중 하나를 선택하려면 그림 3-17 과 같이 Assistant 편집기 팝업 메뉴를 열 수 있다. 그림 4-3 은 인터페이스 빌더에서 선택된 그래픽 뷰를 갖는 윈도우와 Assistant 편집기의 자동 모드에서 선택된 그래픽 뷰의 헤더 파일을 보여준다. 디폴트로 Assistant 편집기 팬은 인터페이스 빌더 편집기 아래에 표시된다. 두 편집기 팬을 수직 분할이나 수평 분할을 바꾸려면 View > Editor > Change Split Orientation 을 선택하도록 하여라.

그림 4-3  인터페이스 빌더가 있는 Assistant 편집기

그림 4-4 에서는 인터페이스 팬에서 선택된 윈도우 객체를 보여주고, Assistant 편집기 팬이 SKTWindowController.m 파일을 표시하는 것을 보여준다. 편집기 내비게이션 바의 오른쪽 끝에 숫자 4/5 를 포함하는 원형 모양은 5 개의 부분 파일 중 4 번째 파일을 표시하고 있다는 것을 나타낸다. 여기서 다른 파일들은 SKTWindowController.h, SKTGraphicView.h, SKTGraphicView.m, NSWindow.h 이다. 다른 파일로 이동하려면 오른쪽 화살표나 왼쪽 화살표를 클릭해야 한다. 윈도우를 디자인 하면서 윈도우 콘트롤러 코드를 작성할 수 있으며, 인터페이스 빌더 객체와 코드의 해당 라인을 직접 연결할 수도 있다.

그림 4-4  인터페이스 빌더와 Assistant 편집기

인터페이스 빌더는 Xcode 로 완전히 통합되었기 때문에, 사용자 서브클래스를 생성하고 액션과 아웃렛을 정의하기 위해서 두 어플 사이를 이동해가면서 작업할 필요가 없다. 그러므로, Xcode 4 는 새로운 서브 클래스를 생성하고 Xcode 로 복사하기 위해서 Xcode 3 에서 사용된 인터페이스 빌더의 특수 명령을 제공할 필요가 없다.

도킹이나 목록으로 교체된 Document 윈도우

그림 4-3 의 인터페이스 빌더 팬의 왼쪽의 도킹은 인터페이스 빌더의 객체들과 nib 파일내에 존재하는 여러 요소들을 보여준다. Xcode 3 의 Document 윈도우에서 표시된 것들이 표현되어 있다. Xcode 4 에서도 동일하게 동작한다. 상위 계층의 객체에 포함된 모든 객체를 보여주는 리스트 뷰를 얻으려면, 고르고자 하는 객체를 쉽게 선택하려면 그림 4-2 처럼 큰 삼각형을 클릭해서 줄여서 보는 것이 편리할 것이다. 인터페이스의 일부 객체를 선택하기 위해서 인터페이스 빌더 내비게이션 바를 사용할 수 있다. 아이콘 뷰로 돌아가려면, 목록 하단부의 검색 필드 다음의 작은 삼각형을 클릭하면 된다.

그림 4-5  인터페이스 빌더의 여러 요소들과 객체