MacOS(OSX) 개발을 swift로 해보자. Hello World! 1

MacOS 용 앱을 개발하는 것을 배워보도록 하겠습니다. 생각보다 MacOS를위한 개발은 매우 쉽습니다.몇개의 게시물을 통해 MacOS에서 실행되는 앱을 개발하는 방법을 배우겠습니다. 먼저 간단한 MacOS를 위한 첫 번째 앱을 만들어 봅시다.  앱을 제작하기 위해서 macOS를 개발하는 데 필요한 도구를 얻는 것으로 시작해봅시다. 그리고, 간단한 "Hello, World!" 응용 프로그램을 만드는 동안 Xcode 둘러보기, 응용 프로그램 실행 방법, 코드 편집, UI 디자인 및 코드 디버깅을 수행합니다. 이 시리즈의 파트 2 & 3에서는 더 복잡한 에그 타이머 응용 프로그램을 만들고 응용 프로그램 시작 방법부터 UI 구성, 사용자 상호 작용 처리까지 MacOS 응용 프로그램을 구성하는 구성 요소에 대해 배웁니다. 시작해봅시다

• Swift에 익숙하지 않은 분이라면,이 시리즈는 신속한 지식을 전제로하기 때문에, 먼저 Swift 튜토리얼 을 읽어보십시오 . 
• 이미 iOS에 대한 경험이 있는 경우는 이 부분을 이미 잘 알고 있을 것입니다. 주제를 빠르게 살펴보고 다음 부분으로 바로 건너 가세요 
• 그렇지 않으면 계속 읽으십시오. 이 시리즈는 완전한 초보자를 위한 것입니다 - iOS 또는 macOS를위한 개발 경험이 필요하지 않습니다!

시작하기 

macOS 개발을 위해서는 다음 두 가지가 필요합니다.  

• MacOS Sierra를 실행하는 MacOS : MacOS 운영 체제는 Apple 컴퓨터에서만 실행되므로 MacOS 응용 프로그램을 개발하고 실행하려면 Mac이 모두 필요합니다. 
• Xcode : 이것은 MacOS 응용 프로그램을 만드는 데 사용되는 IDE입니다. 다음 부분에서 설치하는 법을 배우게 됩니다.

앱을 제작 한 후에 앱 스토어에 앱을 업로드하여 배포하려면 Apple 개발자 계정으로 등록비를 지불하고 등록을 해야 합니다. 하지만 앱을 앱 스토어에 배포하지 않는다면 Macapp Store를 통해 배포하고 싶을 때만 필요합니다. iOS 앱 배포 용 개발자 계정이 이미 있는 경우 모두 설정됩니다. Apple 계정이 병합되어 모든 Apple 장치 용 앱을 배포하는 데 단일 계정 만 있으면됩니다.  

다른 플랫폼과는 달리, MacOS를 개발하려면 Xcode 하나만 설치하면 됩니다. Xcode는 macOS, iOS, watchOS 및 tvOS 응용 프로그램을 개발하는 데 필요한 모든 것을 포함하는 IDE (통합 개발 환경)입니다.  아직 Xcode가 없으면 메뉴 왼쪽 상단에있는 Apple 아이콘을 클릭하고 App Store ... 를 선택 하여 Mac App Store를 엽니다.. Xcode가 무료이지만, Xcode를 다운로드하려면 앱 스토어 계정이 필요합니다.

Xcode를 검색하고 설치 버튼을 클릭하여 다운로드를 시작하십시오. 다운로드 및 설치 (어느 정도 소요될 수 있습니다 - 용량이 꽤 큽니다)가 끝나면 응용 프로그램 폴더에서 엽니다 . Xcode를 처음 실행하고 모든 주요 업데이트가 끝나면 추가 구성 요소를 설치할 권한이 있는지 묻습니다. 암호를 입력하고 이 추가 구성 요소를 설치하세요.

Hello World! 

새로운 프로그래밍 언어 또는 플랫폼을 배우는 오랜 전통에 따라 Hello World를 만들 것입니다. Xcode를 엽니다. Welcome to Xcode 창이 보일 것입니다. 보이지 않는다면 상단 메뉴의 Window -> Welcome to XCode를 선택하세요 

새 Xcode 프로젝트 만들기를 클릭한 다음 대화 상자가 나타나면 상단의 탭에서 macOS 를 선택하십시오 . 응용 프로그램 섹션 에서 Cocoa 응용 프로그램 을 선택하고 다음을 클릭하세요.

Project 이름을 HelloWorld로 하고, 언어가 Swift 로 설정되어 있고, Storyboards 사용이 선택되어 있는지 확인하십시오. 다른 모든 옵션의 선택을 취소하세요.

