[3강] 01. 파운데이션과 컬러스타일

 

파운데이션 : UI를 구성하는 가장 작은 알갱이이자 기초 재료.

 

• UI는 버튼, 체크박스나 라디오, 탭 등 우리가 화면에서 볼 수 있는 모든 요소를 뜻 함.
• UI 요소 컴포넌트를 만들기 위해서는 파운데이션부터 만들어야한다.
• 즉,UI는 기초 재료인 파운데이션과 이 파운데이션을 조합해 만드는 컴포넌트로 구성되어있다.
• 구성
  색상,서체,간격과 여백,곡률,그리드,고도(높이),아이콘.

컬러 스타일

• RGB와 Hex 코드 : 
  디스플레이는 빛의 3원색으로 구현되어 빛의 농도와 명암을 조절하는 가산혼합을 통해서 여러 색을 만드는데, 이를 RGB라고 한다.
  RGB는 각각 256가지 값으로 보여줄 수 있어서 범위가 0~255로 표현된다. 그리고 이 RGB 값을 16진수로 변환해서 읽는 게 헥스HEX 코드이다.
• 컬러 프로파일 : 디스플레이가 렉스 코드를 해석할 때 사용하는 색 기준표. 프로파일 마다 보여주는 색상의 범위가 다르며, 디스플레이 말고 프로그램에도 별도의 컬러 프로파일이 있기도 하다.
  
  
• 컬러 스타일 : 디자인에서 사용할 색상들을 미리 정리해두고 모아두는 팔레트.
  
  컬러 스타일 만들기 : 일반적으로 화면을 단순하게 유지하면서 중요한 부분에 주목시키기 위한 색상을 넣는 포인트 컬러 하나+글자/배경용 흑백 조합으로 사용을 추천.

포인드 컬러	백그라운드 컬러	세컨더리 컬러
프라이머리 컬러 또는 엑센트 컬러라고도 부른다. UI에서 중요하고 핵심적인 부분에서만 쓰는 색상	제품의 전체적인 분위기를 만들어 줄 배경색.	배경색에서 도드라지는 부분을 만들어서 포인트 컬러를 뒷바침하는 색상.

 

      색상을 정했다면 다양한 상황에 대응하도록 확장성 있게 가장 밝은 색부터 가장 어두운 색을 단계 별로 총 10단계로 만든다.

      Q : 10단계인 이유는?

      A : 색상의 명도랑 채도를 기준으로 10단계를 만들기 때문에 0에서 100을 10단위로 나눠 쓸 수 있으며, 이때 중간에 50 단위 색             상을 추가하기 쉽고, 색상 간 차이도 10단위라서 알아보기 쉽다.

• 1 : 3 : 6 법칙 :  포인트 컬러 비율은 화면의 10%, 전체적인 배경은 60%, 세컨더리는 남은 30%.
  전체적으로 균형을 만들어 주고 사용자가 집중해야 하는 부분을 더 쉽게 보여줄 수 있다. 
  
  
• 실습

 

1.포인트 컬러 | 백그라운드 컬러 | 세컨더리 컬러 를 고르고 복사해서 10개로 만든다.

 

2. 왼쪽부터 컬러의 HSL값에서 L부분을 10단위로 제일 낮은 값으로 바꾸고, 왼쪽 부터 10씩 올린다.

3. 나머지 색들도 동일하게 바꾼 다음, 구별하기 쉽게 이름을 변경한다.

4. 이후 색상들을 고른 다음, Styler 플러그인의 Generate Styles 기능을 이용하여 팔레트로 만든다.