[SwiftUI] 원하는 색상(color) 정의하여 사용하는 방법

[머릿말]

예전에 안드로이드 앱을 개발했을 때의 기억으로는 colors.xml 파일에 원하는 색상을 따로 정의하여 사용했던 것 같다. iOS 역시도 색상을 정의하여 사용하는 방법이 있을 것이라 생각하고 내용을 찾아보았고 2가지 방법을 정리하고자 한다.

---

1. Assets.xcassets 파일에서 New Color Set

첫 번째 방법은 Xcode 프로젝트를 생성하면 자동으로 만들어지는 Assets.xcassets 파일에서 Color Set을 추가하는 것이다.

좌: 하단의 + 버튼 클릭 후 Color Set 클릭 / 우: 빈 공간에서 우클릭 후 New Color Set 클릭

 

 

위 두 방법 중 한 가지를 선택하여 해보면 Color 라는 이름의 항목이 추가된다. 이 항목의 이름이 색상에 붙일 이름이 되는 것인데 이를 MyColor로 설정해보겠다.

 

 

Any Appearance를 선택하고 Xcode의 우측 상단 버튼을 눌러 Inspector를 열어보면 아래쪽에 색상을 고를 수 있는 부분이 있다. 바를 조절해도 되지만 정확하게 16진수 색상 코드를 사용하려면 Show Color Panel 버튼을 누르고 RGB Sliders를 선택한 뒤 아래 부분에 코드를 입력하면 된다.

 

 

색상 추가를 완료했으니 이제 색을 사용할 수 있다. "Color("색상 이름")"의 형태로 사용하면 된다.

import SwiftUI

struct ContentView: View {
    
    var body: some View {
        Text("첫 번째 방법")
            .font(.largeTitle)
            .fontWeight(.black)
            .foregroundStyle(Color("MyColor"))
    }
    
}

#Preview {
    ContentView()
}

 

2. Color+Extension 파일 생성

두 번째 방법은 Color Extension을 정의하는 것이다. 이를 위해 새로운 Swift 파일을 만들어서 Color Extension을 생성해야 하는데 파일 이름은 Color+Extension으로 정하고, extColor라는 이름의 프로퍼티에 핑크색을 설정해보았다.

 

 

이제 마찬가지로 색상을 사용할 수 있는데 이번에는 Extension을 사용했으므로 "Color.색상 이름" 형태로 사용하면 된다.

import SwiftUI

struct ContentView: View {
    
    var body: some View {
        Text("첫 번째 방법")
            .font(.largeTitle)
            .fontWeight(.black)
            .foregroundStyle(Color("MyColor"))
        
        Text("두 번째 방법")
            .font(.largeTitle)
            .fontWeight(.black)
            .foregroundStyle(Color.extColor)
    }
    
}

#Preview {
    ContentView()
}

---

이번에 하고 있는 프로젝트에서는 두 방법 중 Extension을 사용하는 방법을 선택하여 진행해보도록 해야겠다.

 

끝!