# 2.4.1 플레이그라운드 시작하기

<figure><img src="https://3334897291-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGovKcqWIBj7Rn9w1Dt23%2Fuploads%2FfULqBpdiLOt9WViYSZAA%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202023-06-01%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%2012.58.49.png?alt=media&#x26;token=d7705f0f-18db-4a90-8aae-5e49c8fa335a" alt=""><figcaption></figcaption></figure>

&#x20;현재 책과 다르게 현재의 Xcode 상에서는 \[Get Started with a playground] 메뉴가 없습니다. 그러므로 \[File] 항목에서 Playground 항목을 선택해줍니다.

<figure><img src="https://3334897291-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGovKcqWIBj7Rn9w1Dt23%2Fuploads%2Fwli7SnNKUo2vBzWFVJxi%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202023-06-01%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%201.00.25.png?alt=media&#x26;token=19a65d10-8480-4ffe-a932-73cd8736a5c7" alt=""><figcaption></figcaption></figure>

&#x20;선택 하면 템플릿을 선택하는 화면이 나타납니다. 여기서 \[iOS] -> \[Blank] 템플릿을 선택합니다. 가장 기본적인 템플릿으로, 내용이 거의 비어 있으므로 우리가 원하는 코드를 작성해 볼 수 있습니다.

&#x20;템플릿을 선택한 후 \<Next> 버튼을 누르면 파일명과 저장 위치를 지정하는 과정이 이어집니다.

&#x20;모든 설정을 마치면 아래와 같은 화면이 나타나는데, 이것이 플레이그라운드의 기본 화면입니다.&#x20;

<figure><img src="https://3334897291-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGovKcqWIBj7Rn9w1Dt23%2Fuploads%2FscpIBnULlud86K3AacSR%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202023-06-01%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%2011.41.25.png?alt=media&#x26;token=1473d246-71bc-47d4-ac3c-1ea875753f9f" alt=""><figcaption><p>플레이그라운드 기본 화면 </p></figcaption></figure>

&#x20;실행된 플레이그라운드의 기본 화면은 크게 세 영역으로 나눌 수 있습니다. 좌측은 에디터 영역으로, 우리가 실제 코드를 입력하거나 편집하는 공간입니다. 코드의 실행 과정이나 값으 변경 단계를 가볍게 보여주기도 합니다. 우측은, 스택 영역으로 에디터 영역에 입력된 코드에 대한 실행 보조 정보를 보여줍니다.&#x20;

&#x20;플레이그라운드 하단의 콘솔 영역은 출력할 메시지가 표시되는 공간입니다. 주로 print() 함수나 Log() 구문을 통해 출력되는 정보가 여기에 뿌려진다고 생각하면 됩니다.

&#x20;실습에 앞서 플레이그라운드의 역할에 대해 다시한번 상기해 보겠습니다. 플레이그라운드가 하는 역할은 다음 두 가지입니다.&#x20;

1. 스위프트 코드의 문법 및 원하는 코드의 실행 과정을 확인하기 위해 프로토타이핑하는 역할
2. 스위프트 코드를 위한 각종 문서 및 가이드를 작성하는 역할

&#x20;플레이그라운드는 iOS 애플리케이션 제작을 위한 툴은 아니며, iOS 애플리케이션을 제작하기 위해서는 플레이그라운드가 아니라 '프로젝트'라고 불리는 파일 그룹 단위가 사용됩니다.

&#x20;플레이그라운드의 에디터 영역에 다음과 같은 코드를 작성해 봅시다.

```swift
for i in 0...5 {
    i
    print("출력값은 \(i)입니다")
}
```

&#x20;작성이 끝나면 창 하단의 ► 버튼을 클릭하여 실행 결과를 확인합니다.&#x20;

<figure><img src="https://3334897291-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGovKcqWIBj7Rn9w1Dt23%2Fuploads%2FcIxkJegNQMWrfXlZ3TCs%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202023-06-02%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%205.58.41.png?alt=media&#x26;token=de344499-1ce6-471f-be7d-6057e2e67b3d" alt=""><figcaption></figcaption></figure>

&#x20;출력 결과를 확인했다면, 플레이그라운드 오른쪽 영역에 표시되는 (6 times) 메세지 옆의 사각형 아이콘을 클릭해 봅시다. \<Show Result> 아이콘이라고 합니다.

<figure><img src="https://3334897291-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGovKcqWIBj7Rn9w1Dt23%2Fuploads%2FWgKZSdJwCIZQSfb2H3tO%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202023-06-02%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%206.01.42.png?alt=media&#x26;token=ba418df5-6363-477c-be5e-03b2a4e8657f" alt=""><figcaption></figcaption></figure>

&#x20;이 아이콘은 실행 과정을 보여주는 버튼으로, 콘솔 영역에 보여지는 출력 결과를 제어하는 버튼이 아닙니다.  일반적으로 우리는 실행 과정을 확인코자 할 때 print() 등의 구문을 통해 값을 출력해봄으로써 변화 단계를 확인하는데, Show Result 아이콘을 사용하면 값을 출력하지 않더라도 변수의 값이 어떻게 변하고 있는지 확인 할 수 있습니다.

<figure><img src="https://3334897291-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGovKcqWIBj7Rn9w1Dt23%2Fuploads%2Fjdg7pE8pJjZKwJ0Vi3r4%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202023-06-02%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%206.05.34.png?alt=media&#x26;token=f9436467-b37f-401f-a71d-8b4b8f4124ff" alt=""><figcaption></figcaption></figure>

스택 영역의 기능 한 가지를 더 확인해 봅시다. 다음 코드를 작성합니다.

```swift
import UIKit

let frame = CGRect(x: 100, y: 100, width: 200, height: 100)
let view = UILabel(frame: frame)

view.backgroundColor = UIColor.red
view.textAlignment = .center
view.text = "Hello, World!!"

```

&#x20;작성이 끝났다면 이전과 동일하게 마지막 행 번호 위의 실행 버튼을 클릭한 다음, 스택 영역에서 \<Show Result> 아이콘을 클릭해 봅시다.&#x20;

<figure><img src="https://3334897291-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGovKcqWIBj7Rn9w1Dt23%2Fuploads%2FO0TYHi1KjOKreg4TduNY%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202023-06-02%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%206.19.44.png?alt=media&#x26;token=626a35b6-ab0c-4b29-9649-5b5ca37e7c5a" alt=""><figcaption></figcaption></figure>

&#x20;이 밖에도 플레이그라운드를 사용하면 간단한 코드의 작성과 진행 과정, 그리고 값의 변화 및 결과를 빠르게 파악할 수 있어 편리합니다. 또한 코딩 레이아웃(Coding Layout)이라고 부르는, 프로그래밍 코드로 사용자 화면을 구성하는 작업에서도 플레이그라운드를 활용하면 이점이 많죠.&#x20;
