Xcode Playground 사용법 주석 라이브뷰 사용하는 방법

플레이그라운드란?

플레이그라운드는 xcode의 추가적인 기능으로 실시간으로 코드를 실행해볼 수 있는 개발환경입니다. 아이폰 앱을 개발하기 위해서 코딩부터 컴파일 그리고 디버깅의 일련의 과정을 거치게 되는데, 플레이그라운드에서는 코드를 바로 실행해보고 코드에 대한 주석 기능도 제공하고 있기 때문에 코드를 문서화 할 때도 좋은 툴이 될 수 있습니다. 

 

 

Swift 언어를 공개한 애플은 플레이그라운드를 함께 공개하면서 많은 개발자들에게 보다 편리한 환경을 제공하고 있습니다. 이번 포스팅에서는 플레이그라운드의 여러 기능들을 학습해보도록 하겠습니다. 

먼저 플레이그라운드를 시작하기 위해서는 xcode를 실행해줍니다. 단축키는 ⌥[option] + ⇧[shift] + ⌘[command] + N입니다.

플레이그라운드를 처음 실행하면 아래와 같은 화면이 출력됩니다. Blank 템플릿을 선택해줍니다. 

• Blank : 스위프트 언어 실험실
• Map : MapKit 프레임워크를 사용할 수 있는 환경
• Single View : UI 레이아웃을 실험해볼 수 있는 환경
• Game : 게임 레이아웃 환경

첫 플레이그라운드 환경이 시작됩니다. 왼쪽에는 네비게이션 패널, 오른쪽에는 인스펙터 패널이 출력됩니다. 화면 중간에는 코드를 편집할 수 있는 에디터 패널이 나오고, 에디터 패널 아래로는 출력결과물이 나오는 아웃풋 패널이 출력됩니다.

 

플레이그라운드에서는 디버깅을 손쉽게 하기 위해서 코드 줄마다 실행 버튼을 제공합니다. 코드 줄 별로 실행을 해보면서 어디가 문제인지 직관적으로 디버깅을 할 수 있습니다. 

 

Output 패널 위에 작은 화살표가 보이는데요, 화살표를 클릭하시면 전체 코드를 실행해볼 수 있습니다. 실행 단축키는 ⇧[shift] ⌘[command] ⏎[enter] 입니다.

 

간단한 코드를 입력해보겠습니다. 

import UIKit

for i in 0...50 {
    var x = i * i
    print(x)
}

 

위 코드를 실행하면 50번의 루프를 순회하면서 x 변수값을 출력합니다. 오른쪽 미리 보기 결과물을 보시면 Quick Look 버튼이 있는데요, 눈모양 아이콘을 클릭하시면 변수의 변경 추이를 확인할 수 있습니다. 

 

 

 

눈 모양 옆에 있는 네모 아이콘(Show Result)을 클릭하시면 결과물의 추이를 코드 위에서 확인할 수 있습니다. 

플레이그라운드에서 변수 추이를 확인할 수 있어서 편합니다. 

 

 

플레이그라운드에서 주석 사용하기

플레이그라운드에서 마크업 언어를 사용할 수 있습니다. 위에서도 설명했듯이 단순히 코드를 돌려보면서 테스트베드로써의 기능도 있지만 주석을 적절히 달아주면서 코드를 아카이빙 하는데도 유용한 툴입니다.

1줄 짜리 주석

한줄짜리 주석을 달기 위해서는 //: 를 사용할 수 있습니다.

 

멀티라인 주석

멀티라인 주석을 달기위해서는 /*: */를 사용할 수 있습니다. 

주석을 단 후에는 [Editor] -> [Show Rendered Markup]을 선택하시면 마크업 언어 형태로 플레이그라운드를 볼 수 있습니다.

 

플레이그라운드 여러개 페이지 관리하기

플레이그라운드에서 여러개 페이지를 한번에 관리할 수 있습니다. 서식 있는 주석을 함께 포함해서 프로젝트에 필요한 코드 블럭들을 저장할 수 있습니다. 

제일 최상위 플레이그라운드 목록에서 우클릭을 하시면 [New Playground Page]를 선택할 수 있습니다. 이를 통해 프로젝트에 필요한 코드들을 마크업 언어와 함께 저장해서 관리할 수 있습니다. 이렇게 코드를 관리해놓으면 새로운 프로젝트를 시작할 때도 보일러플레이트 대용으로 사용 가능합니다. 

 

 

 

플레이그라운드에서 라이브뷰 확인하기

SwiftUI가 도입되면서 디자인 프레임워크 사용방식이 변했는데요, 실시간으로 디자인 변화를 플레이그라운드에서도 확인 가능하다는 장점이 있습니다. 

플레이그라운드에서 라이브뷰를 사용하기 위해서 2가지 유틸을 import합니다.

import SwiftUI
import PlaygroundSupport

 

이제 아래 코드를 삽입합니다. 

struct ContentView: View {
    @State private var scale: CGFloat = 1.0
    @State private var isAnimating = false
    
    var body: some View {
        VStack {
            Text("Hello, SwiftUI in Playground!")
                .font(.title)
                .foregroundColor(.blue)
            
            Circle()
                .fill(Color.green)
                .frame(width: 100, height: 100)
                .scaleEffect(scale)
                .onTapGesture {
                    withAnimation {
                        self.isAnimating.toggle()
                        self.scale = self.isAnimating ? 1.5 : 1.0
                    }
                }
                .padding()
        }
    }
}

우측 패널에 라이브뷰를 클릭하시면 작성된 코드를 라이브뷰로 바로 확인할 수 있습니다. 

라이브뷰를 확인하기 위해서는 PlaygroundSupport 모듈의 PlaygroundPage 클래스를 사용한 current 속성을 이용해야 합니다. 코드 맨 밑줄에 아래 코드를 삽입해줍니다.

let contentView = ContentView()
PlaygroundPage.current.setLiveView(contentView)

 

 

 

SwiftUI | PlayGround 정리

스위프트 언어가 등장하고 함께 포함된 플레이그라운드로 코드 블럭을 관리하기가 굉장히 용이합니다. 무엇보다 xcode에서 프로젝트를 돌려서 확인해야 하는 라이브뷰를 플레이그라운드 자체에서 바로 테스트 해볼 수 있다는게 가장 큰 장점이라고 생각합니다. 복잡한 데이터 플로우를 구성해서 테스트 하는데는 무리가 있을지 모르지만, 간단한 테스트 정도는 플레이그라운드에 모아놓고 필요할 때 마다 사용할 수 있는 장점이 있습니다. 

 

🚀️ 도움이 되셨다면 구독과 좋아요 부탁드립니다 👍️

 

 

[iOS Swift5] Objective-C를 넘어선 Swift5 언어의 등장

 

[iOS Swift5] 상수와 변수 데이터 타입 옵셔널, 옵셔널 바인딩, 강제언래핑