Swift 2주차 - Hello World 화면 꾸미기 (feat M.V.C 패턴)

Swift 2주차 - Hello World 화면 꾸미기 (feat M.V.C 패턴)

 

이번 주차에서는 swift로 앱을 만들기 위해서 사용되는 xcode의 사용법에 대해서 간단하게 알아보고, 입력창을 통해 입력한 문자를 표시해보는 실습을 진행 하려고 한다.

 

그 과정에서 M.V.C 패턴에 대해서도 설명할 예정이다.

 

 

목차

 

 

xcode 설치하기

 

먼저 swift 언어를 쓰기 위해서는 xcode라는 개발 툴을 사용해야 한다.

(그리고 당연하게도 iOS에 관련된 앱을 만들기 위해서는 반드시 메킨토시 컴퓨터가 필요하다.)

 

 

설치하는 방법은 간단하다.

app store에 들어가서 'xcode'를 검색 후 가장 먼저 보이는 앱을 깔아주면 된다.

 

 

프로젝트 생성하기

 

다운받은 xcode 앱을 실행시켜 보면 아래와 같은 창이 뜨게 된다.

 

처음 프로젝트를 생성하는 거니 첫번째 Create New Project... 를 선택하자.

(만약 이미 프로젝트를 생성했었다면 오른쪽에 해당 프로젝트가 보인다.)

 

 

 

iOS App을 만들어볼 예정이니 App을 선택 한 후 Next 클릭.

 

 

 

프로젝트 이름은 'HelloWorld' 로 설정하자.

(필자는 이미 HelloWorld 이름을 사용하는 파일이 있어서 다른 이름을 썼다.)

그리고 Next.

 

 

 

다음으로 어느 폴더에 프로젝트 파일을 저장할지 선택해야 하는데 필자는 'DoItSwift'라는 폴더를 하나 만들어서 여기에 저장하려고 한다.

 

각자 원하는 폴더를 선택하여 Create를 눌러주자.

 

 

 

폴더 선택을 완료하고 마지막으로 빨간색으로 밑줄 친 부분의 선택을 해제해 주자.

 

저 부분은 아이폰, 아이패드의 방향에 따라 화면 구성을 다르게 설정할 수 있는데 이번 실습에서는 사용하지 않을 예정이다.

 

 

 

기본 환경 알아보기

 

xcode의 기본 화면 구성을 아래와 같다.

 

 

1. 내비게이터 영역 - 내비게이터들의 정보와 소스 파일을 나타내 주는 영역이다.
2. 편집기 영역 - 소스 파일을 열어 소스를 직접 입력하거나 스토리보드를 이용하여 화면을 디자인 할 수 있는 영역이다.
3. 인스펙터 영역 - 스토리보드를 편집할 때 버튼, 컨트롤러, 뷰 등 모든 객체의 속성을 편집할 수 있는 영역이다.
4. 디버그 영역 - 버그를 찾아 수정하는 과정인 디버그를 진행할 때 원하는 변수의 값을 확인하거나 테스트 할 목적으로 사용한 입출력 내용이 출력되는 영역이다.

 

1, 3, 4번 영역들은 노란색 박스로 강조한 버튼을 눌러 접거나 다시 펼 수 있다.

 

 

이제 내비게이터 영역을 살펴보자.

 

우리가 만든 프로젝트 폴더 안에 다양한 파일들이 위치하고 있는데 우리가 사용할 것은 ViewController.swift와 Main.storyboard 파일이다.

 

여기서 잠깐, 해당 파일들의 역할이 무엇인지 제대로 알기 위해선 M.V.C 패턴에 대한 이해가 필요하다.

 

먼저 M.V.C 패턴에 대해 알아보자.

 

 

 

M.V.C 패턴

 

모델-뷰-컨트롤러(model–view–controller, MVC)는 소프트웨어 공학에서 사용되는 소프트웨어 디자인 패턴이다. 이 패턴을 성공적으로 사용하면, 사용자 인터페이스로부터 비즈니스 로직을 분리하여 애플리케이션의 시각적 요소나 그 이면에서 실행되는 비즈니스 로직을 서로 영향 없이 쉽게 고칠 수 있는 애플리케이션을 만들 수 있다.

 

MVC에서 모델은 애플리케이션의 정보(데이터)를 나타내며, 뷰는 텍스트, 체크박스 항목 등과 같은 사용자 인터페이스 요소를 나타내고, 컨트롤러는 데이터와 비즈니스 로직 사이의 상호동작을 관리한다.

 

 

• 컨트롤러는 모델에 명령을 보냄으로써 모델의 상태를 변경할 수 있다. 또, 컨트롤러가 관련된 뷰에 명령을 보냄으로써 모델의 표시 방법을 바꿀 수 있다.
• 모델은 모델의 상태에 변화가 있을 때 컨트롤러와 뷰에 이를 통보한다. 이와 같은 통보를 통해서 뷰는 최신의 결과를 보여줄 수 있고, 컨트롤러는 모델의 변화에 따른 적용 가능한 명령을 추가·제거·수정할 수 있다. 어떤 MVC 구현에서는 통보 대신 뷰나 컨트롤러가 직접 모델의 상태를 읽어 오기도 한다.
• 뷰는 사용자가 볼 결과물을 생성하기 위해 모델로부터 정보를 얻어 온다.

 

 

swift에서의 뷰, 컨트롤러

 

