디자인 시스템 구축하기 3부 : 크기와 간격
해외 디자인 아티클 번역 뉴스레터 '디독' 구독링크: http://bit.ly/2FNQNpv
컬러, 공간 및 타이포그래피는 단단한 디자인 시스템을 위한 기본 구성요소이다. 브랜드를 만들 때 중점을 두어야 할 특유의 시각적 요소이기도 하다. 우리는 오늘 크기와 간격에 대해 자세히 살펴볼 것이다.
1부 - 준비
2부 - 컬러
3부 - 크기와 간격
4부 - 타이포그래피
5부 - 보너스
목차
1.크기와 간격
2.8포인트 그리드 시스템
3.크기(Scale)
4.의미 있는 크기
5.EM / REM VS 픽셀
6.REM , 픽셀 혼잡 결합
7.마진과 패딩
8.요약
1.크기와 간격
간격은 종종 간과되는 요소 중 하나이지만, 특징적인 브랜드를 만드는 데 큰 영향을 준다. 부트스트랩(Bootstrap)과 파운데이션(Foundation)처럼 인기가 많은 프레임워크는 견고한 베이스라인 그리드의 개념을 고려하지 않는다. 이러한 프레임워크의 선택을 주의해라. 측정 단위가 일정하지 않다면, 페이지 간 레이아웃의 불일치가 발생할 수 있는데 특히 두 명 이상의 디자이너가 있을 때 그러하다. “시스템”은 따라 하거나 반복하기 쉬운 경우에만 이점이 있다.
2.8포인트 그리드 시스템
측정 단위를 정의하는 방법은 여러 가지가 있다. 그중 8의 배수를 사용하는 것을 추천한다. 왜 8인가? 8은 2와 4로 나눌 수 있다. 이것은 고해상도로 인해 픽셀 크기를 곱하는 디스플레이를 고려할 때 중요하다. 예컨대, 1.5의 해상도에 5px의 숫자를 곱하면 0.5 픽셀 오프셋이 발생한다. 결과적으로 0.5 픽셀의 안티앨리어싱으로 가장자리가 흐릿하게 보이게 된다. 픽셀 절반 현상은 8pt 그리드 시스템에서는 발생하지 않는다.
포인트(pt)는 화면 해상도에 따른 공간 측정이다. 가장 간단하게 설명하면 "1x" 해상도(또는 @1x)에서 1pt = 1px라는 것이다.
“2x” 해상도 (@ 2x)에서 1pt = 4px가 된다. 왜냐하면 X 및 Y 축 모두에서 해상도가 두 배가 되므로 2px x 2px (2px x 2px)이다.
“3x” 해상도 (@ 3x)에서 1pt = 9px (3px x 3px) 등이 있다.
(https://blog.prototypr.io/design-system-ac88c6740f53) ~ 마르코 로페스(Marco Lopes)
일반적으로 8을 사용하면 기본 브라우저의 기본 글꼴 크기인 16px(8x2)와 일치한다. 가장 널리 사용되는 화면 크기는 중 일부는 적어도 한 축에서 8로 나눌 수 있어 쉽게 적용할 수 있다.
가장 대중적인 화면 크기의 대부분은 하나의 축에서 8로 나눌 수 있다.8의 증분은 6포인트 시스템처럼 변수를 과부하 시키거나, 10포인트 시스템처럼 제한을 두지 않고 많은 양의 옵션을 제공한다. 결국 당신은 청중들에게 어떤 크기가 적합한지 결정해야 한다. ~ 엘리엇 달
3.크기(Scale)
8의 배수는 크기를 사용하여 다르게 접근할 수 있다. 모듈형 크기는 중요한 간격의 리듬을 만드는 데 도움을 준다. 공간 간의 증분은 비율을 기준으로 한다. 이때 일반적으로 피보나치 수열 (Fibonacci sequence를 척도로 사용한다.
8포인트 그리드 시스템이 매력적이라면, 모듈형 크기를 확인하고 8 또는 4의 배수에 가장 가까운 크기를 선택한 다음 이를 사용하여 공간 요소(크기를 가장 가까운 8의 배수로 반올림)에 알려라. 이렇게 하면 2.618과 같은 미친 숫자로 끝난다거나 해서 브라우저가 자체적으로 이를 반올림하여 예측하기 어려운 사태가 일어나는 것을 피할 수 있다.
4.의미 있는 크기
엘리엇 달 (Elliot Dahl은 그의 저서에서 세 가지 일반적인 타이포그래피 시스템 원형들을 언급했다. 이는 공간에도 적용될 수 있다.
1)마케팅 유형 - 특정 이야기를 들려주고 방문자들이 사이트에서 시간 또는 돈을 쓸 수 있도록 하기 위해 제작되었다. 여백은 큰 스케일 비율로 더욱 극적인 방식으로 받아들여지며, 그 결과 공간 요소 사이에 더 큰 차이가 발생한다.
2)에디토리얼(사설) 유형 - 다량의 정보를 전달한다. 이 경우 공간은 일반적으로 마케팅 원형보다 공간이 더 좁다.
3)데이터 유형 - 세금 신고, git repo 관리, 성능 메트릭의 시각화와 같은 사용자 문제 해결을 위해 구축되었다. 이곳의 공간은 종종 제시할 데이터양이 많아서 무척 빽빽해진다. 공간 사이의 비율은 위에서 언급한 두 가지의 다른 원형보다는 훨씬 더 작다.
5.EM / REM vs 픽셀
EM, REM 또는 픽셀을 사용하는 경우가 있다. 픽셀은 엄격하고 정확하다는 장점을 갖고 있지만, 엄격하고 정확하다는 것이 단점이 되기도 한다.. 따라서 1px는 항상 정확히 1px로 표시된다. 엄격하고 덜 유연해지기를 원한다면, 픽셀 사용을 고려해보라.
EM과 REM의 큰 장점은 추상적이며 글자 크기에 기초한다는 것이다. 그러나 단점 또한 장점과 같다. 예컨대 글자 크기에 따라 1em 혹은 1rem이 16px 또는 160px로 변환될 수 있다. 하지만 이는 RM과 REM이 픽셀만큼 견고하고 정확할 수 없음을 의미하지는 않는다
EM과 REM은 고정된 크기로 고정되는 대신 요소를 위아래로 확장하거나 축소할 수 있다. 이러한 유연성을 사용하여 개발 중에 디자인을 더욱더 쉽고 신속히 조정하고 대응할 수 있으며, 브라우저 사용자가 사이트 전체 크기를 제어하여 가독성을 극대화할 수 있다.
그렇다면 진정한 단점은 무엇일까?
디자인 소프트웨어 도구들은 모두 픽셀을 측정 단위로 사용하기 때문에 EM과 REMS를 사용하는 것은 매우 혼란스러울 수 있다. 이는 디자이너와 개발자 모두에게 사용하기가 어려울 수 있다.
EM이란 무엇인가?
em단위를 사용할 때, 당신이 얻는 픽셀값은 스타일이 지정된 요소의 글자 크기를 곱한 것이다.
예컨대, div의 글자 크기가 18px인 경우, 10em은 180px이다. (예: 10 x 18 = 180)
REM이란 무엇인가?
REM 단위를 사용할 때 변환되는 픽셀 크기는 페이지의 루트 요소 (예 : HTML 요소)의 글자 크기에 따라 달라진다. 이 루트 글자 크기에는 REM 단위로 사용하는 숫자를 곱한다.
가령 루트 요소 글자 크기가 16px인 경우 10rem은 160px과 같다 (예 : 10 x 16 = 160)
REM과 EM에 대해 자세히 알고 싶다면 Evanto 's Tuts +에는 다음과 같은 훌륭한 기사가 있다. 포괄적 가이드 : Em과 Rem의 사용 시기
시스템이 앞에서 언급 한 세 가지 원형을 제공해야 하는 경우라면, REM은 비율과 관련된 기본 글자 크기를 조정함으로써 당신에게 유연성을 줄 것이다. 코디하우스(CodyHouse) 사람들은 코드 조각과 함께 그들의 디자인 시스템에서 이를 어떻게 달성했는지에 대해 훌륭한 기사를 썼다.
6.REM, 픽셀 혼잡 결합
이러한 혼잡은 REM에 초점을 맞춘 몇 가지 계산과 토큰으로 추상화하여 사전 대처할 수 있다.
1단계: 미리 계산하기
기본 글자 크기를 미리 설정한 다음에 계산하여 크기에 따라 px과 REM 비율을 개발한다.
예제: 16px을 기본 글꼴로 설정하는 경우, 1rem은 16px이다.
따라서 다음과 같다.
1rem = 16px
1.25rem = 20px
8px을 기본 글꼴로 설정하는 경우, 1rem은 8px이다.
따라서 다음과 같다.
2rem = 16px
2.5rem = 20px
2단계: 크기 이름 지정
이름이 지정된 토큰으로 값을 추출하면 혼란을 피할 수 있다. 이는 디자이너와 개발자 모두가 사용할 수 있는 공용어를 제공한다. 디자이너는 여전히 픽셀을 사용하여 디자인하고, 개발자는 REM으로 코드화할 수 있지만, 시스템은 온전히 유지된다.
이 경우에 토큰에 대한 두 가지 공통적인 명명 규칙은 다음과 같다.
1)숫자 순서(space-1, space-2, space-3 등)를 따른다.
예컨대,
space-1 = 16px 및 1rem
space-2 = 24px 및 1.5rem
space-3 = 32px 및 2rem
등이 있다.
2)티셔츠 크기(xs, s, m, l, xl 등)의 관례를 사용한다.
예컨대,
space-s = 16px 및 1rem
space-m = 24px 및 1.5rem
space-l = 32px 및 2rem
등이 있다.
이를 통해 디자인 시스템의 공통 언어를 바꾸지 않고도 향후 변경을 쉽게 할 수 있다. 더불어 공간 시스템이 코드 베이스의 완전성을 유지하면서 각 단계에서 특정 크기에 대해 유연성을 가진다.
7.마진과 패딩
일반적으로 컴포넌트(components)나 엘리먼트(elements)에는 균일한 패딩과 마진을 사용한다. 이 후 명명 규칙을 동일한 원칙에 따라 인셋(inset)/패딩 토큰, 아웃셋(outset)/마진 토큰으로 추정할 수 있다.
inset-1= 16px 패딩과 1rem 패딩
Inset-2=24px 패딩과 1.5rem 패딩
Inset-3= 32px 패딩과 2rem 패딩
등이 있으며,
intet-s=16px 패딩과 1rem 패딩
인셋-m=24px 패딩과 1.5rem 패딩
인셋-l= 32px 패딩과 2rem 패딩
등이 있다.
그리고
outset-1= 16px 마진과 1rem 마진
아웃셋-2= 24px 마진과 1.5rem 마진
아웃셋-3= 32px 마진과 2rem 마진
등이 있으며,
outset-s= 16px 마진과 1rem 마진
아웃셋-m=24px 마진과 1.5rem 마진
아웃셋-l=32px 마진과 2rem 마진
등이 있다.
8.요약
모듈식 크기(Scale)를 토큰 시스템과 의미 있는 네이밍과 함께 결합하면 공간 시스템에 강력한 접근이 가능할 것이다. 또한, 우리가 목표로 삼아야 할 세 가지를 달성할 것이다(1부에서 언급 )
1)쉽게 이해하고 적용할 수 있는 의미 명명 규칙
2)디자이너와 개발자의 협업 - 디자인 시스템은 디자인뿐만 아니라 코드로도 구현되어야 한다.
3)깨뜨리지 않고 바꿀 수 있다 - 어려운 가치와 개념을 토큰으로 추상화하면, 모든 것을 깨지 않고 미래에 무언가를 변경하기로 할 때 유연성을 얻을 수 있다.
다음 글은...
우리는 디자인 토큰과 원리, 색 설정, 크기와 간격과 같은 개념을 다루었다. 그다음 전체 디자인 시스템 중 해결해야 할 또 다른 요소가 하나 있다.
1부 - 준비
2부 - 컬러
3부 - 크기와 간격
4부 - 타이포그래피
5부 - 보너스
저자 : Shane P Williams
원문 링크: https://uxdesign.cc/building-a-design-system-where-to-start-part-3-size-and-spacing-a6f6f623491a
*무단 전재 및 재배포 금지(링크 공유 가능)
해외 디자인 아티클 번역 뉴스레터 '디독' 구독링크: http://bit.ly/2FNQNpv
