4px 간격 시스템과 작별하고 피보나치 수열을 만나다
*원문 출처를 번역한 글입니다.
4px 간격 시스템과 피보나치 시스템의 비교.저는 새로운 디자이너와 함께 일할 때마다 일관된 루틴이 있습니다. 구글에 들어가 "8px grid Medium.com"을 검색하고, Elliot Dahl의 종합 가이드를 찾아 그들에게 보내주는 것입니다. 바로 이 가이드입니다.
이 가이드는 정말 훌륭해서 적극 추천하고 싶습니다. 저는 올해까지 4의 배수(8이 아니라!)를 거의 제 디자인 성경처럼 여겨왔습니다. 새로운 요소를 추가할 때요? 당연히 왼쪽 패딩은 16, 위쪽은 12로 잡아야 하지 않겠어요? 단 한 번도… 예외 없이요.
패딩 값을 나타내는 라벨이 있는 Pill 컴포넌트. 좌우 패딩 값은 16, 상하 패딩 값은 12입니다.이러한 디자인 접근 방식은 예측 가능성을 높여주고 컴포넌트를 빠르게 구성하는 데 있어 자연스러운 '반사 신경'처럼 작용하지만, 아쉽게도 모든 디자인이 비슷해 보이는 세상에 스스로를 가둔 건 아닌가 하는 생각이 듭니다.
홀수
패딩 값이 짝수인 필(Pill 컴포넌트와 홀수인 Pill 컴포넌트의 비교.어쩌면, 모두의 창의성과 정신 건강을 위해 간격을 설정할 때 짝수 대신 홀수를 사용하는 방법을 고려해볼 만할지도 모릅니다.
이것 때문에 그리드 시스템의 '정석'을 어기게 되더라도 감수할 준비가 되어 있습니다.
제가 짝수 기반의 4px 그리드 시스템에 대해 느끼는 문제는 수직 또는 수평으로 다소 헐겁게 느껴질 수 있다는 점입니다. 비록 이 방식이 현재 프로덕트 디자인의 사실상 표준이 되었지만, 저는 컴포넌트에 불필요한 군살처럼 느껴지는 몇 픽셀이 자꾸만 신경이 쓰입니다.
비교
기존의 스페이싱 규칙 또는 홀수 규칙을 적용한 필 컴포넌트의 비교 이미지입니다. 각 이미지 위에 패딩 값이 겹쳐 있습니다.두 가지 방식을 비교해 봅시다.
위 이미지의 왼쪽에는 4px 시스템을 사용한 기존의 간격 설정 컴포넌트가 있고, 오른쪽에는 홀수 값을 사용해 미세 조정된 컴포넌트가 있습니다. 개인적으로는 홀수 방식이 더 좋게 느껴집니다.
여러분은 어떻게 생각하시나요?
이 예시에서는 패딩이 더 꽉 차 보이도록 수동으로 1~2픽셀 정도 값을 조정했습니다. 특히 위에서 두 번째와 네 번째 fill 컴포넌트에서 그 차이가 두드러집니다. 비교해 보면 홀수 방식을 적용한 쪽이 훨씬 더 일관성 있게 패딩 처리된 느낌을 줍니다.
폰트는 어떨까요?
이 아이디어에 대한 첫 번째 반발은 폰트 자체의 크기가 스페이싱을 방해할 수 있다는 점에서 올 수 있습니다. 한번 살펴봅시다.
4px 시스템 또는 홀수 시스템을 사용한 6가지 폰트 비교: Oxygen Mono, Noto Serif, Roboto, Poppins, Palatino, Koulen.흥미롭게도 두 방식 간의 느낌에 큰 차이는 없습니다.
홀수 간격을 적용하면 모노 폰트든 세리프 폰트든 관계없이 더 꽉 찬 결과물을 얻을 수 있습니다.
여기서 중요하게 짚고 넘어가야 할 점은, 모든 요소가 어우러지는 방식에 행간이 영향을 미친다는 것입니다. 행간이 100%로 설정된 한 줄짜리 텍스트에는 잘 작동하지만, 텍스트 양이 많은 경우에는 추가적인 실험이 필요합니다.
중요: 이 fill 컴포넌트 내의 모든 폰트 크기와 아이콘은 짝수 크기로 설정되었습니다! 따라서 내부 요소는 짝수로, 외부 요소는 홀수로 조합하는 것이 조화를 이룰 수 있는 방법일지도 모릅니다.
실제 사례
노션 메일 랜딩 페이지, 히어로 영역 스크린샷. 폼 상단에 픽셀 완벽성을 보여주는 주석이 달려 있습니다.최근 노션의 새로운 메일 랜딩 페이지를 보다가 이 접근 방식을 발견했습니다.
노션은 짝수와 홀수 값을 효과적으로 혼합하여 이 문제를 해결했습니다. 버튼의 패딩은 '느낌'을 위해 홀수 값으로 미세 조정했지만, 내부 및 외부 요소의 border-radius는 클래식한 계산법을 사용해 미세하게 조정하면서도 계산에 근거한 값을 적용했습니다.
시스템화하기 — 피보나치 도입
4px 그리드 시스템과 피보나치 척도(스케일)의 비교.이 아이디어를 시스템으로 만들어 보려 한다면, 이 무모한 시도에 최소한의 규칙을 더하고 싶을 것입니다. 여기서 피보나치 수열과 같은 시스템의 도움을 받아 복잡한 작업을 처리할 수 있습니다.
4px 그리드4px 시스템에서는 기준 단위 4를 사용하며, 1(또는 0.5)을 곱하여 시스템을 만듭니다. 하지만 피보나치 시스템은 이전 두 값을 더하는 방식으로 작동합니다.
피보나치 간격 시스템.앞서 발견했듯이, 피보나치 시스템은 분명히... '홀수'지만 저는 이 방식이 마음에 듭니다.
예시 컴포넌트에서 두 시스템을 비교해 보면 그 차이는 미미합니다. 하지만 우리가 바로 이런 미묘한 차이를 위해 존재하는 것 아닌가요? (물론 그냥 하는 말입니다.)
더 읽어볼 자료
업계의 매우 유능한 분들이 만든 도구들을 확인해 보는 것을 추천합니다.
원문 출처 : https://medium.com/@disco_lu/saying-bye-to-4px-spacing-and-hello-to-fibonacci-58477e3ecca3
DEET를 구독하고 커리어 성장을 위한 작은 습관을 시작해 보세요.
