Today I Learned
[이번주 목표] 피그마 활용 강의 완강, 개인과제 제출
오늘 할 일 피그마 강의 완강
1. 오늘 배운점
UI 폰트 / 컬러 규격
1. 폰트
종류
- Display : 화면에서 가장 큰 텍스트. 짧고 중요한 텍스트/숫자에 적용. 손글씨같은 스타일의 표현력 있는 글꼴 선택을 고려.
- Headline : 디스플레이보다 작은 화면에서 짧고 강조되는 텍스트에 적합. 콘텐츠 중요 영역 표시하는데 유용함. 행간 활용으로 가독성 유지
- Title : 헤드라인보다 작으며, 짧은 내용의 중간 정도 강조 내용을 적음. 상단 탭바 혹은 카테고리 헤더에 사용 가능
- Body : 긴글에서 사용. 가독성을 위한 작은 폰트 사용하며 장식적인 폰트 지양.
- Label : 컴포넌트 내부 폰트, 본문에 포함된 캡션같은 작은 유틸리티 스타일. 빠르게 읽히는 작은 폰트, 음악 플레이어 타임코드, 네비게이션바 아이콘라벨 등에 사용
cf) 8픽셀, 4픽셀 그리드 > 크기는 각 4/8 단위로 변주
스타일
영어
행간 : 폰트 사이즈 * 1.2 (Google material 기준)
좀 더 작은 body 크기, 라벨 크기의 폰트에서는 *1.5
한국어
행간 : 디자이너 재량이지만 보통 폰트 사이즈 *1.6
자간 : 디자이너 재량이지만 보통 16pt~17pt 본문에 -0.3 or -2.5%
폰트 사이즈 : 디폴트값 16pt
표준 모바일 폰트 크기 예시
Title : 29 - 40px (180~220%)
Subtitle : 20 - 30 px (130~150%)
Body : 16 ~ 20px
Caption : 11 ~ 16px (70~80%)
Minimal size : iOS 11pt, And 12sp, Web 14px
아이콘과 함께 사용 할 때
- 아이콘과 폰트 사이즈 일치 시킬 것
- 폰트 스타일과 아이콘 스타일을 일치 시킬 것
- 아이콘 baseline을 텍스트 크기의 약 11.5%로 낮출 것
색상 및 대비
바탕색 및 폰트색상 최소 4.5:1 대비
2. 색
명칭
- 주색 Primary
- 보조색 Secondary
- 3차 색Tertiary
- 흑백 Black, White
- 그레이 스케일 : Gray
색대비
다른색으로부터 비교되기 위한 대비
웹 접근성 기준 명암 대비 색상 찾기 : https://app.contrast-finder.org/
기준
A(최소) 3:1
AA(중간) 4.5:1 (cf. AA레벨을 표준으로 사용)
AAA(최대) 7:1
cf. 비텍스트 컴포넌트 최소 : 3:1
텍스트 컴포넌트 최소 : 4.5:1
색조합
단색 Monochromatic
유사색 Analogous
보색 Complemntary
색 비율
1:3:6 = 강조색(ex프라이머리컬러) : 2차 색 : 배경색
2. 아쉬운점
아직 이론부분이 많이 부족하다. 인풋이 더 많이 필요함.
3. 앞으로 다짐
ui 이론 인풋 넓히면서 실제 레퍼런스 함께 공부하기