[TIL] 221110

😀 TIL #221110

 

- 피그마 인프런 강의 수강

오늘은 컬러팔레트를 만들고 타이포를 정의했다. 텍스트 스타일도 등록해보았다.

브랜드 색상에 일관성을 주고 작업의 효율을 높이기 위해 컬러팔레트를 미리 지정했다.

컬러를 미리 지정하면 우측 패널에서 클릭 한번으로 활용 가능하다.

컬러 팔레트와, 섀도우 이펙트 스타일

 

 

타이포 정의에 앞서 구글의 Materal Design 과 애플의 Human Interface Guideline 을 확인할 필요가 있다.

각각은 애플과 구글에서 일반 사용자도 알아보기 쉽도록 디자인 가이드 라인을 제공하는 사이트이다.

애플의 가이드라인의 경우 인터페이스 디자인을 설명하면서 그렇게 디자인한 이유도 간략하게 설명하고 있다. 작은 테마나 기능까지도 세세하게 설명하고, UX나 인터렉션까지 디자인한 이유와 근거가 작성되어 있다. 디자인의 크기도 표로 정리되어 있어 한눈에 보기 쉽다.

 

Material Design

Typography - Foundations - Human Interface Guidelines - Design - Apple Developer

 

나는 구글 매터리얼 디자인을 참고하여 아래 타이포그래피를 만들어 보았다.

그리고 컬러팔레트 제작과 같은 방식으로 텍스트 스타일도 지정해보았다. 

지난 사이트 리뉴얼 협업을 통해 느꼈듯,, 😂 프로젝트 협업 인력이 많고, 서비스가 복잡할 수록 디자인 시스템 구축은 더욱 중요하다.

내일은 레이아웃 그리드 까지 만들어볼 예정이다.

 

텍스트 스타일

---

✨ 오늘 한 일

 

- Material Design 에서 제공하는 ColorTool 써보기

Color Tool - Material Design

Material Design에서 컬러 조합을 단순하고 쉽게 추출해주는 사이트를 제공한다.

포스터나 웹사이트에 넣을 색상을 추출할때, 막상 입혀보면 뭔가 조합이 어색한 느낌이 들때가 있다.

이 사이트에서는 UI에 컬러를 입혀가며 눈으로 보면서 조합을 고를 수 있어서 유용하다.

Primary Color 과 Secondary Color을 조합해가며 다양한 UI에서 확인해볼 수 있고,

User Interface 탭 우측에 있는 Accessibility 탭을 눌러보면 Color Contrast 까지 확인할 수 있다.