반투명이 시안보다 밝게 나오면 색 공간 문제다
시안에서 뽑은 색을 그대로 넣었는데 화면에서는 다르게 보입니다. 특히 반투명한 검은 판을 깔았을 때, 그라데이션 가운데 에서 눈에 띕니다. 색 값을 잘못 옮긴 것이 아니라 색을 섞는 자리가 다르기 때문입니다.
섞는 자리가 다릅니다
Unity 에는 색을 다루는 방식이 두 가지 있습니다. Edit > Project Settings > Player 의 Color Space 에서 고릅니다.
- Gamma 는 시안과 같습니다. 화면에 쓰는 sRGB 값을 그대로 섞습니다
- Linear 는 sRGB 값을 빛의 양 으로 바꿔서 섞고, 다 섞은 뒤에 다시 sRGB 로 되돌립니다. 조명과 반사를 제대로 계산하려면 이쪽이 맞습니다
3D 가 들어간 게임은 거의 Linear 로 둡니다. 그래서 UI 의 반투명이 시안과 어긋나는 것은 설정을 잘못 둬서가 아니라, 게임 전체가 Linear 로 도는 것의 결과 입니다. 이 설정은 프로젝트 전체 설정이라 화면마다 다르게 둘 수도 없습니다.
얼마나 다른가
알파가 가운데일수록 차이가 큽니다. 어두운 판을 반투명으로 깔아 뒤를 가리는 연출에서 시안보다 덜 가려지는 것 이 이것 때문입니다.
방법은 두 가지입니다.
- 결과를 보고 알파를 다시 잡습니다. 시안의 40퍼센트가 화면에서 25퍼센트처럼 보이면 시안 값을 올려 줍니다. 가장 흔한 방법입니다
- 가림막을 반투명 대신 불투명한 색으로 뽑습니다. 겹치는 계산이 없으면 어긋날 일도 없습니다
어느 쪽이든 Unity 화면에서 눈으로 맞춘 값이 최종 값 입니다. 시안 값은 출발점입니다.
그라데이션은 가운데가 달라집니다
양 끝 색은 같은데 가운데가 다릅니다. 같은 이유입니다. 그래서 그라데이션은 값으로 옮기지 말고 이미지로 뽑아 주는 편 이 정확합니다. 이미지로 뽑으면 그 그림 자체가 결과라서 어긋나지 않습니다.
기본 UI 에는 그라데이션 기능 자체가 없기도 합니다.
- 이미지의 색 칸은 단색 하나 입니다. 그라데이션을 넣을 자리가 없습니다
- 글자는 예외입니다. TextMeshPro 에는 네 모서리 색을 각각 정하는 그라데이션이 있습니다. 위아래로 색이 변하는 제목 글자는 이걸로 만듭니다
- 판이나 버튼에 그라데이션이 필요하면 이미지로 뽑거나 별도 컴포넌트를 붙입니다
블렌드 모드는 없습니다
시안에서 자주 쓰는 Multiply, Screen, Overlay 같은 레이어 블렌드 모드는 기본 UI 에 없습니다. UI 요소는 전부 “알파만큼 위에 얹기” 한 가지로 그려집니다.
- 꼭 필요하면 그 요소만 별도 머티리얼 을 만들어 붙입니다. 하나 붙일 때마다 그 요소는 다른 것들과 따로 그려집니다
- 빛나는 효과처럼 보이게 하려면 더하기로 그리는 머티리얼 을 쓰거나, 아예 그렇게 보이도록 그린 이미지를 얹습니다
- 뒤가 비쳐 보이는 블러 도 기본 기능이 아닙니다. 뒤 화면을 한 번 더 그려서 흐리게 만드는 일이라, 필요하면 미리 말해 주셔야 합니다
정리하면 시안의 레이어 효과 중 Unity 에 그대로 있는 것은 알파(투명도)뿐 입니다. 나머지는 이미지로 뽑거나, 따로 만들거나, 포기하는 셋 중 하나가 됩니다.
외곽선과 그림자는 글자를 여러 벌 그립니다
Text 나 이미지에 Outline 이나 Shadow 컴포넌트를 붙이면 효과가 셰이더로 만들어지는 것이 아니라 같은 그림을 한 벌 더 그려서 만들어집니다.
- Shadow 는 한 벌을 옆으로 밀어 어둡게 그립니다. 정점이 두 배가 됩니다
- Outline 은 네 방향으로 네 벌을 그립니다. 정점이 다섯 배 가 됩니다
- 글자 수가 많은 화면에서 외곽선을 전부 붙이면 그리는 양이 그대로 다섯 배입니다
- Outline 기본값은 사방 1 픽셀입니다. 두꺼운 테두리를 흉내 내려고 거리를 키우면 네 귀퉁이만 밀린 모양이 나옵니다. 진짜 테두리처럼 둥글게 감싸지 않습니다
TextMeshPro 는 이 방식이 아니라 머티리얼 값으로 외곽선을 만듭니다. 글자에 두꺼운 외곽선이 필요하면 그쪽이 맞습니다.
한 덩어리를 통째로 흐리게
여러 요소를 한꺼번에 반투명하게 만들 때는 각 요소의 알파를 따로 내리지 않습니다. 부모에 Canvas Group 을 붙이고 거기서 한 번에 내립니다. 자식들의 투명도에 곱해집니다.
- 팝업이 서서히 나타나거나, 비활성 영역을 흐리게 만드는 연출이 이걸로 됩니다
- 요소마다 알파를 내리면 겹친 부분이 진하게 보입니다. Canvas Group 은 다 그린 뒤에 한 번에 내리므로 겹쳐도 균일합니다
시안을 넘길 때 적어 주면 좋은 것
| 항목 | 적어 줄 것 |
|---|---|
| 반투명 | 알파 값과 무엇 위에 올라가는지. 결과 색이 중요하면 그 색도 함께 |
| 그라데이션 | 값으로 옮길지 이미지로 뽑을지. 글자면 위아래 색 |
| 레이어 효과 | Multiply, Screen, 블러처럼 알파가 아닌 효과를 썼는지 |
| 외곽선 | 글자 외곽선인지 이미지 외곽선인지, 두께가 얼마인지 |
| 그림자 | 방향과 거리, 흐림 정도. 흐림이 있으면 이미지로 뽑을지 |
| 통째로 페이드 | 한 덩어리가 같이 흐려지는지, 요소마다 다른지 |
정리
- Unity 가 Linear 로 돌면 색을 빛의 양으로 바꿔 섞고 되돌립니다. 그래서 반투명 결과가 시안과 다릅니다
- 알파가 가운데일수록 차이가 큽니다. 시안 값은 출발점이고 Unity 화면에서 맞춘 값이 최종 값입니다
- 그라데이션은 양 끝은 같고 가운데가 달라집니다. 이미지로 뽑는 편이 정확합니다
- 기본 UI 에 그대로 있는 레이어 효과는 알파뿐입니다. 블렌드 모드와 블러는 따로 만들어야 합니다
- Outline 은 같은 그림을 네 벌 더 그려서 정점이 다섯 배가 됩니다. 글자 외곽선은 TextMeshPro 쪽이 맞습니다
- 한 덩어리를 통째로 흐리게 할 때는 Canvas Group 으로 한 번에 내립니다