[iOS/SwiftUI] 내가 그린 화면 미리보기, 프리뷰 캔버스(Preview Canvas)

Xcode로 프로젝트를 생성했다면,

 

직접 구성한 코드가 화면에 어떤 방식으로 구성되는지

실시간 확인할 수 있는 SwiftUI의 강력한 도구,

 

프리뷰 캔버스(Preview canvas)에 대해 살펴볼 필요가 있습니다.

 

 

---

 

 

 

 

프리뷰 캔버스 (Preview Canvas)의 역할과 기능

사용자 인터페이스 설계에 대한 시각적 표시 및 유용한 도구 제공

 

앞선 포스팅의 마무리에서 언급한 바와 같이,

기존 UIKit에서 제공하지 않는, SwiftUI만의 유용한 기능입니다.

(최근엔 Extension을 추가하여 확인한다고는 하지만, 언제까지나 임시방편일 뿐) 

 

쉽게 말해, 시뮬레이터를 Build하지 않고도, 앱을 테스트 할 수 있게 됩니다!

 

코드 에디터에 Text UI 코드를 작성하게 되면, Preview Canvas에 자동으로 시각화 됨

 

 

프리뷰 캔버스의 구성

• 프리뷰 캔버스의 버튼 및 영역은 크게 4개 요소 로 구성됩니다 (Xcode 14.2 기준)  
  • 🅰 메인 캔버스 영역 : 디바이스가 실행될때 표시되는 현재의 View 
  • 🅱 캔버스 컨트롤 : 메인 캔버스의 형태를 변경하거나, 영역을 확인하는 기능
    
  • 🅲 줌 컨트롤 : 메인 캔버스의 크기를 조정하는 기능
  • 🅳 핀 컨트롤 : 해당 뷰(SwiftUI files)의 캔버스를 다른 뷰에서도 보이게 하는 고정 기능 

Preview Canvas 구성요소

 

 

 

캔버스 컨트롤 (Canvas Control)

• 프리뷰 캔버스의 여러 Tool 중, 특히 🅱 캔버스 컨트롤은 다양한 기능을 제공합니다.
  • Live : 프리뷰 캔버스의 Defaults 값이며, 소스코드에 따른 실시간 UI 변화를 확인
  • Selectble : 소스코드에 따라 현재 UI 요소가 위치한 영역을 확인 
  • Variants : Light 및 Dark Mode, 가로 세로 뷰, 폰트 크기에 따른 뷰 변화를 확인
  • Device Setting  : Variants의 기능을 실제 프리뷰 캔버스에 적용
  • Preview on Device : 개발자의 디바이스(아이폰)를 연결할 경우 활성화 

Canvas Control의 다양한 기능들

 

 

 

---

 

 

새롭고, 다채롭고, 유용한 기능인 프리뷰 캔버스(Preview Canvas)의 기능은

추후 SwiftUI의 기능을 구현하면서 자연스레 소개해 나갈 예정입니다.

 

다음 포스팅부터는 본격적으로 SwiftUI 예제 프로젝트를 다루는 동시에

기본적인 뷰 생성부터 UI구현까지 이어나가도록 하겠습니다.