튜토리얼: Layerz로 Hacker News 앱 만들기

Hacker News는 Y Combinator가 운영하는 기술 뉴스 커뮤니티입니다. 글 목록과 댓글을 읽을 수 있는 무료 API를 공개하고 있습니다. 계정을 만들거나 글을 올리는 API는 없지만, 읽기 전용 API만으로도 앱 하나를 프로토타이핑하기에는 충분합니다.

이 튜토리얼을 마치면 다음과 같은 실제로 동작하는 앱 디자인을 얻게 됩니다.

News, Ask, Show, Jobs 네 개의 탭이 각각 글 목록을 보여주고, 글을 선택하면 URL 링크, 본문, 댓글로 구성된 상세 화면으로 이동합니다. 이번 글에서는 그중 News 탭 하나를 끝까지 완성하고, 나머지 탭과 Tab Bar는 다음 글에서 이어서 다룹니다.

시작하기 전에

Layerz를 실행하고 New Project 버튼을 누르면 프로젝트가 시작됩니다. New Project가 보이지 않으면 Start for free 를 통해 프로젝트를 시작할 수 있습니다. 어느 쪽이든 프로젝트 안에서 Layerz의 모든 기능을 제한 없이 사용할 수 있습니다.

프로젝트를 열면 에디터 왼쪽에서 주요 기능들을 볼 수 있습니다.

App Info · Screens · Design System · Assets · Data · Data Schema · API · Services · Action Flows

각 기능은 독립적으로 구성합니다. 디자인할 때는 디자인만 신경 쓰고, 데이터를 정의할 때는 데이터만 신경 쓰면 됩니다. 따로 만들어 둔 요소들은 필요한 순간에 Binding과 Action Flow에서 조합됩니다.

이 앱에서 만들어야 할 것을 정리하면 네 가지입니다.

1. [API] 서버에서 데이터를 받아오기 위해 API를 정의합니다.
2. [Data] 받아온 Story 목록을 저장할 공간을 만듭니다.
3. [UI] Story 목록을 보여줍니다.
4. [UI] Story 상세를 보여줍니다.

어디서부터 시작해도 상관없지만, 여기서는 확실한 API가 이미 있으니 API 정의부터 시작하겠습니다.

1. API 정의하기

Hacker News의 API 문서는 github.com/HackerNews/API에 있습니다.

API 탭으로 이동하면 두 가지 방법으로 API를 추가할 수 있습니다.

• Add API Call — API 하나를 추가합니다.
• Add API Collection — 여러 API를 하나로 묶어서 정의합니다.

API는 보통 공통된 서버 주소를 갖기 때문에, Collection을 먼저 만들고 그 아래에 API를 추가하는 방식을 씁니다. 이렇게 하면 Collection에 여러 개의 Server를 등록해 두고 필요할 때마다 골라 쓸 수 있습니다. 이 구조는 OpenAPI의 구조를 그대로 따릅니다.

문서를 보고 하나씩 손으로 추가해도 되지만, OpenAPI Spec 문서가 있다면 훨씬 빠릅니다. Hacker News API의 OpenAPI 문서는 검색으로 찾을 수 있습니다 — andenacitelli/hacker-news-api-openapi.

메뉴에서 Import OpenAPI from URL… 을 선택하고 다음 주소를 입력합니다.

https://raw.githubusercontent.com/andenacitelli/hacker-news-api-openapi/main/exports/api.yaml

API가 잘 정리되어 들어온 것을 확인할 수 있습니다. Collection에는 https://hacker-news.firebaseio.com/v0 서버가 정의되어 있고, 하위 API들은 여기에 path만 덧붙이면 됩니다.

글 목록 API 살펴보기

목록에서 Retrieve top 500 entries of story type newstories 를 선택해 봅니다.

Request에 GET /newstories.json이 정의되어 있고, Resolved 항목에서 서버 주소와 결합된 최종 URL을 볼 수 있습니다.

