Swift Playgrounds에서 첫 번째 앱 빌드

Swift Playgrounds에서 첫 번째 앱 빌드

Swift Playgrounds로 앱을 손쉽게 프로토타이핑하고 빌드하는 방법을 알아보세요. 빈 프로젝트에서 앱을 만들고 SwiftUI로 인터페이스를 빌드하고 Swift Package Manager를 사용하여 오픈 소스 패키지에서 기능을 추가하는 방법을 보여드리겠습니다. 또한 Previews(미리보기) 및 콘솔을 사용하여 문제를 디버깅하는 방법을 살펴보고, TestFlight를 통해 배포용으로 App Store Connect에 앱을 제출하는 방법을 알려드리겠습니다.

리소스
- - HD 비디오
  - SD 비디오
관련 비디오

WWDC22
- 멋진 Swift Playgrounds용 콘텐츠 만들기
다운로드

'Swift Playgrounds로 첫 앱 만들기' 에 오신 것을 환영합니다 Swift Playgrounds 팀의 엔지니어 Collett Charlton입니다 Swift Playgrounds 팀의 또 다른 엔지니어 Connor Wakamo입니다 Swift Playgrounds는 Swift로 코드를 배우는 좋은 도구였습니다 그리고 이제는 한 걸음 더 나아가 앱을 만들 수 있게 됐습니다 오늘 Swift Playgrounds의 빈 템플릿에서부터 앱을 만들어보겠습니다 그리고 미리보기와 콘솔로 디버그 하는 법을 보고 마지막으로 앱을 TestFlight에 제출해보겠습니다
우리 팀은 차를 우려내고 마시는 것을 정말 좋아합니다 너무나도 좋아해서 이를 위한 앱을 만들고 싶습니다 Connor와 저는 매일 티타임에 마실 차를 선택할 수 있게 차의 목록을 주는 가벼운 앱을 만들어보려 합니다 Swift Playgrounds는 Mac과 iPad에서 잘 작동합니다 저는 오늘 Mac을 가져왔으니 Mac에서 앱을 만들어보겠습니다
여러분이 코딩 경험이 없던지 경험 있는 개발자인지 간에 Swift Playgrounds는 여러분의 시작을 돕기 위해 다양한 템플릿과 교육 컨텐츠를 제공합니다 차 앱을 위해 화면의 왼쪽 아래에 위치한 비어있는 앱 템플릿을 클릭해주세요
이 템플릿을 가져왔으니 더블 클릭해서 열어줍니다
좋아요, 오른쪽 앱 미리보기에는 Hello, World!란 글자를 보여주죠
코드를 짜기 전에 앱 설정으로 앱을 살짝 커스터마이즈하죠 이를 위해 왼쪽 위 사이드바의 앱 설정 버튼을 클릭합니다
여기서 앱 이름이나 강조 색상과 같은 속성들을 설정할 수 있습니다 여기서 사용자 설정이나 위치 지정자 앱 아이콘을 설정 가능하고 기능이나 목적 문자열 번들 ID를 축할 수 있습니다 앱 이름을 Tea Time으로 업데이트하고
강조 색상은 갈색으로 설정합니다
그리고 위치지정자 아이콘을 머그로 업데이트합니다
좋아요 이제 중요한 부분이 끝났으니 템플릿 텍스트를 선택해서 라이브러리 첫 번째 보기로 교체해 코드 작성을 시작해봅시다 라이브러리는 프로젝트 도구 막대의 + 버튼을 클릭해 접근합니다 여기에는 사용하기 쉬운 다양한 보기와 조합, SF Symbols와 색상 스니펫을 포함합니다 이제 목록 보기로 차의 목록을 나타내기 위해 검색 창에 목록을 입력하고 클릭해 삽입합니다
이제 목록 보기가 추가됐으니 여기에 차 항목을 더해봅시다
Text를 입력하고… 리턴 키를 이용해 인라인 코드 완성 패널에서 코드 완성 제안을 수락해 이를 삽입합니다
자 이제 하나의 차가 추가된 목록 보기가 생겼습니다 조금 더 추가해봅시다
잠시만요, 제가 Jasmine Green을 실수로 두 번 입력했네요 차의 중복을 피하려면 OrderedSet으로 저장해야 합니다 다행히 Apple의 swift-collections 패키지에서 이를 지원합니다 프로젝트에 swift-collections 패키지를 추가해봅시다
이를 위해 파일 메뉴에서 패키지 추가를 선택합니다
swift-collections 패키지의 URL을 입력하고 리턴 키를 누릅니다
패키지를 가져온 뒤에는 패키지의 버전이 나타나고 프로젝트에 추가할 수 있는 다른 제품들이 표시됩니다 이 앱에서는 Collections만 선택해 프로젝트에 추가합니다
swift-collections가 프로젝트 사이드바의 패키지 아래에 표시됩니다 OrderedSet을 만들어 차의 목록을 저장해줍니다
잠시만요, 이슈가 생긴 것 같아요 이슈 아이콘을 클릭해 살펴봅시다
'스코프에서 OrderedSet 타입을 찾을 수 없습니다' 오, 어떤 문제인지 알겠네요 Collections 모듈을 임포트 하는 것을 깜빡했습니다 모듈을 임포트하면 이슈가 해결됩니다
이제 이슈를 해결했으니 목록 보기에 방금 만든 컬렉션을 사용합니다 이를 위해 ForEach 보기를 사용해야 합니다
자, 이제 됐습니다 차 목록이 차 컬렉션으로부터 나타납니다 이 프로젝트를 작업하며 추가할 기능들에 대한 아이디어가 계속 떠오르네요 앱이 찻주전자의 물 끓는 소리를 듣고 물을 부을 때를 알려주면 멋질 것 같습니다 이것을 지금 하지는 않을 것이지만 앱에서 마이크를 사용해야 하는 이유를 사용자에게 설명하는 단계를 살펴보겠습니다
이를 추가하기 위해 앱 설정으로 돌아가 기능을 클릭합니다
오른쪽 위의 + 버튼으로 프로젝트에 추가할 수 있는 기능의 목록을 볼 수 있습니다 마이크를 찾고 클릭해 추가합니다 목적 문자열에 'Tea Time은 찻주전자의 물 끓는 소리를 듣기 위해 마이크를 이용합니다'라고 입력합니다 추가 버튼을 누르고 앱 설정을 닫습니다
좋습니다, 오늘 많은 것을 했는데 이 프로젝트와 함께 저의 멋진 아이디어를 Connor와 공유하게 되어 기쁩니다
앱을 공유 iCloud 폴더에 추가해 Connor와 공유하겠습니다 그 전에, '나의 앱'보다 나은 이름을 지어줍시다
이제 공유 iCloud 폴더로 드래그합니다
저는 이제 끝났고 Connor가 이 앱을 마무리할 것입니다 고마워요 Collett, 이제 iPad로 프로젝트를 가져오겠습니다 iCloud 공유 폴더로 프로젝트를 공유하고 있으므로 프로젝트의 주 목록에는 나타나지 않습니다 그러나 '위치'를 탭하면 iCloud나 다른 서드파티 문서 제공자로부터 프로젝트에 접근할 수 있습니다 이미 공유 폴더에 들어왔고 Tea Time을 탭해 프로젝트를 열겠습니다 여기서 생긴 변화는 자동적으로 공유 프로젝트에 반영됩니다 프로젝트를 보니 Collett는 엄청난 엔지니어군요 iCloud에 프로젝트를 업로드하면서 몇 가지 기능도 같이 추가했어요 탭 보기 기능을 추가해 Teas 탭 뿐만 아니라 Assistant 탭 또한 추가했습니다 Assistant 탭을 탭하면 거의 아무것도 없지만 기능은 합니다 추천을 요청하면 제가 마실 차를 알려주는 기능입니다
저는 오늘 Jasmine Green 차를 마셔야겠네요 Collett가 앱을 좀 더 화려하게 만들기 위해 차를 고르는 재밌고 새로운 방법을 추가했을겁니다 사이드바를 열어서 찾아봅시다
TeaWheelView가 재미있어 보이네요, 탭해서 열어보겠습니다
데이터 컬렉션을 받는 보기가 있습니다 여기에서 보기 미리보기를 추가해 TeaWheelView가 앱의 일부가 되기 전 상태를 봅시다 파일의 맨 아래로 내려가서…
PreviewProvider를 입력합니다
리턴 키를 눌러 코드 완성 제안을 수락하고 TeaWheelView_Previews로 이름을 짓습니다
이제 앱 미리보기 영역 하단에 페이지 점이 나타나 Swift Playgrounds가 PreviewProvider를 인식했음을 알립니다 앱 미리보기 아래의 > 표시를 탭하면… 앱 미리보기 대신 보기 미리보기가 나타납니다 아직 'Hello, world!'밖에 없으니 코드를 추가해 TeaWheelView를 만들어봅시다 먼저 미리보기에서 사용할 수 있도록 몇 개의 항목을 포함하는 배열을 만들어 정적 속성으로 추가합니다
두개의 대괄호 사이에 삽입점을 남기고 닫는 대괄호를 드래그해 몇 항목의 위치지정자를 만듭니다
다음으로 위치지정자를 항목에 맞는 문자열로 교체합니다
이제 항목이 몇 가지 생겼으니 TeaWheelView에 추가해보죠 'Hello, world!' 예제를 선택해 제 항목들을 보여주는 TeaWheelView로 교체합니다
패딩도 추가하겠습니다
좋아요! 이제 보기 미리보기가 돌림판을 보여줍니다 정말 멋진 돌림판이네요! 이를 돌려서 멈추는 위치에 따라 다른 항목을 선택할 수 있습니다 Assistant 탭으로 이동해 이 돌림판을 추가해줍시다 사이드바에서 AssistantTab Swift 파일을 열어주고 버튼을 TeaWheelView로 대체합니다
TeaWheelView는 돌림판이 회전을 멈출 때 선택적으로 작업 클로저를 취합니다
이를 이용해 lastPickedTea=tea로 설정하고 showPickAlert=true로 설정해 SwiftUI가 알림을 보내게 합니다
좋아요! 이제 돌림판이 있으니 돌려봅시다! 스와이프 해서 돌려보니… Byte's Ooolong이 나왔습니다 다시 돌리면…
이번에도 Byte's Oolong이네요 한번 더
흠, 뭔가 잘못된 것 같아요 돌림판이 다른 곳에서 멈추는데도 Byte's Oolong을 마시라고 하네요 좋은 차이긴 하지만, 저는 다양한 차를 마시는 걸 좋아합니다 TeaWheelView로 돌아가 무슨 일인지 살펴봅시다
여기서는 돌림판이 잘 돌아가고 다른 곳에 멈추는 것을 보니 무엇이 문제인지 확실하지 않네요 보기 미리보기에 출력문을 추가해서 미리보기에서도 문제인지 봅시다
돌림판을 돌리면…
콘솔 메시지가 소스 편집기 왼쪽 하단에 출력됩니다 Item1… Item1…Item1… 아하! 어떻게 돌려도 Item1이네요 뭔가 잘못되었음을 의미합니다 계속 첫 번째 항목만 선택되니 프로젝트 전체에서 'first'를 검색해보겠습니다 화면 왼쪽에 있는 사이드바의 맨 위의 검색창을 탭하고 'first'를 입력하고 리턴 키를 누릅니다
이 결과가 맞는 것 같네요 탭 해보겠습니다
아, Collett가 맞는 결과 대신 항상 첫 번째 항목만을 반환하는 디버깅 코드를 남겨두었나 봅니다 빠르게 수정하고 다시 돌려봅시다
Item2… Item4… 좋아요, 이제 잘 되는 듯 합니다 미리보기 아래의 <를 탭해 앱 미리보기로 돌아가서 실제 앱으로 시도해봅시다 돌림판을 돌려보니 English Breakfast를 마시라고 하네요 이제 Assistant 탭이 잘 작동합니다 멋져요, 이제 앱이 모든 크기에서 잘 작동하는지 확인해봅시다 화면 왼쪽 위의 실행 버튼으로 앱 자체 창에서 실행할 수 있습니다
모든 요소가 잘 있는 것 같네요 차의 목록이 있고 Assistant 탭에 돌림판도 있고 다 있네요 상태 막대의 작은 Swift 아이콘을 탭해서 나오는 팝업 창의 '프로젝트 보기' 버튼을 탭해서 Swift Playgrounds의 프로젝트로 돌아갈 수 있습니다
앱을 저와 제 친구 및 가족들에게 시험할 준비가 됐습니다 Swift Playgrounds는 Swift Playgrounds에서 바로 TestFlight에 제출할 수 있어서 테스트가 매우 쉽습니다 앱 설정 창에서 맨 아래로 내려가면 'App Store Connect에 업로드' 버튼이 있습니다 이 버튼을 탭하면 Swift Playgrounds가 앱 레코드를 만들고 App Store Connect에 올리는 등의 어려운 일을 대신해 TestFlight와 최종적으로는 App Store에 배포가 가능하게 됩니다
이제 앱이 업로드됐으니 App Store Connect에 가서 베타 앱 심사에 제출할 수 있습니다 잠시 기다리면 TestFlight 앱을 통해 설치할 수 있습니다 iPhone에도 설치가 됩니다
Tea Time을 설치하기 위해 '설치'를 탭하면
이제 설치됐으니 '열기'를 탭해 열 수 있습니다 테스트 노트와 피드백 제공에 대한 안내를 탭합니다
이제 됐습니다 앱이 아이폰에서 실행됩니다 오늘 어떤 차를 마실까요?
Matt P's Tea Party 를 마셔야겠네요 오늘 Collett와 저는Mac과 iPad에서 Swift Playgrounds로 앱을 만드는 것을 보여드렸습니다 라이브러리 사용과 새로운 코드 삽입을 위한 코드 완성을 보여드렸고 iCloud 공유 폴더로 프로젝트를 공유했으며 보기 미리보기와 콘솔을 이용해 코드의 이슈를 디버그했습니다 그리고 iPad에서 바로 TestFlight로 앱 제출도 했습니다 오늘 배우신 내용이 한두 개쯤 있길 바라며 여러분이 Swift Playgrounds로 앱을 만드는 것을 어서 보고싶네요 시청에 감사드리며 남은 WWDC를 즐기세요!

