thumbnail

<img alt="pasteImage.png" pathname="KRA4M8190223210529.PNG" src="https://static.podo-dev.com/blogs/images/2019/07/10/origin/KRA4M8190223210529.PNG" style="width:400px" title="pasteImage.png"/>

<br/>

혹시 디자이너님 중에서 이런 생각을 가지고 있으신 분들이 있을 수 있습니다.

왜 색을 #FAFDEF 같은 식으로 표현을 할까요..?

<br/>

그래서 컴퓨터 관점에서 재밌게 써보려고합니다..

재미없을 수도 있지만요..

<br/>

우선 컴퓨터는 2진수를 좋아합니다.

2진수는 0과 1로 이루어진 수 입니다.

<br/>

왜 컴퓨터는 이진수를 좋아할까요?

컴퓨터도 역시나 전자제품이고, 내부적으로는 전기가 통한다(1), 전기가 통하지 않는다(0) 으로 주고 받습니다.

<br/>

그래서 통한다 1과 안통한다 0으로 구분하기에 2진수를 좋아합니다

<br/>

그럼

<br/>

<span style="color:null"><span style="font-size:24px"><span style="background-color:#dddddd">_

<br/>

<span style="font-size:14px">이 한칸에는 2진수로 어떤게 들어갈수 있을까요?

<span style="font-size:14px">0

<span style="font-size:14px">1

<span style="font-size:14px">두가지가 들어 갈 수 있습니다.

<span style="font-size:14px">색으로 표현하면 하얀색/검은색을 표현 할 수 있습니다.

<br/>

<span style="font-size:14px">그럼

<br/>

<span style="color:null"><span style="font-size:24px"><span style="background-color:#dddddd"><span style="background-color:null"> <span style="background-color:#dddddd">

이 두칸은 어떨까요

00 01 10 11 총 4가지를 표현할 수 있습니다.

<br/>

그럼 3칸일때는?

000 001 010 011 100 101 110 111 총 8가지를 표현 할 수 있습니다.. 즉 2 x 2 x 2 입니다.

<br/>

이 계산으로, 4칸 일때는 2 x 2 x 2 x 2 = 16가지를

5 칸일땐 32 가지를

6 칸일땐 64 가지를 표현 할 수 있습니다.

<br/>

그리고 그 1칸을 컴퓨터는 비트라고 표현합니다.

1칸이면 1비트, 2칸이면 2비트 8칸이면 8비트입니다.

<br/>

정리하면 1비트는 2가지를

2비트일땐 4가지를 3비트일때는 8가지를 ~~~8비트일때는 2를 8번 곱한 256가지를 표현 할 수 있습니다.

<br/>

색은 빨간색, 초록색, 파란색으로 이루어집니다.

그리고 그것을 RGB (Red, Green, Blue)라고 합니다.

<br/>

RGB는 24비트의 공간을 가집니다.

R에 8비트, G에 8비트, B에 8비트에 사용하여 총 24비트, 24칸을 사용합니다.

즉 R은 8칸을 쓰고있고, 2를 8번 곱한 256 강도의 빨간색을 표현할 수 있습니다.

이렇게 G도 256 강도의 초록색, B도 256 강도의 파란색을 표현할 수 있는 것이지요.

각 색의 강도에 따른 RGB의 조합으로 16만개의 색을 컴퓨터는 표현 할 수 있습니다.

<br/>

근데 왜 RGB는 24비트일까요?

컴퓨터도 처음에는 색표현에 1비트를 사용했습니다. 그래서 흑/백 2가지색밖에 표현할 수 없었습니다.

그러나 기술이 발전함에 따라 사용할 수 있는 칸이 계속 증가했습니다. 그래서 점점 다양한 색을 표현하도록 하였습니다.

하지만 32비트 RGBA 이상으로는 늘리지 않습니다. (<em>RGBA는 RGB에 더하여 A 투명도 (8비트) 를 추가한것입니다.)</em>

왜냐하면 인간의 눈으로 보기에는 차이가 없기 때문이죠. 그 이상의 색표현은 컴퓨터자원을 낭비하는 것이라고 생각하기 때문입니다.

