List

앱의 디자인을 할 때, 대부분의 경우는 수많은 컨텐츠들을 작은 화면에 넣어야 하기 때문에, 스크롤 되는 화면에 컨텐츠들을 배치하게 됩니다.

이 때 사용하게 되는 Scroll View 를 List 라고 부르며, List 에서는 컨텐츠들을 일관성 있게 나열해서 사용자에게 효과적으로 정보를 전달하는 역할을 하게 됩니다.

List 는 여러개의 Section 이 나열된 형태를 하고 있으며, 각 Section 은 컨텐츠를 표시하는 Cell 들이 나열되어 있습니다.

각 Section 별로 Layout 속성을 따로 지정할 수 있기 때문에, 상상할 수 있는 대부분의 Layout 을 지원하는 List 를 만들 수 있습니다.

List 를 Edit 하는 방법에서는 List 를 Scene 위에 배치한 이후 - List 는 주로 Scene 에 가득차게 배치합니다. - 원하는 만큼 Section 추가하기, Section 별로 Layout 설정하기, Section 에 UI 요소를 Drag and Drop 해서 컨텐츠를 채우기, 필요하다면 Section Header, Section Footer 만들기 등의 작업으로 List 를 완성할 수 있습니다.

List 에서는 미리 만들어진 UI Component 들을 Drag and Drop 으로 추가시키고, Section Layout 을 조절하는 방식으로 디자인합니다.

Scene 에 List 추가하기

List 는 UI Library 에서 Drag and Drop 으로 추가한 후 원하는 위치에 배치하면 됩니다. 하지만 대부분의 경우에 List 는 화면 가득하게 배치하게 됩니다. Floating Toolbar 에서 Simple Auto Layout > Fill 기능을 이용해서 화면에 가득차게 해 주세요.

빈 List 가 있는 새로운 Scene 이 필요하다면 우상단의 Add 버튼에서 Add List Scene 을 누르면 List 가 준비된 새로운 Scene 을 확인할 수 있습니다.

Section 에 Cell 추가하기

List 를 추가하면 List 안에 하나의 Section 이 존재하는 걸 볼 수 있습니다. 이 때에 보이는 Header/Footer 와 Cell 은 모두 Placeholder 로서 Editing 을 도와주기 위해 Editor 에서만 보이는 요소입니다. Preview 를 해보시면 이 Placeholder 들은 보이지 않는 걸 확인할 수 있습니다.

여기서는 Cell 을 추가해보도록 하겠습니다.

Cell 을 추가하는 건 매우 쉽습니다. UI Library 로부터 모든 종류의 UI 와 Component 를 추가할 수 있습니다.

Cell 을 추가하기 전에 중요한 부분이 하나 있습니다.

List Editing 에는 List Drop Mode 가 존재합니다. Editor 우상단에 List Drop Mode 를 보면 Add 와 Edit 이렇게 두 가지 모드가 있습니다.

Add Mode 는 Section 안에 Cell 을 추가할 때 쓰이고, Edit Mode 는 이미 존재하는 Cell 위에 UI 요소를 추가하거나, Section Header/Footer 를 Drag and Drop 으로 추가할 때 사용됩니다. 이는 Cell 을 추가하는 방법과 Cell 내에 새로운 UI 를 추가하는 방식이 똑같이 Drag and Drop 으로 이루어지게 되어, 선택지가 생기게 되었습니다.

List Drop Mode 가 Add 임을 확인한 이후, 아무 UI 나 Section 안으로 Drag and Drop 해서 가져와보세요. Section 의 Cell 로 추가되는 걸 볼 수 있습니다.

이 때, Cell 로 사용할 UI 를 미리 만들어둔 Component 를 사용하는게 좋습니다.

Cell 은 대부분 같은 UI 가 반복되며, 안의 컨텐츠만 바뀌는 형식이 대부분이기 때문입니다. 물론 다른 UI 로도 얼마든지 구성할 수 있으니, 원하는대로 디자인해볼 수 있습니다.

Component 를 추가하면 추가하면서 별개의 Instance 로 변경되기 때문에, 변경될 부분만 override 하여 내용을 바꿔줄 수 있고, 나중에 Component 의 디자인만 변경되면 일괄적으로 변경된 모습을 확인할 수 있습니다.

몇 개의 Cell 을 추가해보면 처음에는 Cell 들이 가로로만 나열되는 걸 볼 수 있습니다.

Section 안에선 가로로 구성하는 것 뿐 아니라, 세로로 긴 리스트를 비롯해 수많은 종류의 레이아웃을 만들 수 있습니다.