3:31 - First Tea Item
```
Text("Jasmine Green")
```

Text("Jasmine Green")
Text("English Breakfast")
Text("Byte's Oolong")
Text("Golden Tippy Assam")
Text("Matt P's Tea Party")
Text("Darjeeling")
Text("Genmaicha")
Text("Jasmine Green")
Text("Vanilla Rooibos")

4:45 - OrderedSet of Teas

let teas: OrderedSet<String> = ["Byte's Oolong", "Golden Tippy Assam", "English Breakfast", "Matt P's Tea Party", "Darjeeling", "Genmaicha", "Jasmine Green", "Vanilla Rooibos"]

5:28 - ForEach View

ForEach(teas, id: \.self) { tea in
     Text(tea)
}

8:45 - Initial Preview Provider

struct TeaWheelView_Previews: PreviewProvider {
    static let items: [String] = ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"]
    static var previews: some View {
        Text("Hello, world!")
    }
}

9:22 - Preview Provider with TeaWheelView

struct TeaWheelView_Previews: PreviewProvider {
    static let items: [String] = ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"]
    static var previews: some View {
        TeaWheelView(items, id: \.self)
            .padding()
    }
}

10:40 - TeaWheelView in Assistant Tab

TeaWheelView(dataSource.teas, action: { tea in
    lastPickedTea = tea
    showPickAlert = true
})

11:55 - Preview Provider with Print Statement

struct TeaWheelView_Previews: PreviewProvider {
    static let items: [String] = ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"]
    static var previews: some View {
        TeaWheelView(items, id: \.self) {
            print($0)
        }
            .padding()
    }
}

찾고 계신 콘텐츠가 있나요? 위에 주제를 입력하고 원하는 내용을 바로 검색해 보세요.

쿼리를 제출하는 중에 오류가 발생했습니다. 인터넷 연결을 확인하고 다시 시도해 주세요.

리소스

관련 비디오

WWDC22