[iOS] Custom UIColor 만들기

 

커스텀 UIColor 만들기

프로젝트를 진행하면서 default가 아닌 색을 반복적으로 사용할 일이 있었어요.

다음 카페 앱을 만드는데 다음 카페 색깔을 시스템 컬러처럼 등록해서 사용하고 싶었어요.

그 과정을 로깅해볼게요! :] 

참고: iOS version - 15.0
적용한 예시 PR

 

RGB 값 추출하기

우선 다음 카페로 들어가서 원하는 색깔이 있는 이미지를 찾았어요. 

아래 그림에서

cafe의 글자 색을 가져오고 싶었어요.

F12로 CSS를 봐야 하나 했는데 맥에는 훨씬 간편한 툴이 이미 있었어요!

 

디지털 컬러 측정기라는 맥 기본 앱이에요. 앱을 틀어서 원하는 곳에 커서를 대면 그 RGB 값이 추출돼요.

이제 필요한 RGB 값은 알게 되었어요!

 

 

Color Asset 만들기

우선 프로젝트의 Assets.xcassets에 들어가요

저의 경우 마우스 우클릭을 했는데, 그림 아래에 보이는 +버튼으로 해도 무방해요.

 

New Color Set을 선택해주면 새로운 색상이 추가돼요.

이제 설정을 해줄 거예요.

우선 색상은 다크 모드와 상관없이 항상 일정하게 만들 예정이라 Appearances를 "Any, Dark"에서 None으로 변경해줄게요.

그리고 가운데 사각형을 클릭하면 오른쪽 설정창에 RGB 설정이 나와요.

현재 기준은 Floating point로 소수점인데 저는 아까 찾은 정수 기준으로 설정할 것이라 8-bit로 설정을 변경할게요.

그리고 색상을 변경해주면

Daum Cafe에서 봤던 색상이 되었어요!

이제 코드에서 사용 가능하게 만들어볼게요.

 

 

UIColor에 등록하기

이제 아래 코드를 프로젝트 내에 아무 곳이나 등록하면 돼요.

import UIKit

extension UIColor {
  class var daumCafeColor: UIColor? {
    return UIColor(named: "daumCafeColor")
  }
}

저의 경우 Resources 폴더에 UIColor라는 Swift파일을 생성해 독립적으로 정의했어요.

위처럼 등록하면 이제 코드에서 기존. systemGray처럼 직접 접근해서 사용 가능해요.

아래는 예시예요.

let searchButton = UIButton().then {
    $0.setTitle("검색", for: .normal)
    $0.setTitleColor(.daumCafeColor, for: .normal)
  }