스토리보드 꾸며보기

이제 스토리보드를 이용해 오브젝트를 배치하고 화면 레이아웃을 구성해보자.

 

 

레이블(Label) 추가

화면을 꾸미기 위한 오브젝트들은 '라이브러리'에 모여있다.

라이브러리를 열어보고 레이블을 추가해보자.

 

1. Xcode 우측 상단에 [+]버튼을 클릭하여 라이브러리를 열자. 또는 Shift + Command + L을 이용해 열 수 있다.

 

 

2. 라이브러리는 다음과 같은 화면으로 구성되어 있다.

상단에서 타이핑하여 원하는 오브젝트를 조회하여 바로 추가할 수 있게끔 '검색 기능'을 제공한다.

또 좌측 '오브젝트 목록'에서 직접 스크롤링하여 원하는 오브젝트를 스토리보드에 등록할 수 있다.

Label을 선택하여 스토리보드로 드래그 & 드롭하자.

 

 

3. 스토리보드로 드래그 & 드랍하면 다음과 같이 레이블이 등록된다.

 

 

4. 레이블은 6개의 점들을 클릭하여 사이즈를 자유롭게 변경할 수 있다.

또 더블 클릭하면 타이핑을 할 수 있게 활성화된다.

Hello를 입력해주자.

 

 

5. 스토리보드에 등록한 오브젝트들은 우측의 인스펙터(Attributes Inspector) 항목에서 수정을 할 수 있다.

우측에 인스펙터를 클릭하고 Alignment 항목에서 가운데 정렬을 눌러주자.

 

 

6. 스토리보드에 등록한 레이블이 가운데 정렬이 되었을 것이다.

이제 폰트의 색상을 변경해보자.

컬러 셀렉트 메뉴를 클릭한다.

 

 

7. Custom...메뉴를 클릭하자.

 

 

8. Colors 창이 나타나면 색상을 다양하게 선택할 수 있는 메뉴를 제공해준다.

간단하게 Red 컬러를 선택해주자.

 

 

9. 스토리보드의 레이블의 폰트가 빨간색으로 변경되었을 것이다.

이제 폰트 형식과 크기도 변경해보자.

 

10. 모두 따라했다면 스토리보드에는 아래와 같이 레이블이 디자인되었을 것이다.

 

 

11. 라이브러리를 열어서 레이블을 두개 더 추가하고, 다음과 같이 화면을 만들자.

 

 

텍스트 필드(Text Field)와 버튼(Button) 추가하기

레이블을 사용해봤으니 이제 텍스트 필드와 버튼 오브젝트도 사용해보자.

 

1. 라이브러리에서 텍스트 필드와 버튼 오브젝트를 찾아서 스토리보드에 등록해주자.

 

 

 

해당 포스트는 "Do It! 스위프트로 아이폰 앱 만들기 입문" 책을 통해 학습하며 작성한 포스트입니다.

글의 내용은 책의 흐름을 따라가지만 직접 공부하며 이해한 내용으로 설명하고 작성하려고 노력합니다.