Hello, iOS - 심층 분석Hello, iOS – Deep dive

빠른 시작 연습에서는 기본 Xamarin.iOS 애플리케이션의 빌드 및 실행을 소개하였습니다.The Quickstart walkthrough, introduced building and running a basic Xamarin.iOS application. 이제, 더 복잡한 프로그램을 빌드할 수 있도록 iOS 애플리케이션의 작동 방식을 심층적으로 알아볼 시간입니다.Now it’s time to develop a deeper understanding of how iOS applications work so you can build more sophisticated programs. 이 가이드에서는 iOS 애플리케이션 개발의 기본 개념을 이해할 수 있도록 Hello, iOS 연습에 있는 단계를 검토합니다.This guide reviews the steps that in the Hello, iOS walkthrough to enable understanding of the fundamental concepts of iOS application development.

이 가이드는 단일 화면 iOS 애플리케이션을 빌드하는 데 필요한 기술 및 정보를 개발하는 데 유용합니다.This guide helps you develop the skills and knowledge required to build a single-screen iOS application. 이를 통해 Xamarin.iOS 애플리케이션의 서로 다른 파트들을 이해하고 어떻게 서로 맞도록 조정하는지에 대해 습득합니다.After working through it, you should have an understanding of the different parts of a Xamarin.iOS application and how they fit together.

Mac용 Visual Studio 소개Introduction to Visual Studio for Mac

Mac용 Visual Studio는 Visual Studio와 XCode의 기능을 결합하는 무료 오픈 소스 IDE입니다.Visual Studio for Mac is a free, open-source IDE that combines features from Visual Studio and XCode. 완전히 통합된 비주얼 디자이너, 리팩터리 도구가 함께 포함된 텍스트 편집기, 어셈블리 브라우저, 소스 코드 통합 등을 제공합니다.It features a fully integrated visual designer, a text editor complete with refactoring tools, an assembly browser, source code integration, and more. 이 가이드는 몇 가지 기본 Mac용 Visual Studio 기능을 소개하지만, Mac용 Visual Studio를 처음 접하는 경우 Mac용 Visual Studio 설명서를 확인하세요.This guide introduces some basic Visual Studio for Mac features, but if you're new to Visual Studio for Mac, check out the Visual Studio for Mac documentation.

Mac용 Visual Studio는 코드를 솔루션프로젝트로 구성하는 Visual Studio 연습을 따릅니다.Visual Studio for Mac follows the Visual Studio practice of organizing code into solutions and projects. 솔루션은 하나 이상의 프로젝트를 포함할 수 있는 컨테이너입니다.A solution is a container that can hold one or more projects. 프로젝트는 애플리케이션(예: iOS 또는 Android), 지원 라이브러리, 테스트 애플리케이션 등이 될 수 있습니다.A project can be an application (such as iOS or Android), a supporting library, a test application, and more. 단일 뷰 애플리케이션 템플릿을 사용하여 Phoneword 앱에서 새 iPhone 프로젝트가 추가됩니다.In the Phoneword app, a new iPhone project was added using the Single View Application template. 초기 솔루션은 다음과 같았습니다.The initial solution looked like this:

Visual Studio 소개Introduction to Visual Studio

Visual Studio는 Microsoft의 강력한 IDE입니다.Visual Studio is a powerful IDE from Microsoft. 완전히 통합된 비주얼 디자이너, 리팩터리 도구가 함께 포함된 텍스트 편집기, 어셈블리 브라우저, 소스 코드 통합 등을 제공합니다.It features a fully integrated visual designer, a text editor complete with refactoring tools, an assembly browser, source code integration, and more. 이 가이드에서는 Visual Studio용 Xamarin 도구를 사용한 몇 가지 기본적인 Visual Studio 기능을 소개합니다.This guide introduces some basic Visual Studio features with Xamarin Tools for Visual Studio.

Visual Studio는 코드를 솔루션 및 프로젝트로 구성합니다.Visual Studio organizes code into solutions and projects. 솔루션은 하나 이상의 프로젝트를 포함할 수 있는 컨테이너입니다.A solution is a container that can hold one or more projects. 프로젝트는 애플리케이션(예: iOS 또는 Android), 지원 라이브러리, 테스트 애플리케이션 등이 될 수 있습니다.A project can be an application (such as iOS or Android), a supporting library, a test application, and more. 단일 뷰 애플리케이션 템플릿을 사용하여 Phoneword 앱에서 새 iPhone 프로젝트가 추가됩니다.In the Phoneword app, a new iPhone project was added using the Single View Application template. 초기 솔루션은 다음과 같았습니다.The initial solution looked like this:

Xamarin.iOS 애플리케이션 분석Anatomy of a Xamarin.iOS application

왼쪽은 솔루션 패드로, 솔루션과 연결된 디렉터리 구조와 모든 파일이 포함됩니다.On the left is the solution Pad, which contains the directory structure and all the files associated with the solution:

오른쪽은 솔루션 창으로, 솔루션과 연결된 디렉터리 구조와 모든 파일이 포함됩니다.On the right is the solution Pane, which contains the directory structure and all the files associated with the solution:

Hello, iOS 연습에서는 Phoneword라는 솔루션을 만들고 내부에 iOS 프로젝트인 Phoneword_iOS를 배치했습니다.In the Hello, iOS walkthrough, you created a solution called Phoneword and placed an iOS project - Phoneword_iOS - inside it. 프로젝트 내에 있는 항목은 다음과 같습니다.The items inside the project include:

  • References - 애플리케이션을 빌드하고 실행하는 데 필요한 어셈블리가 포함됩니다.References - Contains the assemblies required to build and run the application. 디렉터리를 확장하면 Xamarin.iOS 어셈블리에 대한 참조와 함께 System, System.Core 및 System.Xml과 같은 .NET 어셈블리에 대한 참조를 확인할 수 있습니다.Expand the directory to see references to .NET assemblies such as System, System.Core, and System.Xml, as well as a reference to the Xamarin.iOS assembly.
  • Packages - Packages 디렉터리에는 미리 만들어진 NuGet 패키지가 포함됩니다.Packages - The packages directory contains ready-made NuGet packages.
  • Resources - Resources 폴더는 기타 미디어를 저장합니다.Resources - The resources folder stores other media.
  • Main.cs – 여기에는 애플리케이션의 주요 진입점이 포함됩니다.Main.cs – This contains the main entry point of the application. 애플리케이션을 시작하려면 주 애플리케이션 클래스의 이름인 AppDelegate가 전달됩니다.To start the application, the name of the main application class, the AppDelegate, is passed in .
  • AppDelegate.cs – 이 파일은 주 애플리케이션 클래스를 포함하며 창을 만들고, 사용자 인터페이스를 빌드하고, 운영 체제에서 이벤트를 수신 대기하는 역할을 담당합니다.AppDelegate.cs – This file contains the main application class and is responsible for creating the Window, building the user interface, and listening to events from the operating system.
  • Main.storyboard - 스토리보드는 애플리케이션의 사용자 인터페이스의 시각적 디자인을 포함합니다.Main.storyboard - The Storyboard contains the visual design of the application’s user interface. 스토리보드 파일은 iOS 디자이너라고 하는 그래픽 편집기에서 엽니다.Storyboard files open in a graphical editor called the iOS Designer.
  • ViewController.cs – 뷰 컨트롤러는 사용자가 보고 터치하는 화면(뷰)을 제공합니다.ViewController.cs – The view controller powers the screen (View) that a user sees and touches. 뷰 컨트롤러는 사용자와 뷰 간 상호 작용을 처리하는 일을 담당합니다.The view controller is responsible for handling interactions between the user and the View.
  • ViewController.designer.csdesigner.cs는 뷰의 컨트롤과 뷰 컨트롤러에서 해당 코드 표현 간의 연결점으로 사용되는 자동으로 생성되는 파일입니다.ViewController.designer.cs – The designer.cs is an auto-generated file that serves as the glue between controls in the View and their code representations in the view controller. 내부 배관 파일이기 때문에 IDE는 수동 변경을 덮어쓰게 되며 대부분의 경우 이 파일은 무시할 수 있습니다.Because this is an internal plumbing file, the IDE will overwrite any manual changes and most of the time this file can be ignored. 비주얼 디자이너와 백업 코드 사이의 관계에 대한 자세한 내용은 iOS 디자이너 소개 가이드를 참조하세요.For more information on the relationship between the visual Designer and the backing code, refer to the Introduction to the iOS Designer guide.
  • Info.plistInfo.plist에서는 애플리케이션 이름, 아이콘, 시작 이미지 등과 같은 애플리케이션 속성이 설정됩니다.Info.plist – The Info.plist is where application properties such as the application name, icons, launch images, and more are set. 강력한 파일로, 전체 소개는 속성 목록 작업 가이드에서 확인할 수 있습니다.This is a powerful file and a thorough introduction to it is available in the Working with Property Lists guide.
  • Entitlements.plist - 자격 속성 목록을 통해 iCloud, PassKit 등의 기능(앱 스토어 기술이라고도 함)을 지정할 수 있습니다.Entitlements.plist - The entitlements property list lets us specify application capabilities (also called App Store Technologies) such as iCloud, PassKit, and more. Entitlements.plist에 대한 자세한 내용은 속성 목록 작업 가이드에서 확인할 수 있습니다.More information on the Entitlements.plist can be found in the Working with Property Lists guide. 자격에 대한 일반적인 소개의 경우 디바이스 프로비전 가이드를 참조하세요.For a general introduction to entitlements, refer to the Device Provisioning guide.

아키텍처 및 앱 기본 사항Architecture and app fundamentals

iOS 애플리케이션이 사용자 인터페이스를 로드하려면 두 가지 사항이 준비되어야 합니다.Before an iOS application can load a user interface, two things need to be in place. 첫 번째, 애플리케이션은 애플리케이션의 프로세스가 메모리에 로드될 때 실행하는 첫 번째 코드인 진입점을 정의해야 합니다.First, the application needs to define an entry point – the first code that runs when the application’s process is loaded into memory. 두 번째, 애플리케이션 수준의 이벤트를 처리하고 운영 체제와 상호 작용하는 클래스를 정의해야 합니다.Second, it needs to define a class to handle application-wide events and interact with the operating system.

이 섹션에서는 다음 다이어그램에 표시된 관계를 연구합니다.This section studies the relationships illustrated in the following diagram:

Main 메서드Main method

iOS 애플리케이션의 주 진입점은 Application 클래스입니다.The main entry point of an iOS application is the Application class. Application 클래스는 Main.cs 파일에 정의되어 있으며 정적 Main 메서드를 포함합니다.The Application class is defined in the Main.cs file and contains a static Main method. 새 Xamarin.iOS 애플리케이션 인스턴스를 만들고 OS 이벤트를 처리하는 애플리케이션 대리자 클래스의 이름을 전달합니다.It creates a new Xamarin.iOS application instance and passes the name of the Application Delegate class that will handle OS events. 정적 Main 메서드에 대한 템플릿 코드가 아래에 나와 있습니다.The template code for the static Main method appears below:

using System;
using UIKit;

namespace Phoneword_iOS
{
    public class Application
    {
        static void Main (string[] args)
        {
            UIApplication.Main (args, null, "AppDelegate");
        }
    }
}

애플리케이션 대리자Application delegate

