iOS - SwiftUI 튜토리얼 : Creating and Combining Views Part 1

Apple - SwiftUI Tutorial 번역

https://developer.apple.com/tutorials/swiftui/creating-and-combining-views

 

< History >

2019. 6. 27 최초 업로드

2019. 11. 27 번역 정리 및 스크린샷 추가

Index of SwiftUI 

- Creating and Combining Views : (Now)

- Building Lists and Navigation :  https://atelier-chez-moi.tistory.com/63

- Handling User Input : https://atelier-chez-moi.tistory.com/68

 

SwiftUI Essentials

Creating and Combining Views 

 

반가워요 여러분, INSWAG 입니다. 이번에 새롭게 SwiftUI 가 나왔죠! 정말 흥미롭고 배워보고 싶은 내용이라 뭘 하면 좋을까 하다가 결국 정답은 Apple's documents 인 것 같아서 공부할 겸 번역을 해보기로 생각했습니다!!!! 기네요... 다 할 수 있을까요... 그래도 해봅시다 !!

---

 

  이 튜토리얼은 여러분을 '랜드마크(Landmarks)' 건설로 안내해요. 여러분이 사랑하는 장소들을 발견하고 공유하기 위한 iOS 앱이라 보시면 되겠습니다. (먼저) 랜드마크의 디테일을 보여주는 역할을 하는 뷰를 만듬으로서 튜토리얼을 시작할 거에요.

뷰의 레이아웃(layout)을 짜기 위해, 랜드마크는 이미지 및 텍스트 뷰 구성요소들을 겹겹이 쌓거나 결합하기 위한 '스택(stacks)' 를 사용합니다. (우리가 UIStackView 를 통해서 봐왔던 그 스택과 같다고 보시면 됩니다) 뷰에 지도를 더하기 위해서, 여러분은 표준 Mapkit 구성요소를 포함할 겁니다. 여러분이 뷰의 디자인을 개선하는 동안, Xcode 는 실시간 피드백을 제공하므로 여러분은 어떻게 이러한 변경 내용들이 코드로 어떻게 변환되는지 볼 수 있습니다. 

이 프로젝트를 만들어 보기 위해 (위의 주소에서) 프로젝트 파일을 다운로드 하고 아래의 순서를 따라가봅시다 !

 

 

Section 1. 새 프로젝트를 만들고 캔버스 살펴보기

 

 

SwiftUI 를 사용하는 새로운 Xcode 프로젝트를 생성하세요.

캔버스(Canvas), 미리보기(previews) 그리고 SwiftUI 템플릿 코드를 살펴보세요.

 

튜토리얼을 진행하기 위해서 여러분의 맥은 macOS Catalina 10.15 가 필요해요 (2019. 11. 27 기준)

 

Step 1.

 - Open Xcode  -> Create a new Xcode project or Choose File > New > Project.

 

Step 2.

 - 플랫폼(platform) : 'iOS'

 - 'Single View App' 선택 

 - 'Next' 클릭

 

Step 3.

 - Product Name : Landmarks

 - Use SwiftUI 를 체크합니다.

 - 'Next' 클릭

 

Step 4.

 - 프로젝트 네비게이터에서 'ContentView.swift' 파일을 선택하기 위해 클릭하세요.

 - 기본적으로 SwiftUI View 파일은 두 구조체(struct)를 선언하고 있어요.

  * 첫번째 구조체 친구

    # View 프로토콜을 준수하고 있으며 뷰의 컨텐츠(Content) 와 레이아웃(layout) 을 설명해주고 있는 친구에요.

  * 두번째 구조체 친구

    # 해당 뷰에 대한 '미리보기(preview)' 를 선언하고 있어요.

Step 4

 

Step 5.

 - 캔버스(Canvas) 내 'Resume' 을 클릭해 미리보기(preview) 를 표시해요.

  * Tip : 만약 캔버스가 보이지 않을 경우 'Editor > Editor and Canvas' 를 선택하세요.

 

Step 6.

 - body 프로퍼티 내, "Hello World" 를 "Hello SwiftUI!" 로 바꿔주세요.

 - 뷰의 body 프로퍼티 내 코드를 여러분이 바꿀 때, 아래의 preview 는 여러분이 준 변화들(여기서는 Hello World -> Hello SwiftUI! 를 말하고 있어요)을 바로바로 반영하기 위해 업데이트(Update) 를 진행합니다. 

 

Section 1 Complete !

 

 

---

Section 2. Text View 커스터마이징

(Customize the Text View)

 

 

