SwiftUI 튜토리얼 [챕터1-기초1-섹션2: 텍스트뷰를 내마음대로]애플 공식자료 번역

독학 자료

 

챕터1은 스위프트유아이의 기본 지식을 알려주는데요, [ 섹션1-프로젝트 생성 ]은 지난 블로그에 완료 했고,

오늘은 섹션2: 텍스트뷰 내마음대로 하기 (개발자들은 '사용자화'라고 쓰겠지) 번역을 해 본다.

 

---

섹션2

텍스트(문자) 보이는 모습을 내 마음대로 하기

 

어떤 것이 가능한지 발견하기 위해서, 그리고 당신이 코드를 작성하는데 돕기 위해서,

당신의 코드를 바꾸거나, 인스펙터 (엑스코드 제일 오른쪽에 속성 바꾸는 긴 상자) 를 사용해서,

화면에 나타나는 것을 마음대로 만들 수 있습니다.

 

'랜드마크'앱을 만들기 위해서, 편집기의 그 어떤 조합도 사용 할 수 있습니다.

: 소스 에디터(코드 입력칸), 캔버스,인스펙터 박스

당신이 어떤 도구(tool)을 사용 하는지 관계 없이, 코드는 업데이트 됩니다.

 

---

다음은, 인스펙터를 사용해서 텍스트뷰를 마음대로 꾸며 볼 겁니다.

 

스텝1: 

미리보기(캔버스창)에서  인사말 부분( Hello SwirtUI)을  Command키 + 클릭 해서

편집 팝업창을 부릅니다.

그리고 "쇼우 스위프트유아이 인스펙터(Show SwiftUI INspector)"를 고릅니다.

팝업창에서는 당신이 점검 해야 하는 뷰 종류에 맞추어 쓸  수 있는 각각 다른 속성들을 보여줍니다. 

---

스텝2:

띄워진 인스펙터(inspector)를 사용해서 텍스트를 "터틀 락 (Turtle Rock)" 으로 바꾸세요,

당신의 앱에 보여 줄 첫번째 랜드 마크 이름이 이것 입니다.

*바꾼 텍스트 적용은: 쉬프트키+엔터키(리턴키)*

 

---

스텝3:

폰트(Font-글씨체) 수정칸에서 폰트를 "타이틀(Title-제목)" 으로 바꾸세요.

*바꾼 후 적용은: 쉬프트키 누르면서 엔터(리턴)키 누르기*

이것은 시스템 글씨체를 문자(텍스트)에 적용시켜서, 사용자가 좋아하는 폰트 크기와 설정을 맞추어 준다. 

---

스위프트유아이의 뷰를 마음대로 조정하기 위해서, 당신은 모디파이어즈(modifiers) 라고 불리는 메써드(methods-무언가를 하는 방법)를 호출(call) 해야 하는데요,
모디파이어즈는 뷰의 디스플레이와 다른 속성을 변경하기 위해서 뷰를 포장;감싸기(wrap)를 합니다.
각 모디파이어즈는  한 개의 새로운 뷰를 불러오기 때문에, 이것은 보통 여러개의 모디파이어들을 연결 시킬때, 세로로 쌓여져 있습니다.

---

스텝4:

손으로 직접 코드를 편집해 변경 하세요. 

padding() 모디파이어를 ==> foregroundColor(.green) 모디파이어로 변경;

이것은 텍스트 색을 초록색으로 바꾸어 줍니다.

 

---

당신의 코드는 뷰의 참(truth)된 소스여야 합니다.
당신이 모디파이어를 하나 변경하거나 제거하려고 인스펙터를 사용 할때, 엑스코드는 당신의 코드를 즉시 업데이트 해 줍니다.

---

스텝5:

이번에는, 코드 편집창 안에 Text (텍스트) 라고 쓰여 있는 선언에 Command+ 클릭 을 하고,

팝업창에서 "쇼우 스위프트유아이 인스펙터(Show SwiftUI Inspector: 스위프트유아이 인스펙터 보여주기)" 를 선택합니다.

컬러 (Color) 고르는 곳- 인헤리티드 (Inherited-상속,유산) 써져 있는데요, 이 칸을 클릭해서

텍스트 색상을 원래의 검정(black)으로 되돌립니다.

 

 

---

스텝6:

foregroundColor(.green) 모디파이어를 제거 하면, 엑스코드는 변경 사항을 반영 하기 위해서 자동으로 당신의 코드를 업데이트 한다는 것을 기억하세요.

 

이상, 스위프트유아이 (애플공식배포) 튜토리얼 

챕터1-섹션2 번역 완료.

 

다음에 섹션 3에서 다시 만나요~ 아래 클릭!

https://ingodwelove.tistory.com/8

SwiftUI 튜토리얼 [챕터1-기초1-섹션3: 스택 이용해서 뷰 조합하기] 애플 공식자료 번역