iOS에서 애플리케이션 대리자 클래스는 시스템 이벤트를 처리합니다. 이 클래스는 AppDelegate.cs 안에 있습니다.In iOS, the Application Delegate class handles system events; this class lives inside AppDelegate.cs. AppDelegate 클래스는 애플리케이션 을 관리합니다.The AppDelegate class manages the application Window. 창은 사용자 인터페이스에 대한 컨테이너 역할을 하는 UIWindow 클래스의 단일 인스턴스입니다.The Window is a single instance of the UIWindow class that serves as a container for the user interface. 기본적으로 애플리케이션은 콘텐츠를 로드할 하나의 창만 가져오고, 창은 실제 디바이스 화면의 크기와 일치하는 경계 사각형을 제공하는 화면(단일 UIScreen 인스턴스)에 연결됩니다.By default, an application gets only one Window onto which to load its content, and the Window is attached to a Screen (single UIScreen instance) that provides the bounding rectangle matching the dimensions of the physical device screen.

또한 AppDelegate는 앱 시작이 종료될 때 또는 메모리가 부족할 때와 중요한 애플리케이션 이벤트에 대한 시스템 업데이트를 구독하는 역할을 합니다.The AppDelegate is also responsible for subscribing to system updates about important application events such as when the app finishes launching or when memory is low.

AppDelegate에 대한 템플릿 코드는 아래와 같습니다.The template code for the AppDelegate is presented below:

using System;
using Foundation;
using UIKit;

namespace Phoneword_iOS
{

    [Register ("AppDelegate")]
    public partial class AppDelegate : UIApplicationDelegate
    {
        public override UIWindow Window {
            get;
            set;
        }

        ...
    }
}

애플리케이션이 해당 창을 정의하면 사용자 인터페이스 로드를 시작할 수 있습니다.Once the application has defined its Window, it can begin loading the user interface. 다음 섹션에서는 UI 만들기를 탐색합니다.The next section explores UI creation.

사용자 인터페이스User interface

iOS 앱의 사용자 인터페이스는 storefront와 비슷합니다. 애플리케이션은 일반적으로 하나의 창을 가져오지만 필요한 많은 개체로 채울 수 있으며 개체 및 배열은 앱이 표시하려고 항목에 따라 변경할 수 있습니다.The user interface of an iOS app is like a storefront - the application typically gets one Window, but it can fill the Window up with as many objects at it needs, and the objects and arrangements can be changed depending on what the app wants to display. 사용자에게 표시되는 항목인 이 시나리오의 개체를 뷰라고 합니다.The objects in this scenario - the things that the user sees - are called Views. 애플리케이션에서 단일 화면을 빌드하려면 뷰가 콘텐츠 뷰 계층 구조에 쌓이고 계층 구조는 단일 뷰 컨트롤러에서 관리됩니다.To build a single screen in an application, Views are stacked on top of each other in a Content View Hierarchy, and the hierarchy is managed by a single view controller. 여러 화면이 있는 애플리케이션은 각각 고유한 뷰 컨트롤러가 있는 여러 콘텐츠 뷰 계층 구조가 있으며, 애플리케이션은 사용자가 보는 화면에 따라 다른 콘텐츠 뷰 계층 구조를 만들도록 창에 뷰를 배치합니다.Applications with multiple screens have multiple Content View Hierarchies, each with its own view controller, and the application places Views in the Window to create a different Content View Hierarchy based on the screen that the user is on.

이 섹션에서는 뷰, 콘텐츠 뷰 계층 구조 및 iOS 디자이너를 설명하면서 사용자 인터페이스에 대해 살펴봅니다.This section dives into the user interface by describing Views, Content View Hierarchies, and the iOS Designer.

iOS 디자이너 및 스토리보드iOS Designer and storyboards

iOS 디자이너는 Xamarin에서 사용자 인터페이스를 빌드하는 비주얼 도구입니다.The iOS Designer is a visual tool for building user interfaces in Xamarin. 다음 스크린샷과 유사한 뷰가 열리는 스토리보드(.storyboard) 파일을 두 번 클릭하여 디자이너를 시작할 수 있습니다.The Designer can be launched by double-clicking on any Storyboard (.storyboard) file, which will open to a view that resembles the following screenshot:

스토리보드는 화면 간 전환 및 관계와 함께 애플리케이션 화면의 시각적 디자인을 포함하는 파일입니다.A Storyboard is a file that contains the visual designs of our application’s screens as well as the transitions and relationships between the screens. 스토리보드에서 애플리케이션의 화면 표현을 _장면_이라고 합니다.The representation of an application’s screen in a Storyboard is called a Scene. 각 장면은 뷰 컨트롤러와 관리하는 뷰의 스택을 나타냅니다(콘텐츠 뷰 계층 구조).Each Scene represents a view controller and the stack of Views that it manages (Content View Hierarchy). 단일 뷰 애플리케이션 프로젝트를 템플릿에서 만들면 Mac용 Visual Studio는 Main.storyboard라는 스토리보드 파일을 자동으로 생성하고 아래 스크린샷에 나온 것처럼 단일 장면으로 채웁니다.When a new Single View Application project is created from a template, Visual Studio for Mac automatically generates a Storyboard file called Main.storyboard and populates it with a single Scene, as illustrated by the screenshot below:

장면에 대한 뷰 컨트롤러를 선택하려면 스토리보드 아래쪽의 검은색 표시줄을 선택합니다.The black bar at the bottom of the Storyboard screen can be selected to choose the view controller for the Scene. 뷰 컨트롤러는 콘텐츠 뷰 계층 구조에 대한 백업 코드를 포함하는 UIViewController 클래스의 인스턴스입니다.The view controller is an instance of the UIViewController class that contains the backing code for the Content View Hierarchy. 이 뷰 컨트롤러의 속성은 아래 스크린샷에 나온 것처럼 Properties Pad에서 확인하고 설정할 수 있습니다.Properties on this view controller can be viewed and set inside the Properties Pad, as illustrated by the screenshot below:

