iOS ) 기기별 화면 미리보기

음..제목이 이게 맞으려나..

이것밖에 생각이 안나네요 ㅎㅎ.. 오늘은 간단한..음..팁..?

Xcode에서 보통 아이폰6나 7을 가지고 storyboard 작업을 하실텐데요,

4s도 지원해야하고..SE도 지원해야하고..아이패드에서도 돌아가야하니

AutoLayout작업은 필수겠죠? 하지만 

다 돌려보기 넘나 귀찮은것...

그래서..Xcode는 Preview기능이 있답니다 :)

<Firebase 회원가입 기능 만들어보기>에서 사용했던 예제에요 :)

잘 보이시나요..? iPhone 4s부터 iPad Pro까지..!!

이렇게 시뮬레이터를 실행하지 않고도, 해당 기기에서 어떻게 보일지 Xcode안에서 볼 수 있답니다. XD

오늘은 어떻게 이 화면을 띄우는지 알아볼게요 :)

기기별 화면 미리보기

---

1. 프로젝트를 연다.

2. Main.storyboard로 간다.

3. Main.storyboard 오른쪽 상단에 있는 show the assistant editor를 눌러준다. 

그럼 위화면처럼 왼쪽엔 stroyboard, 오른쪽엔 해당 ViewController의 소스코드가 나올거에요. 여기서 위 빨간색 네모박스에 있는 Automatic을 눌러주세요.

그리고, Preview > Main.storyboard를 클릭해주세요. 그러면..!

이렇게 Preview 하나만 나오실거에요. 여러 기기들을 추가하려면, 위 그림의 빨간색 네모 안에 있는 +버튼을 눌러주세요.

그러면 이렇게 기기를 선택할 수 있어요. iPhone SE를 누르면..!

이렇게 SE화면을 볼 수 있어요 :)

SE에서는 텍스트필드가 끊기는 것을 볼 수 있네요. 

이것을 보고 아..! AutoLayout을 설정해줘야겠구나, 조정해야겠구나 뭐 이런식으로 알 수 있겠죠?

어떤 기기의 Preview를 지우고 싶으면, 해당 Preview를 누르고 Delete를 눌러주시면 된답니다 :)

Landscape모드도 Preview로 볼 수 있는데요, 

Landscape모드로 보고싶은 Preview에 마우스를 올리면,

뭔가 누르면 돌아갈 것 같은 아이콘이 생깁니다. 

정확히 저 아이콘을 클릭하게 되면,

이렇게 Landscape모드로 볼 수 있어요!

(프로젝트 설정에서 Landscape모드를 막아놔도 Preview에서는 돌아가네요 XD)

+  

※ Preview에서는 잘 보이지만, 시뮬레이터로 했을 때 잘 나오지 않을 수 있으니 너무 Preview를 맹신하지 마세요..

방금 발견하고 추가합니다!!

흠 어떠셨나요 ㅎㅎ 이 Preview기능은 정말 유용하게 쓸 수 있을 것 같아요!!!

도움이 되었길 바라며~.~