순수한 검정색과 흰색 대신 검정색에 가까운 것과 흰색에 가까운 것을 사용하세요. 순수한 검정색은 다른 색상과 대비가 불편할 정도로 높으며, 흰색은 너무 밝습니다. 대신 검정색에 가까운 색상과 흰색에 가까운 색상을 사용하세요. 이 규칙에서 "검은색"과 "흰색"에 대한 다른 언급은 사용자가 이 규칙을 따른다고 가정합니다. 중립을 포화시키세요 중성색은 일반적으로 검정색, 흰색 또는 회색입니다. 인터페이스에서 색상을 사용하는 경우 해당 색상을 중간색에 약간 추가하세요. 이렇게 하면 색상 팔레트가 더욱 일관되게 느껴질 것입니다. HSB 색상 시스템을 사용하는 경우 채도가 5% 미만이어야 합니다. 중요한 요소에는 고대비를 사용하세요. 중요한 요소는 버튼, 콘텐츠 또는 사용자가 알아야 하는 기타 모든 것을 의미합니다. 대비가 높을수록 요소가 주의를 끌 수 있으며 이는 중요한 요소에 유용합니다. 사용자가 눈치챌 필요가 없는 요소(예: 구조적 요소, 그림자)는 대비를 최대한 적게 사용할 수 있습니다. 디자인의 모든 것은 의도적이어야 합니다. 디자인의 모든 것에 대해 신중하게 생각해야 합니다. 이는 공백, 정렬, 크기, 간격, 색상, 그림자를 의미합니다. 모든 것. 누군가 디자인의 임의의 부분을 지적하는 경우 왜 그렇게 보이는지에 대한 설명이 있어야 합니다. 이렇게 하지 않으면 디자인이 일관되게 느껴지지 않을 것입니다. 디자인을 처음 접하는 경우 아직 고려하지 않은 사항에 대해 자세히 알아보기 위한 프롬프트로 이 규칙을 사용할 수 있습니다. 광학적 정렬은 수학적 정렬보다 더 나은 경우가 많습니다. 디자인 소프트웨어는 수학적으로 사물을 정렬할 수 있습니다. 그러나 일부 모양은 이러한 유형의 정렬에 적합하지 않습니다. 예를 들어, 일부 이상한 모양에는 수학적 중심과 다른 시각적 중심이 있습니다. 종종 눈으로 사물을 정렬하여 올바르게 보이도록 해야 합니다. 눈으로 물건을 정렬하려면 약간의 연습이 필요하지만 정기적으로 하면 빨리 익힐 수 있습니다. 텍스트가 클수록 글자 간격과 줄 높이가 낮아집니다. 더 작은 텍스트로 키워보세요. 이는 모든 텍스트에 적용됩니다. 텍스트가 클수록 각 글자와 줄 사이에 필요한 공간이 줄어듭니다. 그 반대도 마찬가지입니다. 이렇게 하지 않으면 큰 텍스트가 퍼져 보일 수 있고, 작은 텍스트가 너무 가까이 보일 수 있습니다. 컨테이너 테두리는 컨테이너와 배경 모두와 대비되어야 합니다. 예: 1px 테두리와 어두운 배경이 있는 카드가 있고 더 어두운 배경 위에 있는 경우 1px 테두리는 두 테두리보다 더 밝아야 합니다. 카드와 페이지 배경색 사이의 밝기로 설정하면 안 됩니다. 그렇지 않으면 용기의 가장자리가 충분히 날카로워 보이지 않습니다. 밝은 배경색에도 동일하게 적용됩니다. 1px 테두리는 두 배경색보다 더 어두워야 합니다. 아래 예에서는 왼쪽이 정확하지 않고 오른쪽이 정확합니다. 모든 것은 다른 것과 일치해야 한다 정렬은 사물이 서로 연관되어 있음을 깨닫는 데 도움이 됩니다. 어떤 것이 다른 것과 일치하지 않으면 디자인에 속하지 않는 것처럼 느껴집니다. 이상적으로 각 요소는 일종의 논리를 기반으로 다른 요소와 정렬되어야 합니다. 팔레트의 색상에는 고유한 밝기 값이 있어야 합니다. 색상의 밝기 값이 서로 다르면 색상뿐만 아니라 밝기에서도 뚜렷하게 보이고 느껴지는 데 도움이 됩니다. 색상이 서로 많이 경쟁하지 않기 때문에 색상 팔레트가 더 좋아집니다. 중성색을 포화시키는 경우 따뜻한 색이나 차가운 색을 사용해야 하며 둘 다 사용해서는 안 됩니다. 따뜻한 색상과 차가운 색상을 모두 사용하여 중성색을 포화시키면 색상 팔레트가 일관되게 느껴지지 않습니다. 아래 예에서 왼쪽은 따뜻한 배경과 차가운 전경을 사용합니다. 오른쪽은 따뜻한 배경과 전경을 사용합니다. 측정은 수학적으로 관련되어야 합니다. 요소 사이에 사용하는 간격과 요소의 크기는 일종의 규모에 따라 결정되어야 합니다. 이는 디자인이 일관되게 보이도록 도와줍니다. 아래 예에서 모든 요소는 8의 배수를 사용합니다. 그림과 같은 요소의 크기가 올바른지 확인하려는 경우 배율을 기반으로 하는 가로 및 세로 그리드가 도움이 됩니다. 요소는 시각적 가중치의 순서로 배치되어야 합니다. 행이나 열에 일련의 요소가 있고 일부 요소가 다른 요소보다 시각적으로 더 무거운 경우(예: 버튼 2개와 링크 3개) 요소를 삼각형처럼 배열해야 합니다. 시각적으로 가장 무거운 요소가 먼저 오고 가장 덜 무거운 요소가 순서대로 와야 합니다. 한 가지 주의할 점은 시각적으로 가장 무거운 요소가 바깥쪽 가장자리에 있어야 한다는 것입니다. 예를 들어, 요소가 디자인의 오른쪽 가장자리에 있는 경우 가장 무거운 요소는 오른쪽 가장자리에 있어야 합니다. 크기나 무게 순서대로 배열된 요소가 더 만족스러워 보입니다. 수평 그리드를 사용하는 경우 12개의 열을 사용하세요. 디자인을 수직 열로 나누려면 12개의 열을 사용하세요. 12열 그리드는 1열, 2열, 3열, 4열로 나눌 수 있으므로 유연성이 뛰어납니다. 간격은 고대비 지점 사이에 있어야 합니다. 디자인의 요소 사이의 공간을 측정할 때(예: 랜딩 페이지의 콘텐츠 블록 사이에 100px의 세로 공간을 원하는 경우) 간격은 고대비의 한 지점에서 다음 지점까지여야 합니다. 이는 우리의 눈이 대비를 기반으로 요소의 가장자리를 찾기 때문에 대비 지점 사이에 간격이 있을 것으로 예상하기 때문입니다. 검은색 텍스트 단락이 있는 흰색 배경은 대조 지점이 한 단락의 끝과 다음 단락의 시작이 된다는 것을 의미합니다. 그러나 하나의 흰색 단락 뒤에 검정색 배경을 놓는 경우 간격은 한 단락의 끝에서 검정색 배경의 시작 부분까지 이어져야 하며, 다시 검정색 배경의 시작 부분에서 단락의 시작 부분까지 이어져야 합니다. 가까운 요소는 더 가벼워야 합니다. 화면의 요소가 사용자에게 가까워질수록 더 가벼워져야 합니다. 이는 실제 세계의 작동 방식과 일치하므로 밝은 모드와 어두운 모드 UI 모두에 적용됩니다. 아래 예에서는 왼쪽이 정확하지 않고 오른쪽이 정확합니다. 그림자 흐림 값을 거리 값의 두 배로 만듭니다. 예를 들어 Y축에서 4픽셀을 확장하는 그림자를 만드는 경우 8픽셀의 흐림 값을 사용합니다. 요소가 보는 사람에게 "더 가까워지면" 그림자의 불투명도도 낮추는 것이 좋습니다. 요소가 광원에 더 가까워질수록 그림자가 더 흐려지기 때문에 이는 좋아 보입니다. 복잡한 것에는 단순한 것을, 단순한 것에는 복잡한 것을 두십시오. 복잡한 배경(예: 다채로운 그라데이션 채우기)은 전경(예: 텍스트)이 단순한 경우 가장 잘 작동합니다. 복잡한 전경 요소는 단순한 배경에 가장 적합합니다. 단순함 위에 단순함을 입힐 수 있지만 평범해 보이는 경향이 있습니다. 콤플렉스 온 콤플렉스는 제거하기 어렵고 시각적 혼란을 더하므로 피해야 합니다. 컨테이너 색상을 밝기 제한 내에서 유지 배경과 컨테이너 사이의 밝기 차이는 어두운 인터페이스의 경우 12% 이내, 밝은 인터페이스의 경우 7% 이내여야 합니다. 이 백분율은 HSB 색상 시스템의 밝기 값을 나타냅니다. 이는 배경과 컨테이너의 밝기를 확인한 약 100개의 잘 디자인된 웹사이트에 대한 연구를 기반으로 합니다. 외부 패딩을 내부 패딩과 동일하거나 그 이상으로 만듭니다. 컨테이너에서 내부 패딩은 컨테이너 내부 요소 사이의 공간입니다. 외부 패딩은 요소와 컨테이너 가장자리 사이의 공간입니다. 이 외부 패딩은 내부 패딩과 같거나 그 이상이어야 합니다. 더 관련성이 높은 요소는 서로 더 가까워야 합니다. 컨테이너 내부의 요소는 컨테이너 자체보다 서로 더 관련되어 있습니다. 본문 텍스트를 16px 이상으로 유지하세요. 16px은 대부분의 브라우저에서 기본 텍스트 크기입니다. 이 크기 이하의 텍스트는 읽기가 더 어려워지므로 본문 텍스트에는 사용하지 않는 것이 가장 안전합니다. 16px 이상으로 높을수록 텍스트를 더 쉽게 읽을 수 있습니다. 코드를 직접 작성하는 경우 원하는 픽셀에 해당하는 것을 사용하세요. 약 70자 정도의 줄 길이를 사용하세요. 줄 길이가 60자인지 80자인지는 그다지 중요하지 않지만, 그 길이를 너무 벗어나면 미묘한 가독성 문제가 발생할 수 있습니다. 버튼의 가로 패딩을 세로 패딩의 두 배로 만듭니다. 표준 단추 패턴은 높이보다 너비가 넓습니다. 사람들이 요소를 버튼으로 인식하게 하려면 패턴을 따르는 것이 좋습니다. 아래 예에서 라벨 위와 아래의 패딩은 30px이고, 왼쪽과 오른쪽의 패딩은 60px입니다. 최대 2개의 서체를 사용하세요. 두 번째 서체는 디자인 이면의 컨셉을 강화할 수 있는 기회입니다. 또한 디자인에 다양성을 추가하는 데 도움이 됩니다. 2개 이상을 사용해야 하는 경우는 거의 없으며, 이로 인해 디자인이 시각적으로 혼란스러울 수 있습니다. 모서리를 적절하게 중첩 때로는 두 개 이상의 둥근 모서리가 함께 중첩되어 있는 경우도 있습니다. 올바르게 보이도록 하려면 내부 모서리 반경을 외부 모서리 반경에서 둘 사이의 거리를 뺀 값으로 설정합니다. 아래 예에서는 외부 반경이 30px이고 간격이 20px이므로 내부 모서리 반경은 10px입니다. 두 개의 하드 분할을 서로 옆에 두지 마십시오. 배경 전환, 컨테이너 가장자리 및 구분선은 시각적으로 확실한 구분을 만듭니다. 두 개 이상의 하드 분할이 서로 옆에 있으면 안 됩니다. 아래 예에서 빨간색으로 표시된 것을 볼 수 있습니다. 둘 이상의 하드 분할은 시각적 혼란을 야기하고 시선을 사로잡습니다. 이 예에서는 하드 분할이 컨테이너 가장자리에서만 나오도록 배경 전환을 제거했습니다.