투명도

정의

투명도는 요소가 얼마나 비치는지를 나타내는 값입니다. 완전히 불투명하면 뒤에 있는 것이 전혀 보이지 않고, 완전히 투명하면 요소 자체가 사라진 것처럼 뒤가 그대로 비칩니다. 그 사이의 반투명 상태에서는 앞 요소와 뒤 배경의 색이 서로 겹쳐 섞여 보입니다. 흔히 알파(alpha)라고도 부르며, 이 값을 조절하면 요소를 지우거나 새로 그리지 않고도 겹침이나 오버레이, 비활성 같은 여러 상태를 자연스럽게 표현할 수 있습니다. 색을 바꾸는 것이 아니라 '얼마나 존재하는가'를 조절한다는 점이 다른 색 속성과 구별되는 특징입니다.

왜 중요한가

투명도가 중요한 이유는 요소들 사이의 '층'을 표현하는 가장 간단한 방법이기 때문입니다. 모달을 띄울 때 뒤 배경을 반투명한 검은 막으로 덮으면, 사용자는 지금 보던 화면이 잠시 뒤로 물러났고 앞의 창에 집중해야 한다는 것을 즉시 이해합니다. 비활성 버튼을 흐리게 만들면 지금은 누를 수 없다는 뜻이 색을 따로 설명하지 않아도 전달됩니다. 이렇게 투명도는 요소의 상태와 우선순위를 조용히 알려 주는 신호가 됩니다. 또한 이미지 위에 반투명한 막을 한 겹 씌우면 그 위에 얹힌 글자가 사진의 복잡한 무늬에 묻히지 않고 또렷하게 읽히도록 도울 수도 있습니다. 다만 편리한 만큼 남용하기도 쉬워서, 무엇을 위해 비치게 하는지 목적을 분명히 하고 쓰는 태도가 필요합니다.

흔한 실수

• 본문 텍스트에 과한 투명도를 주는 경우입니다. 검은 글자를 반투명하게 만들면 흐릿하고 고급스러워 보이지만, 그만큼 배경과의 대비가 떨어져 읽기 어려워집니다. 특히 색이 있는 배경 위에서는 대비가 예상보다 훨씬 크게 무너집니다.
• 요소 전체의 투명도를 낮춰 특정 부분만 흐리려는 것입니다. opacity를 요소에 주면 그 안의 글자와 그림자, 자식 요소까지 전부 함께 비쳐 버립니다. 배경만 반투명하게 하려면 색 자체에 알파 값을 넣는 편이 낫습니다.
• 스크림을 지나치게 진하게 덮는 것입니다. 뒤 배경을 너무 어둡게 가리면 지금 무엇 위에서 작업하는지 맥락이 완전히 사라져, 사용자가 방향을 잃고 답답함을 느낄 수 있습니다. 배경이 살짝 비치는 정도로만 덮어도 초점을 앞 창으로 옮기는 목적은 충분히 이룰 수 있습니다.

실무 팁

• 모달 뒤 배경을 어둡게 덮는 스크림(scrim)이나 비활성 버튼을 흐리게 만드는 용도로 투명도를 쓰세요. 단, 텍스트에는 과한 투명도를 주지 말고, 흐린 글자가 필요하면 처음부터 대비가 확보된 회색 계열을 골라 쓰는 편이 안전합니다.
• 반투명 색을 쓸 때는 그 위에 얹힐 실제 배경 위에서 최종 색을 확인하세요. 흰 배경에서 괜찮던 반투명 회색이 어두운 배경에서는 전혀 다른 색으로 보일 수 있습니다.
• 투명도로 층을 나눌 때는 겹침 순서를 함께 관리하세요. 어떤 요소가 위에 오는지가 정해져야 반투명 효과가 의도한 대로 쌓입니다.

관련 개념