대메뉴 바로가기 본문 바로가기

데이터 기술 자료

데이터 기술 자료 상세보기
제목 스위프트 언어로 작성하는 앱개발 #1
등록일 조회수 5298
첨부파일  

스위프트 파헤치기

스위프트 언어로 작성하는 앱개발 #1



스위프트 언어를 사용한 예제 앱을 개발해보고, 그 과정을 통해서 지금까지 살펴보았던 문법을 적용해 보겠다.



그간 네번의 연재를 통해 스위프트 프로그램 언어를 활용한 기본적인 프로그램 방법을 알아보았다. 이번 호와 다음 호에서는 실제로 iOS 앱을 작성해 보면서 스위프트 언어를 활용하는 방법을 알아보겠다.


UIKit 콘트롤 활용

Xcode SDK와 iOS 버전을 새로 내놓을 때마다 iOS 장치들을 위한 앱의 UI가 조금씩 달라졌는데, 애플에서는 UICatalog 라는 샘플 프로그램을 제공해서 변경된 iOS 버전의 UI를 개발자가 확인해 볼 수 있도록 하고 있다. 앞으로 2회의 연재를 통해서 스위프트 언어로 iOS 앱에서 사용되고 있는 오브젝트들을 활용하는 방법을 알아보겠다.


Activity Indicators

Activity Indicators는 앱이 시작되거나 작업이 지속되는 등의 동작이 나타날 때, 내부적으로 그것을 표시하는 로딩 배너 등을 띄울 때 사용하게 된다. 다음과 같은 순서로 작성해 보자.



1. 새로운 싱글 뷰 앱 프로젝트를 생성한다(File | New | Project…). 이 때 아래 그림과 같은 Activity Indicator가 나타나는 것을 볼 수 있다.


<그림 1> 새로운 프로젝트의 생성


2. roduct Name을 ‘ActivityIndicatorTest01’로 하고 언어를 ‘Swift’로 해 선택한다.


<그림 2> Product Name과 작성 언어를 선택


3. <그림 3>과 같이 로컬 소스 콘트롤에 체크하고 새로운 프로젝트를 생성했다. 최근에 배포한 Xcode에서는 형상관리 도구로 Git만 사용하도록 바뀌었다. 예전에는 SVN도 있어서 선택할 수 있었다. 로컬에서 코드를 작성하더라도 형상관리는 하는 습관을 기르는 것이 좋다.


<그림 3> 형상관리 방법선택


<그림 4> 완성된 프로젝트


4. <그림 5>와 같이 Project Navigator 화면에서 ‘Main.storyboard’를 선택하고, 두 개의 Label을 배치하고 각각의 이름을‘액티비티 인디케이터01’ ‘액티비티 인디케이터02’로 입력한다. 그리고 ‘Object library’ 창에서 ‘Activity Indicator’ 오브젝트를 선택해서 위치시킨다.


<그림 5> 액티비티 인디케이터 선택


5. ViewController.swift 파일을 열어서 기존에 작성되어 있던 템플릿 코드를 모두 삭제하고 다음 코드만 남겨둔다.


import UIKit class ViewController: UIViewController { }


6. 첫 번째 액티비티 인디케이터를 선택하고 오른쪽 마우스를 클릭한 후에 ViewController.swift의 코드창으로 드래그하면 Outlet을 입력하기 위한 창이 나온다. Name 박스에 ‘grayActIndicatorView’라는 이름을 입력하자.


<그림 6> Outlet 지정


<그림 7> Outlet 이름 지정


두번째 액티비티 인디케이터도 유사한 방식으로 Outlet을 생성하고 연결한다. 이름은 ‘purpleActIndicatorView’로 입력했다. 완성된 클래스는 다음과 같다.


class ViewController: UIViewController{ @IBOutlet weak var grayActIndicatorView: UIActivityIndicatorView! @IBOutlet weak var purpleActIndicatorView: UIActivityIndicatorView! }


7. 다음으로 view가 최초로 로드될 때 실행할 애니메이션 함수를 viewDidLoad() 함수에 포함 시킨다. 첫 번째와 두 번째 인디케이터 함수의 이름을 각각 ‘configuregrayActIndicatorView()’와 ‘configurepurpleActIndicatorView()’로 지정했다.


override fun cviewDidLoad() { super.viewDidLoad() configuregrayActIndicatorView() configurepurpleActIndicatorView() }


8. 이제 실제로 configuregrayActIndicatorView() 함수와 configurepurpleActIndicatorView() 함수를 작성해 보겠다. 엑티비티 인디케이터 클래스에는 아래와 같은 내용들이 포함돼 있다. UIView와 NSCoding 클래스를 상속 받는 UIActivity Indicator View라는 클래스의 내용은 아래와 같다. 이번 예제에서는 여기에 정의된 변수들을 가져와서 사용할 것이다.