중요한 건 가장 아래에 있는 Response 입니다. API로부터 받아올 데이터 구조를 여기서 정의합니다.

원래 API 문서에 정의된 대로, 이 API를 호출하면 숫자 배열을 받는다고 되어 있습니다. Ask, Show, Jobs도 같은 형태의 API가 각각 준비되어 있습니다.

글 상세 API 살펴보기

Response의 다른 예를 보기 위해 Retrieve an item from the API 를 선택합니다.

이 API는 Item의 상세 정보를 받아오는데, 어떤 Item인지 지정하려면 id가 필요합니다. 호출할 때마다 값이 달라지므로 Parameter로 정의되어 있습니다. Parameter 영역의 값은 API를 호출하는 쪽에서 채워 넣게 됩니다.

Request path를 편집할 때 오른쪽의 {} 버튼을 누르면 바인딩 가능한 목록이 나오고, 선택하면 커서 위치에 값이 삽입됩니다.

Response도 확인해 봅니다.

Response 구조는 처음부터 직접 편집할 수도 있지만, 실제 API의 응답 구조는 복잡한 경우가 많습니다. 그래서 Layerz는 두 가지 방법을 제공합니다.

• OpenAPI Spec 임포트 — 지금 하고 있는 방식입니다.
• Send Test Request — 실제로 요청을 한 번 보내 보고, 받은 데이터로 구조를 자동 구성합니다. 지금처럼 바인딩할 값이 있는 경우 적절한 값으로 바꾼 뒤 실행하면 됩니다.

Response Body의 타입이 Item으로 되어 있는 것이 보입니다. 이런 Custom Type도 자동으로 만들어지며 Data Schema 탭에서 확인할 수 있습니다. Item 타입과 그 안의 Enum인 Type까지 함께 생성되어 있습니다.

설명은 길었지만, OpenAPI Spec만 있다면 Import OpenAPI 한 번으로 API 설정이 끝납니다.

2. Data 저장소 정의하기

API로 받아온 데이터를 앱에서 쓰려면 어딘가에 담아 둘 공간이 필요합니다. 이런 정의는 Data 탭에서 합니다.

Data 탭으로 이동해 Add Data 를 선택하면 빈 저장소가 만들어집니다.

이름을 New Stories로 바꾸고, Root Data Type을 Array<Item>으로 설정합니다.

이것으로 준비가 끝났습니다. API Response는 New Stories에 저장되고, 저장된 New Stories를 UI에 바인딩하면 그대로 화면에 표시됩니다.

3. Action Flow로 데이터 받아오기

API를 호출하고 그 결과를 다루려면 Action Flow를 사용합니다.

보통의 API라면 호출한 뒤 Response를 같은 타입의 Data에 저장하기만 하면 됩니다. 그런데 Hacker News API는 조금 다릅니다. 먼저 글 목록의 id 리스트만 받아온 다음, 각 id마다 item API를 한 번 더 호출해야 실제 내용을 얻을 수 있습니다.

Action Flows 탭에서 Add Action Flow 를 눌러 새 Flow를 만들고, 이름을 Get New Stories로 바꿉니다. 이 Flow는 다음 순서로 동작합니다.

1. API Call — New Stories의 id 리스트를 받아옵니다.
2. Guard — 호출이 성공했는지 확인하고 진행합니다.
3. For Each — id를 하나씩 돌면서 Item을 받아와 Array<Item>에 추가합니다.

API 호출 추가하기

Add first action 버튼을 누르고 Network > API Call 을 선택합니다.

호출할 API를 선택합니다.

API를 선택하면 Output에서 호출 결과로 받게 될 Response를 확인할 수 있습니다. 호출이 성공(200)했을 때 number 배열을 받는다는 것이 보입니다.

Guard로 성공한 경우만 진행하기

