View layout

기본 뷰들의 속성 조절

SwiftUI로 정의한 뷰들은 기본 제공 뷰를 직접 포함하거나, 이러한 기본 뷰들을 포함한 커스텀 뷰를 이용하기도 합니다. SwiftUI 뷰는 자체적인 크기가 있고, 적응성을 유지하면서 기본 제공 뷰의 크기를 어떻게 조정해야할 지 알아봅시다.

Text and symbols

글자와 기호는 앱에서 중요한 요소 중 하나입니다. 사용자에게 탐색 링크나 버튼, 표 등을 전달하는 데 중요한 역할을 하며, 내용을 표시하기 위해 충분한 공간이 필요합니다.

Text

텍스트 뷰는 읽기 전용 텍스트를 보여줍니다. 머릿글이나 타이틀같은 짧은 문장, 또는 배우의 대사같은 긴 문장에도 사용됩니다. 텍스트 뷰를 선언하며 폰트 속성을 지정할 수 있습니다. 예를 들어 타이틀 폰트를 지정하면 시스템은 본문이나 캡션 폰트보다 눈에 띄는 스타일을 구현합니다. 텍스트 뷰는 공간에 대한 제약이 있을 때는 줄 바꿈이나 잘림 처리가 되지만, 폰트 크기가 달라지지는 않습니다.

Symbols

위 예시는 HStack을 이용하여 세 개의 이미지 뷰를 생성했습니다. 각 이미지 뷰들은 SF 기호의 아이콘들을 보여줍니다. 아이콘 역시 색상과 크기를 조정할 수 있습니다.
이미지 안에 시스템 아이콘이나 커스텀 아이콘을 지정하려면, SF 기호를 텍스트처럼 이용할 수 있습니다. 텍스트 뷰를 이용하는 것처럼 타이틀 폰트를 이용하면 크기나 가중치를 설정할 수 있습니다

Labels

아이콘과 글자를 하나의 요소로 사용하고 싶다면 라벨을 이용하세요. 아이콘과 타이틀의 크기와 정렬을 알아서 맞춰줍니다.
위 예시에서는 SF 기호의 책 아이콘과 타이틀이 결합된 라벨을 사용했습니다. 아이콘과 타이틀 모두 largeTitle 폰트가 적용된 것을 볼 수 있습니다.

Controls

사용자와 상호작용을 해야하는 뷰들은 개별적인 크기로 제공됩니다. 설정 창처럼, 동일한 타입의 개별 요소들이 일관성을 유지해야하기 때문입니다.
컨트롤은 controlSize(:) modifier를 이용하여 크기를 조정할 수 있고, progressViewStyle(:) modifier를 이용하여 상태 표시 바를 직선형이나 원형으로 바꿀 수 있습니다.
위 예시에서는 controlSize를 이용하여 크기를 조정한 Picker와 Button을 보여줍니다. Menu나 Link같은 다목적의 컨트롤도 있고, EditButton이나 ColorPicker같은 특정 뷰도 존재합니다.

Images and shapes

Images

기본적으로 이미지는 원본 사이즈로 표시됩니다.
resizable(capInsets:resizingMode:)이나, scaledToFit() 또는 scaledToFill()를 이용하여 사이즈를 조정할 수 있습니다.
만약 서버로부터 이미지를 전송받고 싶다면, AsyncImage를 이용하세요. 앱의 응답을 유지하면서 다운로드를 할 수 있습니다.

Shapes

SwiftUI에서는 몇 가지 기본적인 도형을 제공하고, 크기나 색상 또는 다른 보기 속성들을 수정할 수 있습니다. 배경이나 경계, 다른 시각적 요소를 구성하기 위해 도형을 이용하세요. frame(minWidth:idealWidth:maxWidth:minHeight:idealHeight:maxHeight:alignment:) modifier를 이용하여 도형의 크기를 지정하거나 모든 여유 공간을 채울 수도 있습니다.
위의 예시에서는 세 가지 도형을 보여주고 있습니다. foregroundColor(:)를 이용하여 도형의 색상을 지정했습니다. The RoundedRectangle은 둥근 모서리를 정의할 cornerRadius와 style 파라미터를 가지고 있습니다.
HStack은 각 도형 사이의 디폴트 공간을 제공합니다. 각 도형에 사각형의 공간을 부여하기 위해 aspectRatio(:contentMode:) modifier를 사용하여 HStack의 너비를 높이의 3배로 만들어줍니다.