Fabula 프로젝트의 구조
- Fabula 앱은 FabulaItemsProvider 패키지를 통해서 모든 아이템을 제공받습니다. 따라서 Fabula 앱을 앱스토어에 배포하면 사용자는 패키지를 통해서 등록된 유닛 아이템을 확인할 수 있습니다.
- FabulaItemsProvider 패키지에는 FabulaPlus 예제 앱이 포함되어 있습니다. 패키지에 유닛 아이템을 추가하고 FabulaPlus 예제 앱을 통해서 빌드 테스트 할 수 있습니다.
- FabulaPlus, Fabula 앱 뿐만 아니라 다른 앱에서도 자유롭게 FabulaItemsProvider 패키지를 활용할 수 있습니다.
Fabula 프로젝트의 워크플로
코드 기여자는 FabulaItemsProvider 패키지를 github 계정에 Fork하고 위와 같은 플로우로 아이템을 추가하고 PR(Pull Request)합니다. Fork 이후 상세한 플로우는 아래와 같습니다. 1단계 부터 4단계까지는 코드 기여자가 처리하는 단계이고, 5단계는 제가 최종 확인 후 배포를 진행합니다.
1. 단계 : 유닛 아이템 뷰를 추가합니다.
실질적으로 만들고자하는 유닛 아이템 뷰를 추가합니다. 뷰 네이밍 규칙 및 접근자 규칙만 준수하면 됩니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import SwiftUI
// 구조체 이름은 아래 예와 같이 'P{아이템 번호}_'를 앞에 붙여서 자유롭게 작성합니다.
// 접근자는 internal로 처리해도 자체 오류는 발생하지 않지만 외부에서 접근할 수 있도록 Public으로 합니다.
public struct P1000_Example: View {
public init() {}
public var body: some View {
ZStack {
ExampleSubView()
}
}
}
// 서브 뷰 또는 객체들은 다른 아이템들과 충돌하는 것을 방지하기 위해
// 파일 내에서만 접근 가능하도록 fileprivate로 지정합니다.
fileprivate
struct ExampleSubView: View {
var body: some View {
Text("Hello, Fabula!")
}
}
struct P1000_Example_Previews: PreviewProvider {
static var previews: some View {
P1000_Example()
}
}
2. 단계 : ItemsProvider에 ItemData를 추가합니다.
ItemsProvider 클래스는 유닛 아이템 정보를 배열로 가지고 있습니다. ItemData 데이터 규칙에 맞게 등록하면 추가된 아이템이 리스트에 노출됩니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
import SwiftUI
public class ItemsProvider {
...
public var items: [ItemData] {
[
// 아이템 리스트는 내림차순으로 정렬되어 있습니다. 따라서 추가 시 items 배열의 최상단에 추가합니다.
//
// ItemData를 생성합니다.
// id: 유닛 아이템의 아이디로 사용됩니다. 뷰 이름으로 지정할 때와 동일한 숫자를 기입합니다.
// category: 분류에 해당하는 카테고리를 지정합니다. (uiux: UI/UX에 해당할 경우, play: UI/UX와 직접적인 관련이 없는 경우, study: SwiftUI 학습을 위한 예제)
// section: 아이템 성격에 맞는 분류 이름
// createDate: 생성한 날짜입니다. (기여 그래프에 표시되는 날짜이기도 합니다.)
// title: 아이템의 타이틀을 지정합니다. 보통 추가한 아이템의 뷰 이름을 사용합니다. (예: P1000_Example의 경우, 'Example' 사용).
// caption: 아이템의 설명을 기입합니다. (150자 내외, 영문으로 기입)
// creator: 작성자의 이름을 지정합니다. (기여자 목록에서 노출되는 이름이기도 합니다. 작성자 이름으로 아이템이 최초 등록되면 이미지와 url정보 등을 확인하기 위해 메일을 드립니다.)
// tags: 검색을 통해 필터링되는 키워드들을 ','로 구분하여 지정합니다. 참고로 검색에서는 section, title, caption, creator, tags를 참조합니다.
// view: 추가한 뷰를 설정합니다. (예: P1000_Example의 경우, 'FAnyView(P1000_Example())')
// platformType: 지원하는 플랫폼을 설정합니다. (.both : iOS/macOS 모두 지원, .iOS : iOS만 지원, .macOS : macOS만 지원, 기본값은 .both 입니다.)
ItemData(id: 1000,
category: .study,
section: "Section name",
createDate: "2022-01-07",
title: "Title",
caption: "Caption",
creator: "Your name",
tags: "Search tags",
view: FAnyView(P1000_Example()),
platformType: .both),
...
]
}
}
3. 단계 : FabulaPlus 앱을 빌드하여 문제가 없는지 테스트합니다.
대부분의 테스트는 실시간 미리보기 창에서 확인할 수 있지만 빌드를 통해서 오류는 없는지, Dark/Light 모드에서 컬러 이슈는 없는지 최종적으로 확인합니다. (참고로 실시간 미리보기를 통해서 확인하려면 Xcode 상의 스키마 타겟을 FabulaItemsProvider 패키지로 해야합니다. FabulaPlus 앱을 스키마 타겟으로 지정하면 미리보기로 확인할 수 없으니 참고 바랍니다.)
4. 단계 : GitHub에 커밋하고 PR(Pull Request)합니다.
최종 빌드 테스트 진행하고 문제가 없으면 코드를 커밋하고 Pull Request를 진행합니다.
5. 단계 : 이슈가 없으면 Merge 후, 앱스토어 배포를 진행합니다.
PR(Pull Request) 결과물을 확인 후 최종적으로 FabulaItemsProvider 패키지에 병합할지 검토합니다. 기여자의 코드는 오류 또는 기존 코드와 충돌만 없으면 병합 후 앱스토어 배포 단계로 진입하게 됩니다.
Fabula 프로젝트에서 사용하는 컬러
Fabula 프로젝트에서는 Dark/Light 모드를 지원합니다. 컬러 테마를 감안하여 위 컬러 사용을 권장합니다.
마무리
Fabula 앱은 기여자의 결과물을 앱스토어를 통해서 쉽게 공유하고 소통할 수 있도록 도와주는 컨테이너입니다. 위에서 언급한 최소한의 규칙만 따르면 SwiftUI를 학습하고 활용하는데 도움이 되는 어떤 것이든 앱스토어에 배포하고 소통할 수 있습니다.
다음 편에서는 Fabula 앱의 진행 과정과 통계 데이터를 정리해 보겠습니다.