[SwiftUI] 스위프트 UI 컴포넌트 정리

미루어 두었던 스위프트UI를 하나하나 공부해보는 시간이다. 아주 간단한 앱이긴 하지만 본격적으로 뭔가를 만들어보려고 하니, 내가 구현하고 싶은 기능을 가장 효율적으로 담을 수 있는 컴포넌트가 뭔지부터 감이 잡히지 않았다. 메타인지조차 없는 상황. 스위프트UI 컴포넌트들에 대한 정리된 지식 없이 대충 그때그때 필요한 것을 검색해서 익히고 앱에 적용할 수도 있긴 하겠으나, 그럴 경우 내 검색망에 걸린 컴포넌트보다 더 알맞은 컴포넌트를 놓치기도 쉽고 무엇보다 체계가 없어서 공부를 해도 혼란스러울 것 같다. 따라서 이렇게 하는 게 맞는지는 잘 모르겠지만, 이번 기회에 스위프트UI의 요소들을 간단하게나마 정리해보고자 한다.

 

• Button: A control that initiates an action 버튼은 액션, 라벨과 함께 생성한다. 여기서 액션은 사용자가 버튼을 클릭했을 때의 행동을 담은 메서드나 클로저 프라퍼티이고, 라벨은 버튼의 액션을 묘사하는 뷰이다.
• Color Picker: A control used to select a color from the system color picker UI 사용자로 하여금 새 색상을 선택할 수 있도록 도와준다.
• Date Picker: A control for selecting an absolute date 특정 날짜와 시간을 선택할 수 있게 해주는 뷰를 제공하고 싶을 때 사용한다. date instance에 바인드된다. 날짜의 범위를 제한할 수 있다.
• Disclosure Group: A view that shows or hides another content view, based on the state of a disclosure control 컨텐츠를 식별할 수 있게 해주는 라벨과, 컨텐츠를 보이거나 숨기게 해주는 컨트롤로 구성된다. 내용을 보여주는 경우 "expanded", 숨기는 경우 "collapsed" state라고 한다.
• Edit Button: A button that toggles the edit mode environment value edit mode를 활성화해준다.
  • Form: A container for grouping controls used for data entry, such as in settings or inspectors 폼 안의 뷰들에 "플랫폼에 적합한" 스타일링을 적용함으로써 그룹화한다. 버튼, 토글, 라벨, 리스트 등에 적용되며 맥os와 iOS에서 다르게 나타날 수 있다(플랫폼에 적합하게 변형)
• Group Box: A stylized view, with an optional label, that visually collects a logical grouping of content UI의 일부를 별개의 타이틀(옵셔널함)과 함께 박스로 분리하여 시각적으로 구별이 가게 하고 싶을 때 그룹박스를 사용한다.
• Label: A standard label for user interface items, consisting of an icon with a title 아이콘과 함께 UI 컴포넌트 중 가장 흔하고 알아보기 쉬운 컴포넌트다. 이미지의 이름과 제목을 붙여줌으로써 간단히 생성할 수 있다. 라벨에 스타일을 적용할 수도 있다.
• Link: A control for navigating to a URL 목적지의 url과 제목을 제공함으로써 생성할 수 있다. 제목은 링크의 목적에 대해 설명해주는 부분이다.
• List: A container that presents rows of data arranged in a single column, optionally providing the ability to select one or more members 리스트는 간단하게 고정된 컨텐츠들을 통해 생성할 수 있고, 데이터의 콜렉션을 통해 동적인 방법으로 생성할 수도 있다. 리스트 내의 요소를 선택하게 만들거나, 다차원의 리스트 혹은 계층 구조의 리스트를 만드는 등 다양한 방법으로 커스텀해줄 수 있다.
• Menu: A control for presenting a menu of actions 말 그대로 액션들의 메뉴를 보여주는 컨트롤
• Navigation Link: A view that controls a navigation presentation 네비게이션 뷰(하단 참조) 안에서 다른 뷰로 연결해주는 링크. 네비게이션 링크의 trailing closure에 뷰 컨텐트를 제공함으로써 네비게이션 링크의 모양을 조절할 수 있다.

 