스토리보드는 화면 간 전환 및 관계와 함께 애플리케이션 화면의 시각적 디자인을 포함하는 파일입니다.A Storyboard is a file that contains the visual designs of our application’s screens as well as the transitions and relationships between the screens. 스토리보드에서 애플리케이션의 화면 표현을 _장면_이라고 합니다.The representation of an application’s screen in a Storyboard is called a Scene. 각 장면은 뷰 컨트롤러와 관리하는 뷰의 스택을 나타냅니다(콘텐츠 뷰 계층 구조).Each Scene represents a view controller and the stack of Views that it manages (Content View Hierarchy). 단일 뷰 애플리케이션 프로젝트를 템플릿에서 만들면 Visual Studio는 Main.storyboard라는 스토리보드 파일을 자동으로 생성하고 아래 스크린샷에 나온 것처럼 단일 장면으로 채웁니다.When a new Single View Application project is created from a template, Visual Studio automatically generates a Storyboard file called Main.storyboard and populates it with a single Scene, as illustrated by the screenshot below:

장면에 대한 뷰 컨트롤러를 선택하려면 스토리보드 화면 아래쪽의 표시줄을 선택합니다.The bar at the bottom of the Storyboard screen can be selected to choose the view controller for the Scene. 뷰 컨트롤러는 콘텐츠 뷰 계층 구조에 대한 백업 코드를 포함하는 UIViewController 클래스의 인스턴스입니다.The view controller is an instance of the UIViewController class that contains the backing code for the Content View Hierarchy. 이 뷰 컨트롤러의 속성은 아래 스크린샷에 나온 것처럼 속성 창에서 확인하고 설정할 수 있습니다.Properties on this view controller can be viewed and set inside the Properties Pane, as illustrated by the screenshot below:

_뷰_는 장면의 흰색 부분을 클릭하여 선택할 수 있습니다.The View can be selected by clicking inside the white part of the Scene. 뷰는 화면의 영역을 정의하고 해당 영역에서 콘텐츠를 사용하기 위한 인터페이스를 제공하는 UIView 클래스의 인스턴스입니다.The View is an instance of the UIView class that defines an area of the screen and provides interfaces for working with the content in that area. 기본 뷰는 전체 디바이스 화면을 채우는 단일 루트 뷰입니다.The default View is a single Root View that fills the whole device screen.

아래 스크린샷에서 나온 것처럼 장면의 왼쪽에 플래그 아이콘이 포함된 회색 화살표가 있습니다.To the left of the Scene is a gray arrow with a flag icon, as illustrated by the screenshot below:

회색 화살표는 Segue(“세그웨이”라고 발음)라고 하는 스토리보드 전환을 나타냅니다.The gray arrow represents a storyboard transition called a Segue (pronounced “seg-way”). 이 Segue에는 원본이 없으므로 원본 없는 Segue라고 합니다.Since this segue has no origin, it is called a Sourceless Segue. 원본 없는 Segue는 애플리케이션 시작 시 뷰가 애플리케이션의 창으로 로드되는 첫 번째 장면을 가리킵니다.A sourceless segue points to the first scene whose views get loaded into the application's window at application startup. 그 안에 포함된 장면 및 뷰는 앱이 로드 될 때 사용자에게 가장 먼저 표시됩니다.The scene and the views inside it will be the first thing that the user sees when the app loads.

사용자 인터페이스를 빌드할 때 아래 스크린샷에서 나온 것처럼 추가 뷰를 도구 상자에서 디자인 화면의 주 뷰로 끌 수 있습니다.When building a user interface, additional Views can be dragged from the Toolbox onto the main view on the design surface, as illustrated by the screenshot below:

이러한 추가 뷰를 하위 뷰라고 합니다.These additional Views are called Subviews. 루트 뷰와 하위 뷰는 모두 ViewController에서 관리하는 콘텐츠 뷰 계층 구조의 일부입니다.Together, the root view and subviews are part of a Content View Hierarchy that is managed by the ViewController. 문서 개요 패드에서 검사를 수행하면 장면에 있는 모든 요소의 개요를 볼 수 있습니다.The outline of all the elements in the scene can be viewed by examining it in the Document Outline pad:

하위 뷰는 아래 다이어그램에 강조 표시되어 있습니다.The Subviews are highlighted in the diagram below:

다음 섹션에서는 이 장면으로 표시되는 콘텐츠 뷰 계층 구조를 분할합니다.The next section breaks down the Content View Hierarchy represented by this Scene.

콘텐츠 뷰 계층 구조Content view hierarchy

_콘텐츠 뷰 계층 구조_는 아래 다이어그램에 나온 것처럼 단일 뷰 컨트롤러에서 관리하는 뷰 및 하위 뷰의 스택입니다.A Content View Hierarchy is a stack of Views and Subviews managed by a single view controller, as illustrated by the diagram below:

ViewController의 콘텐츠 뷰 계층 구조를 더 쉽게 확인할 수 있도록 속성 패드의 뷰 섹션에서 루트 뷰의 배경 색상을 아래 스크린샷에 나온 것처럼 일시적으로 노란색으로 변경할 수 있습니다.We can make the Content View Hierarchy of our ViewController easier to see by temporarily changing the background color of the root View to yellow in the View section of the Properties Pad, as illustrated by the screenshot below:

다음 다이어그램에는 디바이스 화면에 사용자 인터페이스를 가져오는 창, 뷰, 하위 뷰 및 뷰 컨트롤러 간의 관계가 나와 있습니다.The diagram below illustrates the relationships between the Window, Views, Subviews, and view controller that bring the user interface to the device screen:

다음 섹션에서는 코드에서 뷰를 사용하고 뷰 컨트롤러 및 뷰 수명 주기를 사용하여 사용자 상호 작용을 프로그래밍하는 방법에 대해 알아봅니다.In the next section discusses how to work with Views in code and learn to program for user interaction using view controllers and the View lifecycle.

뷰 컨트롤러 및 뷰 수명 주기View controllers and the view lifecycle

