[Section 06] 스타일가이드 만들기

🔮 컬러 팔레트 만들고 수정하기

• primary: 아이덴티티 컬러
• secondary: 메인 컬러 다음 레벨로 사용할 컬러
• Grayscale: 텍스트, 아이콘에 주로 사용하는 스케일
• System: green, yellow, red 로 신호를 알려주는 컬러

📍 컬러 등록하는 방법

1. rec 선택 -> Fill -> style 메뉴 클릭
2. +버튼을 클릭하고 이름을 지정 -> 여기서 /를 통해서 카테고리를 지정할 수 있다.
   

🔮 타이포정의하고 텍스트 스타일 등록하기

📍 Android, iOS 타이포그래피

• Android 타이포그래피 https://material.io/design/typography/the-type-system.html#type-scale

• iOS 타이포그래피 https://developer.apple.com/design/human-interface-guidelines/foundations/typography/

📍 사용자 지정 타이포그래피

• Headline
• Title: 16 정도의 크기가 ㄱㅊ
• Body
• Button
• Caption
• Overline

📍 행간 정하기

행간의 숫자는 주로 짝수이거나 4의 배수로 맞추어 주어야 한다.

• Headline 같이 한 줄로 정의되는 경우는 폰트 사이즈의 1.25배
• Title의 경우는 두 줄 이상이 나올 수 있으므로 1.25배를 해보고 직접 테스트를 해봐서 그 값을 수정한다.
• Body의 경우 멀티 라인으로 들어가는 경우가 많으므로 폰트 사이즈의 1.5배~1.75배를 해준다.

📍 타이포 등록하기

텍스트 클릭 -> style -> 이름 지정 후 create!

🔮 레이아웃 그리드 등록과 수정

요소들 사이의 간격을 일관적으로 관리하기 위해서 필요하다. 각각 들어가야될 디자인에 따라서 margin 이 포함된 프레임을 그리거나 리스트뷰 등을 그린다. => 이에 대한 이름은 논의를 통해서 정하면 된다.

🔮 스타일가이드 적용하기

위에서 만들었던 등록한 컴포넌트 사용하기.