그라디언트

정의

그라디언트는 두 개 이상의 색이 경계 없이 부드럽게 이어지는 배경입니다. 한 색에서 다른 색으로 서서히 물들듯 넘어가는 효과라고 생각하면 됩니다. 이때 두 가지를 정해야 하는데, 하나는 색이 흘러가는 방향인 각도이고, 다른 하나는 어느 지점에서 색이 바뀔지를 지정하는 색 정지점(stop)입니다. 각도로 위에서 아래인지 대각선인지를 정하고, 정지점으로 색이 전환되는 위치와 비율을 조절합니다. 정지점을 두 개만 쓰면 단순한 두 색 그라디언트가, 여러 개를 쓰면 무지개처럼 여러 색을 잇는 그라디언트가 됩니다. 히어로 영역의 큰 배경, 버튼, 카드 뒷면처럼 밋밋한 단색에 깊이와 생동감을 더하고 싶을 때 자주 쓰이는 표현입니다.

왜 중요한가

단색 배경은 깔끔하지만 자칫 평평하고 심심해 보일 수 있습니다. 그라디언트는 색이 미묘하게 변하면서 화면에 은은한 입체감과 움직임을 더해, 같은 레이아웃도 훨씬 세련되고 완성도 높아 보이게 만듭니다. 특히 사용자의 시선을 처음 끌어야 하는 히어로 영역이나, 클릭을 유도해야 하는 주요 버튼에서 효과가 큽니다. 단색 하나만 바꿔도 분위기가 달라지듯, 그라디언트는 적은 노력으로 화면 인상을 크게 바꿀 수 있는 표현입니다. 다만 그라디언트는 잘 쓰면 고급스럽지만 잘못 쓰면 촌스러워지기 가장 쉬운 요소이기도 합니다. 색을 너무 많이 섞거나 대비가 지나치면 금세 어수선해지므로, 은은하게 절제해서 쓸수록 오히려 더 세련돼 보인다는 감각을 기억해 두는 것이 좋습니다. 화려함보다 절제가 세련됨을 가른다는 점이 그라디언트의 핵심입니다.

흔한 실수

• 명도 차가 너무 큰 두 색을 잇는 것입니다. 아주 밝은 색과 아주 어두운 색을 바로 섞으면 중간 지점에 탁한 회색 띠가 생겨 지저분해 보입니다. 두 색의 밝기를 비슷하게 맞춰야 전환이 매끄럽습니다.
• 색상환에서 멀리 떨어진 색을 무리하게 잇는 것입니다. 예를 들어 빨강과 초록을 바로 섞으면 중간에 흙탕물 같은 탁한 색이 나옵니다. 서로 가까운 색끼리 이어야 중간 색까지 깨끗하게 이어져 자연스럽습니다.
• 그라디언트를 너무 진하고 화려하게 쓰는 것입니다. 색이 강하게 소용돌이치면 그 위의 글자가 읽히지 않고 화면 전체가 산만해져, 정작 전하려던 내용이 묻히고 맙니다.

실무 팁

• 두 색의 명도를 비슷하게 맞추고, 색상환에서 가까운 두 색을 고르세요. 이웃한 색끼리 비슷한 밝기로 이으면 중간에 탁한 띠가 생기지 않아 대체로 자연스럽고 안정적인 결과가 나옵니다.
• 은은하게 쓸수록 세련돼 보입니다. 두 색의 차이를 아주 크게 벌리기보다, 미묘하게만 변하도록 절제하면 배경이 튀지 않으면서도 밋밋함이 사라져 훨씬 완성도 높게 보입니다.
• 그라디언트 위에 글자를 얹을 때는 가장 밝은 지점과 가장 어두운 지점을 모두 기준으로 글자 대비를 확인하세요. 배경 색이 변하는 만큼, 어느 위치에서도 글자가 또렷하게 읽히는지 점검해야 특정 구간에서 글자가 묻히는 사고를 막을 수 있습니다.

관련 개념