[UIKit] I Am Rich 앱 만들기

iOS & Swift - The Complete iOS App Development Bootcamp 에 대한 TIL 입니다.

 

학습 주제

Xcode 스토리보드 및 인터페이스 빌더, Xcode 환경에서 이미지 에셋을 활용하는 법을 배운다.

 

Xcode 스토리보드 & 인터페이스 빌더

iOS 앱을 개발할 때 Xcode는 스토리보드 및 인터페이스 빌더라는 두 가지 도구를 제공한다.
 

Xcode 스토리보드

Xcode 스토리보드는 iOS 앱의 여러 화면을 디자인하고 연결하기 위한 인터페이스다. 스토리보드를 사용하면 개발자가 중앙의 인터페이스 빌더를 사용하여 여러 뷰 컨트롤러(View Controller)를 생성, 수정할 수 있다. 다음은 Xcode의 스토리보드를 사용할 때의 화면에 대한 설명이다.
 

 

인터페이스 빌더

인터페이스 빌더(IB: Interface Builder)는 개발자가 iOS 앱용 UI를 생성, 수정할 수 있는 도구이다. 개발자는 IB를 사용하여 버튼, 레이블 및 텍스트 필드와 같은 UI 요소를 추가하고 위치를 지정하여 UI를 만들 수 있다.
 

Inspector Pane

인스펙터 창의 표출 항목은 스토리보드 화면에서는 7가지 탭, 코드 화면에서는 3가지 탭이 나온다고 한다. "I Am Rich" 앱을 만들 때에는 스토리보드 화면에서 표출되는 2가지 탭, Attribute Inspector와 Size Inspector를 사용해서 이 두 가지 탭에 대해서만 설명하겠다.
 
Attribute Inspector

인스펙터 창에서 빨간색 부분을 클릭하면 어트리뷰트 인스펙터가 나온다. 어트리뷰트 인스펙터는 개발자가 선택한 UI 요소의 속성값을 손쉽게 변경하거나 커스텀할 수 있도록 해 준다. 
 
Size Inspector

인스펙터 창에서 빨간색 부분을 클릭하면 사이즈 인스펙터가 나온다. 사이즈 인스펙터는 개발자가 선택한 UI 요소의 위치나 width, height 등을 지정할 수 있게 해 준다.
 
이때, UI 요소에서의 x, y 좌표의 값은 해당 요소의 좌측 상단 끝점에 대한 값이다. x, y 좌표의 값은 기기의 좌측 상단 끝점을 (0, 0)으로 시작해서 우측 하단 끝점까지를 나타내는데, 기기의 화면 크기에 따라 최대 값이 달라진다.
 
기기의 따른 화면 크기에 대한 것은 다음 링크를 통해 볼 수 있다.

iOS Resolution // Display properties of every iPhone, iPad and iPod touch Apple ever made

 
 

Image Assets

Xcode에서 이미지를 사용하려면 Navigation Pane에서 Assets에 사용하려는 이미지 파일을 드래그 앤 드롭으로 넣어줄 수 있다.

만약, Assets에 한 번도 이미지 파일을 넣어보지 않은 사람이라면 처음 이미지 파일을 넣었을 때 위 그림에서 1x 부분에만 이미지가 넣어져 있을 것이다. 1x, 2x, 3x는 해상도와 관련된 것인데 짧게 설명하자면, 하나의 포인트(x, y 좌표)에 들어가는 픽셀 수가 증가하는 식으로 아이폰 디스플레이 해상도가 발전하여서 그에 따른 이미지 파일도 더 많은 픽셀이 들어간, 즉 해상도가 높은 이미지 파일을 필요로 하게 되었다. 따라서, 각각의 아이폰 기기 해상도에 맞는 이미지 파일을 넣기 위해 1x, 2x, 3x로 나눠놨다고 한다. 어떤 기기가 1x, 2x, 3x 인지는 아래 링크에서 볼 수 있다.

The Ultimate Guide To iPhone Resolutions

 
따라서, 1x 뿐만 아니라 2x, 3x에 필요한 이미지도 넣어줘야 하는데 2x, 3x용 이미지를 만들어주는 사이트를 소개하겠다. 이 사이트에서는 Image Set 뿐만 아니라 AppIcon에 필요한 AppIcon Set도 생성해 줄 수 있으므로 요긴하게 사용하면 되겠다.

App Icon Generator

 
이렇게 생성된 이미지 파일을 인터페이스 빌더에 넣고 싶을 때에는 Image View를 추가하면 된다. 인터페이스 빌더에서 UI 요소를 추가하려면 Status Bar 부분의 우측에 존재하는 + 버튼을 누르면 된다.

 
그런 다음 해당 Image View에 대한 어트리뷰트 인스펙터에서 넣고 싶은 이미지 파일을 선택하면 된다.