8의 증분은 6포인트 시스템처럼 변수를 과부하 시키거나, 10포인트 시스템처럼 제한을 두지 않고 많은 양의 옵션을 제공한다. 결국 당신은 청중들에게 어떤 크기가 적합한지 결정해야 한다. ~ 엘리엇 달
3.크기(Scale)
8포인트 그리드 시스템이 매력적이라면, 모듈형 크기를 확인하고 8 또는 4의 배수에 가장 가까운 크기를 선택한 다음 이를 사용하여 공간 요소(크기를 가장 가까운 8의 배수로 반올림)에 알려라. 이렇게 하면 2.618과 같은 미친 숫자로 끝난다거나 해서 브라우저가 자체적으로 이를 반올림하여 예측하기 어려운 사태가 일어나는 것을 피할 수 있다.
4.의미 있는 크기
마케팅 유형 - 특정 이야기를 들려주고 방문자들이 사이트에서 시간 또는 돈을 쓸 수 있도록 하기 위해 제작되었다. 여백은 큰 스케일 비율로 더욱 극적인 방식으로 받아들여지며, 그 결과 공간 요소 사이에 더 큰 차이가 발생한다.
에디토리얼(사설) 유형 - 다량의 정보를 전달한다. 이 경우 공간은 일반적으로 마케팅 원형보다 공간이 더 좁다.
데이터 유형 - 세금 신고, 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은 비율과 관련된 기본 글자 크기를 조정함으로써 당신에게 유연성을 줄 것이다. 코디하우스( 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으로 코드화할 수 있지만, 시스템은 온전히 유지된다.
이 경우에 토큰에 대한 두 가지 공통적인 명명 규칙은 다음과 같다.
숫자 순서(space-1, space-2, space-3 등)를 따른다.
예컨대, space-1 = 16px 및 1rem space-2 = 24px 및 1.5rem space-3 = 32px 및 2rem 등이 있다.
티셔츠 크기(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 패딩 등이 있다.
|
