여는글
Swift를 이용하여 첫 프로젝트를 생성해보자. 스토리보드를 이용하여 UI를 구성하고 Controller와 연결하는 법에 대해서 알아보자. 더 나아가 UI를 배치하는 기본적인 방법을 알아보도록하자.
이 글에서는 예제로 계산기 프로그램을 중간까지 생성할 것이다. 또한, 글의 순서는 "프로젝트 생성 및 기본 파일구조" -> "기본적으로 UI 를 구성하는 방법" -> "Controller와 UI를 연결하는 방법" 이다.
프로젝트 생성 및 기본 파일구조
프로젝트 생성을 위해서 Xcode를 열어보자. Xcode의 첫화면은 최근에 열었던 프로젝트나 파일리스트를 보거나 새로운 프로젝트나 Playground를 생성할 수 있다. 새로운 프로젝트 생성을 위해서 "Create a new Xcode project"를 눌러보자. 그럼 아래와 같은 화면이 나올 것이다.
이 화면에서 좌측에서 "iOS -> Application"을 선택하고 Single View Application을 선택해준다. "Next" 버튼을 선택한 후 Product Name에 자신이 만들고자 하는 어플리케이션의 이름을 작성해보자. 필자는 계산기를 만들 것이기 때문에 Calculator라고 제품명을 작성하였다.(언어 선택이 Swift로 선택되었는지 확인한다. Application 유형은 자신이 만들고자 하는 어플리케이션이 구동될 환경을 선택하면 된다.)
마지막으로 "Next"버튼을 누르면 프로젝트가 생성되면서, 프로젝트에 대한 기본적인 설정을 하는 페이지가 나온다. 기본 설정페이지는 지금 중요한 내용이 아니라서 넘어가도록 하겠다. 처음 프로젝트를 생성하고 왼쪽을 보면 아래의 왼쪽 그림과 같은 화면이 나올 것이다.
여기서 사용하지 않을 AppDelegate.swift(프로토콜 설정 파일), Images(이미지 리소스 저장소)폴더, LaunchScreen.xib(첫 실행화면) 파일들을 Supporting Files폴더로 이동해준다. 그럼 위의 오른쪽 그림과 같이 변화한다. 이제 건들지 않았던 2개의 파일에 대해서 알아보자.
기본적으로 이 두개의 파일, ViewController.swift와 Main.stroyboard은 어플리케이션을 구동하는데 가장 중요한 역할을 하는 파일들이다.
1) Main.storyboard
- User Interface(UI)를 작성하는 공간이다.
- 각 화면의 UI 구성뿐만아니라 각각의 화면간 어떤 이동경로를 가지고 있는지도 표현이 된다.
2) ViewController.swift
- 이 파일은 일단 기본적으로 생성해준 Controller파일이다. 이름이 참 봐도 먼지 알아보기 힘들지만, 이름을 바꾸는 방법은 나중에 알아보자.
- 이 파일은 Stroyboard에서 생성된 UI를 컨트롤 하거나 사용자간의 인터렉션을 하는 정의하는 공간이다.
기본적으로 UI를 구성하는 방법
UI를 구성하기 위해서 Main.storyboard 파일을 선택해보자.
주. 위 화면은 라벨을 하나 추가한 사진이다.
가장 먼저 여러분이 봐야할 곳은 오른쪽 하단부분이다. 이곳에서는 Apple에서 미리 작성해준 코드 셋이나 템플릿, 미디어를 넣을 수 있다. 하지만, 현재 가장 중요한 것은 3번째 탭인 "Show the object library"이다.
Object library에는 UI를 구성하는데 필요한 다양한 컴퍼넌트들이 존재한다. 여기서 Label을 하나 추가해보도록 하자. Object library에서 label을 찾아서 드래그하여 Stroy board의 원하는 화면의 원하는 공간에 위치하면 된다. 여기서 파란색 선은 Keynote에서 제공하는 것과 같이 위치를 잡아주는데 도움을 주는 선이다.
Label을 추가하면 오른쪽 위(Object library 탭의 윗부분)에 Attribute inspector가 나타날 것이다. 이를 이용해서 해당 컴퍼넌트의 다양한 특성을 줄 수 있다. 필자는 오른쪽 정렬과 글씨 크기를 키웠다. 또한, 스토리보드에서 라벨을 선택하여 크기를 화면에 맞게 적용하였다.
여기까지 작성한 것이 위의 화면이 된다. 추가적으로 라벨을 더블클릭하여 내용을 Label에서 0으로 변경하였다. 이제 한번 실행을 해보자!
Command + R을 클릭하거나 Xcode에 플레이버튼을 눌러보자.
여러분은 결과를 보고 깜작 놀라햇을 것이다. 실행된 화면에는 아무것도 없기때문이다. 하지만 필자를 믿어라! 그곳에는 여러분이 작성한 Label이 존재한다. 여기서 보이지 않는 이유는 아래의 사진을 보면서 설명하도록 하겠다.
스토리보드와 실행된 아이폰화면을 겹쳐놓은 것이다. 두 화면의 크기는 100%로 맞췄다. 여기서 보면 스토리보드에서 UI화면이 아이폰 화면보다 큰 것을 볼 수 있다. 이런 이유 때문에 보이지 않는 것이다. 화면을 벗어 났기 때문이다.
다음의 이유 때문에 iOS 스토리보드에서는 정사각형의 판을 제공합니다. 화면 크기가 다양해지고, 여러가지 플랫폼(Ipad, Iphone)에 대응하기 위함입니다. 여러분인 UI에 추가적으로 위치적 제약(Constraint)를 적용해서 화면에 이쁘게 나오게 바꿔야 합니다.
일단, 라벨의 좌우가 화면에 가득차게 맞춰 봅시다. 그리고 추가적으로 화면의 맨위에 항상 붙어 있게 만들어봅시다.
왼쪽 하단 그림과 같이 라벨을 클릭하고, 마우스의 우클릭을 누룹니다. 그리고 화면의 오른쪽 끝으로 드레그를 해봅시다. 여기서 마우스 드래그의 마지막 지점은 기준이 되는 화면입니다.
드래그를 놓으면 검은 화면이 뜨는데, 여기서 맨위 "Trailing Space to Container Margin"을 선택해준다. 이의 의미는 컨테이너 여백공간을 맞춘다라는 의미로 화면 끝에 맞춘다는 것을 의미한다.
이를 완료하면 빨간선과 주황선이 나오는 것을 볼 수 있다. 주황선에 대해서는 이따가 설명을 하고, 빨간선에 대해서 미리 말해보자. 빨간선은 UI에서 정의 안해주면 나오지 않거나 애매모오한 것을 의미한다.
아, 주황색에서 우선적으로 점으로 이뤄진 사각형에 대해서 먼저 이야기하면 이는 실제로 컴퍼넌트가 나오는 위치를 의미한다.
이젠 반대로 왼쪽에대 적용을 해보자. 왼쪽에 맞추는 것은 영어로 "Leading Space to Container Margin"이다. 마지막으로 상단에 맞춰보자. "Top space to Top layout guide" 상단의 시작지점에 맞추는 것이다.
이제 모호한 지점이 많이 사라졌다. 그 의미로 여러분의 스토리보드에 노란선과 빨간선이 파란선으로 많이 바뀌어 있을 것이다. 자신은 모든 기준점을 다 했다고 생각하는데도 오류가 있다.(노란줄, 빨간줄) 또는 자신이 원하는데로 보이지 않을 수 있다. 이는 스토리보드의 GUI에 제약사항이 모두 반영안되어 있어서 그렇다. 이를 적용하기 위해서 View Controller Scene에서 노란화살표을 확인한다. 이를 클릭하면 alert이 나와 있는 창이 나온다. 아래의 그림을 보면서 따라가보자.
스토리보드 화면에서 왼쪽아래 추가 탭을 여는 버튼을 클릭한다. 그러면 레이아웃의 포함관계가 나타난다. (2번째 화면)여기서 노란색 화살표가 나오는 것은 해당 뷰에 오류가 있음을 의미한다. 이를 고치기 위해서 클릭하면, 3번째 화면이 나오는데 어디서 에러가 났는지가 나온다. 이를 수정하기 위해서 노란 삼각형을 뜨면 마지막 화면이 나온다. 여기서 적당한 것을 선택하여 UI를 업데이트하면 된다.
1) Update Frame : 제시하는 룰을 적용한다. Constraint 값을 적용한 기준으로 제시해주는 룰이다. (제시하는 룰은 3번째 화면에서 나오는 회색글씨)
2) Update Constraint : 지금 보이는 게 맞으니깐 Constraint를 변경해달라.
3) Reset to suggested Constraints : 제시해주는 값을 초기화해보자.
Option: Apply to all views in container : 오류가 여러개 있을때 모두에 적용할지를 여부를 선택해달라.
맨 위의 옵션을 선택하여 적용하면 모든 오류가 사라지면서 자신이 생각하던 위치에 뷰가 위치할 것이다. 실행을 해봐서 그 결과를 확인해보자.
지금 추가한 라벨은 계산된 결과를 보여주거나 사용자가 입력한 값을 보여주는 화면이 된다.
Controller와 UI를 연결하는 방법
ViewController.swift 파일을 열어보자. UIKit이 import된 것이 보이는데 이는 View를 컨트롤하기 위해서 꼭 필요한 해더파일이다. 컨트롤러 클래스가 하나 정의 되어 있다. 이는 UIViewController를 상속받는다. 참고로 Swift는 하나만 상속이 가능하다.(지금까지 아는한...) 클래스 안으로 viewDidLoad와 didReceiveMemroyWaring함수가 보이는데 이는 지금 중요하지 않고, 쓸데도 없으니 지우기로 한다.
Controller와 UI를 연결하는 방법은 두가지로 나늰다.
1) 해당 컴퍼넌트에 특정 행위가 가해졌을때 발생하는 Listener를 연결하는 것
2) 해당 컴퍼넌트를 직접 참조하는 것
일단 위에서 생성한 라벨을 컨트롤러에서 참조해보자. 스토리보드 파일을 다시 열어보자. 그리고 오른쪽 상단에 있는 버튼들중에서 원이 두개 있는 버튼을 누르자. 이는 자신과 연관된 파일을 자동으로 옆에 열어주는 역할을 한다. 이를 클릭하면 스토리보드 파일 옆으로 컨트롤러 파일이 열리는 것을 볼 것이다. 여기서 또 우클릭 드래그가 필요하다. 스토리보드의 라벨을 ctrl키를 누른 상태에서 우클릭한후에 controller의 클래스 내부로 연결해보자.
그러면 위와 같이 설정하는 란이 나온다. 일반적으로 해당컴퍼넌트를 참조하는 것은 Outlet이라고 부른다. 이름을 지정한다음에 연결버튼을 누르면 해당 위치에 변수가 생성된다. 이는 Outlet 변수를 통해서 스토리보드의 라벨과 컨트롤러가 연결되는 것을 나타낸다.
이번엔 버튼을 추가하여 똑같이 오른쪽클릭을 하여 클래스로 드래그해보자.
1) Object library에서 버튼을 찾아서 스토리보드의 원하는 화면으로 드래그하여 올려 놓는다.
2) 위치및 크기, 색상등을 변경하고 버튼을 우클릭하여 컨트롤러 클래스 안으로 이동을 한다.
이번엔 Action을 정의 한다. 이는 버튼이 클릭될때 행동할 Listener를 등록하는 과정이라고 생각하면된다. 파라미터를 받을 때 Type을 Any Object에서 해당 Object로 변경해야 한다. 그리고 어떤 행동을 할때 호출될 지를 지정해준다.
이는 유저가 버튼을 클릭했을때 Label에 클릭된 버튼의 내용을 append하는 함수를 작성했다.
@IBAction func appendDigit(sender: UIButton) {
display.text = display.text! + sender.currentTitle!
}
※ 해당 컴퍼넌트에 대한 자세한 정보를 알고 싶다면...
- C언어의 Man(Manual)기능으로 alt를 클릭하고 컴퍼넌트를 클릭하면 간략한 정보가 나오고, Reference를 클릭하면 Reference 페이지로
이동한다. 여기서 컴퍼넌트가 갖고 있는 값과 함수등에 대한 자세한 정보를 얻을 수 있다.
닫는글
이제 버튼을 복사 붙이기 등을 통해서 확장하여 계산기 처럼 만들고, 각각 버튼이 눌렸을때 어떤 행동을 할지를 정하면 계산기가 될 것이다. 완성된 파일을 첨부한다. 중간중간 막힐때는 코드를 확인해주길 바란다.
Calculator.zip