여러분은 뷰가 표시(View's display)하는 것도 다음의 두 가지 방식으로 커스터마이징 할 수 있어요.

 

1. 코드에 변화를 주는 방식 (Changing your code)

2. 여러분이 코드를 작성하는 것을 도와주며(to help you write code), 이용 가능한 것을 찾아내기 위한(to discover what's available) 용도의 인스펙터(inspector)를 사용하는 방식. (인스펙터라는게, 우리가 기존에 스토리보드 방식에서 attribute inspector 를 사용했었죠? 거기에는 여러가지 옵션들이 있었구요. 이 인스펙터도 그와 동일한 역할을 한다고 생각하시면 됩니다.)

 

  여러분이 Landmarks 앱을 만드는 동안, 여러분은 편집기들(editors)의 모든 결합(combination)을 사용할 수 있어요. 이게 무슨 말이냐면 소스 에디터(Source Editor), 캔버스(Canvas), 인스펙터(Inspector) 를 어울러 사용할 수 있다는 것이죠. 여러분의 코드는 여러분이 사용한 도구가 어떤 것이든 관계없이 업데이트 된다는 이야기에요. (짱짱)

 

 

 

인스펙터(inspector)를 사용해서 텍스트 뷰를 커스터마이징 해봅시다.

 

Step 1.

 - 미리보기(preview) 내에서, "Hello SwiftUI!" 라 되어있는 부분을 'Command + Click' 하면, popover 스타일의 편집창이 나타날 거에요. 'Inspect...'를 선택합니다.

 - popover 스타일의 편집창은 여러분이 살펴보는 뷰의 타입에 따라(depending on the type of view) 커스터마이징 할 수 있는 서로 다른 속성들을 보여줘요. (Label, Button, Textfield 들은 각각의 옵션이 다르잖아요)

 

 

Step 2.

 - 인스펙터(inspector) 를 사용해서 텍스트를 "Turtle Rock" 으로 바꿔주세요 (아래 사진처럼요).

  * 밑에 보니까 바로 preview 창에서 폰트, 정렬, 컬러 등을 설정할 수 있게 되어있네요.

 - 여러분의 앱 에서 보여줄 첫번째 랜드마크의 이름입니다. (갑자기 거북이 돌이 어디에 있는지 급 궁금...

 

Step 3.

 - Font 를 Title 로 설정해주세요.

  * 이렇게 하면 시스템 폰트가 텍스트에 적용되어 유저의 선호하는 폰트 사이즈와 세팅에 올바르게 응답합니다.

 

Step 4.

 - 손코딩으로 코드를 편집해서 글자의 색을 초록색으로 바꿔보겠습니다. 

  * 다음과 같이 '.color(.green)' 수정자(modifier)를 추가해주세요.

 - SwiftUI 뷰를 커스터마이징하기 위해서, 여러분은 "modifiers"(이 글에서는 '수정자' 라 칭하겠습니다) 라 불리는 메소드를 호출합니다. 

---

* modifiers ?

 1. 수정자(Modifier) 는 표시(display)나 다른 프로퍼티를 변경하기 위해 view 를 래핑합니다.

 2. 각 수정자(Modifier) 는 새로운 뷰를 반환합니다. 그래서 다수의 modifier 를 수직 스택으로 연결하는 것이 일반적이죠.

---

 

 

 

여러분의 코드는 뷰에게는 항상 진실(the source of truth)하죠. 입력한 대로 뷰에 나오니까요.

여러분이 수정자(modifier) 를 변경하거나 제거하기 위해서 인스펙터(inspector)를 사용할 때, Xcode 는 여러분의 코드를 즉시 일치시키기 위해 업데이트 합니다. (쉽게 인스펙터에서 수정을 진행하면 그것이 코드에도 즉각적으로 반영된다는 것이죠. 우와 짱)

 

Step 5.

 - 이번에는 코드 에디터 내에 Text 선언 상에 "Command + click" 을 함으로서 inspector 를 열어보세요. 

 - 그리고 'Inspect...' 를 popover 창에서 선택하세요. Pop-up 스타일의 메뉴 'Color' 를 클릭하고 텍스트 컬러를 검정색으로 다시 변경하기 위해 'Inherited' 를 클릭하세요. 

 

Step 6.

 - Xcode 가 자동으로 변화를 반영(reflect)하기 위해 여러분의 코드를 업데이트하는 것에 주목(Notice)하세요.

 - 'color(.green)' 수정자(modifier) 가 제거되었습니다. (Step 5 에서 텍스트 컬러를 검정색으로 변경했잖아요!)

 

 

 

실시간으로 변화가 반영되는게 너무 재미있네요.

다음에는 스택을 사용해서 뷰를 결합하는 세번째 섹션부터 살펴보겠습니다.

재미로 봐주세용~~~!!