SwiftUI 코드작성 결과 Preview로 띄워서 보는방법

 

 

SwiftUI로 코드를 작성하면 Preview기능을 통해서 보다 빠르게 코드작성 결과를 UI로 볼 수 있습니다. 오늘은 간단하게 SwiftUI의 Preview 보는 방법을 알아보겠습니다.

 

 

 

---

SwiftUI 코드작성 결과 Preview로 띄워서 확인하는 방법

먼저 프로젝트를 생성해야겠죠? Xcode를 실행하고, Command + Shift + N 단축키를 눌러숩니다. 이후 iOS -> "App" 메뉴를 선택해주세요.

 

 

 

 

프로젝트를 생성할때 SwiftUI 옵션으로 선택해서 생성해주세요. 그러면 위와 같은 화면이 나올 겁니다. SwiftUI의 Preview기능을 사용하려면, PreviewProvider 프로토콜을 채택한 타입이 있어야하는데, 초기 생성된 프로젝트를 보시면, ContentView.swift파일 내에 PreviewProvider 프로토콜을 채택하고 있는 타입이 존재하는 것을 보실 수 있습니다.

 

 

 

 

다시한번 반복해서 보자면, Preview 창을 확인하기 위해서는

1) 현재 에디터에 PreviewProvider 프로토콜을 준수하는 타입이 있어야합니다.
2) PreviewProvider 프로토콜 준수를 위해서는 previews 라는 타입 프로퍼티를 반드시 구현해야합니다. 이 안에서 구현된 View가 Preview 화면에 나타나게 됩니다.

SwiftUI의 Preview 기능은 단순 문자열이나 숫자 등의 Literal 값만 변경 될 경우, Xcode의 최적화 작업으로 불필요한 파일, 뷰 컴파일을 하지않고, 바로 Preview가 업데이트 될 수 있어서 더욱 빠른 디버깅 절차를 거칠 수 있습니다. 또한 이 외에도 Preview기능과 관련된 부분에 한해서 컴파일을 하므로 더욱 빠른 디버깅 속도를 가질 수 있습니다.

 

 

 

초기 생성된 프로젝트에서 수동으로 추가할 필요업이 PreviewProvider 프로토콜을 준수하는 ContentView_Previews 구조체가 존재하고, 그 안에서 정의된 previews 타입 프로퍼티 내에서 ContentView() 를 정의해두었기 때문에, 이 상황에서 별도 코드를 추가할 필요 없이 Preview 기능을 사용할 수 있습니다.

 Preview 실행을 위해 Command + Option + P 단축키를 선택하면 됩니다. 그러면 로딩 후 우측과 같이 "Hello, world!" 문구가 찍힌 시뮬레이터 화면 모습을 보실 수 있습니다.

 

 

 

 

ContentView 내의 Text 내용을 변경하면, 실시간으로 업데이트된 문구 내용을 볼 수 있습니다. 위의 경우, Hello world! -> Hello, mungGu! 로 문구가 변경된 것을 보실 수 있어요.

 

 

 

 

위와 같이 다수의 에디터를 띄워도 PreviewProvider 프로토콜을 준수하는 타입이 있기만 한다면, 모든 에디터에 Preview 창이 형성되게 됩니다.

* Option 버튼을 누른채, 좌측 Project Navigator의 ContentView 파일을 선택하시면 위와 같이 다수의 에디터를 확인 가능합니다.

 

---

단축키를 사용했는데도 preview 창이 나오지 않을때

단축키를 사용했는데도 preview 창이 안나오는 경우에는 에디터 설정상태를 확인해보세요. Xcode 우상단을 확인해보세요. 위 메뉴에서 Canvas를 선택하시면 preview 페이지를 확인하실 수 있을거에요. 아래는 위와 같이 설정 후, preview 단축키(Command + Option + P) 적용 화면입니다.

 

위와 같이 단축키를 눌러도 나오지 않던 preview 화면이 활성화 되어 보여지는 것을 확잉 가능합니다.

 

 

---

지금까지 간단하게 새롭게 생성한 SwiftUI 프로젝트에서 Preview 화면을 동작시켜서 현재 UI를 확인하는 방법을 알아봤습니다. 그럼 이번 포스팅은 여기까지입니다. 즐거운 코딩 되시길 바랍니다. 👩🏻‍💻