# 안전하게 따라 할 수 있는 비주얼 디자인 규칙들 > Clean Markdown view of GeekNews topic #8573. Use the original source for factual precision when an external source URL is present. ## Metadata - GeekNews HTML: [https://news.hada.io/topic?id=8573](https://news.hada.io/topic?id=8573) - GeekNews Markdown: [https://news.hada.io/topic/8573.md](https://news.hada.io/topic/8573.md) - Type: news - Author: [xguru](https://news.hada.io/@xguru) - Published: 2023-02-27T11:03:02+09:00 - Updated: 2023-02-27T11:03:02+09:00 - Original source: [anthonyhobday.com](https://anthonyhobday.com/sideprojects/saferules/) - Points: 81 - Comments: 6 ## Topic Body - 꼭 따라야 할 필요는 없지만, 이 규칙들은 언제나 그대로 적용해도 괜찮음 ### 순수한 검은색/흰색 대신 검은색과 흰색에 가까운 색을 사용하기 - 순수한 블랙은 스크린에서 부자연스러워 보이고, 순백은 너무 밝음 - #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로 ### 두개의 구분선을 같이 두지 말 것 - 배경 트렌지션, 컨테이너 가장자리, 분할선은 시각적으로 구분하기가 어려움 - 두 개 이상의 구분선이 붙어 있도록 하지 말 것 ## Comments ### Comment 15109 - Author: sungwoo - Created: 2023-03-08T21:16:43+09:00 - Points: 1 @xguru 전 긱뉴스 가독성을 위해 아래와 같이 스타일링해서 보고 있습니다. ;-) https://userstyles.org/styles/179148#comments-section-wrapper 감사합니다. ### Comment 15066 - Author: metis041 - Created: 2023-03-06T09:10:09+09:00 - Points: 1 이건 참 좋네요..항상 디자인이 고민이였는데, 이런 가이드가 있으면 생산성을 크게 늘릴수 있겠습니다 ### Comment 15003 - Author: greenhead - Created: 2023-03-01T00:29:39+09:00 - Points: 1 번역 감사합니다! 도움이 많이 됬어요 ### Comment 14989 - Author: laeyoung - Created: 2023-02-27T18:18:43+09:00 - Points: 1 너무 좋네요! ### Comment 14988 - Author: cbk1411 - Created: 2023-02-27T18:05:17+09:00 - Points: 2 @xguru 오역이 있어서 말씀드려요 "더 가까운 요소들은 더 가벼워야 함" -> "더 가까운 요소들은 더 밝아야 함" ### Comment 14990 - Author: xguru - Created: 2023-02-27T23:05:18+09:00 - Points: 1 - Parent comment: 14988 - Depth: 1 아 그렇네요 고맙습니다~!