Add Action > Logic > Guard 를 선택하고, Binding으로 API Call > Response > HTTPStatusCode 를 고릅니다.

조건으로 2xx가 선택된 것이 보입니다. 이제 이 Action Flow는 요청이 성공했을 때만 다음 단계로 진행합니다.

For Each로 상세 정보 받아오기

Add Action > Logic > For Each 를 선택합니다.

For each item in 의 주황색 버튼을 눌러 API Call > Response > 200 을 선택하면, 앞에서 받은 number 배열을 순회하게 됩니다. 이제 For Each 안쪽의 Action에서는 리스트의 index와 value를 사용할 수 있습니다.

여기서 API 설정을 한 군데만 손보겠습니다. Retrieve an item from the API 를 열고 Parameters > id 의 타입이 string으로 되어 있는데, 이것을 number로 바꿉니다. 앞의 API에서 받은 number를 그대로 넣어야 하기 때문입니다.

For Each 안에서 Add first action 을 누르고 API Call을 선택한 뒤, api로 Retrieve an item from the API 를 고릅니다. Input으로 id: number를 받고 Output으로 Item을 준다는 것을 UI에서 바로 확인할 수 있습니다.

id에는 For Each가 제공하는 Item: number를 연결합니다.

받아온 Item 저장하기

Add Action > Data > Update Data 를 선택합니다. Update Data는 Source(저장할 데이터)와 Destination(저장할 곳)을 지정합니다. Destination에는 Source와 타입이 호환되는 저장소만 선택 가능하게 표시됩니다.

Source에는 방금 추가한 API Call의 output Item을 지정합니다. API Call이 두 개 보이는데, 설정한 순서대로 나오므로 아래쪽 API의 Item을 선택하면 됩니다.

Destination에는 미리 만들어 둔 Project Data > New Stories 를 선택합니다.

Destination을 선택하면 Append / Replace 옵션이 나옵니다. 여기서는 Append를 선택합니다. For Each가 돌면서 가져온 Story가 New Stories에 차례대로 쌓이게 됩니다.

4. News 화면 만들기

이제 이 Action Flow를 실행하기만 하면 New Stories가 채워집니다. UI를 만들어 확인해 봅니다. 할 일은 두 가지입니다.

• List UI — Story를 표시할 Cell을 만들고 New Stories를 바인딩합니다.
• Action Flow 실행 — Screen의 Event에서 Action Flow를 호출합니다.

Screens 탭을 선택하면 빈 화면이 보입니다.

UI를 만드는 기본 방법은 Library에서 원하는 Component를 원하는 위치로 드래그하는 것입니다. 이때 위치에 따라 Auto Layout이 자동으로 설정됩니다. 또는 배치하고 싶은 위치의 Component를 선택한 상태에서 Library의 Component를 고르기만 해도 추가됩니다. 이 경우에도 Center 또는 Fill로 Auto Layout이 자동 설정됩니다.

List는 보통 화면에 꽉 차게 배치합니다. 빈 Screen을 선택하고 Library에서 List를 고르면 곧바로 전체 화면 크기의 List가 추가됩니다.

List는 추가되었지만 안에 들어갈 Content가 아직 없어서, 에디터에 보이는 건 Placeholder입니다.

Section과 Cell

List는 Section들로 이루어집니다. List가 선택된 상태에서 Inspector 또는 Component Toolbar의 Add New Section 으로 Section을 추가합니다.

각 Section은 서로 다른 Layout을 가질 수 있습니다. 첫 번째 Section은 가로 스크롤로, 두 번째 Section은 세로 목록으로 설정하는 식입니다. 이 튜토리얼에서는 Section 하나만 사용합니다.

List의 Content가 되는 Cell은 Section 안에 배치합니다. 어떤 View Component든 드래그해서 Section의 원하는 위치에 넣을 수 있고, Section이 선택된 상태에서 Component를 고르면 그대로 추가됩니다.