모든 콘텐츠 뷰 계층 구조에는 사용자 상호 작용을 구동하는 해당 뷰 컨트롤러가 있습니다.Every Content View Hierarchy has a corresponding view controller to power user interaction. 뷰 컨트롤러의 역할은 콘텐츠 뷰 계층 구조에서 뷰를 관리하는 것입니다.The role of the view controller is to manage the Views in the Content View Hierarchy. 뷰 컨트롤러는 콘텐츠 뷰 계층 구조의 일부가 아니며 인터페이스에는 요소가 없습니다.The view controller is not part of the Content View Hierarchy, and it's not an element in the interface. 대신, 화면에서 개체와 사용자의 상호 작용을 구동하는 코드를 제공합니다.Rather, it provides the code that powers the user's interactions with the objects on the screen.

뷰 컨트롤러 및 스토리보드View controllers and storyboards

뷰 컨트롤러는 장면의 아래쪽에 표시줄로 스토리보드에 표시됩니다.The view controller is represented in a Storyboard as a bar at the bottom of the Scene. 뷰 컨트롤러를 선택하면 해당 속성이 Properties Pad에 나타납니다.Selecting the view controller brings up its properties in the Properties Pad:

이 장면으로 표시되는 콘텐츠 뷰 계층 구조에 대한 사용자 지정 뷰 컨트롤러 클래스는 Properties Pad에 있는 ID 섹션의 클래스 속성을 편집하여 설정할 수 있습니다.A custom view controller class for the Content View Hierarchy represented by this Scene can be set by editing the Class property in the Identity section of the Properties Pad. 예를 들어 Phoneword 애플리케이션은 아래 스크린샷에 나온 것처럼 ViewController를 첫 번째 화면에 대한 뷰 컨트롤러로 설정합니다.For example, our Phoneword application sets the ViewController as the view controller for our first screen, as illustrated by the screenshot below:

뷰 컨트롤러는 장면의 아래쪽에 표시줄로 스토리보드에 표시됩니다.The view controller is represented in a Storyboard as a bar at the bottom of the Scene. 뷰 컨트롤러를 선택하면 해당 속성이 속성 창에 나타남Selecting the view controller brings up its properties in the Properties Pane:

이 장면으로 표시되는 콘텐츠 뷰 계층 구조에 대한 사용자 지정 뷰 컨트롤러 클래스는 속성 창에 있는 ID 섹션의 클래스 속성을 편집하여 설정할 수 있습니다.A custom view controller class for the Content View Hierarchy represented by this Scene can be set by editing the Class property in the Identity section of the Properties Pane. 예를 들어 Phoneword 애플리케이션은 아래 스크린샷에 나온 것처럼 ViewController를 첫 번째 화면에 대한 뷰 컨트롤러로 설정합니다.For example, our Phoneword application sets the ViewController as the view controller for our first screen, as illustrated by the screenshot below:

그러면 뷰 컨트롤러의 스토리보드 표시가 ViewController C# 클래스로 연결됩니다.This links the Storyboard representation of the view controller to the ViewController C# class. ViewController.cs 파일을 열고, 아래 코드에 나온 것처럼 뷰 컨트롤러가 UIViewController하위 클래스임을 확인합니다.Open the ViewController.cs file and notice view controller is a subclass of UIViewController, as illustrated by the code below:

public partial class ViewController : UIViewController
{
    public ViewController (IntPtr handle) : base (handle)
    {

    }
}

이제 ViewController가 스토리보드에서 이 뷰 컨트롤러와 연결된 콘텐츠 뷰 계층 구조의 상호 작용을 수행합니다.The ViewController now drives the interactions of the content view hierarchy associated with this view controller in the storyboard. 다음으로는 뷰 수명 주기라고 하는 프로세스를 소개함으로써 뷰를 관리할 때 뷰 컨트롤러의 역할에 대해 알아봅니다.Next you’ll learn about the view controller's role in managing the Views by introducing a process called the view lifecycle.

참고

사용자 상호 작용이 필요 없는 시각적 개체 전용 화면의 경우 Properties Pad에서 Class 속성을 비워 둘 수 있습니다.For visual-only screens that don’t require user interaction, the Class property can be left blank in the Properties Pad. 이는 뷰 컨트롤러의 지원 클래스를 UIViewController의 기본 구현으로 설정하며, 이는 추가 사용자 지정 코드에서 계획하지 않은 경우 적절합니다.This sets the view controller's backing class as the default implementation of a UIViewController, which is appropriate if you don’t plan on adding custom code.

뷰 수명 주기View lifecycle

뷰 컨트롤러는 창에서 콘텐츠 뷰 계층 구조를 로드하거나 언로드합니다.The view controller is in charge of loading and unloading content view hierarchies from the window. 콘텐츠 뷰 계층 구조에서 뷰에서 중요한 문제가 발생한 경우 운영 체제는 뷰 수명 주기의 이벤트를 통해 뷰 컨트롤러에 알립니다.When something of importance happens to a view in the content view hierarchy, the operating system notifies the view controller through events in the view lifecycle. 뷰 수명 주기에서 메서드를 재정의하면 화면에서 개체와 상호 작용할 수 있으며 동적이고 응답성이 뛰어난 사용자 인터페이스를 만들 수 있습니다.By overriding methods in the view lifecycle, you can interact with the objects on the screen and create a dynamic, responsive user interface.

