- HSL→ Hue(색조), Saturation(채도), Lightness(밝기)로 색을 구분하는 방법
2. 그라데이션 팔레트 만들기
- L값(Lightness)을 10단위로 증가 또는 감소시켜 명도 단계를 만듦
3. 레이어에 만들어진 사각형의 이름을 Primary, Secondary, Tertiary(세번째의)로 변경 - 색상 이름/숫자
- 가장 밝은 색상은 '/50', 가장 어두운 색상 '900', 나머지는 '100'~'800'까지 100씩 올려줌
- 사각형 이름을 변경할 때 '/(슬래시)'를 넣는 이유 → 폴더로 사용할 수 있음
4. 만든 모든 사각형을 선택한 후 Styler 플러그인에서 Generate Style을 선택함
- 스타일이 생성이 된 경우, 팝업 메시지를 확인할 수 있음
5. 빈 캠버스를 선택한 후 스타일 패널 확인
<폰트 스타일> = 폰트 스케일
- 디자인 시스템에서 사용할 폰트를 모아둔 목록
- 스케일은 일정한 규칙에 따라 정렬된 하나의 세트를 의미함
일반적인 폰트 스타일 구성
패밀리(Family) - 폰트의 종류 - 폰트 이름
굵기(=무게감, Weight) - 폰트의 굵기보다 글자의 무게감과 중요도를 나타내는 값임 - 무게감이 클수록 더 중요한 정보로 인식됨 - 디자이너는 Thin, Light, Regular 등의 굵기 이름으로 표현하는 것을 더 선호함 - 개발자는 100, 200 등 굵기에 할당된 숫자로 표현하는 것을 더 선호함
크기(Size) - 폰트의 크기 - 일반적으로 16px 부터 시작함, 2px 씩 줄이거나 늘림 - 크기가 너무 작으면 읽기 힘들어지므로 10px 미만으로는 사용하지 않는 걸 권장함 - 폰트 크기가 20px 이상일 때는 4px 씩 차이나게 하는 게 일반적임 → 폰트 크기가 커지면 2만큼의 폰트 크기 차이는 육안으로 구분하기 힘듬 - 일반적으로 20px 미만인 폰트들은 본문에 사용하고 20px 이상부터는 제목에 사용함
*16xp → 웹사이트의 기본 폰트 사이즈
행간(Line-height) = 라인-하이트 - 디지털 환경에서 글자 줄의 높이를 조정할 때 사용하는 폰트 속성 - 폰트의 높이는 행간 값을 조절하여 관리함 - 행간은 % 와 같은 상대적인 단위 또는 px처럼 고정 단위로 나타낼 수 있음 - 글자의 크기와 그 사이 간격을 합친 값 적당한 행간을 적용해야 하는 이유
- 가독성에 큰 영향을 줌 - 행간이 너무 좁으면 줄 구분이 어려워 읽기 불편해짐 - 행간이 너무 넓으면 시선 이동이 길어져 읽기 어려워짐 - 적절한 행간은 가독성과 레이아웃의 균형을 높여줌 - 행간의 정답은 없으며 콘텐츠와 목적에 맞게 조정해야 함
서체마다 행간을 확인해야 하는 이유
- 폰트마다 고유한 기본 여백을 가지고 있음 - 기본 여백은 폰트 제작 단계에서 결정되는 변경 불가능한 고유 속성임 - 폰트에 따라 위,아래 여백의 크기가 다르게 나타남 - 디자이너는 폰트의 형태와 공간 특성을 이해하고 사용해야 함
일반적인 행간 값 - 제목처럼 굵고 큰 폰트 - 120~135%, 본문 - 135~170% 사이 - 본문은 대체로 150%가 가장 좋음
*150%가 좋은 이유 - 계산이 간단하고 일관된 규칙을 만들기 쉬움 - 100 + 100 X 1/2 = 150% → 2배수로 움직일 수 있음
- 주의할 점 → 노토산스는 150%로 할 경우 행간이 매우 멀어짐
자간(Letter-spacing) - 글자와 글자 사이의 간격 - 상대단위와 고정단위 모두 사용 가능
실무에서의 폰트 스타일 - 실무에서는 목적과 브랜드에 맞는 폰트 스타일을 설계하기 위해 다양한 검토 과정을 거침 - 크기, 굵기, 행간 등을 종합적으로 고려하여 스타일을 구성함 - 같은 폰트라도 사용 목적과 위치에 따라 다르게 활용할 수 있음
