Xcode 설치, 플레이그라운드 사용해보기, 앱 개발환경 설정/ Playground / SwiftUI 공부

SwiftUI와 Xcode 11을 알려주는 책이다

 

1. Xcode (지금은 13)이랑 iOS 13 SDK 다운로드한다

 

넥사크로 스튜디오 (통합개발도구) 이쪽에 메뉴얼에서. 앞부분 살짝 가져왔다

출처 : http://docs.tobesoft.com/

넥사크로 스튜디오가 뭔지 몰랐는데 뭐하는 곳이길래 이렇게 안드로이드와 iOS 웹에 관련된 메뉴얼이 작성되어있는지 알아보니 통합개발도구라고 한다. 

넥사크로 스튜디오 / 네이티브 / 하이브리드 등 이런 게 있는 거 같은데 다음에 더 자세히 알아봐야겠다.

개발자 및 디자이너가 쉽게 화면을 개발할 수 있도록 구성된 4GL 개발도구, 화면 개발의 경우 위지위그(What You See Is What You Get) 형식으로 되어있다 한다. 개발도구에서 화면 결과를 그대로 보면서 작업 가능, 개발 보조 도구부터 배포 단계까지 편의 기능 제공된다고 함. 

 

 

1. 앱 개발 환경 설정

iOS용 앱은 Xcode, iOS SDK를 이용해 개발합니다. 

Xcode, iOS SDK는 Windows 계열의 PC에서는 사용할 수 없으며 Mac에서만 구동합니다. 

그리고 Xcode를 내려받고 앱을 만들고 테스트를 하기 위해서는  Apple 개발자 계정이 필요합니다.

 

iOS 앱 개발 환경은 기본적으로 다음과 같은 절차에 의해 구성되며 세부 내용은 개발자 사이트 업데이트에 따라 변경될 수 있습니다.

•  1- 개발자 계정 등록
•  2- Xcode, iOS SDK 설치
•  3- 배포 시 필요한 작업

1-1. 개발자 계정 등록

Apple 계정만 있으면 개발자 라이선스를 따로 발급받지 않아도 계정 등록만으로 Xcode를 내려받거나 기타 무료로 제공되는 서비스를 사용할 수 있습니다. 그리고 iOS에서는 시뮬레이터를 사용해 테스트를 진행할 수 있습니다.

 

시뮬레이터를 사용하는 경우에는 별도의 인증 절차를 거치지 않지만, 단말기를 연결하는 경우에는 추가적인 인증 절차가 필요하므로 개발자 라이선스를 발급받아야 합니다.

 

개발자 계정을 등록하려면 Apple 계정이 있어야 함 이미 만들어진 Apple 계정을 개발자로 등록함

새로운 Apple 계정은 아래 링크에서 만들 수 있으며 등록 시 사용하는 이메일 계정을 ID로 사용합니다. 기존에 사용하고 있는 Apple 계정이 있다면 이 단계는 지나갑니다.

 

https://developer.apple.com/account/

 

1-2. 개발자 라이선스 인증 (비용이 드니 당장안해두됨)

 

단말기 연결 없이 시뮬레이션으로만 테스트를 진행하고자 한다면 아래 링크에서 Apple 계정을 개발자 계정으로 등록할 수 있습니다.

 

https://developer.apple.com/register

 

개발, 테스트, 배포에 필요한 서비스를 받으려면 iOS 개발자 프로그램에 가입해야 합니다. 1년 단위로 등록할 수 있으며 별도의 비용이 발생합니다. 제공되는 서비스에 대해서는 아래 링크를 참고하세요.

 

https://developer.apple.com/programs/

 

화면 상단에 있는 Enroll 버튼을 클릭하면 등록하기 과정이 시작됩니다. 개발자 계정은 개인으로 등록하거나 회사 명의로 등록할 수 있습니다.

 

회사 명의로 등록하는 경우에는 DUNS 번호가 필요합니다. DUNS 번호는 전 세계 기업을 관리하는 일종의 코드입니다. 애플 사이트에서 DUNS 번호를 별도 비용 없이 발급받을 수 있습니다. 사이트에서 신청 후 발급 대행사에서 유선으로 필요한 서류를 요청하고 해당 서류까지 전달해야 발급 처리가 완료됩니다.

 

https://developer.apple.com/ios/enroll/dunsLookupForm.action

https://developer.apple.com/support/D-U-N-S/

 

계정이 등록되면 Apple 담당자가 신청된 내용을 검토하고 유선으로 확인합니다. 다른 문제가 없다면 등록 완료 메일에 포함된 링크로 이동해 라이선스에 동의하고 스토어에서 1년짜리 개발자 계정을 구매할 수 있습니다.

 

구매 단계까지 마치면 이메일로 활성화 코드(Activation code)가 전달되고 인증 페이지에서 해당 코드를 등록하면 모든 절차가 완료됩니다.

 

