🧑‍💻/Swift

SwiftUI Preview Device (미리보기) 바꾸기

유리맥 2021. 1. 25. 17:47
반응형

SwiftUI를 사용하면 미리 보기 화면이 제공됩니다. 👏👏👏 정말 필요하던 기능이었어요. 애플 만세

 

왠지 시뮬레이터 선택하면 미리보기 화면도 바뀔 것 같은 그런 느낌인데 그렇지 않습니다. ㅎㅎ;

Simulator Device != Preview Device

 

 

설정은 두 가지 방법이 있습니다. (2번 자동 완성 추천합니다. 급하면 바로 스크롤 다운)

 

1. 직접 입력해서 설정하기

 

코드를 직접 작성 후 Build > Resume 버튼 클릭하면 반영됩니다.

ContentView()
	.previewDevice("iPhone 12")

 

저 String에 넣을 값은 토씨 하나 틀리면 안 되는데 기종이 뭐가 있는지 어떻게 보느냐? 하면

previeDevice를 option 키를 누른 채로 클릭해주세요.

xcrun simctl list devicetypes 를 터미널 앱에서 입력해 봐야 합니다. (새 기종이 나올 때마다 확인해 봐야 할 듯,,)

주의 : Simulator 리스트에 있는 기기만 적용 가능합니다. 없다면 다운로드 받아야 Preview 적용이 됩니다!

 

⬇️ ⬇️ ⬇️ 전체 기종 보기 ⬇️ ⬇️ ⬇️

더보기

$ xcrun simctl list devicetypes

== Device Types ==

iPhone 4s (com.apple.CoreSimulator.SimDeviceType.iPhone-4s)

iPhone 5 (com.apple.CoreSimulator.SimDeviceType.iPhone-5)

iPhone 5s (com.apple.CoreSimulator.SimDeviceType.iPhone-5s)

iPhone 6 Plus (com.apple.CoreSimulator.SimDeviceType.iPhone-6-Plus)

iPhone 6 (com.apple.CoreSimulator.SimDeviceType.iPhone-6)

iPhone 6s (com.apple.CoreSimulator.SimDeviceType.iPhone-6s)

iPhone 6s Plus (com.apple.CoreSimulator.SimDeviceType.iPhone-6s-Plus)

iPhone SE (1st generation) (com.apple.CoreSimulator.SimDeviceType.iPhone-SE)

iPhone 7 (com.apple.CoreSimulator.SimDeviceType.iPhone-7)

iPhone 7 Plus (com.apple.CoreSimulator.SimDeviceType.iPhone-7-Plus)

iPhone 8 (com.apple.CoreSimulator.SimDeviceType.iPhone-8)

iPhone 8 Plus (com.apple.CoreSimulator.SimDeviceType.iPhone-8-Plus)

iPhone X (com.apple.CoreSimulator.SimDeviceType.iPhone-X)

iPhone Xs (com.apple.CoreSimulator.SimDeviceType.iPhone-XS)

iPhone Xs Max (com.apple.CoreSimulator.SimDeviceType.iPhone-XS-Max)

iPhone Xʀ (com.apple.CoreSimulator.SimDeviceType.iPhone-XR)

iPhone 11 (com.apple.CoreSimulator.SimDeviceType.iPhone-11)

iPhone 11 Pro (com.apple.CoreSimulator.SimDeviceType.iPhone-11-Pro)

iPhone 11 Pro Max (com.apple.CoreSimulator.SimDeviceType.iPhone-11-Pro-Max)

iPhone SE (2nd generation) (com.apple.CoreSimulator.SimDeviceType.iPhone-SE--2nd-generation-)

iPhone 12 mini (com.apple.CoreSimulator.SimDeviceType.iPhone-12-mini)

iPhone 12 (com.apple.CoreSimulator.SimDeviceType.iPhone-12)

iPhone 12 Pro (com.apple.CoreSimulator.SimDeviceType.iPhone-12-Pro)

iPhone 12 Pro Max (com.apple.CoreSimulator.SimDeviceType.iPhone-12-Pro-Max)

iPod touch (7th generation) (com.apple.CoreSimulator.SimDeviceType.iPod-touch--7th-generation-)

iPad 2 (com.apple.CoreSimulator.SimDeviceType.iPad-2)

iPad Retina (com.apple.CoreSimulator.SimDeviceType.iPad-Retina)

iPad Air (com.apple.CoreSimulator.SimDeviceType.iPad-Air)

iPad mini 2 (com.apple.CoreSimulator.SimDeviceType.iPad-mini-2)

iPad mini 3 (com.apple.CoreSimulator.SimDeviceType.iPad-mini-3)

iPad mini 4 (com.apple.CoreSimulator.SimDeviceType.iPad-mini-4)

iPad Air 2 (com.apple.CoreSimulator.SimDeviceType.iPad-Air-2)

iPad Pro (9.7-inch) (com.apple.CoreSimulator.SimDeviceType.iPad-Pro--9-7-inch-)

iPad Pro (12.9-inch) (1st generation) (com.apple.CoreSimulator.SimDeviceType.iPad-Pro)