• Navigation View: A view for presenting a stack of views that represents a visible path in a navigation hierarchy 네비게이션 뷰를 통해 네비게이션 위계에 속한 뷰들의 스택을 제공할 수 있다. 즉 뷰들이 하나하나 쌓이는 스택구조. 사용자들은 네비게이션 링크를 통해 destination 뷰로 갈 수 있다.
• Outline Group: A structure that computes views and disclosure groups on demand from an underlying collection of tree-structured, identified data 디스클로저 뷰를 통해 데이터의 계층구조를 보여줄 수 있는 뷰가 필요할 때 아웃라인 그룹을 사용한다. 사용자는 가지들을 expand, collapse 함으로써 트리 구조를 탐색할 수 있다.
• Picker: A control for selecting from a set of mutually exclusive values 상호 배제적인 선택을 할 수 있도록 해주는 컨트롤, 즉 한 개만 선택할 수 있도록 해주는 컴포넌트. 셀렉션 바인딩, 라벨, 그리고 내용을 제공함으로써 피커를 만들 수 있다.
• Progress View: A view that shows the progress towards completion of a task 작업이 진행중임을 보여주는 뷰로, 작업이 완성되어가는 비율을 보여줄 수도 있고 단순히 진행중인지 아닌지만 나타낼 수도 있다.
• Scroll View: A scrollable view 스크롤할 수 있는 범위 내에서 내용을 보여주는 뷰.
• Section: A container view that you can use to add hierarchy to certain collection views 리스트, 피커, 폼 같은 뷰에 섹션 인스턴스를 사용한다.
• Secure Field: A control into which the user securely enters private text 텍스트 필드와 비슷한 기능이지만 사용자가 입력하는 정보를 감추고 싶을 때 사용한다. 주로 비밀번호 등의 민감한 정보 입력에 사용.
• Sign In With Apple Button: 애플 로그인 버튼
• Slider: A control for selecting a value from a bounded linear range of values 최솟값과 최댓값 사이의 연결된 값들 중 한 값을 선택할 수 있도록 하는 컨트롤로, 값 선택을 위한 "thumb" 이미지가 포함되어 있다. 해당 이미지를 움직이면 변동된 값이 업데이트된다.
• Stepper: A control that performs increment and decrement actions 연속적인 수가 아닌 하나씩 떨어지는 수로 값을 증감하고 싶을 때 사용한다.
• Tab View: A view that switches between multiple child views using interactive user interface elements 탭뷰는 탭 아이템으로 이미지나 텍스트만 지원한다. 다른 타입의 뷰를 사용할 경우 빈 화면을 보게 된다.
• Text: A view that displays one or more lines of read-only text UI에 텍스트가 body 폰트로 보여지는데, 커스텀해줄 수 있다. 

 

• Text Editor: A view that can display and edit long-form text 텍스트 에디터를 사용하면 여러 줄의 스크롤 가능한 텍스트를 UI상에서 보여주고 편집할 수 있다.
• Text Field: A control that displays an editable text interface 사용자에게 입력할 항목에 대한 정보를 주는 prompt를 지정할 수 있다.
• Toggle: A control that toggles between on and off states boolean property인 isOn 바인딩과 라벨을 제공함으로써 생성한다. 
• Control Group: A container view that displays semantically-related controls in a visually-appropriate manner for the context 
• Depth Stack
• Geometry Reader: A container view that defines its content as a function of its own size and coordinate space 사이즈를 유연하게 조절할 수 있게 해준다.
• Horizontal Stack: A view that arranges its children in a horizontal line  LazyHStack과의 차이점은, 레이지는 스크린상에 나타낼 필요가 있을 때에만 뷰를 제공하지만 HStack은 스크린에 보여야하는지 여부와 상관 없이 모든 뷰들을 한번에 다 제공한다는 점이다. 차일드 뷰가 몇 개 없을 경우, 혹은 레이지 버전의 지연된 렌더링을 원하지 않을 경우에 사용하면 된다.
• Lazy Horizontal Grid: A container view that arranges its child views in a grid that grows horizontally, creating items only as needed 해당 그리드를 "lazy"하다고 표현하는 이유는, 이 그리드 뷰가 아이템이 요구되기 전에는 아이템을 생성하지 않기 때문이다.
• Lazy Horizontal Stack: A view that arranges its children in a line that grows horizontally, creating items only as needed 스크린상에 보여줄 필요가 있기 전에는 아이템을 생성하지 않는다는 측면에서 해당 뷰를 "lazy"하다고 표현한다.
• Lazy Vertical Grid: A container view that arranges its child views in a grid that grows vertically, creating items only as needed 아이템이 요구되기 전까지는 아이템을 생성하지 않는다는 점에서 이 그리드 뷰를 "lazy"하다고 표현한다.
• Lazy Vertical Stack: A view that arranges its children in a line that grows vertically, creating items only as needed 스크린상에 보여줄 필요가 있기 전에는 아이템을 생성하지 않는다는 점에서 해당 뷰를 "lazy"하다고 표현한다.
• Scroll View Reader: A view that provides programmatic scrolling, by working with a proxy to scroll to known child views ScrollViewProxy 인스턴스를 받는다. 스크롤을 수행하기 위해 해당 프록시의 scrollTo를 사용한다.

 