iOS Dev Center에서 화면 오른쪽에 iOS Developer Program 메뉴가 추가된 것을 확인할 수 있습니다.

 

 

 

2-1. Xcode, iOS SDK 설치

code는 맥에서 사용하는 통합개발환경으로 여러 가지 도구가 포함되어 있습니다. 이미 Xcode가 설치되어 있더라도 연결하려는 장비의 iOS SDK 버전에 따라 지원되는 Xcode 버전이 달라질 수 있으며 필요한 경우 업데이트를 해야 합니다.

 

내려받을 수 있는 최신 Xcode 버전은 아래 링크에서 확인할 수 있습니다. 링크를 통하지 않고 직접 앱스토어에서 내려받을 수도 있습니다. Xcode 설치 파일에는 iOS SDK와 Mac SDK가 포함되어 있습니다.

 

https://developer.apple.com/xcode/

https://developer.apple.com/download/

 

 

만일 다른 버전의 Xcode가 필요하다면 아래 링크에서 내려받을 수 있습니다.

 

https://developer.apple.com/download/more/

 

 

만일 다른 버전의 Xcode가 필요하다면 아래 링크에서 내려받을 수 있습니다.

 

https://developer.apple.com/download/more/

 

 

1. Xcode 실행하면 이런 화면이 나옴

2. 애플 아이디 Xcode 설정에 추가하기 (미리 추가하는 이유 개발 중에 앱을 테스트할 수 있는 인증서를 미리 받아두려고)

3. 상단의 Preferences... 누르고 왼쪽 하단 + 눌러서 Apple ID 로그인

4. 개발자 인증서 배포 인증서 확인 내 계정 누르고 오른쪽 Manage Certifi... 클릭

개발자 프로그램에 가입하지 않았으면 +눌러서 Apple Development를 눌러 개발 중에 앱을 테스트할 수 있는 인증서를 만들자.

 

 

---

매번 왜 다른 곳들도 글이 이렇게 많나 했는데 여기서 끊기 아쉬운 거다 다음 거 바로 하기

책의 제목은 Xcode 11. 플레이그라운드

플레이그라운드 (스위프트에 공부하거나 ios SDK를 좀 더 쉽게 테스트해볼 수 있도록 설계된 Xcode의 기능)

 

플레이그라운드란?

스위프트 코드 입력하면 실시간으로 결과가 실행되는 인터랙티브 환경이다.

코딩/컴파일/실행/디버깅의 연속과정이 없어도 ios 개발을 시각적 측면에서 배울 수 있는 환경을 제공함

플레이그라운드는 서식 있는 텍스트 주석 기능을 제공함.

코드를 문서화하는 좋은 방법.

 

1. 플레이그라운드 생성하기 메뉴에서 file - playground - iOS, macOS, tvOS 패널에서 iOS패널 누르고 blank 템플릿 선택

 

2. 여기서 잠깐 각 템플릿 설명

Blank 템플릿은 스위프트 코딩 따라 해 보는데 유용함

Single View 템플릿은 사용자 인터페이스 레이아웃을 필요로 하는 코드를 실습할 수 있는 뷰 컨트롤 환경 제공

Game, Map 템플릿은 SpriteKit 프레임워크 MapKit 프레임워크를 테스트할 수 있도록 미리 구성된 플레이그라운드 제공

3. 파일 이름 LearnSwift 

4. 프로그램의 UI는 책 참고~

 

간단한 주석과 for문 해봄

그리고 설정 중에 서식 있는 텍스트 주석 추가하기 해봄 

import UIKit

var greeting = "Hello, playground"

print("Welcome to Swift")

var x = 10
for index in 1...20{
    let y = index * x
    x -= 1
    print(y)
}

// : 이것은 한 줄 문서 텍스트다
/*:
 이것은 여러 줄로 구성된
 문서 텍스트 블록이다
 */

// 서식 있는 텍스트는 마크업 언어를 이용하며, 가볍고 사용하기 쉬운 문법을 이용해 텍스트의 서식을 지정할 수 있게 해준다.
// # 문자를 텍스트줄 앞에 쓰면 제목이됨
// '*' 문자로 감싸면 이탤릭체
// '**' 문자로 텍스트를 감싸면 볼드체가 된다. 한글되나?

/*:
 # Welcome to playgrounds
 This is your *first* playground which is intended to demonstrate:
 * The use of **Quick Look**
 * Placing results **in-line** with the code
 * 표시한 주석들은 raw markup 형식으로 표시된다
 * 이것을 rundered Markup 형식으로 표시하려면
 * Edutir --> Show Rendered Markup 메뉴를 선택하거나
 * 패널의 Playground Settings 아래 있는 Render Documentation 활성화 한다.*/

 

 