class UIActivityIndicatorView : UIView, NSCoding{ init!(activityIndicatorStyle style: UIActivityIndicatorViewStyle) //스타일 뷰의 초기화 var activityIndicatorViewStyle: UIActivityIndicatorViewStyle// 기본 스타일은 UIActivityIndicatorViewStyleWhite이다. var hidesWhenStopped: Bool// 기본값은 true, false값을 설정하면 -setHidden이 호출된다. @availability(iOS, introduced=5.0) var color: UIColor! //인디케이터의 컬러 지정을 위한 변수 func startAnimating() //애니메이션의 시작 func stopAnimating() //애니메이션의 중지 func isAnimating() -> Bool // 애니메이션 동작여부 판단 }


이제 다음과 같이 코드를 작성해 보겠다. 첫 번째 인디케이터를 표시하기 위한 함수다.


fun cconfiguregrayActIndicatorView() { grayActIndicatorView.activityIndicatorViewStyle = .Gray //인디케이터의 색상을 회색으로 지정했다. grayActIndicatorView.startAnimating() //인디케이터의 애니메이션을 시작한다. grayActIndicatorView.hidesWhenStopped = true //회색 인디케이터를 사라지게한다. }


다음은 두 번째 함수다. 여기서 특이한 점은 인디케이터의 색상을 지정하는 함수가 별도로 있다는 점이다. 아래에서 인디케이터뷰의 색상을 변경하기 위해서는 UIColor의 속성을 가지고 있는‘.color’라는 변수를 아래와 같이 정의한다.


func configurepurpleActIndicatorView() { purpleActIndicatorView.activityIndicatorViewStyle = .Gray purpleActIndicatorView.color = UIColor.purpleColor() purpleActIndicatorView.startAnimating() }


<그림 8> 완성된 액티비티 인디케이터


최종 결과물은 <그림 8>과 같다. 위쪽에 있는 회색 ‘액티비티 인디케이터01’은 ‘configuregrayActIndicatorView’의 결과로 나온 것 이고, 보라색 ‘액티비티 인디케이터02’는 ‘configurepurpleActIndicatorView’ 함수를 수행해 나온것이다.


액티비티 인디케이터의 응용

이번에는 직접 액티비티 인디케이터의 동작을 확인하는 예제를 작성해 보겠다. iOS 앱에서는 일반적으로 웹 브라우저가 특정 페이지를 여는 동작을 완료하기 전이나, 메일 클라이언트 앱과 같이 리스트 뷰 등을 갱신할 때 액티비티 인디케이터를 사용한다.


<그림 9> 웹 브라우저를 여는 동안 사용


<그림 10> 메일 클라이언트의 갱신


이번 예제에서는 간단한 버튼을 만들고, 버튼을 선택했을 때 액티비티 인디케이터를 동작시키거나 중단, 화면에 보이지 않게 하는 과정을 살펴보겠다.



1. 먼저 <그림 11>과 같이 액티비티 인디케이터와 동작테스트를 위한 버튼 3개를 Main.storyboard에 배치한다.


<그림 11>액티비티 인디케이터 동작테스트 앱


2. ‘동작’ ‘중단’ ‘완료’ 버튼을 위한 IBOutlet 코드를 <그림 12>와 같이 작성한다.


<그림 12> IBOutlet 지정


@IBOutlet weak var ActionBtn: UIButton! @IBOutlet weak var StopBtn: UIButton! @IBOutlet weak var HideActIndicateBtn: UIButton!


3. 다음으로는 각각 버튼을 위한 IBAction 함수를 다음과 같이 추가한다. IBOutlet 함수에 들어갈 동작은 이전에 정의해 둔 ‘configuregrayActIndicatorView()’ ‘configuregrayActIndicatorHideView()’ 함수와 신규로 ‘configuregrayActIndicatorStopView()’함수를 만들어서 사용한다.


<그림 13> IBAction 함수의 지정


@IBAction func Action(sender: AnyObject) { configuregrayActIndicatorView() //인디케이터를 동작시키고 애니메이 션을 시작한다. } @IBAction func StopActIndicator(sender: UIButton) { configuregrayActIndicatorStopView () //인디케이터 애니메이션을 중지 한다. } @IBAction func HideActIndicator(sender: AnyObject) { configuregrayActIndicatorHideView()//인디케이터를 화면에서 보이지 않게 한다. }


4. 이제 앱을 빌드하면 버튼의 선택에 의해서 화면의 ‘액티비티 인디케이터’가 동작, 중단, 화면에서 보이지 않게 되는 액션을 보여주게 된다.



새로운 Xcode SDK가 배포될 때 코드 참조를 위해서 배포되는 UICatalog 앱에 있는 인디케이터 오브젝트에 대해서 스위프트언어로 구현하는 방법을 간단히 알아보았다. 다음에는 다른 오브젝트를 스위프트 언어를 사용해서 구현하고 활용하는 방법을 알아보도록 하겠다.



출처 : 마이크로소프트웨어 12월호

제공 : 데이터전문가 지식포털 DBguide.net