Skip to content

SwiftUI 폰트 extension 구현#2

Merged
WhiteHyun merged 7 commits intodevelopfrom
feature/font-component
Sep 3, 2024
Merged

SwiftUI 폰트 extension 구현#2
WhiteHyun merged 7 commits intodevelopfrom
feature/font-component

Conversation

@WhiteHyun
Copy link
Copy Markdown
Contributor

@WhiteHyun WhiteHyun commented Sep 3, 2024

Figma Library에 맞게 폰트를 구현했습니다.

사용법

SwiftUI에 제공되는 font 메서드와 동일하게 가져갔습니다.
(새로운 modifier보다 익숙하고 명확한 font 메서드가 낫다고 판단했습니다)

struct ContentView: View {
  var body: some View {
    VStack {
      Text("This is subheading1 font")
        .font(.subheading1(.bold)) // SubHeading1 크기에 굵기는 bold인 폰트
      Text("This is body Font")
        .font(.body1(.medium)) // body1 크기에 굵기는 medium인 폰트
      Text("This is caption1 Font")
        .font(.caption1(.regular(10))) // caption1, 굵기는 regular, 크기는 10인 폰트
      Text("This is Custom pretendard Font")
        .font(.pretendard(.black, size: 20)) // Pretendard-Black 굵기에 �크기는 20인 폰트
    }
  }
}

구현된 폰트는 다음과 같습니다.

public enum BoostFont {

  case heading1(Weight)
  case heading2(Weight)
  case heading3(Weight)

  case subheading1(Weight)
  case subheading2(Weight)

  case body1(Weight)
  case body2(Weight)

  case caption1(WeightWithSize)

  // custom용
  case pretendard(_ name: Pretendard, size: CGFloat)

  public enum Weight {
    case bold
    case medium
    case regular
  }

  public enum WeightWithSize {
    case bold(CGFloat)
    case medium(CGFloat)
    case regular(CGFloat)
  }
}

고민했던 점

  1. figma 라이브러리의caption1의 경우, 두 가의 Font Size(12, 10)를 갖고 있어서 .font(.caption1(.bold(12)))과 같이 굵기 다음에 사이즈를 제시해주어야 합니다.
    • 두 값을 개발자가 직접 제공하는 것보다 enum으로 두 케이스를 만들어 할당해줄까도 고려해봤지만, 단순 숫자표기의 네이밍을 여러분과 함께 고민해봐야할 것 같아 보류했습니다.
      • e.g. _10, _12 또는 size10, size12, ... 등
  2. 혹여나 Font library로 등록되지 않는 폰트를 쓰는 경우가 보일 때, custom하게 Pretendard 폰트를 적용할 수 있도록 pretendard(_:size:)를 넣었습니다.
    • 원래는 이름을 custom으로 시스템에서 제공하는 Font메서드처럼 해결하려 했는데, 자동완성에서 불편함을 보여 .custom -> .pretendard로 수정했습니다.

⚠️ 사용시 주의해야할 점

해당 SPM을 추가하시고나서 FontRegistrar.registerFonts()를 실행해주셔야 합니다. 마치 Firebase의 configure()메서드 처럼요.
그 이유는, 앱에서 info.plist에 폰트를 적용했던 것처럼, SPM에서도 이와 비슷한 작업을 해주어야하는데요. 그 코드가 FontRegistrar 내부 메서드로 감싸져 있습니다. :)

@WhiteHyun WhiteHyun self-assigned this Sep 3, 2024
@WhiteHyun WhiteHyun requested review from a team and removed request for a team September 3, 2024 08:41
@jeongju9216
Copy link
Copy Markdown

jeongju9216 commented Sep 3, 2024

font size는 기본값을 제공하고, 특별한 경우 변화가 필요할 때 사용할 수 있는 모디파이어를 추가하는건 어떨까요? 🤔
weight과 size를 직접 입력하면 시스템 폰트와 큰 차이점이 없는거 같아서 의견 드립니다

@WhiteHyun
Copy link
Copy Markdown
Contributor Author

font size는 기본값을 제공하고, 특별한 경우 변화가 필요할 때 사용할 수 있는 모디파이어를 추가하는건 어떨까요? 🤔 weight과 size를 직접 입력하면 시스템 폰트와 큰 차이점이 없는거 같아서 의견 드립니다

pretendard와 caption1을 제외하고는 전부 라이브러리에 맞게 모든 사이즈들이 등록되어있습니다!(링크 참고)

Comment thread BoostDesignSystem/Sources/BoostDesignSystem/Sources/Fonts/FontRegistrar.swift Outdated
@WhiteHyun WhiteHyun merged commit 1e0b52a into develop Sep 3, 2024
@WhiteHyun WhiteHyun deleted the feature/font-component branch September 3, 2024 11:07
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants