Xcode에서 화면크기별로 빌드해서 확인할 필요없이 바로 UI확인하는 방법

2016-05-02
36 Views

앱개발을 하면서 최근 Auto Layout설정을 하면서 UI디자인에서 애를 먹는 분들이 많다. 이 내용은 일일이 시뮬레이터를 사용하지 않고 Xcode화면에서 바로 디자인 상태를 확인할 수 있는 방법을 소개한다.

(1) 우선 프로젝트를 열고 ViewController의 화면크기를 지정한다. 기본 4인치로 지정하는 것을 추천한다. 화면에 디자인 UI요소를 모두 배치한다.

xcode-auto1

그런 다음 [Show the Assistant editor]메뉴 버튼을 눌러 화면을 분할한다.

(2) 오른쪽 화면 상단에 있는 “Automatic”등으로 표기된 바를 누르면 여러가지 메뉴가 나오는데 [Preview (1)]에서 [Main.storyboard (Preview)]를 선택한다.

xcode-auto2

(3) 소스코드 화면이 없어지도 디자인된 화면이 보여지는데  스토리보드 화면이 나오게 된다. 일단 기본 설정된 화면크기만 미리보기형태로 보여진다.

xcode-auto3

(4) 미리보기 화면 좌측 하단의 [+]버튼을 누르면 다양한 화면크기별 선택메뉴가 나온다. 여러분이 개발목적에 따라 필요한 화면크기들을 선택하면 바로 미리보기 화면에 추가되고 같은 크기 화면을 더 추가하면 화면에 세로상태와 가로상태를 모두 볼 수 있다.

xcode-auto5

(5) 아래와 같이 바로 디자인 상태를 확인할 수 있고 Auto Layout상태를 화면크기별로 확인할 수 있기 때문에 개발시간을 더욱더 단축시킬 수 있다.

xcode-auto6

Facebook Comments

You may be interested

Gif 애니메이션으로 로딩 구현하기
Swift 3.0
shares5 views
Swift 3.0
shares5 views

Gif 애니메이션으로 로딩 구현하기

MJ Kim - 5월 24, 2017

이번에는 MBProgressHUD 라이브러리와 FLAAnimatedImage 라이브러리를 사용하여 gif 애니메이션을 사용하는 방법을 정리해본다. Cocoapods를 사용하여 라이브러리를 추가해도 되고 Carthage를 사용해서 추가해도 된다.…

Bluetooth기반 iOS기기로 통신하기
Swift 3.0
shares4 views
Swift 3.0
shares4 views

Bluetooth기반 iOS기기로 통신하기

MJ Kim - 5월 23, 2017

제 블로그에 관심이 있는 분이 블루투스를 사용한 방법을 알려달라고 하셔서 좀더 이해하기 쉬운 방법을 고민해서 한가지 팁을 공유합니다. 블루투스(Bluetooth)로 1대1로…

Apple지도 및 구글지도 앱을 여는 방법
Swift 3.0
shares6 views
Swift 3.0
shares6 views

Apple지도 및 구글지도 앱을 여는 방법

MJ Kim - 5월 16, 2017

지도 중심에 핀을 넣기 특정 지점에서 특정지점 루트를 표시하기  Apple 지도 앱 지도 중심에 핀세워서 위치 표시 [crayon-59252393ecbb5246960747/] 경로 표시…