먼저 데이터를 제대로 받고 있는지 빠르게 확인해 보겠습니다. Section을 선택하고 Library에서 Label을 고르면 Section의 Cell로 추가됩니다.

데이터 바인딩

Section 바로 아래에 있는 View Component에는 Array를 바인딩할 수 있습니다.

Label을 선택하고 Inspector에서 Cell Data Binding 항목의 Add Binding 을 눌러 New Stories를 선택합니다.

그 아래 Label Section의 Text 항목에서 표시할 데이터를 바인딩합니다. Label의 Text에는 프로젝트에 정의된 모든 string을 바인딩할 수 있고, 지금처럼 Cell Data가 연결된 경우에는 Cell Data의 값도 쓸 수 있습니다. 여기서는 Item.title을 바인딩합니다.

Action Flow 실행하기

Action Flow는 버튼을 누르거나 Cell을 선택하는 등 다양한 Event에서 호출할 수 있습니다. 여기서는 화면이 처음 만들어질 때 한 번만 호출되도록 하겠습니다.

Screen을 선택하고 Inspector의 Event 항목에서 설정합니다.

오른쪽 위의 Preview ▶️ 버튼을 눌러 미리보기를 실행합니다.

title만 나열해서 밋밋해 보이지만, API에서 데이터를 잘 받아와 UI에 반영되는 것을 확인할 수 있습니다.

5. Cell 디자인하기

List의 Cell 디자인은 앱에서 가장 자주 보이는 부분이라 중요합니다.

Cell에는 어떤 디자인이든 넣을 수 있지만, 지금 만드는 예제는 내용에 따라 Cell의 높이가 변하기 때문에 Stack으로 만드는 것이 좋습니다. Stack은 Component를 수직 또는 수평으로 배치하고, 각 Component가 종류에 따라 크기에 자동으로 반응합니다.

기존 Label을 삭제하고, Section을 선택한 뒤 Library에서 V Stack 을 선택합니다.

Stack 안에 Placeholder가 보입니다. 아직 비어 있는 상태이고, Placeholder에 드래그 앤 드롭을 하거나 Placeholder를 선택한 채로 새 Component를 고르면 그 자리로 대체됩니다.

이 Cell은 title, url, author를 차례대로 배치하는 간단한 구성으로 만듭니다. V Stack을 선택하고 Component Toolbar의 Add Placeholder 로 Placeholder를 세 개로 만듭니다.

각 Placeholder를 선택하고 Library에서 Label을 골라 차례대로 세 개 모두 Label로 바꿉니다.

V Stack은 Section에 직접 추가된 Component이므로 Cell Data Binding이 가능합니다. 여기에 Array를 바인딩합니다.

Cell에 바인딩을 하고 나면 V Stack과 그 아래의 모든 하위 Component가 Item에 접근할 수 있게 됩니다. 세 개의 Label에 차례대로 Item.title, Item.url, Item.by를 바인딩합니다.

다시 Preview를 실행합니다.

보기 좋게 다듬기

정보가 눈에 잘 들어오지 않으니 폰트와 정렬을 손봅니다.

Label이 가운데로 몰려 있는 것은 Stack의 정렬이 Center이기 때문입니다. Leading으로 바꿔 줍니다.

Label을 선택하면 Inspector에서 폰트와 컬러를 바꿀 수 있습니다. 각자 원하는 대로 설정해 보세요.

Cell 사이 간격도 조금 넓히면 좋겠습니다. Section을 선택하고 Vertical Spacing 값을 바꿉니다. 여기서는 30으로 설정했습니다.

6. Story 상세 화면 만들기

리스트의 항목을 눌렀을 때 상세 화면으로 이동하도록 만들겠습니다. 상세 화면도 전체가 리스트로 구성됩니다.

Screens 탭에서 Add List Screen 을 선택해 새 Screen을 추가합니다. List Screen은 빈 Screen 위에 List를 올려 둔 것이므로, Empty Screen에 List를 직접 추가해도 결과는 같습니다.

