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

2016-05-02
10 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

Xcode 기능 확장(Extension) 제거하기
Xcode
shares3 views
Xcode
shares3 views

Xcode 기능 확장(Extension) 제거하기

MJ Kim - 3월 18, 2017

Mac에서 Xcode Source Editor Extension등의 기능확장을 사용하다보면 디버깅시 시스템 환경 설정의 확장이 앱에 등록되는 경우가 있다. 계속해서 목록이 남아 있기…

iOS App Store Review(앱 심사약관) 번역
Swift 3.0
shares112 views
Swift 3.0
shares112 views

iOS App Store Review(앱 심사약관) 번역

MJ Kim - 3월 15, 2017

App Store Review를 번역했다. 사실 이번에 좀 애매한 리젝을 당해서 그걸 이해하고자 정리해본다. 원문링크: https://developer.apple.com/app-store/review/guidelines/ 1. 이약관은? 1.1 앱 개발자로서 프로그램의…

Raspberry Pi 타이머 On/Off 전원제어모듈 RPi1114-Raspberry Pi
IoT by Raspberry Pi
shares7 views
IoT by Raspberry Pi
shares7 views

Raspberry Pi 타이머 On/Off 전원제어모듈 RPi1114-Raspberry Pi

MJ Kim - 3월 04, 2017

RPi1114-Raspberry Pi전원제어 모듈이 있다. 이 제품은 40Pin GPIO핀헤더에 연결하여 사용하는 모듈로 Cortax-M0마이크로컨트롤러 LPC1114를 내장하고 Raspberry Pi의 시작과 정지 순서등을 프로그래밍할…