다음은 기본 수명 주기 메서드 및 해당 기능입니다.These are the basic lifecycle methods and their function:

  • ViewDidLoad - 처음에 한 번 호출되면 뷰 컨트롤러가 해당 콘텐츠 뷰 계층 구조를 메모리에 로드합니다.ViewDidLoad - Called once the first time the view controller loads its Content View Hierarchy into memory. 코드에서 하위 뷰를 먼저 사용할 수 있게 되므로 초기 설치 프로그램을 수행하는 것이 좋습니다.This is a good place to do initial setup because it is when Subviews first become available in code.
  • ViewWillAppear - 호출될 때마다 뷰 컨트롤러의 뷰가 콘텐츠 뷰 계층 구조에 추가되고 화면에 나타납니다.ViewWillAppear - Called every time a view controller's View is about to be added to a Content View Hierarchy and appear on the screen.
  • ViewWillDisappear - 호출될 때마다 뷰 컨트롤러의 뷰가 콘텐츠 뷰 계층 구조에서 제거되고 화면에서 사라집니다.ViewWillDisappear - Called every time a view controller's View is about to be removed from a Content View Hierarchy and disappear from the screen. 이 수명 주기 이벤트는 상태를 정리 및 저장하는 데 사용됩니다.This lifecycle event is used for cleanup and saving state.
  • ViewDidAppearViewDidDisappear - 각각 뷰가 콘텐츠 뷰 계층 구조에서 추가되거나 제거되는 경우 호출됩니다.ViewDidAppear and ViewDidDisappear - Called when a View gets added or removed from the Content View Hierarchy, respectively.

사용자 지정 코드가 수명 주기의 단계에서 추가되는 경우 해당 수명 주기 메서드의 기본 구현재정의되어야 합니다.When custom code is added to any stage of the lifecycle, that lifecycle method’s base implementation must be overridden. 이는 일부 코드가 이미 연결되어 있는 기존 수명 주기 메서드를 이용하고 추가 코드로 확장하여 달성됩니다.This is achieved by tapping into the existing lifecycle method, which has some code already attached to it, and extending it with additional code. 원본 코드가 새 코드보다 먼저 실행되도록 메서드 내에서 기본 구현을 호출합니다.The base implementation is called from inside the method to make sure the original code runs before the new code. 다음 섹션에서 이러한 예제를 설명합니다.An example of this is demonstrated in the next section.

뷰 컨트롤러 작업에 대한 자세한 내용은 Apple의 iOS에 대한 뷰 컨트롤러 프로그래밍 가이드UIViewController 참조를 확인하세요.For more information on working with view controllers, refer to Apple's view controller Programming Guide for iOS and the UIViewController reference.

사용자 상호 작용에 응답Responding to user interaction

뷰 컨트롤러의 가장 중요한 역할은 단추 누르기, 탐색 등과 같은 사용자 상호 작용에 응답하는 것입니다.The most important role of the view controller is responding to user interaction, such as button presses, navigation, and more. 사용자 상호 작용을 처리하는 가장 간단한 방법은 사용자 입력을 수신 대기하도록 컨트롤을 연결하고 입력에 응답하도록 이벤트 처리기를 연결하는 것입니다.The simplest way to handle user interaction is to wire up a control to listen to user input and attach an event handler to respond to the input. 예를 들어 Phoneword 앱에 설명되어 있듯이 터치 이벤트에 응답하도록 단추를 연결할 수 있습니다.For example, a button could be wired up to respond to a touch event, as demonstrated in the Phoneword app.

이 과정을 살펴보겠습니다.Let's explore how this works. Phoneword_iOS 프로젝트에서 콘텐츠 뷰 계층 구조에 TranslateButton이라고 하는 단추가 추가되었습니다.In the Phoneword_iOS project, a button was added called TranslateButton to the Content View Hierarchy:

이름속성 패드단추 컨트롤에 할당되는 경우 iOS 디자이너는 ViewController 클래스 내에서 TranslateButton을 사용할 수 있도록 자동으로 ViewController.designer.cs의 컨트롤에 매핑합니다.When a Name is assigned to the Button control in the Properties Pad, the iOS designer automatically mapped it to a control in the ViewController.designer.cs, making the TranslateButton available inside the ViewController class. 컨트롤은 먼저 뷰 수명 주기의 ViewDidLoad 단계에서 사용할 수 있게 되므로 이 수명 주기 메서드는 사용자의 터치에 응답하는 데 사용됩니다.Controls first become available in the ViewDidLoad stage of the View lifecycle, so this lifecycle method is used to respond to the user's touch:

public override void ViewDidLoad ()
{
    base.ViewDidLoad ();

    // wire up TranslateButton here
}

Phoneword 앱은 TouchUpInside라는 터치 이벤트를 사용하여 사용자의 터치를 수신 대기합니다.The Phoneword app uses a touch event called TouchUpInside to listen to the user's touch. TouchUpInside는 컨트롤의 범위 내 터치 다운(화면을 터치하는 손가락)에 따르는 터치 업 이벤트(화면에서 들어올리는 손가락)를 수신 대기합니다.TouchUpInside listens for a touch up event (finger lifting off the screen) that follows a touch down (finger touching the screen) inside the bounds of the control. TouchUpInside의 반대는 사용자가 컨트롤을 누를 때 발생하는 TouchDown 이벤트입니다.The opposite of TouchUpInside is the TouchDown event, which fires when the user presses down on a control. TouchDown 이벤트는 많은 노이즈를 캡처하며, 사용자가 컨트롤에서 벗어나 손가락을 밀어서 터치를 취소할 수 있는 옵션은 없습니다.The TouchDown event captures a lot of noise and gives the user no option to cancel the touch by sliding their finger off the control. TouchUpInside단추 터치에 응답하는 가장 일반적인 방법이며 사용자가 단추를 누를 때 기대하는 경험을 만듭니다.TouchUpInside is the most common way to respond to a Button touch and creates the experience the user expects when pressing a button. 이에 대한 자세한 내용은 Apple의 iOS 휴먼 인터페이스 지침에서 확인할 수 있습니다.More information on this is available in Apple’s iOS Human Interface Guidelines.

앱은 람다가 있는 TouchUpInside 이벤트를 처리하지만 대리자 또는 명명된 이벤트 처리기가 사용될 수도 있습니다.The app handled the TouchUpInside event with a lambda, but a delegate or a named event handler could have also been used. 최종 단추 코드는 다음과 유사합니다.The final Button code resembled the following:

