Playground에서 뷰 프로토타이핑하기

진행중인 Xcode 프로젝트에서 뷰를 작성하면 레이아웃을 테스트하는 시간이 오래 소요될 가능성이 있습니다.

또한 뷰를 작성할 때, 기존 코드와 연관된 의존성이 생길 가능성이 있습니다.

 

이러한 부작용을 줄이고자 뷰를 작성하기전에 

Playground 환경에서 뷰를 테스트가능한 환경을 만들어보고자 합니다.

 

새 Playground 프로젝트 생성하기

빈 프로젝트를 생성하고 page의 맨 위에 다음의 코드를 작성합니다.

import PlaygroundSupport

`PlaygroundSupport` 프레임워크는 라이브 뷰 기능을 제공합니다.

여기서 라이브 뷰는 작성한 코드를 실행해서 보여주는 역할을 합니다.

 

라이브 뷰 설정하기

라이브 뷰로 작업하기 위한 최소한의 설정이 필요합니다.

import PlaygroundSupport
import UIKit
// 1
let size = CGSize(width: 400, height: 400)
let frame = CGRect(origin: .zero, size: size)
let view = UIView(frame: frame)
view.backgroundColor = .blue
view.layer.cornerRadius = 100

// 2
PlaygroundPage.current.liveView = view

다음과 같이 적정 프레임 크기를 갖는 `UIView` 뷰 인스턴스를 생성합니다. 

그리고 `PlaygroundPage.current.liveView`를 뷰 인스턴스로 설정해줍니다.

 

Playground 코드 실행하기

코드를 작성하고 왼쪽의 Play 버튼을 눌러 실행하면 다음과 같이 라이브 뷰가 나타납니다.

플레이그라운드 코드를 실행할 때 라이브 뷰를 기본 값으로 보여주도록 설정되어 있습니다.

오른쪽 상단의 Adjust Editor Option 메뉴에서 라이브 뷰를 끄거나 켤 수 있습니다.

 

커스텀 뷰 생성하기

사이드 프로젝트를 진행하며 작성했던 커스텀 버튼 또한 라이브 뷰에 적용가능하였습니다.

 

Playground 라이브 뷰를 통한 커스텀 뷰를 테스트하는 이점으로

기존 커스텀 뷰에 얼마나 많은 의존성(뷰를 생성할 때, 프로젝트 내에서 정의한 커스텀 타입을 통한 초기화 등등..)이 존재했었는지

알게 되었습니다.

또한 매번 앱을 빌드할 필요가 없으므로 시간을 절약하고 효율적인 테스트가 가능합니다.

 

아직 많은 커스텀 뷰를 작성하지는 못하였지만,

뷰 작성에 자주 사용되는 보일러 플레이트 코드 또한 page 단위로 관리할 수 있을 것 같습니다.

 

Playground 라이브 뷰를 사용해 빠르고 효율적으로 독립적인 뷰 작성에 도움이 되었으면 합니다.