[Swift] 사용자 컬러셋 추가하고 UI Color 확장하여 코드로 접근하게 만들기

 

 

앱 스타일에 따라 전반적으로 반복되어 사용하는 컬러를 Assets에 추가하면, 인터페이스 빌더에 색상이 추가되어 인터페이스를 구성할 시에 간편하게 색을 추가하고 관리할 수 있습니다. 게시글에서는 색상을 Assets 에 추가하고, 인터페이스 빌더로 사용해보며, UIColor를 extension 확장하여 코드 영역으로도 접근할 수 있도록 하는 방법을 다룹니다. 

 

 

Assets/ 에 추가하기 

Xcode 좌측에 있는 Project Navigater에서 Assets.xcassets 에 들어간 후 폴더 Colors 를 만들어줍니다. 해당 폴더 안에 마우스 오른쪽 버튼을 눌러 [New Color Set]을 눌러줍니다.

 

원하는 컬러의 이름을 지정하면  아래와 같이 컬러칩이 뜹니다. 해당 컬러셋의 Attribute Inspector 영역에서 인풋 방법을 선택하여 색상을 입력해줍니다. 여기서 Any Appearance, Dark 두개가 뜨는데, Dark 색상을 따로 지정할 경우, 라이트모드에서 보이는 해당 색깔 영역이 지정한 색상으로 보이니, 다크모드가 따로 디자인 되어있다면 해당 부분을 참고하여 컬러칩을 지정하는 것이 좋겠습니다.

 

만약, 다크모드를 따로 만들지 않거나 색상이 동일하다면, 두개의 컬러칩을 아래와 같이 [Shift]키를 눌럳 동시 선택한 후 색상을 지정하면 됩니다.

 

여기서 8-bit (0~255)모드의 경우, 각 RGB값을 0~255값 내외로 지정하는 방식이며, 8-bit Hexadecimal은 16진수 형태의 색상 표기법을 의미합니다. 

8비트 16진수 방식의 색상표기법

여기서 가장 하단에 있는  [Show Color Panel]을 선택하여 직접 색상표를 눈으로 보고 선택할 수 있습니다. 

원하는 Color Set을 폴더 안에 정리해두면 아래와 같이,  해당 폴더안에서 Color Sets을 한 눈에 볼 수 있습니다. 

 

인터페이스 빌더에서 직접 추가한 색상을 사용하기

예를 들어, UILabel의 색상을 변경하고자 한다면 해당 레이블을 클릭 후 Attribute Inspector에서 Tint 탭을 누르면 Named Colors 아래에 아까 직접 지정한 색상들을 확인할 수 있습니다. 클릭해서 지정해주면 됩니다. 여기서 iPhone SDK 컬러는 시스템에서 기본적으로 제공해주는 컬러셋입니다.

 

 

 

 

코드 영역에서 색상 접근하기

만약 코드 영역에서 버튼, 레이블 등의 색상을 지정하고 싶다면 UIColor의 named 를 통해 지정해둔 색상명을 문자열로 전달해주면 됩니다. 

self.myButton.backgroundColor = UIColor(named: "kakaotalkColor")

  

만약 UIColor의 멤버변수로 extension 확장하여 선언하였다면 아래와 같이 코드에서  사용할 수 있습니다.

self.myButton.backgroundColor = UIColor.kakaotalkColor
// 또는 아래처럼 쓸 수 있다.
self.myButton.backgroundColor = .kakaotalkColor

 

해당 프로젝트 폴더 내의 UIColor+Extension이라는 이름으로 따로 Swift 파일을 만들어서 아래처럼 코드를 선언해두면 위와 같이 사용할 수 있습니다.

// UIColor+Extension.swift

// 1. 만약 Assets 폴더에 컬러셋을 지정하였다면
extension UIColor {
    static let myCustomColor = UIColor(named: "myCustomColor")
}

// 2. 코드로만 색상을 추가할 경우
// 2-1. Floating point로 색상 지정
extension UIColor {
    static let myCustomColor = UIColor(
    	red: 0.776,
        green: 0.812,
        blue: 0.334
        alpha: 1.0
    )
}

// 2-2. 8-bit Hexadecimal 로 색상 지정
// 알파값이 없을 경우 0x이하 두자리를 빼도 된다. 
extension UIColor {
    static let myCustomColor = UIColor(
    	argb: 0xFFFFFFFF
    )
}

 

 

참고링크

https://developer.apple.com/documentation/uikit/uicolor

Apple Developer Documentation

Type 'UIColor?' has no member ".myCustomColor" Swift 5.0

 

How to use hex color values

---

마치며 

 

오늘도 읽어주셔서 감사합니다.

 

궁금한 점이 있다면 댓글로, 도움이 되셨다면 공감 부탁드립니다.

혹시 수정하거나 피드백하실  내용 있다면 언제든 댓글로 부탁드립니다.

 

감사합니다.