서식 있는 주석 추가하고 raw markup 형식으로 표시되는걸

rendered markup 형식으로 표시하는 방법은 아래와 같이 실행한다

 

---

플레이그라운드 여러 개의 페이지로 작업하기

 

1. LearnSwift 선택하고 New Playground  Page 이름 UIKit Examples 생성

--> 새로 추가된 페이지에 마크업 링크가 있고 이 링크를 클릭하면 플레이그라운드 내에 있는 이전 페이지 또는 다음 페이지로 이동 가능

 

2. 플레이그라운드(Playground)에서 UIKit으로 작업하기

Xcode에서 SwiftUI로 개발할 때 많은 기능을 지원하는 Live Preview 캔버스를 제공한다.

여전히 SwiftUI 작업할 때 UIKit이 사용된다고 한다 그래서 플레이그라운드 내에 UIKit 사용법을 살펴보자

 

2-1.UIKit 임포트 하기

       플레이그라운드 페이지에서 작업할 때는 iOS UIKit 프레임워크를 임포트 해야 함

       (iOS 애플리케이션용 사용자 인터페이스 구현하는데 필요한 대부분의 클래스를 담고 있다고 한다 당연한 소리겠지...!)

       플레이그라운드의 강점 : iOS SDK를 구성하는 여러 프레임워크들과 UIKit 프레임워크를 사용할 수 있다는 점 

2-2. 색상과 텍스트 폰트 속성 설정한 UILabel 생성

//: [Previous](@previous)

import UIKit

let myLabel = UILabel(frame: CGRect(x : 0, y : 0, width: 200, height: 50))

myLabel.backgroundColor = UIColor.red
myLabel.text = "Hello Swift"
myLabel.textAlignment = .center
myLabel.font = UIFont(name: "Georgia", size: 24)
myLabel

//: [Next](@next)

---

플레이그라운드에 리소스 추가하기 (사진~)

Resources 폴더에 이미지를 집어넣고

let image = UIImage(named: "image.jpg")

추가하면 나옴 근데 처음에 그냥 책에는 확장명이 따로 없어서 그냥 썼는데 이미지가 안 나와서 확장명 적어봄 그렜더니 나옴

---

플레이그라운드의 향상된 라이브 뷰로 작업하기

동적 사용자의 인터페이스 동작을 테스트할 수 있다

 

1. 라이브 뷰에 데모를 보기 위해 플레이그라운드에 Live View Example 새 페이지 생성

2. 프레임워크 추가

3. 동적 뷰 기능 코드 추가

4. 코드 설명

컨테이너 뷰 역할하는 UICiew 객체를 생성하고 흰색 배경을 할당함

컨테이너 뷰 중앙에 위치하도록 작은 뷰를 생성하고 빨간색 배경으로 변경

두 번째 생성한 뷰를 컨테이너의 하위 뷰로 추가

두번째 뷰의 색을 파란색으로 변경하면서 180도 회전하는 애니메이션 사용

 

** PlaygroundSupper 모듈은 플레이그라운드 코드가

페이지와 서로 상호작용을 할 수 있도록 하는 PlaygroundPage라는 클래스를 가지고 있다 함 current 속성은 현재 플레이그라운드 페이지에 접근할 수 있게 해준다고 함 플레이그라운드 내에서 이 코드 실행하려면 liveView 속성이 새로운 컨테이너에 설정되어야 한다

*Editor -> Live View 메뉴 활성화 이후

*PlaygroundPage.current.liveView = container 코드 추가

 

//: [Previous](@previous)

import UIKit
import PlaygroundSupport

// 컨테이너 뷰 역할하는 UICiew 객체를 생성하고 흰색 배경을 할당함
let container = UIView(frame: CGRect(x: 0, y: 0, width: 200, height: 200))
container.backgroundColor = UIColor.white

// 컨테이너 뷰 중앙에 위치하도록 작은 뷰를 생성하고 빨간색 배경으로 변경
let square = UIView(frame: CGRect(x: 50, y: 50, width: 100, height: 100))
square.backgroundColor = UIColor.red

//두번째 생성한 뷰를 컨테이너의 하위 뷰로 추가
container.addSubview(square)

// 두번째 뷰의 색을 파란색으로 변경하면서 180도 회전하는 애니메이션 사용
UIView.animate(withDuration: 5.0, animations: {
    square.backgroundColor = UIColor.blue
    let rotation = CGAffineTransform(rotationAngle: 3.14)
    square.transform = rotation
})

// *Editor -> Live View 메뉴 활성화 이후
// *PlaygroundPage.current.liveView = container 코드 추가
PlaygroundPage.current.liveView = container


//: [Next](@next)

 

 

 

핵심만 골라 배우는 SwiftUI 기반의 iOS 프로그래밍,닐 스미스 지음,황반석 옮김,제이펍 출판