[ios] Hex to RGB

[ios] Hex to RGB

안녕하세요. 프로젝트를 진행하다 보면 모든 뷰의 색을 인터페이스 빌더에만 의존하여 지정해주기는 불편한 감이 없지 않아 있습니다. 그래서 저는 평소에 프로젝트의 테마 색이라고 해서 Extension을 만들어서 사용했는데요. 하지만 제가 사용했던 방법도 마냥 편하지는 않아서 보다 편한 방법을 찾아보다가 알고 이해한 방법이 있어 이렇게 소개해드리려 합니다.

그럼 바로 시작해보도록 하겠습니다.

---

Hexadecimal & RGB

색은 크게 이 두 가지로 표현할 수 있습니다. 물론 다른 방법들도 존재합니다. 하지만 오늘은 이 두 가지에 대해서만 다루도록 하겠습니다. 이 두 표현법은 서로 변환될 수 있으며 한 가지만 알면 다른 하나도 알 수 잇습니다.

RGB

먼저 이해하기 쉬운 RGB부터 다뤄보도록 하겠습니다. RGB는 Red, Green, Blue의 약자로 이 세 가지의 색상을 이용하여 색을 표현하는 방법입니다.

• RGB(255, 0, 0) : Red
• RGB(0, 255, 0) : Green
• RGB(0, 0, 255) : Blue

이렇게 값을 조절해가며 서로의 색을 섞을 수 있습니다. 그리고 이를 3 byte, 총 24 bit의 2진수로 표현하고 이를 16진수로 변환한 값이 Hexa 값이 되는 것입니다.

R,G,B 각각은 1 byte를 차지하며 1 byte는 8bit이므로 RGB(255, 0, 0)을 24비트짜리 2진수와 16진수로 표현한다면 다음과 같습니다.

그럼 다음의 색상을 변환해보도록 하겠습니다.

---

Implemantation

이제 본격적으로 코드로 구현해보도록 하겠습니다. 위의 예제는 RGB 값을 Hexa 값으로 바꾸었다면 이의 반대는 코드로 구현해보도록 하겠습니다.

Swift에서 16진수는 0x를 붙여서 표현합니다.

처음보는 연산자가 많으시죠? 하나씩 설명해드리도록 하겠습니다. 위에 사용된 연산자는 두 가지인데요.

1. & : AND 연산자
2. >> : Right Shift 연산자

AND 연산자란 비교하는 비트가 서로 같으면서 1이면 결과 값이 1이고 나머지는 모두 0을 결과로 돌려주는 연산자입니다.

위의 코드를 예로 들어 이 두 연산자를 이용해서 R 값을 도출해보도록 하겠습니다.

• 먼저 인자로 들어오는 hex값은 0x2345ab로 16진수입니다. 이를 16진수 0xff0000과 AND 연산을 하면 다음과 같습니다.

0x2e34ab = 001011100011010010101011
oxff0000 = 111111110000000000000000 (AND)

result = 001011100000000000000000

• 그리고 우축으로 16번 Shift 연산을 진행합니다. 이렇게 Shift 연산을 진행하면 원하는 값을 제외한 부분은 모두 떨어지며 원하는 값에 접근할 수 있습니다.

001011100000000000000000 -> 00101110
00101110 = 46

그리고 위의 원리를 이용하여 UIColor의 Extension을 구현해보았습니다.

---

마무리

오늘은 이렇게 코드로 보다 편하게 색상을 만드는 법에 대해 알아보았습니다. 실제 변환 코드는 몇 줄 되지 않지만 안에는 생각보다 많은 원리가 숨겨져 있었습니다. 그리고 위의 코드는 이제 어느 프로젝트에서도 편하게 사용할 수 있을 것 같습니다. 감사합니다.