* Unity3D에서 Linear 환경으로 게임 개발할 경우,
UI디자이너는 포토샵에서 UI 디자인한 리소스의 알파값이 엔진에서 다르게 나오는 것을 경험할 것이다.
그럴 경우 어떻게 해야 하는지 알아보자.
* 결론만 말하자면 포토샵의 Color Settings에서 다음과 같이 '감마를 사용하여 RGB 색상 혼합'에 체크 후 1.00을 입력하여 만든 PNG로 엔진에 넣었을 때 가장 흡사하다.
해당 기능에 대한 Adobe Photoshop 공식 설명은 아래와 같다.
감마를 사용하여 RGB 색상 혼합 예를 들어 표준 모드를 사용하여 레이어를 혼합하거나 페인팅할 때 합성 데이터를 생성하기 위한 RGB 색상의 혼합 방식을 제어합니다. 이 옵션을 선택하면 지정된 감마에 해당하는 색상 공간에서 RGB 색상이 혼합됩니다. 감마 1.00은 색상상 정확한 것으로 간주되므로 가장자리의 부자연스러움이 거의 없습니다. 이 옵션을 선택 취소하면 문서의 색상 공간에서 직접 RGB 색상이 혼합됩니다.
참고: [감마를 사용하여 RGB 색상 혼합]을 선택하면 레이어를 사용한 문서가 Photoshop에서와 그 밖의 응용 프로그램에서 서로 다르게 보입니다.
그러므로 평소에는 체크를 풀어서 사용하고 유니티에 알파값이 있는 UI 리소스를 만들어 넣고 싶을 때만 위처럼 사용한다.
좀 더 자세한 설명은 아래에 있다.
검증 과정은 아래 더 보기를 눌러보자.
* Unity3D Project Settings의 Color Space 확인
먼저 내가 개발하는 프로젝트의 Color Space 가 Linear 인지 Gamma 인지 확실히 확인하자.
보통 2D project 는 Gamma이고 3D project는 Linear이다.
* 포토샵에서 진정한 중간 회색값 확인
위와 같이 1px 검은색, 흰색 도트를 이용한 병치혼합으로 진정한 회색을 만들어 보았다.
A - 병치혼합을 이용한 진정한 중간 회색이다. Linear 든 Gamma 든 이는 변하지 않는다.
B - 흰색 레이어 위에 검은색 레이어를 올리고 투명도 50%를 하였다.
C - HSB의 Brightness 수치 50% (RGB 128,128,128)로 제작하였다.
보다시피 A가 진정한 중간 회색이지만 Gamma 보정되어 B는 다르게 보이고 있다.
B와 C의 컬러값은 동일하다.
A - 병치혼합을 이용한 진정한 중간 회색이다. Linear 든 Gamma 든 이는 변하지 않는다.
B - 흰색 레이어 위에 검은색 레이어를 올리고 투명도 50%를 하였다.
C - HSB의 Brightness 수치 50% (RGB 128,128,128)로 제작하였다.
보다시피 진정한 중간 회색 A는 B와 색이 같아 보인다.
B의 컬러값을 찍어보면 HSB의 Brightness 수치 73% (RGB 187,187,187)이다.
C는 기존과 동일하다.
이를 보면 알 수 있듯이 진정한 중간 회색은 HSB의 Brightness 수치 73% (RGB 187,187,187)이다.
그래서 Linear Color Space 3D공간에서의 완벽한 색 구현을 위해서는 B컬러인 Brightness 수치 73% (RGB 187,187,187)가 맞다.
하지만 '베버의 법칙'으로 인해 C컬러가 인간이 느끼기에 자연스러운 중간 회색으로 보인다. 그러므로 2D로 보이는 UI 리소스는 중간회색인 Brightness 수치 50% (RGB 128,128,128)가 맞다. 이에 대해서는 아래의 '리니어 환경에서 감마보정이 들어간 그레이디언트' 를 보면 알 수 있다.
* Unity3D에서 테스트
테스트용 리소스를 준비하자.
낙타 뒤로 불투명도 100%에서 0%까지의 그레이디언트가 있고,
그 아래에는 10단계로 불투명도 100%에서 10%까지의 직사각형들이 나열되어 있다.
그레이디언트는 레이어 효과의 그레이디언트 오버레이를 사용하여 만들었다.
그 아래의 10단계로 나눈 그레이디언트는 흰색 직사각형 레이어 10개를 만들어 각각의 레이어의 불투명도만 조정하여 만들었다.
투명도도 알기 위해 붉은색으로 HSB의 Brightness 수치를 적었다.
테스트 1.
그럼 이대로 단축키 Ctrl + Alt + Shift + S를 눌러 png파일로 웹용으로 저장하기를 한다.
그다음 유니티에 넣어서 확인해 보자.
유니티에 넣어보니 포토샵에서 본 리소스와 달라졌다.
비교해 보면 흰 반투명 그레이디언트의 흰 부분이 더 넓어졌다.
하늘색 숫자로 해당 수치를 체크해 보았다.
기존 붉은색 수치와 비교해 보니 확연히 달라진 것이 보인다.
그럼 다시 포토샵으로 돌아가자.
테스트 2.
이제 포토샵의 색상 설정에 들어가 '감마를 사용하여 RGB 색상 혼합'에 체크 후 확인하자.
체크하고 보니 하단 그레이디언트의 투명도 농도가 바뀌었다.
수치를 체크하여 붉은색으로 적었다.
수치가 방금 테스트1의 유니티에서 확인한 투명도와 똑같다.
여기서 확인한 바와 같이 Unity3D Linear 프로젝트에서는 포토샵에서 색상설정을 해줘야 유니티에서 alpha값이 동일하게 나올 수 있다.
(당연하지만 이건 UI디자이너 한정이다. 보통 이펙터는 리소스를 targa 확장자를 쓰는데 여기서 이미 알파채널 자체가 Linear라 상관없다. 3D 역시 상관없음.)
여하튼 이번에도 유니티에서 테스트하기 위해 단축키 Ctrl + Alt + Shift + S를 눌러 웹용으로 저장하기를 한다.
역시 유니티에 넣어서 하늘색 숫자로 해당 수치를 체크해 보았다.
알파값이 동일하다.
이렇게 포토샵과 유니티의 알파값을 동일하게 만드는 방법을 알아냈다.
이제 해당 그레이디언트를 리니어환경이지만 감마보정 들어가게끔 만들어보자.
이유는 위에서 병치혼합의 예시에서 적은 것처럼 수치상으로는 해당 값이 정확하지만 '베버의 법칙'으로 인해 인간의 시각은 어두운 영역을 더 예민하게 받아들이기 때문이다.
* 리니어 환경에서 감마보정이 들어간 그레이디언트
레이어 불투명도를 조정하여 단계별로 그레이디언트를 만들었다.
이 2개의 그레이디언트의 첫줄의 %수치는 밝기이고, 두번째줄의 %수치는 레이어 불투명도이다.
이 정보를 토대로 아래처럼 그레이디언트값을 입력하자.
이렇게 만든 그레이디언트를 적용하면 아래처럼 나온다.
완성
이제 그레이디언트가 Linear에서도 보정된 것처럼 자연스럽게 보인다.
* UI디자이너를 위한 작업 가이드
1. Unity3D Linear 환경 프로젝트의 UI디자인을 할 때만 포토샵에서 색상설정을 아래처럼 바꾼다.
2. 평소 작업하듯이 작업하는데 레이어의 불투명도(Opacity)나 사용하는 그레이디언트는 윗 문단의 '리니어 환경에서 감마보정이 들어간 그레이디언트'를 참고하자.
3. 그대로 png로 저장하여 유니티에서 확인하면 포토샵과 동일하게 적용된 리소스를 확인할 수 있다.
※ 포토샵 주의사항 ※
1. 그룹이 안되어있는 레이어 스타일의 그레이디언트는
레이어 래스터화를 해야 Linear 환경과 동일하게 볼 수 있다.
(이건 포토샵에서 보는 것이 동일하지 않을 뿐 그대로 저장해 리소스화 한 것은 Linear 환경과 동일하게 출력되긴 한다.)
2. 그룹을 사용할 때 블렌딩 모드에서 통과 말고 표준을 사용할 것
3. 리소스화 하기 전에 그룹 병합하지 말 것. 하려거든 여러 개의 레이어를 선택하여 병합한다.
그렇지 않으면 투명도가 보정되어 투명한 부분이 넓어진다.
계속 그룹화하고 계속 레이어를 합친다면 아래의 그레이디언트처럼 투명한 부분이 점점 넓어지는 것을 보게될것이다.
※ 참고 ※
targa 파일의 경우 포토샵의 채널에서 알파값을 만들어서 제작하는데
여기는 Linear 환경과 동일하므로 targa 리소스를 만들 때는 신경 쓰지 않아도 된다.
참고 링크
* Unity Korea Youtube Gamma Color space와 Linear Color space란?
* 상윤님 블로그 Unity Linear color space에서 UI의 alpha 값이 바뀌는 문제에 대하여
* 대마왕님 블로그 선형(Linear) 렌더링에서의 UI 작업할때 요령
'Unity3D' 카테고리의 다른 글
| [NGUI] Label에 Emoticon / Emoji 넣기 (0) | 2023.09.25 |
|---|
