UIKit과 SwiftUI에서 HEX 색상 사용하기

일반적으로 디자이너는 색상을 HEX 코드로 제공하며, 이를 앱에서 사용하려면 적절히 변환해야 합니다. 하지만 기본적으로 UIColor와 Color는 HEX 코드를 직접 지원하지 않습니다.

이 글에서는 UIKit의 UIColor와 SwiftUI의 Color에서 HEX 코드를 사용할 수 있도록 커스텀 생성자를 구현하고 활용하는 방법을 소개합니다.

---

1. 왜 HEX 코드를 사용해야 할까?

HEX 코드는 HTML, CSS 등에서 널리 사용되며, 색상을 간결하게 표현할 수 있습니다. 예를 들어, #FF5733는 붉은색 계열의 색상을 의미합니다. 이는 디자이너와 개발자 간의 커뮤니케이션을 단순화하며, 코드의 가독성을 높이는 데에도 유용합니다.

하지만 UIKit과 SwiftUI에서는 기본적으로 HEX 코드를 지원하지 않기 때문에 커스텀 구현이 필요합니다.

---

2. UIKit: UIColor에 hex 생성자 추가하기

extension UIColor {
  
  public convenience init(hex: String, alpha: CGFloat = 1.0) {
    let scanner = Scanner(string: hex)
    
    var rgb: UInt64 = 0
    scanner.scanHexInt64(&rgb)
    
    let r = CGFloat((rgb & 0xff0000) >> 16) / 255.0
    let g = CGFloat((rgb & 0x00ff00) >> 8) / 255.0
    let b = CGFloat(rgb & 0x0000ff) / 255.0
    
    self.init(
      red: r,
      green: g,
      blue: b,
      alpha: alpha
    )
  }
}

---

3. SwiftUI: Color에 hex 생성자 추가하기

extension Color {
  init(hex: String) {
    let scanner = Scanner(string: hex)
    var rgb: UInt64 = 0
    scanner.scanHexInt64(&rgb)
    
    let r = (rgb & 0xff0000) >> 16
    let g = (rgb & 0xff00) >> 8
    let b = rgb & 0xff

    self.init(red: Double(r) / 0xff, green: Double(g) / 0xff, blue: Double(b) / 0xff)
    
  }
}

---

4. 사용하기

VStack {
  Color(hex: "6193FF")
  Color(uiColor: UIColor(hex:"6193FF"))
}

 

---

UIKit과 SwiftUI에서 HEX 값을 직접 사용할 수 있도록 커스텀 생성자를 구현하면, 디자이너와의 협업이 더 쉬워지고, 코드도 간결해집니다.

지금 소개한 코드를 프로젝트에 추가하고, HEX 코드를 활용한 효율적인 색상 관리를 시작해 보세요!