[사전캠프] d+5.

📌
1. 1:3:6 규칙
2. 컬러 스타일 만들기
3. 폰트 속성
4. 폰트 스타일
5. 마스터 컴포넌트와 인스턴스

1. 1:3:6 규칙

1 - 포인트 컬러(가장 중요한 색상)의 비율을 화면의 10%정도만 사용
3 - 포인트 컬러가 돋보이도록 세컨더리 컬러로 나머지 30% 사용
6 - 전체적인 배경이 60% 정도 차지하도록 배경색 사용

정답이 아닌 가이드라인이므로 다른 앱, 웹을 관찰하며 분석해서 상황에 맞게 변형, 확장 가능

2. 컬러 스타일 만들기

1. Coolors라는 피그마 플러그인으로 원하는 색상 조합이 나올 때까지 제네레이트
   

2. 사용하고 싶은 색만 남기고 색상 코드 복사해서 만들어둔 도형의 색상 값에 붙여넣고 10개씩 복사, 붙여넣기

3. 컬러 모드를 HSL(Hue Saturation Lightness)로 변경
   

4. 명도 부분이 사진과 같이 79이니 가장 왼쪽에 있는 사각형부터 9로 시작하여 10씩 커지도록 변경
   

5. 사각형 하나하나의 이름을 변경 (슬래시 / 를 추가해야 뒤의 숫자만 남는다.)
   

6. 사각형 모두를 선택하여 우클릭하여 Styler라는 플러그인으로 스타일을 생성
   (플러그인을 미리 저장)

7. 다 끝나면 로컬 스타일의 컬러 스타일에 저장되어있다.
   

(약간 귀찮았지만 이런 과정으로 만들어진다는 것이 신기했다🤩)

3. 폰트 속성

패밀리 (Family)

폰트의 종류(글꼴), 폰트의 이름이라고 생각하면 된다.
ex. 나눔고딕, pretendard, Noto Sans KR

굵기 (Weight)

일반적으로는 굵기라는 뜻이지만 더 정확하게는 무게감을 의미한다.
굵을수록 (무거울수록) 더 먼저 중요하게 읽어야한다는 것을 뜻한다.

디자이너가 폰트의 굵기를 얘기할 때는 Thin, Light, Regular라고 이야기 하지만 개발자는 할당된 숫자인 100, 200, 300 처럼 이야기한다. 따라서 디자이너와 개발자간의 합의 필요하다.

크기 (Size)

폰트의 크기
일반적으로 16px (1rem)부터 시작하고 2px씩 줄이거나 늘림
폰트 크기가 20px 이상일 경우, 4px씩 차이를 준다.

크기가 너무 작으면 가독성이 떨어지기 때문에 10px 미만으로는 사용하지 않는다.

일반적으로 20px 미만인 폰트들은 본문, 20px 이상부터는 제목에 사용한다.

왜 16px인가?

웹사이트의 기본 폰트사이즈가 16px이기 때문이다.
앱이 나오기 전부터 웹사이트의 기본 폰트를 16px로 사용

행간 (Line - Height)

디지털 환경에서는 글자의 크기와 그 사이 간격을 합친 값
일반적으로는 글줄과 글줄 사이의 간격을 의미
단위 : %(상대 단위), px (고정 단위)

절대적인 값은 없지만 행간값은 가독성에 큰 영향을 미친다
행간이 너무 짧으면 다음줄을 찾기 어려움
행간이 너무 넓으면 다음줄을 놓치고 문단이 벌어져보여 레이아웃을 해친다

서체 자체가 가진 기본적인 여백이 모두 다르기 때문에 서체마다 행간을 확인해야한다.

일반적으로 제목 : 120 - 135% , 본문 : 135- 170%

왜 150%인가?

150 = 100 + 100 / 2
2배수로 움직일 수 있다는 뜻
기본 폰트가 16px일 경우, 행간 값은 24px (16 + 8) 이 됨
규칙을 만들기에도 간편하고 계산하기도 어렵지 않아 150% 사용
하지만 서체마다 가지는 여백이 다르기 때문에 조정이 필요

자간 (Letter-Spacing)

글자와 글자 사이의 간격
상대단위와 고정단위 모두 사용

4. 폰트 스타일

디자인 시스템에서 사용할 폰트를 모아둔 목록

다른 말로는 폰트 스케일이라고도 하며, 스케일은 일정한 규칙에 따라 정렬된 하나의 세트를 의미

폰트 스타일 만들기

1. 텍스트 레이어를 생성하고 내용을 입력한 뒤 폰트를 지정하고 크기 16px, 행간 150% 입력한다.

2. 본문에 사용하는 폰트 스타일이므로 이름을 Body / 16px로 변경한다.

3. 이와 같이 14px, 18px도 만들어준다.

4. 16px를 복사해와 제목에 사용하는 폰트스타일을 만들어줄 것이므로 Title / 16px로 변경한다.

5. 굵기를 Regular에서 두단계 위인 semiBold로 변경하고 행간도 135%로 변경한다.

6. 이와 같이 14px, 18px도 만들어준다.
   

7. 컬러 스타일 만들었던 것처럼 모두 선택하고 Styler 플러그인으로 만들어주면 끝
   
   (스타일러가 스타일 생성이 다 끝나면 이렇게 알림이 뜬다!)

5. 마스터 컴포넌트와 인스턴스

컴포넌트 : 파운데이션 요소를 조합하여 만들어지는 UI 블록

마스터 컴포넌트 (Master Component)

복사된 디자인들을 한 번에 수정하거나 편집할 수 있는 중요한 기능

컴포넌트가 원본, 컴포넌트를 복제하면 인스턴스가 생성된다.

Frame1이 컴포넌트이고 Frame2가 인스턴스이다.

인스턴스 (Instance)

컴포넌트의 복제본, 컴포넌트의 속성을 그대로 물려받는다.

특징

1. 컴포넌트를 수정하면 인스턴스도 동일하게 수정된다.

2. 인스턴스를 먼저 수정하면 컴포넌트를 수정해도 반영되지않는다.

3. 컴포넌트를 지우더라도 인스턴스는 남아있는다.

4. 연결을 해제하면 컴포넌트와 인스턴스는 분리되고 일반 프레임으로 변경된다.

🍀다음 시간에 학습할 내용
디자인 시스템의 이해
UI 디자인 기본
UI 만들기 실습
UI 학습 시 도움되는 관점