• Spacer: A flexible space that expands along the major axis of its containing stack layout, or on both axes if not contained in a stack 가능한 한 최대한 확장된, 컨텐트 없는 뷰를 제공한다.
• Vertical Stack: A view that arranges its children in a vertical line LazyVStack과의 차이점은, 레이지는 스크린상에 나타낼 필요가 있을 때에만 뷰를 제공하지만 VStack은 스크린에 보여야하는지 여부와 상관 없이 모든 뷰들을 한번에 다 제공한다는 점이다. 차일드 뷰가 몇 개 없을 경우, 혹은 레이지 버전의 지연된 렌더링을 원하지 않을 경우에 사용하면 된다.
• Angular Gradient: An angular gradient conic 그라디언트라고도 한다. 중앙과 첫 시작점, 끝나는 점을 기준으로 각도의 변화에 따라 색상 function을 적용한다.
• Elliptical Gradient: A radial gradient that draws an ellipse 타원을 그리는 방사구조의 그라디언트.
• Linear Gradient: A linear gradient
• Radial Gradient: A radial gradient
• Canvas: A view type that supports immediate mode drawing 그림을 그릴 수 있도록 지원하는 뷰이다.
• Capsule: A capsule shape aligned inside the frame of the view containing it rounded rectangle의 일종으로, corner radius가 직사각형의 가장 작은 모서리의 길이의 반이라고 한다.

 

• Circle: A circle centered on the frame of the view containing it
• Color: A representation of a color that adapts to a given context 1) asset catalog에서 색깔을 로드하거나, 2) rgb값을 구체적으로 명시해주거나, 3) 다른 컬러에서 인스턴스를 생성해주거나, 4) 미리 정의된 컬러를 사용하는 등 다양한 방법으로 색깔을 입힐 수 있다.
• Container Relative Shape: A shape that is replaced by an inset version of the current container shape. If no container shape was defined, is replaced by a rectangle
• Divider: A visual element that can be used to separate other content 스택 안에서 사용될 경우, 디바이더는 스택의 마이너한 축을 가로질러 확장한다.
• Ellipse: An ellipse aligned inside the frame of the view containing it
• Empty View: A view that doesn’t contain any content 뷰가 없음을 뜻하는 것이고, 직접 엠티뷰를 생성할 일은 거의 없을 것이다.
• Group: A type that collects multiple instances of a content type — like views, scenes, or commands — into a single unit 뷰의 레이아웃에 변화를 주지 않으며 여러개의 뷰를 하나의 인스턴스로 모을 때 사용한다. 그룹 생성 이후에 전체적으로 모디파이어를 적용하면 그룹 내의 모든 멤버에 영향이 간다.
• Image: A view that displays an image
• Path: The outline of a 2D shape
• Rectangle: A rectangular shape aligned inside the frame of the view containing it
• Rounded Rectangle: A rectangular shape with rounded corners, aligned inside the frame of the view containing it
• Timeline View: A view that updates according to a schedule that you provide 타임라인 뷰는 스스로 모양을 드러내지 않는 컨테이너로서 작용한다. 대신 자신에게 속한 컨텐트를 미리 정해둔 시간에 맞춰 그려보인다.