public override void ViewDidLoad ()
{
    base.ViewDidLoad ();
    string translatedNumber = "";

    TranslateButton.TouchUpInside += (object sender, EventArgs e) => {
      translatedNumber = Core.PhonewordTranslator.ToNumber(PhoneNumberText.Text);
      PhoneNumberText.ResignFirstResponder ();

      if (translatedNumber == "") {
        CallButton.SetTitle ("Call", UIControlState.Normal);
        CallButton.Enabled = false;
      } else {
        CallButton.SetTitle ("Call " + translatedNumber, UIControlState.Normal);
        CallButton.Enabled = true;
      }
  };
}

Phoneword에 도입된 추가 개념Additional concepts introduced in Phoneword

Phoneword 애플리케이션에는 이 가이드에서 다루지 않은 몇 가지 개념이 도입되었습니다.The Phoneword application introduced several concepts not covered in this guide. 이러한 개념은 다음과 같습니다.These concepts include:

  • 단추 텍스트 변경 – Phoneword 앱은 Button에서 SetTitle을 호출하여 새 텍스트 및 단추의 _컨트롤 상태_에 전달하여 단추의 텍스트를 변경하는 방법을 보여 줍니다.Change Button Text – The Phoneword app demonstrated how to change the text of a Button by calling SetTitle on the Button and passing in the new text and the Button’s Control State. 예를 들어 다음 코드는 CallButton의 텍스트를 “Call”로 변경합니다.For example, the following code changes the CallButton’s text to “Call”:

    CallButton.SetTitle ("Call", UIControlState.Normal);
    
  • 설정/해제 단추단추Enabled 또는 Disabled 상태일 수 있습니다.Enable and Disable ButtonsButtons can be in an Enabled or Disabled state. 사용하지 않도록 설정된 단추는 사용자 입력에 응답하지 않습니다.A disabled Button won’t respond to user input. 예를 들어 다음 코드에서는 CallButton을 사용하지 않습니다.For example, the following code disables the CallButton:

    CallButton.Enabled = false;
    

    단추에 대한 자세한 내용은 단추 가이드를 참조하세요.For more information on buttons, refer to the Buttons guide.

  • 키보드 해제 – 사용자가 텍스트 필드를 탭하면 iOS는 사용자가 입력할 수 있도록 키보드를 표시합니다.Dismiss the Keyboard – When the user taps the Text Field, iOS displays the keyboard to let the user enter input. 그러나 키보드를 해제할 수 있는 기본 제공 기능은 없습니다.Unfortunately, there is no built-in functionality to dismiss the keyboard. 사용자가 TranslateButton을 누르면 다음 코드가 TranslateButton에 추가되어 키보드를 해제합니다.The following code is added to the TranslateButton to dismiss the keyboard when the user presses the TranslateButton:

    PhoneNumberText.ResignFirstResponder ();
    

    키보드 해제에 대한 또 다른 예는 키보드 해제 레시피를 참조하세요.For another example of dismissing the keyboard, refer to the Dismiss the Keyboard recipe.

  • URL로 전화 걸기 – Phoneword 앱에서는 시스템 전화 앱을 실행하는 데 Apple URL 구성표가 사용됩니다.Place Phone Call with URL – In the Phoneword app, an Apple URL scheme is used to launch the system phone app. 사용자 지정 URL 구성표는 아래 코드에 표시된 것처럼 “tel:” 접두사와 번역된 전화 번호로 구성됩니다.The custom URL scheme consists of a “tel:” prefix and the translated phone number, as illustrated by the code below:

    var url = new NSUrl ("tel:" + translatedNumber);
    if (!UIApplication.SharedApplication.OpenUrl (url))
    {
        // show alert Controller
    }
    
  • 경고 표시 – 사용자가 통화를 지원하지 않는 디바이스(예: 시뮬레이터 또는 iPod Touch)에서 전화 걸기를 시도하는 경우 사용자에게 전화를 걸 수 없음을 알리는 경고 대화 상자가 표시됩니다.Show an Alert – When a user tries to place a phone call on a device that doesn’t support calls – for example the simulator or an iPod Touch – an alert dialog is displayed to let the user know the phone call can’t be placed. 아래 코드는 경고 컨트롤러를 만들고 채웁니다.The code below creates and populates an alert controller:

    if (!UIApplication.SharedApplication.OpenUrl (url)) {
                    var alert = UIAlertController.Create ("Not supported", "Scheme 'tel:' is not supported on this device", UIAlertControllerStyle.Alert);
                    alert.AddAction (UIAlertAction.Create ("Ok", UIAlertActionStyle.Default, null));
                    PresentViewController (alert, true, null);
                }
    

    iOS 경고 보기에 대한 자세한 내용은 경고 컨트롤러 레시피를 참조하세요.For more information on iOS alert views, refer to the Alert Controller recipe.

터치 테스트, 배포 및 마무리Testing, deployment, and finishing touches

Mac용 Visual Studio와 Visual Studio 모두 애플리케이션을 테스트하고 배포하기 위한 다양한 옵션을 제공합니다.Both Visual Studio for Mac and Visual Studio provide many options for testing and deploying an application. 이 섹션에서는 디버깅 옵션에 대해 다루고, 디바이스에서 애플리케이션 테스트하기에 대해 설명하며, 사용자 지정 앱 아이콘 및 시작 이미지를 만들기 위한 도구를 소개합니다.This section covers debugging options, demonstrates testing applications on device, and introduces tools for creating custom app icons and launch images.

디버깅 도구Debugging tools

경우에 따라 애플리케이션 코드의 문제는 진단하기가 어렵습니다.Sometimes issues in application code are difficult to diagnose. 복잡한 코드 문제를 진단하려면 중단점을 설정하거나, 코드를 단계별 실행하거나, 로그 창에 정보를 출력합니다.To help diagnose complex code issues, you could Set a Breakpoint, Step Through Code, or Output Information to the Log Window.

디바이스에 배포Deploy to a device

