Playground는 xcode6 부터 지원된 인터랙티브한 swift 코딩환경입니다. 애플 공식문서에서는 Playground 를 다음과 같이 소개하고 있습니다.

• 프로젝트 전체를 컴파일하지 않고도 코드를 실행하고 결과를 보여주는 인터랙티브한 스위프트 코딩환경.
• Swift 언어를 학습하고, 앱의 일부분을 프로토타이핑하고, 다른 사람들을 위한 학습환경을 만드는데 활용가능.
• 알고리즘과 시스템 API를 실험하고 커스텀뷰 구현이 가능함.
• 학습결과에 리치 코멘트로 노트와 가이드 작성가능.

참고

• 이글은 Playground_Help 문서를 참고하여 작성했습니다.
• Playground_Help

1. Playground 에디터 구성

playground 에디터는 아래 그림과 같이 구성되어 있습니다.

• Source editor 에 타이핑한 결과는 즉시 Results sidebar 에서 확인할수 있습니다.

• Result sidebar의 Quick Look  버튼을 누르면 팝업으로 결과를 확인할수 있습니다. 









• Result  버튼을 누르면 Source editor 영역에 결과를 인라인으로 삽입할 수 있습니다. 









• Console 영역에는 print, NSLog 함수가 출력한 문자열을 확인할수 있습니다.

  View > Show Debug Area 메뉴를 통해 표시.









• Timeline 영역은 XCPlayground 모듈의 렌더링 결과를 표시합니다.

  View > Assitant Editor > Show Assistant Editor 메뉴를 통해 표시. 

2. 결과뷰 Display 방식 변경하기

• 인라인으로 삽입된 결과뷰의 Display 방식을 변경할 수 있습니다.
• 삽입된 결과뷰를 선택하고 오른쪽 클릭을 하면 지원하는 display 방식을 표시합니다.

Lasest Value: 최종 결과만 표시.
Value History: 결과를 리스트로 출력.
Graph: 결과를 그래프로 출력.

3. 보조파일 추가하기

• playground 파일의 Sources 폴더에 보조코드 파일을 추가 할수 있습니다.
• Sources 폴더의 swift 파일들은 framework 로 미리 컴파일되어 메인 playground 파일에 module 로 자동으로 import 됩니다.
• 주의할 점으로 playground 메인파일에서 접근할 수 있도록 클래스, 메서드, 함수, 변수, 프로토콜들은 public 으로 선언되어여야합니다.

4. 리소스 추가하기

• playground 또는 page 에 이미지, 정적데이터 파일, 사운드와 같은 리소스를 포함할수 있습니다.

5. 커스텀 프레임워크 임포트

• UIKit 과 같은 시스템 프레임워크 외에 커스텀 프레임워크의 import도 가능합니다.
• 커스텀 프레임워크를 import 하기 위해서는 프로젝트와 playground 파일이 동일한 워크스페이스에 존재해야합니다.
• 프로젝트의 워크스페이스가 존재하지 않으면 워크스페이스를 생성하고, playground 파일을 워크스페이스에 포함시킵니다.
• playground 에서 접근하기 위해서 프로젝트의 클래스, 메서드, 함수, 변수, 프로토콜들은 public 으로 선언되어여야합니다.

6. UIView 렌더링 

• playground의 멋진 기능 중의 하나로 UIView 를 구현하고 그 렌더링 결과를 확인할 수 있습니다.

let view = UIView(frame: CGRectMake(0,0,320,320))
view.backgroundColor = UIColor.magentaColor()

let label = UILabel(frame: CGRectMake(100, 100, 100, 30))
label.textAlignment = .Center
label.text = "Welcome!"
view.addSubview(label)

code 에 렌더링 결과를 삽입하거나, quick look 으로도 확인이 가능합니다.

7. 비동기 처리

• playground는 디폴트로 위에서 아래로 코드를 실행하며 흐름을 종료합니다.
• 비동기 api 통신의 경우 결과를 출력하지 못하고 바로 실행을 종료하게 됩니다.
• XCPSetExecutionShouldContinueIndefinitely(true)를 상위해서 호출하면 비동기 요청이 완료할 때까지 playground 를 종료하지 않고 대기시킬 수 있습니다.
• XCPSetExecutionShouldContinueIndefinitely 함수를 사용하려면 XCPlayground 프레임워크를 import 해야합니다.

import XCPlayground

// 비동기 처리하기 

XCPSetExecutionShouldContinueIndefinitely(true)

var imageSearch = "https://ajax.googleapis.com/ajax/services/search/images?v=1.0&q=girl"

let session = NSURLSession(configuration: NSURLSessionConfiguration.defaultSessionConfiguration())
var task = session.dataTaskWithURL(NSURL(string: imageSearch)!) {
    (data:NSData?, response:NSURLResponse?, error:NSError?) in
    if let res = response as? NSHTTPURLResponse {
        print("\(res.statusCode)", terminator:"\n")
        print("\(res.allHeaderFields)", terminator:"\n")
    }
    if let data = data {
        if let json = try? NSJSONSerialization.JSONObjectWithData(data, options: NSJSONReadingOptions.AllowFragments) {
            print("\(json)")
        }
    }
}
task.resume()

8. 마크다운 사용하기

• 마크다운 문법을 지원하여 rich한 playground 문서를 작성할 수 있습니다.
• 코드의 실행결과도 삽입할 수 있기 때문에 시각적인 컨텐츠를 작성할 수 있습니다.
• swift 주석문 // 과 /* */ 구문에 콜론을 사용하면 마크다운 문법으로 인식합니다.
• Editor > Show Rendered Markup 메뉴를 통해 마크다운 렌더링 결과를 확인할수 있습니다.

// 1. 마크다운 사용하기

//: This line will have **bold** and *italic* text.

/*:
## Headers of All Sizes

### Lists of Links

- [NSHipster](http://nshipster.com)
- [ASCIIwwdc](http://asciiwwdc.com)
- [SwiftDoc](http://swiftdoc.org)

### Images, Too

![Remote Image](http://nshipster.s3.amazonaws.com/alert.gif)


*Images in the Resources directory can be referenced locally*
*/

렌더링 결과를 확인해 볼까요?

8. 페이지 추가하기

• playground에 페이지를 추가하여 모듈화된 학습환경을 만들 수 있습니다.

  File > New > Playground Page 메뉴.

• Page 마다 Sources, Resources 폴더가 생성됩니다.
• 가장 위의 Page 부터 빠른 순서를 갖으며, 페이지간 네비게이션을 추가할 때 의미를 가지게 됩니다.

9. 페이지간 네비게이션 추가하기

• rich comment를 사용하여 페이지 간의 네비게이션을 추가할 수 있습니다.
• 네비게이션은 rich comment 렌더링 모드에서 페이지 링크로 표시됩니다.
• 3가지 종류의 네비게이션, 다음 페이지, 이전 페이지, 특정 페이지로 이동이 존재하며 아래와 같이 표현합니다.

// 다음 페이지로 이동하며, 마지막 페이지에서는 무시됩니다.
//: [Go to Next Page](@next)

// 이전 페이지로 이동하며, 첫 페이지에서는 무시됩니다.
//: [Go to Previous Page](@previous)

// 특정 페이지로 이동합니다. 공백은 %20으로 표기합니다.  
//: [Go to The End](Page%20Third)  

• Page Second 에 네비게이션을 추가하고

• 렌디링 모드에서 다음과 같은 결과를 확인할 수 있습니다.