단 하나의 메인 브랜드 컬러로 완벽한 파생색(틴트와 셰이드) 만드는 방법
서론 브랜드를 기획하거나 웹사이트, 앱을 디자인할 때 메인 컬러 하나를 정하는 것까지는 순조롭게 진행되는 경우가 많습니다. 하지만 막상 실무 디자인에 들어가면 단 하나의 색상만으로는 화면을 구성하기가 거의 불가능하다는 것을 깨닫게 됩니다. 버튼에 마우스를 올렸을 때의 색상, 텍스트가 들어갈 옅은 배경색, 혹은 경고 메시지를 강조할 진한 테두리 색상 등 상황에 맞게 메인 컬러를 받쳐줄 다양한 변형이 필요하기 때문입니다. 이때 메인 컬러의 정체성을 해치지 않으면서도 자연스럽게 어우러지는 파생색, 즉 틴트(Tint)와 셰이드(Shade)를 구축하는 작업이 필수적입니다. 단순히 투명도만 조절해서 색을 돌려쓰다 보면 디자인이 탁해지거나 배경색에 따라 의도치 않은 색으로 보일 수 있습니다. 따라서 기준이 되는 색상에서 밝기와 어두움을 체계적으로 조절하여 일관성 있는 팔레트를 만드는 방법을 이해하는 것이 중요합니다. 틴트(Tint)와 셰이드(Shade)의 기본 개념 색채학에서 틴트와 셰이드는 매우 명확한 기준을 가지고 있습니다. 틴트는 순수한 원래의 색(Hue)에 흰색을 섞어 밝고 연하게 만든 색을 의미하며, 반대로 셰이드는 검은색을 섞어 어둡고 짙게 만든 색을 말합니다. 이 두 가지 파생색은 브랜드 컬러의 일관성을 유지하는 핵심 역할을 합니다. 틴트는 주로 넓은 면적의 배경이나 비활성화된 UI 요소에 사용되어 눈의 피로를 덜어줍니다. 반면 셰이드는 텍스트, 그림자, 혹은 사용자의 클릭을 유도하는 강조 버튼의 활성화 상태 등에 쓰여 화면에 깊이감과 대비를 부여합니다. 가장 흔히 하는 오해 중 하나는 파생색을 만들 때 단순히 디자인 툴에서 색상의 투명도(Opacity) 수치만 낮추면 된다고 생각하는 것입니다. 투명도를 낮추면 겹쳐진 아래쪽 요소의 색이 비쳐 보이게 되어, 일관된 색상 값을 코드로 추출해내기 어렵고 예상치 못한 시각적 오류를 범하기 쉽습니다. 따라서 완전히 불투명한 상태의 독립적인 색상 코드를 틴트와 셰이드로 각각 추출해 두어야 합니다. HSL 색상 공간을 활...