[디자인] 8-Point Grid : 보더와 레이아웃 - 2

8 포인트 그리드 시스템 소개에 대한 첫 번째 글에서 워크 플로우를 변환 할 주요 이유를 설명했습니다. 이것은 Pivotal Cloud Foundry에서 설계 시스템을 8pt 시스템으로 이동하면서 대답해야했던 까다로운 질문에 답변들 입니다.

8pt 그리드 시스템에서 borders를 어떻게 계산합니까?

이 질문은 다양한 UI 요소가 등장하지만 버튼을 예로 들어 보겠습니다. auto width 버튼을 사용하면 콘텐츠의 width가 결정되고 왼쪽과 오른쪽에 8px 패딩을 추가하기로 결정했습니다. 현재 브랜드 스타일은 윤곽선이 지정된 버튼을 요구합니다. border는 어떻게 계산합니까?
presentation
8pt 시스템에서는 borders에 두 가지 접근 방식이 있습니다. 패딩 (현재는 7px)에서 1px를 뺀 다음 1px 보더가 정확히 8px의 왼쪽 및 오른쪽 공간을 만들도록합니다. 또는 8px 패딩을 왼쪽과 오른쪽으로 유지하고 1px 테두리가 너비에 추가되도록 허용합니다. 또는 세 번째 옵션 인 테두리를 사용하지 마십시오. 기술적으로 계산 된 공간이 아닌 작은 그림자를 사용하거나 단색 배경 버튼을 만들어 이슈를 완전히 피할 수 있습니다.
여기서 논쟁은 요소 간의 수평 리듬(horizontal rhythm)에 이것이 어떻게 영향을 미치는지입니다. 이 예제에서는 Sketch에서 inside border 를 1px로 정의했습니다.
presentation
8pt 비쥬얼 순수 주의자는 그리드가 픽셀을 따라 가면서 첫 번째 옵션을 선택해야한다고 주장합니다. 독창적인 재능있는 단일 개발자가이를 통해 쉽게 추론하여 제공 할 수 있습니다. 그러나 이것은 디자이너와 개발자로 구성된 분산 된 팀에서 무너집니다. 마음의 뒤쪽에있는 이 작은 열쇠를 지키면 일관성있는 공간 측정 시스템의 가치를 떨어 뜨리고 실수를 유발할 수밖에 없습니다. 질문은 디자인 파일을 존중하거나 코드를 존중하는 것으로 이어집니다.
Pivotal UI를 8pt 그리드로 변환하는 동안 측정 단위가 8이 아닌 경우 내부 팀의 많은 질문을 받았습니다. 이러한 종류의 1px 논리를 사용하면 워크 플로가 복잡해지고 엔지니어와 디자이너가 혼란을 겪을 수 있습니다. 1px 경계선이 8px 내부 패딩 외부 공간을 유지할 수있게하는 두 번째 옵션으로 계속 진행하고 있습니다.

"그 가치는 단지 발표에있는 것이 아니라 구현 상태에있다"
- 브린 잭슨 Bryn Jackson

웹 브라우저 VS 디자인 에서 경계선은 어떻게 측정됩니까?

Sketch / Illustrator / Figma / Xd / Photoshop은 웹 브라우저에서와 같은 방법으로 테두리를 계산하지 않습니다. 디자인 도구는 도형의 안쪽이나 바깥쪽에 경계선을 둡니다. 모양의 크기에는 포함되지 않습니다.
presentation
현대 디자인 툴은 border를 측정하지 않습니다.
위의 예제는 다른 border 방향을 가진 두 개의 동일한 크기의 상자가 사각형 자체의 border 상자에 의해 어떻게 측정되는지를 보여줍니다. 웹 브라우저는 테두리를 단색 공간으로 측정합니다. 웹 브라우저가 box-sizing 속성을 통해 테두리를 적용 할 수있는 두 가지 방법이 있습니다.
  1. border-box 선언은 정의 된 height와 width의 안쪽에 border를 가져 오지만 내부 내용을 밀어 넣습니다.
  2. content-box 선언은 padding와 border를 정의 된 height와 width 외부로 계산하도록 푸시합니다.
관심이 있으시면 상자 크기 조정 내역을 여기에서 보거나 여기에서 나의 Codepen 예제를 확인하십시오. 아래의 두 상자는 기본 스타일이 동일하지만 상자 크기 속성이 다르기 때문에 페이지의 상대 공간도 이에 따라 변경됩니다.
presentation
이 모든 것은 엔지니어들과 대화를 나누는 것입니다. 고 충실도 디자인 파일이든 코드에 있든 진실의 근원이 어디에서 살아 있는지 확인하십시오.
"스케치의 모형은 일반적으로 코드에서 몇 픽셀 떨어져 있으며 괜찮습니다. 이 코드는 진실의 근원입니다. "
- Paul Farino, Pivotal Labs

모든 레이아웃이 8pt 시스템에서 작동하는 것은 아닙니다. Android는 작동하지만 iOS는 5-unit 단위에 더 적합하지 않나요?

정확하지는 않지만. margins / paddings을 8 단위로 설정하고 내용을 유연하게 지정할 수 있습니다. 모바일 UI는 오늘날 사용 가능한 다양한 화면 크기를 수용하기 위해 어느 정도 반응해야합니다. 즉, 모든 모바일 화면 레이아웃에 적합한 고정 된 그리드 숫자는 없음을 의미합니다.

Apple은 데스크톱 또는 모바일 앱 레이아웃을 위해 8pt 그리드를 따르지 않습니다. 왜 ?

Apple의 HIG가 8pt 시스템을 따르지 않거나 공간 설계 시스템에 많은 언급을하는 것은 사실이지만, 여전히 가능합니다 (업데이트 : Apple은 현재 8pt 그리드를 직접 언급 함). 구글 머티리얼은 독창적 인 그리드 시스템의 가장 훌륭한 대규모 사례이지만, 나는 그들이 그들의 추론을 설명하는 것을 꺼려한다는 것을 알았다.
8pt 시스템은 팀이 신속하고 효율적으로 이동할 수있게하는 사고 방식입니다. 궁극적으로 팀, 제품, 플랫폼 및 대상에 맞는 것이 무엇인지 결정해야합니다.

번역글 추천(신청) 받습니다.

PS. 안녕하세요. 일 년 조금 넘게 제가 공부 좀 해보려고 블로깅을 처음 시작했는데, 생각보다 많은 분들께서 제 번역 글들을 보시고 계셔서 놀라기도 하고 좋기도 했습니다.
혹시나 읽고 싶은 좋은 디자인 관련 해외 글들이 있다면 리뷰에 달아주세요. 가능하면 번역해보려고 합니다.
기간은 보통 원작자 허락 구하는데 3일정고 그리고 번역은 1일 정도입니다. 신청하시면 가능한 1주일 내에는 충분히 볼 수 있지 않을까 생각됩니다.

이 글은 번역글입니다.
원본링크입니다.