M.V.C 패턴에 대해서 간단히 살펴보았는데, swift에서 뷰와 컨트롤러는 Main.storyboard와 ViewController.swift 파일이다.

 

 

Main.storyboard

 

앱의 내용을 시각적으로 쉽게 이해하고 프로그래밍 할 수 있도록 그림으로 표현한 파일이다. 이 스토리보드를 통해 화면에 보이는 내용 및 뷰와 뷰 간의 연결 관계 등을 표현할 수 있다.

 

 

 

ViewController.swift

 

화면에 보이는 뷰에서 처리하는 내용의 스위프트 소스 코드를 담고 있는 클래스 파일이다. 일반적으로 프로그래머는 이 파일에서 코딩을 하게 되며 뷰 하나당 클래스 하나가 대응된다. 그러므로 스토리보드에서 여러개의 뷰를 추가하면 뷰의 개수만큼 뷰 컨트롤러 클래스 파일이 필요하다.

 

 

 

Hello World 앱 화면 꾸미기

 

Main.storyboard 파일로 이동한 후 우측 상단에 있는 + 버튼을 눌러보자.

 

 

 

 

그러면 아래와 같은 창이 뜨게 되는데 여기서 원하는 object를 선택해서 스토리보드 화면 안에 추가할 수 있다.

 

Label 영역을 좌클릭 한 상태로 스토리 보드 안 화면으로 가져와 보자.

 

 

 

label을 추가하고 스토리보드에서 더블클릭하면 텍스트를 수정할 수 있다.

혹은, 우측 인스펙터에서 수정할 수도 있다.

 

 

텍스트를 Hello로 변경해보자.

 

 

레이블이 잘릴 수 있으니 레이블을 선택한 후 상하좌우 크기를 적당히 늘려주자.

 

그리고 인스펙터 창에서 색상, 폰트, 크기, 정렬 등을 선택할 수 있다.

 

같은 방법으로 다른 레이블도 추가해보자.

 

 

 

 

입력을 하기 위해 필요한 text field도 추가해주자.

 

 

button도 추가하면 완성이다.

 

 

 

 

그다음 컨트롤러에서 해당 오브젝트들을 컨트롤 하기 위해 코드와 연결시켜 줘야 한다.

 

 

우측 상단에 가로줄이 여러개 있는 아이콘을 누르면 위와 같은 메뉴가 보이는데 여기서 Assistant를 누르면

 

 

화면이 2개로 분할되서 작업하기 훨씬 편해질 것이다.

 

 

 

스토리보드에서 Hello 레이블을 선택하고 우클릭 한 상태로 쭉 ViewController 소스코드 내로 끌어오면 아웃렛 변수를 생성할 수 있다.

 

여기서 아웃렛 변수란

스토리보드에 추가한 객체를 선택하고 내용을 변경하거나 특정 동작을 수행하도록  하기 위해서 해당 객체에 접근할 수 있게하는 변수이다.

 

 

그리고 해당 변수 이름은 lblHello 로 짓자.

 

앞에 lbl은 label의 줄임말이다.

 

위 방법대로 텍스트 필드도 추가해보자.

 

 

그리고 버튼 객체도 추가하는데 타입은 UIButton으로 설정해야 한다.

 

 

아웃렛 변수와 액션 함수를 추가한 코드는 다음과 같다.

 

import UIKit

class ViewController: UIViewController {
    
    @IBOutlet var lblHello: UILabel!
    
    @IBOutlet var txtName: UITextField!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }

    @IBAction func btnSend(_ sender: UIButton) {
    }
    
}

 

 

 

액션 함수 안에 아래와 같은 코드를 추가하자.

 

버튼을 누르면 lblHello객체의 text를 Hello, + txtName객체의 text를 합한것으로 바꾸는 코드이다.

lblHello.text = "Hello, " + txtName.text!

 

 

 

완성된 코드는 아래와 같다.

 

import UIKit

class ViewController: UIViewController {
    
    @IBOutlet var lblHello: UILabel!
    
    @IBOutlet var txtName: UITextField!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }

    @IBAction func btnSend(_ sender: UIButton) {
        lblHello.text = "Hello, " + txtName.text!
    }
    
}

 

 

 

코드도 완성됐고, 이제 실행시켜 확인해보자.

 

 

좌측 상단에 실행버튼을 누르면 에뮬레이터를 실행할 수 있다.

 

 

여기서 우리가 만든 앱을 실행해볼 수 있다.

 

텍스트 필드에 이름을 넣고 Send 버튼을 눌러보면,

 

Hello, {이름} 형식으로 Hello 레이블이 바뀐 것을 볼 수 있다.

 

 

 

2주차 과제

 

과제 내용

• 레이블을 학교명과 학과명으로 바꾼다.
• 입력 필드를 하나 더 추가해 학번과 이름을 입력받는다.
• Send 버튼을 누르면 학과명을 적은 레이블에 학번과 이름을 더해 표시한다.
• background 색상을 바꿔보자.

 

 

 

완성된 코드는 아래와 같다.

 

import UIKit

class ViewController: UIViewController {
    
    @IBOutlet var lblDepartment: UILabel!
    @IBOutlet var txtId: UITextField!
    @IBOutlet var txtName: UITextField!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }

    @IBAction func btnSend(_ sender: UIButton) {
        lblDepartment.text = "정보통신공학과" + txtId.text! + txtName.text!
    }
    
}

 

 

시뮬레이터에서 앱을 실행시키고 학번과 이름을 입력하면 학과 레이블에 학번과 이름이 추가된다.