ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • SwiftUI Preview Device (미리보기) 바꾸기
    🧑‍💻/Swift 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) 로 할 수 있네요.

     


     

    반응형

    댓글

Designed by Tistory.