๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
๐Ÿ’ป Programming ๊ฐœ๋ฐœ/๐ŸŽ iOS ๊ฐœ๋ฐœ, Swift

[Swift] ์‚ฌ์šฉ์ž ์ปฌ๋Ÿฌ์…‹ ์ถ”๊ฐ€ํ•˜๊ณ  UI Color ํ™•์žฅํ•˜์—ฌ ์ฝ”๋“œ๋กœ ์ ‘๊ทผํ•˜๊ฒŒ ๋งŒ๋“ค๊ธฐ

by kimdee 2022. 4. 4.
๋ฐ˜์‘ํ˜•

 

 

์•ฑ ์Šคํƒ€์ผ์— ๋”ฐ๋ผ ์ „๋ฐ˜์ ์œผ๋กœ ๋ฐ˜๋ณต๋˜์–ด ์‚ฌ์šฉํ•˜๋Š” ์ปฌ๋Ÿฌ๋ฅผ 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

 

developer.apple.com

 

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

I have all my colors in a dedicated color asset. This allows me to define named constants that supports "Any Appearance" and "Dark Appearance". Existing color assets works (previously defined), but...

stackoverflow.com

 

 

How to use hex color values

I am trying to use hex color values in Swift, instead of the few standard ones that UIColor allows you to use, but I have no idea how to do it. Example: how would I use #ffffff as a color?

stackoverflow.com


๋งˆ์น˜๋ฉฐ 

 

์˜ค๋Š˜๋„ ์ฝ์–ด์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

 

๊ถ๊ธˆํ•œ ์ ์ด ์žˆ๋‹ค๋ฉด ๋Œ“๊ธ€๋กœ, ๋„์›€์ด ๋˜์…จ๋‹ค๋ฉด ๊ณต๊ฐ ๋ถ€ํƒ๋“œ๋ฆฝ๋‹ˆ๋‹ค.

ํ˜น์‹œ ์ˆ˜์ •ํ•˜๊ฑฐ๋‚˜ ํ”ผ๋“œ๋ฐฑํ•˜์‹ค  ๋‚ด์šฉ ์žˆ๋‹ค๋ฉด ์–ธ์ œ๋“  ๋Œ“๊ธ€๋กœ ๋ถ€ํƒ๋“œ๋ฆฝ๋‹ˆ๋‹ค.

 

๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

 

 

๋ฐ˜์‘ํ˜•

'๐Ÿ’ป Programming ๊ฐœ๋ฐœ > ๐ŸŽ iOS ๊ฐœ๋ฐœ, Swift' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

[Swift][๋ฒˆ์—ญ] ์Šค์œ„ํ”„ํŠธ์˜ ์ž๋ฃŒ๊ตฌ์กฐ์™€ ์•Œ๊ณ ๋ฆฌ์ฆ˜ - ์„น์…˜ 1. ์†Œ๊ฐœ - ์ฑ•ํ„ฐ1. ์™œ ์ž๋ฃŒ๊ตฌ์กฐ์™€ ์•Œ๊ณ ๋ฆฌ์ฆ˜์„ ๋ฐฐ์›Œ์•ผํ• ๊นŒ์š”? ์ฑ•ํ„ฐ2. ๋ณต์žก๋„  (0) 2022.05.13
[Swift][๋ฒˆ์—ญ] ์Šค์œ„ํ”„ํŠธ์˜ ์ž๋ฃŒ๊ตฌ์กฐ์™€ ์•Œ๊ณ ๋ฆฌ์ฆ˜ - ์„น์…˜ 0. ์‹œ์ž‘ํ•˜๊ธฐ ์ „์—  (1) 2022.05.13
[Swift] ์™ธ๋ถ€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์ด์šฉํ•˜๊ธฐ ์œ„ํ•œ Cocoapods ์„ค์น˜ ๋ฐ ์„ค์ • + ์„ค์น˜๊ณผ์ •์— ์˜ค๋ฅ˜๊ฐ€ ์ƒ๊ธธ ๊ฒฝ์šฐ  (0) 2022.03.28
[Swift]๋‹ค์–‘ํ•œ ๋””๋ฐ”์ด์Šค์— ๋งž์ถฐ ์…€ ์‚ฌ์ด์ฆˆ๋ฅผ ์กฐ์ •ํ•˜๊ณ ์ž ํ•  ๋•Œ + ์‚ฌ์ด์ฆˆ๊ฐ€ ์•ˆ ๋ฐ”๋€Œ์—ˆ์„ ๋•Œ ํ•ด๊ฒฐ๋ฐฉ๋ฒ• (CollectionViewDelegateFlowLayout ํ”„๋กœํ† ์ฝœ)  (0) 2022.03.17
[Swift] ํ๋ฆ„์ œ์–ด๊ตฌ๋ฌธ  (0) 2022.01.18

๋Œ“๊ธ€