패키지 레이어 구조

디자인 시스템 구조도

커피팩토리 1.0.0의 목표로 하는 디자인 시스템 구조도다. 아토믹 디자인의 설계방식을 적용하여, 하위모듈을 확장하여 상위 모듈을 만든다.

현재 진행상황은 다음과 같다.

CoffeeFactory

    Composable: X
    System: X
    Core
        - Label: [figma: O, swift: O]
        - Button: [figma: O, swift: O]
        - Image
            - Icon: [figma: O, swift: O]
            - Asset: [figma: X, swift: X]
        - TextField: X
        - Control: X
    Foundation
        - Font: [figma: O, swift: O]
        - Color: [figma: O, swift: O]
        - Layout
            - Spacing: [figma: O, swift: O]
            - Radius: [figma: O, swift: O]
            - Frame: [figma: O, swift: O]
            - AspectRatio: [figma: O, swift: X]
        - Motion: X
        - Elevation: X
        - Utils: X

진행 속도는 여타 작업에 우선순위가 밀려 더딘 편이지만, 24년 3분기 중 Core Component 작성 완료를 목표로 하고 있다.

위 화면은 피그마로 작성 중인 커피팩토리의 파운데이션이며, 피그마 링크를 통해 진행 중인 상황을 확인할 수 있다.

• coffee-factory-swift

위 링크는 커피팩토리 스위프트의 레포지토리며, 진행 중인 상황 및 스위프트 패키지 형태로 개발되어 사용해볼 수 있다.(아직 쓸만하진 않지만)

사용방법

// 1. module import
import CoffeeFactorySwift

struct MyView: View {
    var body: some View {
        VStack {
            // 2. use Component
            CFButton(label: "MyButton", size: .xlarge, type: .block) {
                print("Hello CoffeeFactory")
            }
            // 3. use Modifier
            Text("Welcome")
                .pretendard(.largeTitle, weight: .bold)
        }
    }
}

---