<br/>

그럼 RGB는 24칸을 가지고 있고, 그것을 풀어보면 다음과 같습니다

각 색 별로 8비트씩 가지고 있습니다.

<br/>

<span style="font-size:18px"><span style="background-color:#dddddd">_ _ _ _ _ _ _ <span style="font-size:18px"><span style="background-color:#dddddd">_ _ _ _ _ _ _ <span style="font-size:18px"><span style="background-color:#dddddd">_ _ _ _ _ _ _ 가 16만가지중 하나의 색을 표현 합니다.

<br/>

예를들어,

<span style="font-size:18px"><span style="background-color:#dddddd">0 0 0 0 0 0 0 0 <span style="background-color:#dddddd">0 0 0 0 0 0 0 0 <span style="background-color:#dddddd">0 0 0 0 0 0 0 0 는 RGB가 모두 0이니 검은색을 표현합니다.

<span style="font-size:18px"><span style="background-color:#dddddd">1 1 1 1 1 1 1 1 <span style="background-color:#dddddd"> 1 1 1 1 1 1 1 1 <span style="background-color:#dddddd"> 1 1 1 1 1 1 1 1 은 RGB가 모두 꽉차있으니 하얀색을 표현합니다.

<br/>

그런데 색의 표현방법으로 사람이 2진수를 쓰기에는 너무 복잡하고 까다롭습니다.

따라서 이것을 이렇게 8칸씩이 아니라 4 칸씩 잘라서 보도록 하겠습니다.

<span style="font-size:18px"><span style="background-color:#dddddd">1 1 1 1 <span style="background-color:#dddddd; font-size:18px">1 1 1 1<span style="font-size:18px"> <span style="background-color:#dddddd; font-size:18px">1 1 1 1<span style="background-color:#ffffff"> <span style="font-size:18px"><span style="background-color:#dddddd">1 1 1 1 <span style="background-color:#dddddd">1 1 1 1 <span style="font-size:18px"><span style="background-color:#dddddd">1 1 1 1

<br/>

4칸씩 나누어서 보니, 한 묶음은 2를 4번 곱한 16가지가 올 수 있겠네요.

4칸을 그럼 한칸으로 바꾸는 방법이 없을까요? 해결책으로 16진수를 사용합니다.

여기서 16진수에 대해서 알아야합니다. 컴퓨터는 2진수도 좋아하지만 2의 배수의 진수도 좋아합니다.

<br/>

우리가 사용하는 10진수는 1칸을 0~9 로 표현합니다.

16 진수는 1칸으로 0~15 까지를 표현합니다. 근데 10 넘어가면 한칸이 넘어가니 그때부터는 알파벳을 씁니다.

따라서 0 1 2 3 4 5 6 7 8 9 A B C D E F 를 사용합니다 A는 10, B는 11 ~~~ F는 15를 뜻합니다.

<br/>

위에서 본 하얀색을 4칸식 짤라서 다시 봅니다.

<span style="font-size:18px"><span style="background-color:#dddddd">1 1 1 1 <span style="background-color:#dddddd; font-size:18px">1 1 1 1<span style="font-size:18px"> <span style="background-color:#dddddd; font-size:18px">1 1 1 1<span style="background-color:#ffffff"> <span style="font-size:18px"><span style="background-color:#dddddd">1 1 1 1 <span style="background-color:#dddddd">1 1 1 1 <span style="font-size:18px"><span style="background-color:#dddddd">1 1 1 1

<br/>

묶음 <span style="background-color:#dddddd; font-size:18px">1111 은 2진수입니다. 이를 10 진수로 전환하면 15입니다.

그리고 그것을 16진수로 전환하면 <span style="font-size:18px"><span style="background-color:#f1c40f">F가 됩니다.

따라서 <span style="background-color:#dddddd; font-size:18px">1111은 <span style="font-size:18px"><span style="background-color:#f1c40f">F로 표현 할 수 있습니다.

<br/>

