[Setting] #15 - DesignSystem 모듈 내 Font, Color, Image 세팅

[Guryss]

💡 Issue

• closed [Setting] Feature 구현에 필요한 DesignSystem 모듈 구축 #15

💭 Summary

DesignSystem 모듈 추가하여 Font 및 Color 에셋 추가했습니다.
Figma 디자인에 맞추어 폰트를 사용할 수 있도록 확장 함수 및 enum 적용했습니다.

🔑 Key Changes

기기별 폰트 사이즈 대응을 위한 확장함수 추가

현재 Figma 디자인은 iPhone 13 mini (375*812) 기준으로 만들어져 있어, 이보다 더욱 큰 화면을 가진 기기로 진행하게 되면 디자인이 어긋나는 경우가 있습니다. 이를 방지하고자, 아래 익스텐션에 변수들을 추가하였습니다.

extension CGFloat {
    var adjustedWidth: CGFloat {
        let ratio: CGFloat = UIScreen.main.bounds.width / 375
        return self * ratio
    }

    var adjustedHeight: CGFloat {
        let ratio: CGFloat = UIScreen.main.bounds.height / 812
        return self * ratio
    }
}

또한, 폰트 사이즈도 기기 사이즈에 맞게 자동으로 조절될 수 있도록 adjustedSize라는 변수를 추가하여 해당 변수값으로 폰트 사이즈가 지정되도록 하였습니다.

    private var adjustedSize: CGFloat {
        return defaultFontSize * WSSFontStyle.scaleRatio
    }
    
    func uiFontGuide() -> UIFont {
        switch self {
        default: return UIFont(name: self.fontName.name, size: self.adjustedSize)!
    }

📱 Simulation

🧑‍🧒‍🧒 To Reviewer

현재 컬러 및 이미지는 Tuist로 빌드 시 자동으로 생성해주는 Enum을 사용하고 있습니다.

.border(DesignSystemAsset.Colors.wssPrimary100.swiftUIColor)

DesignSystemAsset.Images.icBell.swiftUIImage // SwiftUI의 Image 컴포넌트 타입

가독성 및 간편화를 위해선 아무래도 Extension에 변수를 일일히 추가하는 방식밖엔 없어 보이긴 하는데 .. 굳이? 스럽기도 하구요.
현재 방향대로 진행하는 게 좋을지, 아니면 다른 좋은 방식이 있을지 의견이 궁금합니다!
(전 지금 방식도 좋다고 생각하긴 해요 ㅎㅅㅎ)

※ Reference

• 완전 참고!
  https://velog.io/@niro/iOS-SwiftUI-Figma-%EC%9D%98-Line-Height-%EB%A5%BC-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0-%EC%9C%84%ED%95%9C-Text-%ED%96%89%EA%B0%84-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0