[iOS 앱 개발 기초] 스크린(캔버스)위 글씨 속성 변경하기

raywenderlich Your First iOS and SwiftUI App part 1 학습 내용 정리

 

<다룰 내용>

-캔버스 띄우기

-시뮬레이션 프로그램 이용하기

-스크린 위 글씨 속성 변경하기(초기 상태로 글씨는 이미 띄워져 있다.)

  _글자 내용, 색깔, 폰트 선정

---

 Xcode 새 프로젝트 만들기

 Xcode 앱을 열면 나오는 세 가지 선택 가능 기능 중 첫 번째, "Create a new Xcode Project"를 선택한다. 

 

 

다음 화면에 Multiplatform, iOS, macOS 등 다양한 형식 중 어느 형태의 프로젝트를 생성할 것인지 골라야 한다.

그중 iOS, 그리고 그 하위에서는 App을 고르면 iOS 앱 개발이 시작된다. 

 

다음 화면에서는 다양한 입력 칸들이 나온다.

-Product Name: 만들고 싶은 앱의 이름(혹은 아무거나 자신이 이 앱 개발 파일을 식별할 수 있는 이름으로!)으로 한다. 

-Team: none 혹은 팀 명이 따로 있다면 팀 이름으로 고르면 된다.

-Organization identifier: com.(자기 이름/회사 이름)

-Interface: SwiftUI

-Life Cylce: SwiftUI App

-Language: Swift

로 설정한다.

아래 두 칸은 모두 체크 표시 없도록. 그리고 Next 클릭.

---

시뮬레이션 프로그램 활용 방법과 캔버스 띄우기

왼쪽 상단의 재생 표시 실행 버튼을 누르면 컴퓨터 스크린에 시뮬레이션 툴이 뜬다.

코드와 디자인을 변경하고 제대로 작동하는지 실제처럼 확인하고 싶을 때 위 실행 버튼을 누르면 된다. 

 

캔버스(여러 오브젝트;텍스트, 버튼 등의 여러 요소. 들을 배치하고 수정하기 위한 공간)를 띄우기 위해서는 Resume 버튼을 누르면 된다. 

시뮬레이션 툴과 캔버스의 기종을 변경하고 싶을 땐 상단의 프로젝트 이름을 누르고 화살표로 커서를 옮기면 다양한 애플 제품 목록 중에 원하는 기종으로 선택하면 된다. 

---

스크린 위 글씨(텍스트) 속성 변경하기

 

코드와 캔버스의 어느 것도 변경하지 않은 상태에선 Hello World가 스크린에 띄워지도록 설정되어 있다.

 

원하는 오브젝트(텍스트, 버튼, 그림, 등), 사진 속 상황의 경우 Hello World라는 텍스트를 Command 키를 누른 상태에서 클릭하면 선택 가능한 기능의 목록이 나온다. 그 중 Show SwiftUI Inspector를 선택한다. 

 

그럼 다음 사진과 같은 화면이 뜬다.

-맨 위 Text라는 제목 아래 입력창의 내용이 텍스트의 내용이다. 

-Font는 말 그대로 폰트. 글씨체이다. 제목, 본문, 캡션, 각주 등 어떤 용도로 쓰일 것인지에 따라 이에 맞게 선택할 수있다.

-Weight는 글자의 굵기를 뜻하여 이를 조정할 수 있다.

-Color는 글자의 색깔을 변경하는 부분이다.

-Alignment는 글자 정렬 방법(왼쪽으로, 중앙에, 오른쪽에)을 선택하는 부분이다.

 

padding과 frame은 오브젝트의 크기, 위치를 세세하게 조정하는 부분이기에 차후에 다룰 예정이다.

다음 사진에서 나올 코드 부분에서 또한 padding에 해당하는 코드는 일단 삭제하였다.

이렇게 변경을 하다 보면 왼쪽 코드 부분이 변경 사항에 맞게 바로 바뀌는 것을 확인할 수 있다.

역으로 코드 부분을 수정하면 캔버스 부분이 수정함과 동시에 변경된다.

 

즉 오브젝트의 속성 변경은 코드를 통해 행할 수도 있고 캔버스에서 직접 조정할 수도 있다.

또한 캔버스 오른쪽 옆에 위치한 회색 칸을 통해서도 조절할 수 있다. 회색 칸의 상단에 있는 네 개의 아이콘 중 가장 오른쪽에 위치하는 아이콘을 선택하면 위에서 제시했던 show Swift UI Inspector 모습과 똑같이 나타나게 된다.

 

텍스트 속성 변경 방법 요약

1. 코드로 작성 (Text("~~").fontweight(.~~).foregroundColor(Color.~~) 등 활용.

2. 캔버스 위에서 command+변경할 텍스트 클릭> show swift UI Inspector 클릭으로 나타나는 화면 활용.

3. 캔버스 옆 화면에서 네 개의 아이콘 중 맨 오른쪽 아이콘 클릭 후 나타나는 화면 활용.

 

'1.코드로 작성'에서 어떤 코드를 활용할 수 있는지는 2번 3번을 활용하며 익힐 수도 있지만

상단의 Help>Developer documentation에서 Text라고 검색해 아래로 스크롤해 내리면 나오는 설명들을 참고하여 활용할 수 있다. 

 

 

---

 다음 글에서는 캔버스 위에 버튼을 띄우고 이를 클릭하면 변화가 생기도록 하는 방법에 대하여 다룰 예정이다.