[iOS/Swift] 색상 정의하고 관리하기 Assets, Enum, Extension

[iOS/Swift] Xcode 15 신기능 Assets 바로 사용하기 이미지, 색상 정의 (tistory.com)

[iOS/Swift] Xcode 15 신기능 Assets 바로 사용하기 이미지, 색상 정의

 

Xcode 15 이상 버전을 사용하시는 분들은 최신 기능을 사용해보세요. 위에 글에서 정리되어있습니다.!!

기존에 방법이 궁금하신 분들은 아래 내용을 끝가지 읽어주세요.!!

 

---

 앱 개발을 하다 보면 색상을 매번 적용할 수 없기 때문에 정의를 해서 사용하는 게 좋습니다. 제일 기본적인 방법으로는 다양하게 있습니다. 코드로 할 수 있고, Asset을 통해서도 가능합니다. 한 번씩 알아보겠습니다.

 

Assets, Enum, Extension 3가지를 알아보자

 

Assets

 프로젝트를 생성하면 Assets.xcassets가 존재합니다. 여기서 Color를 설정할 수 있는데요. 위 사진과 같이 라이트 모드와 다크모드를 구별해서 설정할 수 있습니다.

 

 설정을 원하는 애셋을 선택하고 우측 메뉴에서 색을 설정하거나, "Show Color Panel"을 통해서 색상을 다양한 방법으로 설정할 수 있습니다.

 

Show Color Panel이 지원하는 방식입니다. 

 

view.backgroundColor = UIColor(named: "lineColor")

 애셋을 설정하고 코드로 이름을 사용해 불러오면 색상을 바로 사용할 수 있습니다. 하지만 이렇게 사용할 경우 매번 색 이름을 보고 있어야 한다는 불편함이 존재합니다. 휴먼 에러를 발생시킬 수 있다는 단점도 있습니다.

 

 하지만 색상 관리는 정말 편리합니다. 다크모드를 적용해야 하는 경우도 Xcode만 믿으면 되니 정말 편리합니다.

 

Enum

// Color enum 정의
enum CustomColor {
    case customRed
    case customGreen
    case customBlue
    case customGray

    // UIColor 프로퍼티를 사용하여 각 색상을 반환
    var uiColor: UIColor {
        switch self {
        case .customRed:
            return UIColor(red: 0.3098, green: 0.0, blue: 0.0, alpha: 1.0)
        case .customGreen:
            return UIColor(red: 0.0, green: 0.3098, blue: 0.0, alpha: 1.0)
        case .customBlue:
            return UIColor(red: 0.0, green: 0.0, blue: 0.3098, alpha: 1.0)
        case .customGray:
            return UIColor(red: 0.3098, green: 0.3098, blue: 0.3098, alpha: 1.0)
        }
    }
}

// 사용 예제
let redColor = CustomColor.customRed.uiColor
let greenColor = CustomColor.customGreen.uiColor
let blueColor = CustomColor.customBlue.uiColor
let grayColor = CustomColor.customGray.uiColor

 Enum을 통해서 색상을 정의하고 사용할 수 있는데요. 이렇게 하면 색상 이름이 자동 완성되기 때문에 사용하기에 좋은 방법 같습니다. 정의만 해둔다면 사용법이랄 게 없을 정도로 색을 선택하기가 편리해집니다. ㄷ

 

 하지만 단점은 정의된 색상을 변경하는 게 많이 불편하다는 점입니다. 코드로 색상을 변환해야 하니 여기서도 휴먼 에러는 생길 수 있습니다. 다크모드를 적용한다면 색상이 두배로 드러나니 보다 보면 눈이 빠질 수도 있습니다.

 

 

Extension

 우리는 위에서 두 가지 방법을 알아보았는데요. 각각 장단점이 존재합니다. 그래서 제가 생각하는 가장 좋은 방법은 애셋과 코드를 합치는 것입니다. 

extension UIColor {
    // ColorSet
    class var lineColor: UIColor? { return UIColor(named: "lineColor") }
}

 extension을 통하여 우리는 UIColor를 확장하고 우리가 Assets에서 정의한 색상을 추가해 줍니다. 

 

view.backgroundColor = .lineColor

 사용을 원하는 곳에서도 정말 편리해집니다. 

 

 이 방법을 통하면 색상 변경은 애셋을 통해서 관리하고, extension을 통하여 휴먼 에러를 많이 줄일 수 있어집니다.

 

 

더 좋은 방법이 있다면 같이 공유해 주시면 감사하겠습니다.

 

 

 

 

 

[iOS - swift] ColorSet 세팅하여 편리하게 사용하는 방법 (RGB, custom color) (tistory.com)

[iOS - swift] ColorSet 세팅하여 편리하게 사용하는 방법 (RGB, custom color)