새 Screen의 이름을 Story로 바꾸고, 이 화면에서는 필요 없으므로 Navigation Title을 삭제합니다.

이 화면에서 보여줄 내용은 title, url link, text, comments입니다. title, url, text를 첫 번째 Section에, comments를 두 번째 Section에 배치합니다.

Library에서 List 안으로 Label, Link, Label 을 차례대로 드래그합니다. 드래그하는 동안 List의 어느 위치에 추가되는지 시각적으로 확인할 수 있습니다.

폰트도 적절하게 바꿔 줍니다.

Screen Data로 데이터 주입받기

이제 세 Component에 데이터를 바인딩해야 하는데, 이 화면은 상황이 조금 다릅니다. News 화면은 Project에 정의된 Data를 그대로 썼지만, 이 화면은 리스트에서 선택된 Item을 주입받아 보여줘야 합니다.

Screen이 데이터를 주입받으려면 Screen Data를 설정합니다. 에디터 아래쪽 세 번째 버튼을 누르고 Data를 선택하면 Screen Data 설정으로 이동합니다.

여기서 구성한 Data는 해당 Screen에서만 사용할 수 있고, Action Flow에서 화면 이동을 정의할 때 값을 주입할 수 있습니다.

Add Data > Add Field 로 item: Item 을 추가합니다.

이제 이 Data를 UI에 바인딩할 수 있습니다. 화면에서 직접 값을 저장해 바인딩해도 되고, Action Flow에서 주입하면 주입된 값이 반영됩니다. 주입할 때는 Item을 통째로 넘겨도 되고 원하는 Field만 넘겨도 됩니다.

세 Component에 차례대로 바인딩합니다.

7. 화면 이동 연결하기

Action Flow 탭으로 이동해 새 Action Flow를 만들고 이름을 Present Item으로 바꿉니다.

이 Flow는 리스트의 Cell을 선택했을 때 실행됩니다. Cell은 Action Flow를 호출할 때 Item 데이터를 함께 넘겨야 그에 맞는 화면을 보여줄 수 있습니다. 이렇게 데이터를 함께 넘기려면 Action Flow Parameter를 사용합니다.

Setup Parameter 를 누르고 item: Item 으로 설정합니다. 필요에 따라 Parameter는 자유롭게 구성할 수 있습니다.

이렇게 설정해 두면 아래에 추가되는 Action에서 이 값을 사용할 수 있습니다.

Add first action > Navigation > Screen Navigation 을 선택합니다.

Navigation Type으로 Push를 선택합니다.

이동할 화면으로 Story를 선택합니다.

Story를 선택하면 위쪽에 Input 항목이 생깁니다. Story에 Screen Data가 설정되어 있어서 데이터 주입이 가능하다는 표시입니다. 여기에 Action Flow Parameter의 item을 연결합니다.

Cell 이벤트에 연결하기

News Screen으로 돌아가 Cell을 선택합니다. Inspector의 Event 항목에서 방금 만든 Present Item Action Flow를 선택합니다.

이 Action Flow는 Parameter를 가지고 있으므로, 넘길 데이터를 설정하는 바인딩 UI가 함께 나타납니다. item 항목에 Cell.Item을 넘겨줍니다. 이 Cell에는 Item List가 바인딩되어 있어서 개별 Item 데이터를 다룰 수 있습니다. Cell 내부의 UI에 바인딩할 수도 있고, 이렇게 Action Flow로 넘길 수도 있습니다.

다시 Preview를 실행하고 리스트에서 항목을 선택해 봅니다.

데이터는 잘 표시되는데, 본문에 <p> 같은 HTML 태그가 그대로 보입니다. 이 API의 text 항목이 HTML로 구성되어 있기 때문입니다.

해당 Label의 속성 중 Renders HTML 을 켜 줍니다.

8. 댓글 불러오기

이제 아래쪽에 댓글 목록을 추가하겠습니다.

지금까지 만든 API와 Data는 New Stories 목록뿐입니다. 댓글을 가져오려면 API의 구조를 알아야 합니다. Hacker News API에서 글에 대한 정의는 모두 Item 안에 있습니다. 화면을 구성하는 데이터가 Item 타입이고, Item은 kids: Array<number> 를 가지고 있는데 이것이 곧 댓글 id 목록입니다.

여기서부터는 New Stories를 만들 때와 같은 과정입니다. kids의 id를 모두 Retrieve an item API로 받아와 댓글로 보여주면 됩니다.

다만 한 가지 다른 점이 있습니다. Story Screen을 위해 Item Data를 Screen 전용으로 따로 구성했듯이, Comments Data도 Screen 전용으로 추가하고, 데이터를 불러올 Action Flow도 Screen 전용으로 만듭니다.

Screen Data 설정창을 열고 comments: Array<Item> 을 추가합니다.

Screen Action Flow 설정창을 열고 Get Comments Action Flow를 추가합니다.

id 리스트를 하나씩 호출하기 위해 Add first action > Logic > For Each 를 선택합니다.

반복할 Array로 View Local Data > item > kids 를 선택합니다.

For Each 안에서 API Call과 Update Data를 차례대로 실행합니다.

Update Data를 추가하고 Source를 바로 위 API Call의 output으로 지정합니다.

Destination은 Screen Data에 정의한 comments로 지정합니다.

이제 이 Action Flow를 호출하기만 하면 댓글 데이터가 모두 comments에 저장됩니다.

9. 댓글 UI 만들기

새 Section을 추가하고 이름을 Comments로 짓습니다.

Section의 Type으로는 List를 선택합니다. Section의 List Type은 수직으로 나열되는 목록을 정의합니다. Vertical Type과 거의 비슷하지만, Vertical은 Column 수를 늘려 Grid처럼 표현하는 등 표현 범위가 조금 더 넓습니다. Section Type은 편집 중에 바꿔도 문제가 없으니 나중에 여러 방식으로 실험해 보세요.

Header 만들기

이번에는 Header Placeholder 를 먼저 써 보겠습니다. Header Placeholder를 선택하고 Library에서 Component를 고르면 추가됩니다. Stack에서 Placeholder를 쓰는 방법과 같습니다.

Label이 작아 보이니 Font와 Padding을 편집합니다.

댓글 Cell 만들기

Library에서 V Stack 을 Comments Section 영역으로 드래그해 추가하고, alignment를 Leading으로 바꿉니다.

첫 번째 줄에는 작성자와 시간을, 두 번째 줄에는 댓글 내용을 표시합니다.

첫 번째 Placeholder를 선택하고 Library에서 H Stack 을 선택합니다.

H Stack에는 Label 네 개를 차례대로 배치합니다. 첫 번째 Placeholder를 Label로 바꾸고 Font와 Text Color를 설정한 뒤, 복제해서 네 개로 만듭니다. 마지막에 남은 Placeholder는 삭제합니다.

Stack의 Spacing 속성으로 Label 사이 간격을 조절합니다.

네 개의 Label은 순서대로 by, Author, ・, Date를 표시합니다. Author와 Date는 잠시 뒤에 바인딩합니다.

아래쪽 Placeholder도 Label로 바꿉니다.

바인딩 연결하기

Cell 영역을 선택하고 comments Data를 바인딩합니다.

Date를 바인딩하기 전에 할 일이 하나 있습니다. Data Schema에서 Item을 보면 작성 시각이 time: number 로 정의되어 있습니다. number는 숫자로만 표현할 수 있으니, 이 타입을 Date로 바꿔 줍니다. 그러면 서버에서 받은 number 값을 Date로 자동 변환해서 사용하게 됩니다.

