--- title: "반투명이 시안보다 밝게 나오면 색 공간 문제다" description: "같은 색과 같은 알파인데 Unity 화면에서 다르게 보이는 이유는 색을 섞는 자리가 다르기 때문입니다. 색 공간, 그라데이션 중간 색, 없는 블렌드 모드, 정점을 복제하는 외곽선까지 그림으로 봅니다." author: "유니얼" pubDate: 2026-09-17 category: "game-dev/unity/ui" tags: ["Unity", "UI", "uGUI"] canonical: https://blog.unialgames.com/posts/unity-ui-color-effects/ --- 시안에서 뽑은 색을 그대로 넣었는데 화면에서는 다르게 보입니다. 특히 **반투명한 검은 판을 깔았을 때**, **그라데이션 가운데** 에서 눈에 띕니다. 색 값을 잘못 옮긴 것이 아니라 **색을 섞는 자리가 다르기** 때문입니다. ## 섞는 자리가 다릅니다

시안은 sRGB 값을 그대로 섞고, Linear 설정은 빛의 양으로 바꿔 섞은 뒤 되돌립니다.

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 에 그대로 있는 것은 알파(투명도)뿐** 입니다. 나머지는 이미지로 뽑거나, 따로 만들거나, 포기하는 셋 중 하나가 됩니다. ## 외곽선과 그림자는 글자를 여러 벌 그립니다

Shadow 는 한 벌, Outline 은 네 벌을 더 그립니다.

`Text` 나 이미지에 **Outline** 이나 **Shadow** 컴포넌트를 붙이면 효과가 셰이더로 만들어지는 것이 아니라 **같은 그림을 한 벌 더 그려서** 만들어집니다. - **Shadow** 는 한 벌을 옆으로 밀어 어둡게 그립니다. 정점이 두 배가 됩니다 - **Outline** 은 네 방향으로 네 벌을 그립니다. **정점이 다섯 배** 가 됩니다 - 글자 수가 많은 화면에서 외곽선을 전부 붙이면 그리는 양이 그대로 다섯 배입니다 - Outline 기본값은 사방 1 픽셀입니다. 두꺼운 테두리를 흉내 내려고 거리를 키우면 네 귀퉁이만 밀린 모양이 나옵니다. 진짜 테두리처럼 둥글게 감싸지 않습니다 TextMeshPro 는 이 방식이 아니라 머티리얼 값으로 외곽선을 만듭니다. **글자에 두꺼운 외곽선이 필요하면 그쪽이 맞습니다.** ## 한 덩어리를 통째로 흐리게 여러 요소를 한꺼번에 반투명하게 만들 때는 각 요소의 알파를 따로 내리지 않습니다. 부모에 **Canvas Group** 을 붙이고 거기서 한 번에 내립니다. 자식들의 투명도에 곱해집니다. - 팝업이 서서히 나타나거나, 비활성 영역을 흐리게 만드는 연출이 이걸로 됩니다 - 요소마다 알파를 내리면 **겹친 부분이 진하게 보입니다.** Canvas Group 은 다 그린 뒤에 한 번에 내리므로 겹쳐도 균일합니다 ## 시안을 넘길 때 적어 주면 좋은 것 | 항목 | 적어 줄 것 | | --- | --- | | 반투명 | 알파 값과 **무엇 위에 올라가는지**. 결과 색이 중요하면 그 색도 함께 | | 그라데이션 | 값으로 옮길지 이미지로 뽑을지. 글자면 위아래 색 | | 레이어 효과 | Multiply, Screen, 블러처럼 알파가 아닌 효과를 썼는지 | | 외곽선 | 글자 외곽선인지 이미지 외곽선인지, 두께가 얼마인지 | | 그림자 | 방향과 거리, 흐림 정도. 흐림이 있으면 이미지로 뽑을지 | | 통째로 페이드 | 한 덩어리가 같이 흐려지는지, 요소마다 다른지 | ## 정리 - Unity 가 Linear 로 돌면 색을 빛의 양으로 바꿔 섞고 되돌립니다. 그래서 반투명 결과가 시안과 다릅니다 - 알파가 가운데일수록 차이가 큽니다. 시안 값은 출발점이고 Unity 화면에서 맞춘 값이 최종 값입니다 - 그라데이션은 양 끝은 같고 가운데가 달라집니다. 이미지로 뽑는 편이 정확합니다 - 기본 UI 에 그대로 있는 레이어 효과는 알파뿐입니다. 블렌드 모드와 블러는 따로 만들어야 합니다 - Outline 은 같은 그림을 네 벌 더 그려서 정점이 다섯 배가 됩니다. 글자 외곽선은 TextMeshPro 쪽이 맞습니다 - 한 덩어리를 통째로 흐리게 할 때는 Canvas Group 으로 한 번에 내립니다