List

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

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

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

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

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

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

Page 에 List 추가하기

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

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

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 을 만들 수 있습니다.