Xcode에서 스토리보드(Storyboard)를 이용해서 앱의 화면을 보다 쉽게 확인하면서 꾸밀 수 있습니다. 이 스토리보드를 어떻게 사용할 수 있고, 보다 편하게 사용하기 위해서 UI 설정을 어떻게 할 수 있는지 살펴보도록 하겠습니다.
[Xcode] 왼쪽 네비게이터 영역에 보시면 [Main.storyboard] 파일이 있습니다. 해당 파일을 열어주시면 편집기 영역에 아이폰 모양의 스토리보드가 나옵니다.
: 스토리보드(storyboard)?
스토리보드는 iOS 앱 화면 구성을 보다 직관적으로, 바로 볼 수 있게끔 구성할 수 있도록 지원해주는 기능으로 Xcode 4.2버전부터 제공되고 있습니다. 어떤 형태로 앱의 화면을 구성할지, 특정한 액션을 취했을 때 어떤 형태가 나타날 것인지 등 앱 화면의 전체적인 흐름과 모양을 시각적으로 표현할 수 있는 기능입니다.
스토리보드를 작업하려면 상황에 따라서 보다 편하게 작업을 하기 위해 편집기 영역을 자유자재로 설정하면서 조정할 수 있습니다.
: 편집기 영역 설정
1. 내비게이터
프로젝트 파일 등의 정보가 표시되는 내비게이터 영역을 숨겨서 편집기 영역을 넓히고 싶은 경우에는, 좌측 상단에 있는 [네비게이터 영역 숨김/보임(Hide or show the Navigator)] 버튼을 눌러주시면 됩니다. 그럼 자유자재로 네비게이터 영역을 숨겼다가 보이게끔 설정이 가능합니다.
2. 인스펙터
객체의 속성을 편집할 수 있는 인스펙터 영역을 숨기고 싶은 경우에는, 우측 상단에 있는 [인스펙터 영역 숨김/보임(Hide or show the Inspectors)] 버튼을 눌러주시면 됩니다.
3. 버전 편집기
버전 편집기를 열고자 하는 경우에는 + 버튼 옆에 있는 [버전 편집기(Show or hide Code Review)] 버튼을 눌러주시면 됩니다. 버전편집기의 source control 기능을 사용해서 이전 버전과 현재 버전의 차이를 비교할 수 있습니다.
4. 에디터 옵션
Xcode 화면을 조정하기 위해서 에디터의 다양한 옵션을 사용할 수 있습니다. +버튼 아래에 있는 [에디터 옵션] 버튼을 클릭하신 후, 다양한 옵션을 사용하여 자유롭게 화면을 설정할 수 있습니다.
5. 보조 편집기
보조 편집기를 열고자 하시는 경우에는, [에디터 옵션] - [Assistant]를 클릭해주시면 됩니다.
다음으로 보조 편집기를 닫는 방법은 여러 방법이 있습니다.
1. 편집기 왼쪽 상단에 있는 [Close this Editor] 버튼을 클릭하는 방법
2. [에디터 옵션] - [Show Editor Only] 메뉴를 클릭하는 방법
3. [에디터 옵션] - [Assistant] 메뉴를 클릭하는 방법
보조편집기를 닫는 방법은 여러 방법이 있기 때문에 편한 방법으로 선택하셔서 사용하시면 됩니다.
6. 미니맵
작업을 하다보면 미니맵이 불편해지는 경우가 있습니다. 그런 경우에는 [에디터 옵션] - [Minimap] 선택되어 있던 것을 해제해주시면 됩니다.
: 스토리보드 크기 변경
기본적으로 iOS 스위프트 프로젝트를 생성하면 아이폰 11 크기로 스토리보드가 설정됩니다. 만약 다른 기기의 사이즈로 스위프트 개발을 하고 싶은 경우에는 크기를 변경할 수 있습니다.
1. 스토리보드 하단에 있는 [View as:iPhone 11 (wC hR)]을 클릭해주세요.
2. 디바이스 형태 선택에서 [Device]를 선택해주세요.
3. 여러 디바이스 목록에서 원하는 디바이스 기기를 선택해주세요.
4. 디바이스 기기 선택 후, 스토리보드의 디바이스가 원하는 디바이스로 설정이 변경되었는지 확인합니다.
: 아이폰 화면 해상도
아이폰의 화면 크기는 버전별로 다 다르며, 화면 크기부터 해상도가 다 다르고 다양합니다. 아래에서 각 기기별 크기 및 해상도를 참고하시면 됩니다.
| 디바이스 | 화면 크기 및 해상도 |
| 아이폰 5 / 5s / 5c / SE | 4인치 / 640×1136px |
| 아이폰 6 / 6s / 7 / 8 / SE | 4.7인치 / 750×1334px |
| 아이폰 6+ / 6s+ / 7+ / 8+ | 5.5인치 / 1080×1920px |
| 아이폰 X / XS / 11 Pro | 5.8인치 / 1125×2436px |
| 아이폰 XR / 11 | 6.1인치 / 828×1792px |
| 아이폰 XS Max / 11 Pro Max | 6.5인치 / 1242×2688px |
| 아이폰 12 mini |
5.4인치 / 1080×2340px |
| 아이폰 12 / 12 Pro |
6.1인치 / 1170×2532px |
| 아이폰 12 Pro Max |
6.7인치 / 1284×2778px |
'스위프트(Swift)' 카테고리의 다른 글
| 스위프트 스토리보드(Storyboard)에 객체 추가 하는 방법 | 오브젝트 라이브러리(Library) 사용 방법 (0) | 2021.06.07 |
|---|---|
| swift 데이트피커(Date Picker) 로 날짜 선택하는 방법 | 현재시간 표시하는 방법 (0) | 2021.06.06 |
| 이미지 뷰(Image View) 추가 및 활용하기 | 이미지 변경하는 방법 (0) | 2021.06.05 |
| [Swift] 아웃렛 변수(Outlet variable) 추가 및 연결하는 방법 | 아웃렛변수 문법 (0) | 2021.06.05 |
| 스위프트(Swift)는 어떤 언어일까? | 스위프트 장점 및 개발환경 (1) | 2021.06.05 |