<span style="font-size:18px"><span style="background-color:#dddddd">1 1 1 1 <span style="background-color:#dddddd; font-size:18px">1 1 1 1<span style="font-size:18px"> <span style="background-color:#dddddd; font-size:18px">1 1 1 1<span style="background-color:#ffffff"> <span style="font-size:18px"><span style="background-color:#dddddd">1 1 1 1 <span style="background-color:#dddddd">1 1 1 1 <span style="font-size:18px"><span style="background-color:#dddddd">1 1 1 1 은 결국 <span style="font-size:18px"><span style="background-color:#f1c40f">F <span style="font-size:18px"><span style="background-color:#f1c40f">F <span style="font-size:18px"><span style="background-color:#f1c40f">F <span style="font-size:18px"><span style="background-color:#f1c40f">F <span style="font-size:18px"><span style="background-color:#f1c40f">F <span style="font-size:18px"><span style="background-color:#f1c40f">F 입니다.

그리고 모든 빨간색, 초록색 파란색이 꽉차있는 것을 말합니다. 즉 하얀색입니다.

<br/>

포토샵을 보면, 다음과 같이 FFFFFF가 하얀색임을 확인 할 수 있습니다.

<img alt="pasteImage.png" pathname="A4O1OR190223213718.PNG" src="https://static.podo-dev.com/blogs/images/2019/07/10/origin/A4O1OR190223213718.PNG" style="border-style:solid; border-width:1px; width:253px" title="pasteImage.png"/>

<br/>

그럼

<span style="font-size:18px"><span style="background-color:#dddddd">0 0 0 0 <span style="background-color:#dddddd; font-size:18px">0 0 0 0<span style="font-size:18px"> <span style="background-color:#dddddd; font-size:18px">0 0 0 0<span style="background-color:#ffffff"> <span style="font-size:18px"><span style="background-color:#dddddd">0 0 0 0 <span style="background-color:#dddddd">0 0 0 0 <span style="font-size:18px"><span style="background-color:#dddddd">0 0 0 0 을 볼까요?

<br/>

묶음 <span style="font-size:18px"><span style="background-color:#dddddd">0 0 0 0 은 2진수입니다. 이를 10 진수로 전환하면 0입니다.

그리고 그것을 16진수로 전환하면 <span style="font-size:18px"><span style="background-color:#f1c40f">0가 됩니다. 따라서 <span style="font-size:18px"><span style="background-color:#dddddd">0 0 0 0은 <span style="font-size:18px"><span style="background-color:#f1c40f">0으로 표현 할 수 있습니다.

결국 <span style="font-size:18px"><span style="background-color:#f1c40f">0 <span style="font-size:18px"><span style="background-color:#f1c40f">0 <span style="font-size:18px"><span style="background-color:#f1c40f">0 <span style="font-size:18px"><span style="background-color:#f1c40f">0 <span style="font-size:18px"><span style="background-color:#f1c40f">0 <span style="font-size:18px"><span style="background-color:#f1c40f">0 입니다. 또 모든 RGB 강도가 0이며 검은색입니다.

<br/>

포토샵을 보면, 다음과 같이 000000은 검은색임 확인 할 수 있습니다.

<img alt="pasteImage.png" pathname="L34TKS190223214008.PNG" src="https://static.podo-dev.com/blogs/images/2019/07/10/origin/L34TKS190223214008.PNG" style="border-style:solid; border-width:1px; width:253px" title="pasteImage.png"/>

<br/>

<br/>

이렇게 RGB 각 8비트의 색을

4비트씩 쪼개어, 각 4비트당 16가지를 표현합니다.

그리고 2진수가 아닌 16진수를 사용하여 표현하죠.

최종적으로는 #FAAB12 같은 16진수식으로 색 표현식을 사용하게 됩니다.

최대한 쉽게 말해보고자했는데,, 역시 표현이 쉽지가않네요..?

<br/>

그래도 누군가 이글을 보고 궁금증을 해결 할 수 있으면 좋겠습니다!

<br/>

<br/>

CommentCount 0
이전 댓글 보기
등록
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
TOP