iOS 시뮬레이터는 애플리케이션을 테스트하기 위한 빠른 방법입니다.The iOS Simulator is a quick way to test an application. 시뮬레이터에는 모의 위치, 이동 시뮬레이션 등을 포함한 테스트에 유용한 최적화가 많이 있습니다.The Simulator has a number of useful optimizations for testing, including mock location, simulating movement, and more. 그러나 사용자는 시뮬레이터에서 최종 앱을 사용하지 않습니다.However, users will not consume the final app in a Simulator. 모든 애플리케이션은 조기에 그리고 자주 실제 디바이스에서 테스트해야 합니다.All applications should be tested on real devices early and often.

디바이스를 프로비전하는 데는 시간이 걸리며 Apple 개발자 계정이 있어야 합니다.A device takes time to provision and requires an Apple Developer Account. 디바이스 프로비전 가이드에 개발을 위한 디바이스 준비에 대한 철저한 지침이 나와 있습니다.The Device Provisioning guide gives thorough instructions on getting a device ready for development.

참고

현재 Apple의 요구 사항에 따라 물리적 디바이스 또는 시뮬레이터용 코드를 빌드하려면 개발 인증서 또는 ‘서명 ID’가 필요합니다. At present, due to a requirement from Apple, it is necessary to have a development certificate or signing identity to build your code for a physical device or the simulator. 이를 설정하려면 디바이스 프로비전 가이드의 단계를 수행합니다.Follow the steps in the Device Provisioning guide to set this up.

디바이스가 프로비전되고 나면, 다음 스크린샷에 표시된 것처럼 플러그 인하고 빌드 도구 모음에 있는 대상을 iOS 디바이스로 변경한 다음, Start(Play) 키를 눌러 배포할 수 있습니다.Once the device is provisioned, you can deploy to it by plugging it in, changing the target in the build toolbar to the iOS Device, and pressing Start ( Play) as illustrated by the following screenshot:

앱이 iOS 디바이스에 배포합니다.The app will deploy to the iOS device:

사용자 지정 아이콘 및 시작 이미지 생성Generate custom icons and launch images

모든 사람이 앱을 차별화하는 데 필요한 사용자 지정 아이콘 및 시작 이미지를 만들 수 있는 디자이너를 가지고 있지는 않습니다. 다음은 사용자 앱 아트워크를 생성하는 몇 가지 대안 방법입니다.Not everyone has a designer available to create the custom icons and launch images an app needs to stand out. Here are several alternate approaches to generating custom app artwork:

  • Sketch – Sketch는 사용자 인터페이스, 아이콘 등을 디자인하기 위한 Mac 앱입니다.Sketch – Sketch is a Mac app for designing user interfaces, icons, and more. 이는 Xamarin 앱 아이콘 및 시작 이미지 집합을 디자인하는 데 사용되었던 앱입니다.This is the app that was used to design the Xamarin App Icons and Launch Images set. Sketch 3은 App Store에서 사용할 수 있습니다.Sketch 3 is available on the App Store. 무료 Sketch Tool도 사용해 볼 수 있습니다.You can try out the free Sketch Tool as well.
  • Pixelmator – Mac용 다양한 이미지 편집 앱입니다(약 $30).Pixelmator – A versatile image editing app for Mac that costs about $30.
  • Glyphish – 무료 다운로드 및 구매가 가능한 고품질의 미리 빌드된 아이콘 집합입니다.Glyphish – High-quality prebuilt icon sets for free download and purchase.
  • Fiverr – 다양한 디자이너를 선택하여 자신에 게 맞는 아이콘 집합을 만들 수 있습니다(가격: $5부터).Fiverr – Choose from a variety of designers to create an icon set for you, starting at $5. 성공할 수도 있고 아니면 실패할 수도 있지만, 즉시 디자인된 아이콘이 필요한 경우에 좋은 리소스입니다.Can be hit or miss but a good resource if you need icons designed on the fly
  • Visual Studio - IDE에서 직접 앱에 대한 간단한 아이콘 집합을 만드는 데 사용할 수 있습니다.Visual Studio – You can use this to create a simple icon set for your app directly in the IDE.
  • Glyphish – 무료 다운로드 및 구매가 가능한 고품질의 미리 빌드된 아이콘 집합입니다.Glyphish – High-quality prebuilt icon sets for free download and purchase.
  • Fiverr – 다양한 디자이너를 선택하여 자신에 게 맞는 아이콘 집합을 만들 수 있습니다(가격: $5부터).Fiverr – Choose from a variety of designers to create an icon set for you, starting at $5. 성공할 수도 있고 아니면 실패할 수도 있지만, 즉시 디자인된 아이콘이 필요한 경우에 좋은 리소스입니다.Can be hit or miss but a good resource if you need icons designed on the fly

아이콘 및 시작 이미지 크기 및 요구 사항에 대한 자세한 내용은 이미지 가이드 작업을 참조하세요.For more information about icon and launch image sizes and requirements, refer to the Working with Images guide.

요약Summary

지금까지Congratulations! 이제 Xamarin.iOS 애플리케이션의 구성 요소와 이를 만드는 데 사용되는 도구에 대해 확실하게 이해했습니다.You now have a solid understanding of the components of a Xamarin.iOS application as well as the tools used to create them. 시작하기 시리즈의 다음 자습서에서는 여러 화면을 처리하도록 애플리케이션을 확장합니다.In the next tutorial in the Getting Started series, you’ll extend our application to handle multiple screens. 그 과정에서 여러 화면을 처리하도록 애플리케이션을 확장하면서 탐색 컨트롤러를 구현하고, 스토리보드 Segues에 대해 알아보며, MVC(모델, 뷰, 컨트롤러) 패턴을 소개합니다.Along the way you’ll implement a Navigation Controller, learn about Storyboard Segues, and introduce the Model, View, Controller (MVC) pattern as you extend your application to handle multiple screens.