안전하게 따라 할 수 있는 비주얼 디자인 규칙들
(anthonyhobday.com)- 꼭 따라야 할 필요는 없지만, 이 규칙들은 언제나 그대로 적용해도 괜찮음
순수한 검은색/흰색 대신 검은색과 흰색에 가까운 색을 사용하기
- 순수한 블랙은 스크린에서 부자연스러워 보이고, 순백은 너무 밝음
- #000000 과 #FFFFFF 대신 #222222 와 #F2F2F2 를 사용
- 이후엔 블랙/화이트를 지칭하면 이 색들을 이야기 하는 것
중성색(뉴트럴)에 색을 입히기
- 중성색은 보통 블랙/화이트/그레이
- 색을 사용한다면 중성색들에 약간만 색을 추가할 것 (grey 대신 light red, black 대신 dark blue)
- 이렇게 하면 색상 팔레트가 더 일관성 있게 느껴짐
- HSB를 사용한다면 약 5% 이하의 채도만 추가하면 됨
중요한 엘리먼트에는 고대비(high contrast)를 사용할 것
- 사용자가 주목해야 하는 모든 요소들 : 버튼, 콘텐츠 등
- 구분선, 드롭쉐도우 등은 대비를 최대한 적게 사용
디자인의 모든 요소는 신중해야함
- 여백, 정렬, 사이즈, 간격, 색상, 그림자 를 포함한 모든 것
- 누군가 디자인의 특정 부분을 물어봤을 때 왜 그렇게 했는지를 설명할 수 있어야 함
Optical(시각적) 정렬이 수학적 정렬 보다 나을 때가 많음
- 특정 형태들은 눈으로 봤을 때 정렬되게 표현하는게 더 나을 때가 있음
- 눈으로 정렬 하려면 연습이 필요하지만, 규칙적으로 해보면 빠르게 캐치 가능
큰 글자는 글자 간격과 줄 높이를 낮추고, 작은 글자에서는 올릴 것
- 모든 텍스트에 적용 됨
- 글자가 클수록, 각 글자와 라인간에 여백이 조금 필요함. 반대 역시 마찬가지
컨테이너의 테두리는 컨테이너 및 배경과 대비되어야 함
- 테두리는 컨테이너 내부와 배경색 사이가 아닌 배경보다 더 어두운 색상으로
모든 것들은 다른 것과 정렬 되어야 함
- 정렬은 사물들이 서로 관련되어 있다는 것을 알려줌
- 무언가가 다른 것과 정렬되어 있지 않다면 디자인에 속하지 않는 것처럼 느껴짐
- 이상적으로는 각 요소가 일종의 논리에 의해서 다른 요소들과 정렬되어야 함
팔레트의 색상에는 고유한 밝기 값이 있어야 함
- 색상의 밝기 값이 서로 다른 경우, 색조 뿐만 아니라 밝기에서도 고유한 룩앤필을 줄 수 있음
- 이렇게 하면 각 색상들이 서로 많이 경쟁하지 않기 때문에 더 좋은 색상팔레트가 됨
중성색에 색을 입힌다면, Warm 또는 Cool 중 하나만 써야함. 둘 다 쓰지 말 것
- 중성색에 웜/쿨 컬러를 같이 사용하게 되면 컬러팔레트가 일관성있게 느껴지지 않음
사이즈들은 수학적으로 관련되어야 함
- 요소들간의 간격이나, 크기 등은 일종의 축척에 의해 결정 되어야 함. 이렇게 하면 디자인이 일관되게 보이도록 도와줌
- 예제에서는 모든 요소들을 8의 배수로 사용. 간격은 8/16/24/32, 줄높이는 48/40/24, 텍스트 크기는 40/32/16
요소들은 시각적 가중치의 순서대로 배치되어야 함
- 한 행이나 열에 여러개의 요소들이 있고, 그중 일부가 다른 것보다 시각적으로 더 무겁다면(버튼 2개와 링크3개 처럼)
시각적으로 가장 무거운 요소가 먼저오고 가벼운 요소가 순서대로 마지막에 와야함 - 주의할 점은 시각적으로 가장 무거운 요소가 가장 바깥에 있어야 한다는 것
가로 그리드를 사용할 경우, 12개의 컬럼을 이용할 것
- 컬럼 단위로 나눈다면 12개로 하면 1,2,3,4 컬럼을 사용할 수 있어서 많은 유연성을 제공
대비가 높은 지점 사이에 간격을 둘 것
- 우리의 눈은 대비를 기준으로 요소의 가장자리를 찾기 때문에, 대비되는 지점 사이에는 간격이 있을 것으로 기대함
더 가까운 요소들은 더 밝아야 함
- 화면의 요소들이 사용자에게 가까울수록(더 앞쪽에 있을 수록) 더 밝아야함
- 이것은 라이트/다크모드에도 같이 적용 됨. 실제 세상이 이렇게 작동하기 때문
드롭 쉐도우 Blur 값을 거리 값의 두배로 설정할 것
- Y축으로 4픽셀 확장되는 그림자를 설정할 경우, 블러 값은 8 픽셀로 설정
- 요소가 보는 사람에게 "가까워 지면" 그림자의 불투명도(opacity)도 낮추는게 좋음
복잡한 것 위에 단순한 것을 두거나, 단순한 것 위에 복잡한 것을 둘 것
- 복잡한 배경(화려한 그라데이션)은 전면(텍스트)가 단순할 때 가장 잘 보임
- 앞이 복잡하다면 간단한 배경이 가장 적합
- 단순한 것 위에 단순한 것도 가능은 하지만 밋밋해 보임
- 복잡한 것 위에 복잡한 것은 시각적 혼란을 주므로 피해야 함
컨테이너 색상은 밝기 제한내에서 유지할 것
- 배경과 컨테이너 사이의 밝기 차이는 어두운 인터페이스에서는 12%, 밝은 인터페이스에서는 7% 이내여야 함 (HSB 컬러시스템 상의 밝기 값)
- 잘 디자인된 웹사이트 약 100개를 대상으로 컨테이너의 밝기를 배경과 비교하여 확인한 연구에서 알아낸 것
외부 패딩은 내부 패딩과 같거나 더 크게 만들 것
- 컨테이너의 내부 패딩은 컨테이너 내부의 요소 사이의 공간. 외부 패딩은 요소와 컨테이너 가장 자리 사이의 공간
- 외부 패딩은 내부 패딩과 같거나 더 커야함
본문 텍스트는 16px 이상으로 유지
- 16px는 대부분의 브라우저에서 기본 텍스트 크기
- 이 크기 이하의 텍스트는 읽기 어려우므로, 본문에는 사용하지 않는 것이 안전
70자 정도의 줄 길이를 사용할 것
- 줄길이가 60 이나 80인지는 그다지 중요하지 않지만, 어느쪽이든 멀리가면 가독성 문제가 발생할 수 있음
버튼의 가로 패딩은 세로 패딩의 두배로 설정
- 표준 버튼의 패턴은 높이보다 넓음
- 사람들이 버튼으로 인식하게 하려면, 이 패턴을 따르는 것이 좋음
최대 2개의 서체만 사용
- 두번째 서체는 디자인 뒤에 있는 컨셉을 강화할 수 있는 기회
- 또한 디자인에 다양성을 추가하는데 도움이 됨
- 두 개 이상 사용할 필요는 거의 없으며, 디자인이 시각적으로 혼란스럽게 느껴질 수 있음
중첩된 코너를 바르게 처리하기
- 가끔 두개 이상의 둥근 모서리가 중첩되는 경우가 있음
- 제대로 보이게 하려면 내부 모서리 반경을 외부 모서리 반경에서 둘 사이의 거리를 뺀 값으로 설정할 것
- 예) 외부 모서리 반경이 30px 이고, 내부 모서리와 20px 떨어져 있다면 내부 모서리 반경은 10px로
두개의 구분선을 같이 두지 말 것
- 배경 트렌지션, 컨테이너 가장자리, 분할선은 시각적으로 구분하기가 어려움
- 두 개 이상의 구분선이 붙어 있도록 하지 말 것
@xguru
전 긱뉴스 가독성을 위해 아래와 같이 스타일링해서 보고 있습니다. ;-)
https://userstyles.org/styles/179148#comments-section-wrapper
감사합니다.