Section 에 Header/Footer 추가하기와 List Drop Mode

List Drop Mode 를 Edit 로 변경합니다.

하나의 Section 에는 Header 또는 Footer 영역이 존재할 수 있습니다.

List Drop Mode 를 Edit 로 바꾼 후, UI Library 로부터 원하는 UI 요소를 Drag and Drop 하여 Header Placeholder 또는 Footer Placeholder 영역으로 가져오면 곧바로 반영됩니다.

List Drop Mode 에 대해 다시 한 번 살펴보겠습니다.

Add Mode 에서 UI 의 Drag and Drop 을 시도하면 Section 의 Cell 로 추가됩니다.

Edit Mode 에서 UI 의 Drag and Drop 을 시도하면 Cell 의 Subview 로 추가되거나, Header/Footer 에 설정할 수 있습니다.

List 에 Section 추가하기

List 가 선택된 상태에서 Floating Toolbar 의 Add Section 버튼을 통해 새로운 Section 을 원하는 Section Type과 함께 곧바로 추가할 수 있습니다.

Section, Cell 복제하기 및 순서 변경하기

Section Layout 에 대해 알아보기 전에, 복제 및 순서 변경을 통해 컨텐츠를 쉽게 다루는 방법을 알아보겠습니다.

복제 및 순서 변경은 모두 Floating Toolbar 에서 이루어집니다.

Floating Toolbar 에서 복제 버튼과 순서 변경 버튼을 알아두세요.

그리고 Outline View 로부터 현재 선택된 요소가 Section 인지 Cell 인지 잘 확인하는 것도 중요합니다.

List 의 바로 아래 자식들은 모두 Section 이고, Section 아래는 Header, Cell List, Footer 가 차례대로 배치되어 있습니다.

Section 또는 Cell 이 선택되어 있을 때, 복제 버튼과 순서 변경 버튼을 실행해보세요.

복제 버튼을 누르면 빠르게 같은 Section, 같은 Cell 이 통째로 복제되어 추가되는 걸 확인할 수 있습니다.

순서 변경 버튼을 통해 해당 Section, Cell 을 앞으로, 뒤로 이동시켜 보세요.

마지막으로, 예상하셨겠지만, Floating Toolbar 의 삭제 버튼을 통해 해당 Section, Cell 을 한 번에 삭제할 수도 있습니다.

Section Layout 변경하기

Section Layout 의 변경은 모두 Inspector 에서 이루어집니다.

Section 을 선택한 채로 Inspector 를 보면 Section Layout 속성을 확인할 수 있습니다.

Type 을 변경하세요.

• Vertical : Vertical 방향의 리스트를 구성합니다.
• Horizontal : Horizontal 방향의 리스트를 구성합니다.
• Flow : Cell 각자의 크기별로 차례대로 배치됩니다.
• Carousel : Cell 의 Width 를 List 의 Width 와 동일하게 맞춘 Horizontal Type 입니다.

선택된 Type 에 따라 추가적인 설정을 할 수 있습니다.

Width Dimension, Height Dimension 을 선택하세요.

• Fixed : 고정된 값입니다. Cell 의 Size 설정을 무시합니다.
• Flexible : Cell 의 Size 설정을 따라갑니다.
• Fractional Height : List 의 Height 와의 비율로 설정합니다. Cell 의 Size 설정을 무시합니다.
• Fractional Width : List 의 Width 와의 비율로 설정합니다. Cell 의 Size 설정을 무시합니다.

Section Layout 을 통해 구현할 수 있는 대부분의 Layout 을 만들 수 있습니다.

여러가지 조합의 Section Layout 과 Auto Layout 이 적용된 Cell 디자인을 통해 원하는 List Layout 을 만들 수 있습니다.

All Section Layout changes are made in the Inspector.

With a Section selected, you can check the Section Layout properties in the Inspector.

Change the Type.

• Vertical: Creates a vertically oriented list.
• Horizontal: Creates a horizontally oriented list.
• Flow: Cells are arranged sequentially according to their individual sizes.
• Carousel: A Horizontal Type where the Cell Width is set equal to the List Width.

You can make additional settings depending on the Type selected.

Select Width Dimension, Height Dimension.

• Fixed: A fixed value. Ignores the Cell's Size settings.
• Flexible: Follows the Cell's Size settings.
• Fractional Height: Set as a ratio to the List's Height. Ignores the Cell's Size settings.
• Fractional Width: Set as a ratio to the List's Width. Ignores the Cell's Size settings.

You can create most layouts implementable through Section Layout.

You can create your desired List Layout through various combinations of Section Layouts and Auto Layout applied to Cell designs.