iPad (5th generation) (com.apple.CoreSimulator.SimDeviceType.iPad--5th-generation-)

iPad Pro (12.9-inch) (2nd generation) (com.apple.CoreSimulator.SimDeviceType.iPad-Pro--12-9-inch---2nd-generation-)

iPad Pro (10.5-inch) (com.apple.CoreSimulator.SimDeviceType.iPad-Pro--10-5-inch-)

iPad (6th generation) (com.apple.CoreSimulator.SimDeviceType.iPad--6th-generation-)

iPad (7th generation) (com.apple.CoreSimulator.SimDeviceType.iPad--7th-generation-)

iPad Pro (11-inch) (1st generation) (com.apple.CoreSimulator.SimDeviceType.iPad-Pro--11-inch-)

iPad Pro (12.9-inch) (3rd generation) (com.apple.CoreSimulator.SimDeviceType.iPad-Pro--12-9-inch---3rd-generation-)

iPad Pro (11-inch) (2nd generation) (com.apple.CoreSimulator.SimDeviceType.iPad-Pro--11-inch---2nd-generation-)

iPad Pro (12.9-inch) (4th generation) (com.apple.CoreSimulator.SimDeviceType.iPad-Pro--12-9-inch---4th-generation-)

iPad mini (5th generation) (com.apple.CoreSimulator.SimDeviceType.iPad-mini--5th-generation-)

iPad Air (3rd generation) (com.apple.CoreSimulator.SimDeviceType.iPad-Air--3rd-generation-)

iPad (8th generation) (com.apple.CoreSimulator.SimDeviceType.iPad--8th-generation-)

iPad Air (4th generation) (com.apple.CoreSimulator.SimDeviceType.iPad-Air--4th-generation-)

Apple TV (com.apple.CoreSimulator.SimDeviceType.Apple-TV-1080p)

Apple TV 4K (com.apple.CoreSimulator.SimDeviceType.Apple-TV-4K-4K)

Apple TV 4K (at 1080p) (com.apple.CoreSimulator.SimDeviceType.Apple-TV-4K-1080p)

Apple Watch - 38mm (com.apple.CoreSimulator.SimDeviceType.Apple-Watch-38mm)

Apple Watch - 42mm (com.apple.CoreSimulator.SimDeviceType.Apple-Watch-42mm)

Apple Watch Series 2 - 38mm (com.apple.CoreSimulator.SimDeviceType.Apple-Watch-Series-2-38mm)

Apple Watch Series 2 - 42mm (com.apple.CoreSimulator.SimDeviceType.Apple-Watch-Series-2-42mm)

Apple Watch Series 3 - 38mm (com.apple.CoreSimulator.SimDeviceType.Apple-Watch-Series-3-38mm)

Apple Watch Series 3 - 42mm (com.apple.CoreSimulator.SimDeviceType.Apple-Watch-Series-3-42mm)

Apple Watch Series 4 - 40mm (com.apple.CoreSimulator.SimDeviceType.Apple-Watch-Series-4-40mm)

Apple Watch Series 4 - 44mm (com.apple.CoreSimulator.SimDeviceType.Apple-Watch-Series-4-44mm)

Apple Watch Series 5 - 40mm (com.apple.CoreSimulator.SimDeviceType.Apple-Watch-Series-5-40mm)

Apple Watch Series 5 - 44mm (com.apple.CoreSimulator.SimDeviceType.Apple-Watch-Series-5-44mm)

Apple Watch SE - 40mm (com.apple.CoreSimulator.SimDeviceType.Apple-Watch-SE-40mm)

Apple Watch SE - 44mm (com.apple.CoreSimulator.SimDeviceType.Apple-Watch-SE-44mm)

Apple Watch Series 6 - 40mm (com.apple.CoreSimulator.SimDeviceType.Apple-Watch-Series-6-40mm)

Apple Watch Series 6 - 44mm (com.apple.CoreSimulator.SimDeviceType.Apple-Watch-Series-6-44mm)

 

단순하게 width, height 값을 지정해서 볼 수도 있습니다. 자주 쓰일 것 같진 않네요.

ContentView()
	.previewLayout(.fixed(width: 400, height: 700))

 

번외로, 구글링해보니 다크 모드 이렇게 설정하면 된다던데 배경 색은 안바뀌고 텍스트 색상만 변경됐습니다.

최신 버전에서는 안되는 걸까요? 왤까요?? 

ContentView()
	.environment(\.colorScheme, .dark)

 

 

2. 옵션 선택해서 설정하기 👍

 

수정할 View를 선택해주세요. 1번 2번 순서대로 ~

 

Preview > Device 에서 미리 보기 디바이스를 선택할 수 있습니다.

 

자동으로 완성됩니다. WOW 🤩 이미지나 버튼 넣듯이 설정 가능했어요.

 

같은 방법으로 Color Scheme 변경 가능합니다. ㅎㅎ

 

다크 모드는 수동 입력한다면 .preferredColorScheme(.dark) 로 할 수 있네요.

 

 

반응형