Next를 클릭 하고 Create를 클릭하면 프로젝트가 프로젝트명으로 새로운 폴더를 생성하며 저장됩니다.  XCode가 앱을 실행하기 위해 필요한 모든 필수 파일을 포함하는 앱의 기본 템플릿을 만들었습니다. 툴바에서 재생 버튼을 클릭하여 앱을 실행하거나 Command-R 바로 가기를 사용합니다 . Xcode는 모든 코드를 기계어 코드로 컴파일하고, 앱에 필요한 리소스를 묶어서 실행합니다.

참고 : Xcode에서 처음으로 응용 프로그램을 빌드하고 실행하면 이 Mac에서 개발자 모드를 사용할지 여부를 묻는 메시지가 표시될 수 있습니다 . 사용을 선택하고 암호를 입력하세요. 개발자 모드는 Xcode가 실행중인 프로세스에 디버거를 사용할 수 있게 합니다. 이는 응용 프로그램을 빌드할 때 매우 유용합니다!  

프로그램을 실행해보면 덩그러니 빈 창이 보이지만 실망하지 않아야합니다. 이미 기본적인 앱의 기능을 하고 있습니다.  창의 크기를 조정 할 수 있고, 최소화하고 전체 화면으로 만들 수 있습니다. 이미 많은 작업을 수행하지 않고도 사용할 수 있는 완벽한 상단 메뉴가 생성되어 있습니다. Dock 아이콘에는 일반적인 메뉴가 있습니다.

조금더 만들어보기 위해 앱을 종료하고 Xcode로 돌아갑니다.  

Xcode 인터페이스 

Xcode는 많은 기능을 작은 패키지로 묶어서 한 번에 모든 것을 볼 수 있도록 구성되어 있는 것은 아닙니다. 효과적으로 Xcode를 사용하기 위해서는 모든 것이 어디에 있는지 어떻게 찾을수 있는지를 알아야 합니다.  Xcode에서 새 프로젝트를 열면 도구 모음과 세 개의 기본 패널이 있는 창이 나타납니다.

왼쪽 패널은 네비게이터 패널이며 맨 위에 8 개의 디스플레이 아이콘이 있습니다. 주로 사용하는 것은 제일 앞에 있는 프로젝트에 있는 모든 파일을 나열하고 그것을 편집 할 수 있습니다.  중앙 패널은 편집기 패널이며 앞서 설명한 프로젝트 네비게이터에서 선택한 항목을 표시합니다. 오른쪽 패널은 유틸리티 패널이며, 편집기 패널에서 보고 있는 내용에 따라 달라집니다 

UI 추가하기 

스토리 보드를 사용하여 사용자 인터페이스를 디자인합니다. 앱에 스토리 보드가 이미 있으므로, 프로젝트 네비게이터 로 이동하여 Main.storyboard 를 클릭하여 편집기 패널에 표시하십시오. 화면이 눈에 띄게 바뀝니다. 편집기 패널에서 이제 문서 개요(Document Outline)와 UI의 비주얼 편집기를 볼 수 있습니다.  비주얼 에디터를 천천히 살펴보십시오. 세 가지 주요 영역이 있으며 ,각 영역에는 문서 개요에 텍스트로 표현되어 있습니다.  

• 응용 프로그램 Scene : 메뉴 모음 및 항목. 윈도우 
• 컨트롤러 Scene : 윈도우의 동작 방식을 설정합니다. 
• View 컨트롤러 Scene : UI 요소가 있는 곳. 

유틸리티 패널에서 8개 탭이 있는 상단 부분과 4개 탭 바닥 섹션을 참조하세요.  아래쪽 섹션은 프로젝트에 삽입 할 수 있는 다양한 작업 사이를 전환합니다. 지금은 UI 요소를 삽입하고 싶으므로 왼쪽에서 세 번째인 Object 라이브러리를 선택하십시오. 하단의 필터에서 "텍스트"를 입력하여 검색하여 텍스트 필드 선택하여 뷰 컨트롤러 Scene 으로 드래그해서 적절한 위치를 잡아줍니다.

이제 "버튼"을 검색하여 푸시 버튼을 뷰 컨트롤러 신으로 드래그 하세요 . 마지막으로 레이블을 추가 하세요 .  이제 Play 버튼이나 Command-R을 사용하여 앱을 빌드하고 실행해 봅니다 . 추가된 세 가지 UI 요소가 표시됩니다. 텍스트 필드에 입력 해보세요. 이미 복사, 붙여 넣기, 잘라 내기, 모두 선택, 실행 취소, 다시 실행 등 모든 표준 편집 기능를 지원합니다. 그러나 버튼은 클릭해도 아무 기능도 하지 않고 레이블에는 "레이블"만 표시되므로 좀더 작업을 해봅시다.

.

UI 구성 