이제 Date Label을 바인딩합니다.

Label에 Date를 바인딩하면 Date Format을 설정할 수 있습니다. 바인딩 UI를 한 번 더 눌러 설정합니다.

마지막으로 댓글 본문을 바인딩합니다.

Action Flow는 Story Screen이 처음 나타날 때 한 번만 호출되도록 합니다. Story Screen을 선택하고 Event > Screen Load > Get Comments 를 선택합니다.

Preview를 확인합니다.

댓글 사이가 너무 빡빡하니 Comment Cell의 Padding을 조절합니다.

10. 컴포넌트로 디자인 재사용하기

New Stories를 보여주는 과정이 끝났습니다. 이번엔 디자인 재사용을 해 보겠습니다. 댓글 UI에서 만든 "작성자 + 시간" 부분을 Component로 만들어 메인 리스트에서도 쓰겠습니다.

재사용할 부분을 선택하고 Inspector에서 Create Component 를 선택합니다. Component로 만들기 전에 알맞은 이름으로 바꿔 두면 좋습니다.

Component가 곧바로 만들어지고 Project 목록에서도 확인할 수 있습니다. Inspector의 Go to Component 로 바로 이동할 수도 있습니다.

만들어진 Component는 별도로 편집할 수 있고, 편집한 내용은 이 Component를 사용한 모든 곳에 반영됩니다. 사용하는 쪽에서는 필요에 따라 속성을 Override할 수 있습니다.

이제 이 Component로 리스트를 수정해 보겠습니다. 기존에 Author를 표시하던 Label을 삭제합니다.

추가할 V Stack을 선택하고 Library에서 방금 만든 Author Info 를 고르면 Stack에 추가됩니다.

Author와 Date에 바인딩을 다시 설정합니다.

Preview에서 디자인이 업데이트된 것을 확인할 수 있습니다.

11. 빈 값 숨기기

Story를 보다 보면 URL이 없거나 댓글이 없는 글도 있습니다. 지금은 link가 비어 있어도 자리를 차지하고, 댓글이 없어도 Comments 헤더만 덩그러니 남아 이상해 보입니다.

List나 Stack처럼 Container에 순차적으로 채워 넣는 UI에서는 View 속성의 hidden을 처리하면 해당 위치를 없는 것처럼 완전히 숨길 수 있습니다. hidden 속성은 boolean이 아닌 타입이라도 바인딩에 조건을 설정할 수 있습니다.

Story Screen에서 link를 선택하고 View의 hidden 바인딩으로 url을 선택합니다.

url은 boolean이 아니므로 조건을 고르는 화면이 곧바로 나옵니다. url이 없을 때 hidden을 켜야 하므로 is Empty 를 선택합니다.

Section은 더 간단합니다. 보여줄 Cell이 없을 때 Hide When Empty 옵션만 켜 주면 자동으로 가려집니다.

12. 디자인 마무리하기

마지막으로 Hacker News에 어울리게 디자인을 다듬겠습니다. Hacker News 웹사이트는 주황색을 기본으로 씁니다. 앱 전체에 적용될 Accent Color를 주황색으로 바꿔 줍니다.

Design System 탭에서 Accent Color를 선택하면 색을 편집할 수 있습니다. Choose Built-in Color 에서 System Orange를 선택합니다.

News Screen을 선택한 뒤 Navigation Bar 설정도 업데이트합니다.

Preview를 확인하면 앱의 성격이 훨씬 잘 드러납니다.

마치며

여기까지 따라와 주셔서 감사합니다. API 정의부터 데이터 저장, Action Flow, 리스트와 상세 화면, 컴포넌트 재사용까지 앱 하나를 만드는 전체 흐름을 한 번에 지나왔습니다.

다음 글에서는 News 외에 Ask, Show, Jobs까지 확장해서 Tab Bar UI를 구성하는 부분을 이어서 소개하겠습니다.