이번 포스팅에서는 아이패드에서 Playgrounds 앱을 통해 Swift 코딩을 하는 방법과 Playgrounds에서 SwiftUI를 사용해보는 내용에 대해 포스팅을 해보려 한다.
Swift Playgrounds
Xcode에서는 Playgrounds라는 내장 기능을 제공한다. 개발자가 간단하게 Swift 프로그래밍을 해볼 수 있는 개발 환경으로, 코드의 변화에 따른 결과를 실시간으로 볼 수 있다. 애플은 2016년에 이러한 기능을 아이패드 앱으로도 출시하여 맥 PC 없이도 아이패드를 통해 쉽게 사용할 수 있도록 해주었다. 앱 안에서는 교육 컨텐츠들도 제공하고 있어서 프로그래밍을 처음 배우더라도 쉽게 접할 수 있게 해주었다. 이번 콘텐츠에서는 이를 사용하는 방법에 대해 알아본다.
SwiftUI
SwiftUI에 대해서는 추후에 여러 포스팅을 통해 깊게 다뤄 볼 예정이다. 이번에는 Playgrounds에서 SwiftUI를 사용하는 방법을 함께 알아볼 것이다.
먼저, SwiftUI가 무엇인지에 대해서는 알 필요가 있다. 작년까지는 유저 인터페이스 (UI) 개발을 위해서는 스토리 보드라는 것을 사용해야만 했다. 이는 안드로이드의 UI 처럼 xml 파일이지만 안드로이드와는 다르게 직접 수정할 수는 없었다. UI 요소들을 끌어서 놓는 방식으로 편집을 해야 했고, 파일을 직접 수정할 수 없어서 파일의 크기가 지저분하게 길어지는 문제도 있었다. 몇 가지의 문제가 더 있었는데 이는 SwiftUI에 대해서 진행하는 다른 포스팅에서 확인 바란다. 아무튼, 애플도 이러한 문제들을 인식하고 있었는지 UI 디자인을 위한 SwiftUI라는 것을 발표했다. 코딩을 하듯이 UI를 그릴 수 있고 이로 인한 장점들도 많이 있다. 이 기능도 Playgrounds에서 사용할 수 있다.
Playgrounds 설치 & 준비
먼저, Swift Playgrounds 앱이 없다면 설치부터 하면 된다. 앱 스토어에서 다운로드 하면 된다.
앱을 다운받아서 실행을 하면 위와 같은 화면이 나온다. 체험하고 배워볼 수 있는 다양한 플레이 그라운드들을 다운받을 수 있다. 이번 포스팅에서는 왼쪽 위에 있는 아이콘을 통해 새로 빈 프로젝트를 생성하여 진행할 것이다. 그래도 그 전에 추가 플레이그라운드를 살펴보자.
위와 같이 다양한 튜토리얼들을 제공해준다. 재미있는 컨텐츠가 많으니 받아서 해보는 것도 추천한다.
그럼 다시 처음으로 돌아가서 새 플레이그라운드를 생성하면 위와 같은 화면이 나온다. 준비는 끝났다.
SwiftUI 실시간 적용
Swift Playgrounds에서 만든 간단한 프로그램이 UI를 통해 상호작용하면서 화면이 바로바로 변경되기 위해서는 몇 가지가 필요하다.
먼저, 다음 두 가지를 import 해준다.
그리고, 화면에 띄울 테스트 View를 생성한다.
마지막으로 생성한 View를 Playground에 실시간으로 띄워주는 코드를 추가한다.
화면 하단의 코드 실행 버튼을 클릭하면 다음과 같이 코드가 실행되고 오른쪽에 UI가 나온다.
앞에서 작성했던 코드 설명을 조금 더 추가하자면, "import PlaygroundSupport"는 iPad의 코딩 환경을 설정할 수 있는 PlaygroundPage에 접근할 수 있도록 해 준다. 한 번에 하나의 페이지만 활성화되기 때문에 "PlaygroundPage.current"를 통해서 현재 활성화된 페이지에 접근할 수 있다. 여기에 "setLiveView()" 함수를 사용해서 앞서 만든 ContentView를 보여주도록 설정한 것이다.
화면에서 변화가 일어나기 위해서는 State 변수라는 것을 사용해야 한다. State 변수는 데이터를 SwiftUI 구조체에 저장하고 이 값이 변경될 때마다 View를 다시 그리게 된다. 위와 같은 식으로 앞에 State 어노테이션을 붙여주면 된다. 이러한 변수들을 ContentView 구조체의 scope 안에 선언해주면 된다. 이 값이 바뀌면 화면도 바뀔 것이고, 이렇게 Swift와 SwiftUI를 사용하여 플레이그라운드에서 꽤 강력한 앱도 만들 수 있다.
예시 앱
이해를 돕기 위해 간단한 예시를 하나 만들어보았다.
먼저 예시 코드 전체이다. 앞서 짰던 ContentView 안에 State 변수 두 가지를 선언하고, 텍스트와 텍스트를 입력받을 TextField, 그리고 버튼을 만들었다. 달아놓은 주석을 보면 이해할 수 있을 것이다.
예시 실행 동영상은 파일로 첨부하였다.
앱의 인사 문구, 문자열을 입력받을 수 있는 곳, 입력받은 문자열을 그대로 다시 출력하는 곳, 출력하는 문자열의 색을 변경할 수 있는 버튼이 있는 예시 앱이다. 이런 식으로 Playgrounds에서 SwiftUI와 Swift를 사용하여 UI가 있는 코드들을 짜 볼 수 있다. 로직들을 쭉 짜놓고 간단한 UI에서 테스트하기 좋은 것 같다.
댓글