Main.storyboard로 돌아가서 버튼을 클릭하여 선택하세요. 오른쪽의 유틸리티 패널에서 Attributes Inspector 가 표시되는지 확인하십시오 . 상단의 네 번째 버튼입니다.  단추 제목을 "Say Hello"로 변경하십시오. 버튼이 모든 텍스트를 표시할 정도의 크기가 되지 않을 수 있으므로 편집기 메뉴로 이동하여 크기에 맞게 크기를 선택하십시오 . (콘텐츠에 맞추기 크기가 비활성화 된 경우 버튼을 선택 취소한 다음 다시 선택하고 다시 시도하십시오.)   

이제 텍스트 필드를 클릭하여 선택하십시오. 이 앱의 경우 사용자가 여기에 이름을 입력하고 버튼을 클릭하면 앱에 'Hello name-goes-here!'라는 라벨이 표시됩니다. 사용자를 돕기 위해 Attributes Inspector를 사용하여 텍스트 필드에 Place holder 텍스트를 추가하십시오 .  긴 이름을 허용하고 버튼을 텍스트 필드의 오른쪽에 배치하려면 텍스트 필드를 약간 늘리십시오. View Controller Scene 에서 오브젝트를 드래그 할 때 Apple의 휴먼 인터페이스 지침에 따라 오브젝트를 정렬하고 배치할 수 있는 파란색 선이 나타납니다. 텍스트 필드와 버튼 아래에 레이블을 놓습니다. 레이블이 중요하므로 큰 글꼴을 사용하십시오. 레이블을 선택하고 Attributes Inspector 에서 글꼴을 System Regular 30으로 변경하십시오 . 텍스트의 색상도 변경해 봅시다. 사용자가 입력할 수 있는 이름의 길이를 알 수 없으므로 글꼴의 높이에 맞게 필드의 크기를 조정하고 창의 너비를 거의 채 웁니다. 앱을 빌드하고 실행하여 UI 변경 사항이 적용되었는지 확인하십시오. 레이블의 텍스트 모양에 만족하면 레이블 제목을 삭제하여 레이블이 비어있는 상태에서 시작되도록하십시오.

코드에 UI 연결하기 

앱은 원하는 동작을 작동하게 하려면 코드를 추가해야 하며, 해당 코드는 UI와 통신 할수 있어야 합니다. 그러한 연계를 만들기 위해 Xcode의 Assistant Editor 를 사용할 것입니다. Main.storyboard를 보이게 한후, ViewController.swift를  프로젝트 네비게이터에서 option+click을 합니다. 그러면 ViewController 코드가 포함 된 두번째 편집기 패널이 생성됩니다.  모니터의 크기에 따라 도구가 약간 좁아질 수 있으므로 툴바의 가장 오른쪽 버튼을 사용하여 유틸리티를 숨깁니다. 공간이 더 필요하면 탐색기도 숨깁니다. 텍스트 필드를 선택하십시오. Control 키를 누른 채 텍스트 필드에서 ViewController클래스 정의의 맨 위로 드래그 하십시오. 또, 팝업의 nameField에  이름을 입력하고 connect를 클릭 하십시오 .  레이블도 동일하게 이름을 지정하십시오 helloLabel.  Xcode가 생성한 코드를 살펴보면 두 코드 모두가  @IBOutlet가 표시되어 있습니다. 인터페이스 빌더 아울렛의 약자로, 스토리 보드 편집기에 이러한 객체 이름을 시각적 객체에 연결하는데 사용할 수 있는 방법입니다.  버튼의 경우 코드에 이름이 필요하지 않지만 사용자가 버튼을 클릭하면 알아야 합니다. 이것은 @IBOutlet 대신 @IBAction을 필요로 합니다. 이전과 마찬가지로 ViewController.swift 에서 버튼을 선택하고 Control 키를 누른 채 드래그 하십시오 . 이번에는 Connection 팝업을 Action으로 변경하고 이름을 sayButtonClicked로 설정하십시오. 이렇게하면 버튼을 클릭할 때 호출되는 함수가 만들어집니다. 이제는 코드를 편집할 수 있는 모든 코드가 만들어졌습니다. 오른쪽 상단의 X를 사용하여 Assistant Editor를 닫고 ViewController.swift로 전환하십시오. 네비게이터를 숨긴 경우 오른쪽 상단의 전환 버튼을 클릭하거나 Command-1 을 눌러 프로젝트 네비게이터로 직접 이동하십시오 .  다음 코드를 입력하십시오 

var name = nameField.stringValue 

if name.isEmpty {   

name = "World" 

} 

let greeting = "Hello \(name)!" 

helloLabel.stringValue = greeting

줄 번호 옆에있는 모양은 스토리 보드의 인터페이스에 대한 연결을 나타냅니다.    

앱을 빌드하고 실행하십시오.  아무 것도 입력하지 않고 Say Hello 버튼을 클릭하면 "Hello World!"가 표시됩니다. 

이제 이름을 입력하고 버튼을 다시 클릭하면 이름이 들어간 인사말을 볼 수 있습니다.