[안드로이드 디자인]안드로이드 컬러 알파(alpha)값(투명도) 계산기

예전 포스팅 댓글에서  [안드로이드 GUI 개발 가이드]에서 투명 컬러 값은 어떻게 줘야 하는가? 에 대해 잠시 언급한 적이 있다.
정확하게 기재하려면 2단계를 거쳐 계산해야 하는데, 이만저만 번거로운 것이 아니다.
그래서 만들었다. 

=

우선 개념부터 적어보자.
안드로이드 개발 시 사용하는 컬러코드는 대부분 RGB의 16진수 Hex값을 사용한다. 웹에서 많이 보는 #FFFFFF, #000000 이런 컬러 값말이다.

#RRGGBB

각 Red, Green, Blue의 0~255의 값을 16진수로 두자리씩 표기하며 약식으로는 한자리로 표시할 수 도 있다. (#FFF; > #RGB)
그럼 컬러의 투명 값은 어떻게 입력하는가?

#AARRGGBB

이와 같은 형태로 앞에 두자리의 16진수 값이 추가되고, 그것이 컬러 값의 투명도를 나타낸다.

그런데 무엇이 문제일까?
디자이너들은 투명도에 대한 값을 백분율(%) 값으로 작업하기 때문에 개발자에게 전달할 때 % 값으로 제공할 것이다. 그런데 #AARRGGBB값으로 입력할 때는 백분율 값으로 입력하지 않기 때문에 계산식으로 수치를 치환해야 하는 과정을 거쳐야한다.
Hex 값에서 투명도의 단계는 RGB컬러 값과 마찬가지로 0~255 값을 갖는다. 그러므로 먼저 0~100%의 값을 0~255 단계로 치환해야 한다.

백분율 투명도 값(1~99) x 2.55 = n(정수, 소수점은 반올림)

이렇게 0~255 단계 값으로 치환된 n 값을 16진수 값으로 치환하면 끝. 16진수는 간단하게 10진수 > 16진수 계산기를 사용하면 된다. 이렇게 백분율 값을 255 값으로 변경, 10진수 값을 255값으로 변경하는 두 과정을 거쳐야 하는데 이 과정을 디자이너나 개발자 누군가는 해야만 하는 과정이다. 

이 과정을 나는 윈도우 계산기를 거쳐서 수동으로 했었다.
2주 뒤에 인터넷도 안되는 프로젝트 룸에 쳐박혀 3개월간 개고생할 것에 대비해 조금이나마 시간을 절약하고자 JS로 간단하게 만든 계산기이다. (아~ 가기 싫다.ㅠ) 어차피 0과 100 값은 의미가 없으니 1~99까지 값을 넣고 엔터나 버튼을 누르면 자동으로 값이 치환된다. JS 개발자도 아니고, 또 굳이 필요 없을 것 같아서 문자나 100 이상의 값에 대한 예외처리는 하지 않았다.

안드로이드 GUI 디자인 시, 컬러 투명도 값을 센스있게 주고 싶은 디자이너 분들, 디자이너에게 컬러 값을 %로 받아 일일이 계산하는 개발자분들에게 유용하길 바라며...

Android Developers 컬러 클래스 : https://developer.android.com/reference/android/graphics/Color.html

※제가 사용하려고 만든 계산기입니다. 대충 검색해도 없길래 공유합니다. 만든 김에 급하게 포스팅 하나 남기고 가네요. 3개월 뒤에 봐요~ ㅠ