[피그마 강의] 3주차: 파운데이션, 컬러 스타일, 폰트 스타일 이해하기

 

3-2) 파운데이션

 

• UI를 디자인하기 전 기초 재료는 컬러와 폰트다. 
• UI는 기초 재료인 파운데이션과 이 파운데이션을 조합해 만드는 컴포넌트로 나눌 수 있다. 
• 버튼이라는 컴포넌트를 만들기 위해서는 파운데이션부터 만들어야 한다.

출처: 체계적으로 배우는 피그마 기초 완전 정복 (3)

💡 모든 컴포넌트들은 이 파운데이션 요소를 조합해서 만들 수 있다. 

 

 

파운데이션의 구성

• 색상 Color
• 서체 Font, Typography
• 간격, 여백 Spacing, Gap
• 곡률 Radius
• 그리드 Grid
• 고도 Elevation (높이 개념)
• 아이콘 Icon

 

3-3) 컬러 스타일

 

RGB와 Hex Code

• 디스플레이는 빛의 3원색(RGB -> 빨, 초, 파이고 모일수록 밝아짐)으로 구현되는 화면이다.
  

  

  출처: 체계적으로 배우는 피그마 기초 완전 정복 (3)

• 빛의 농도와 명암을 조절해 여러가지 색으로 만든다. 
• 빛의 3원색은 빛을 더해가며 다른 색을 만들기 때문에 가산혼합이라고 부른다.   

• 컴퓨터는 빨강, 초록, 파랑을 각각 256가지의 값으로 보여줄 수 있다. (각각 0~255)
• 이 각각의 숫자를 컴퓨터는 16진수로 변환해서 읽는다. (00~FF)
• 이 16진수 값이 우리가 흔히 아는 Hex Code다. (#FFFFFF)

 

출처: 체계적으로 배우는 피그마 기초 완전 정복 (3)

• 색의 3원색(MYC -> 빨강: magenta, 노랑, 파랑: Cyan)은 모두 섞으면 까만색이고, 덜어내야 하기 때문에 감산혼합이라고 부른다. 

 

컬러 프로파일

• Hex Code는 빛의 3원색 정보를 16진수로 변환한 코드다. 
• 빛의 색상에는 절대적인 기준이 없어 디스플레이는 색상을 자신만의 기준으로 해석한다. 
• 디스플레이가 코드를 해석할 때 사용하는 색 기준표를 컬러 프로파일이라고 한다. 
• 즉, 디지털 화면은 빛으로 되어 있기에 화면과 프로그램에 차이가 생길 수 있다. 
  + 파일을 열어도 어떤 걸로 열었는지에 따라 색상도 달라짐

 

컬러스타일이란?

• 디자인에서 사용할 색상을 모아두는 팔레트를 뜻한다. 
• 색상을 아무렇게나 사용하는 것이 아니라, 사용할 색상들을 미리 정리해두고 그 안에서 사용한다. 
• 사용할 색상을 모을 때, 색상의 단계를 만드는 규칙을 만든다. 
• 규칙이 없다면? 팀원 간 색상을 사용하는 규칙을 알아차리기 힘들고, 커뮤니케이션을 불편하게 만든다. 

 

컬러스타일을 만드는 일반적인 방법

• 기본적으로 2~3가지 색상으로 만든다. 
  

  

  출처: 체계적으로 배우는 피그마 기초 완전 정복 (3)

• 일반적으로 포인트 컬러 하나만 놓고, 글자와 배경은 흑백 조합으로 사용하는 것을 추천한다.
  (그래야 화면을 단순하게 유지하면서 중요한 부분에 색상을 넣어 주목시키기 쉽다.)

 

1. 포인트 컬러: 우리 제품에서 정말 중요하고 핵심적인 부분에만 써야 하는 색상이다. 프라이머리 컬러 또는 엑센트 컬러라고 한다. 
2. 백그라운드 컬러: 우리 제품의 전체적인 분위기를 만들어 줄 배경색이다. 일반적으로 흰색(#FFFFFF)이다. 
3. 세컨더리 컬러: 배경에서 도드라지는 부분을 만들어서 포인트 컬러를 뒷받침하는 색상이다. 서브 컬러라고도 부른다.
   (잘 사용하지 않음)

💡 색상의 개수는 제품에 따라 정해도 무방하다. 배경색과 포인트색 하나씩 정해서 먼저 2개만 써도 괜찮음!

• 색상을 정했다면, 가장 밝은 단계부터 가장 어두운 단계까지 총 10단계로 만든다. 

• 📌 색상의 확장성:
  • 색상을 정할 땐 확장성이 있어야 한다. 다양한 상황에 대응할 수 있도록 유연하게 만들어둬야 한다는 뜻이다.
  • 만약, 흰색과 검은색만 준비해 놓은 경우에는 회색처럼 조금 덜 강조된 텍스트를 써야할 때 사용한 색이 없게 된다. 조금
  • 더 연한 색이나 조금 더 진한 색들을 준비해두면 더 강조하거나 덜 강조할 필요가 있을 때 사용할 수 있다. 그래서 하나의 색을 정하면 가장 밝은 색부터 가장 어두운 색으로 단계별로 만들어두는 것이다. 

 

• 📌 10단계로 만드는 이유:
  • 색상의 밝고 어두움(명도), 연하고 진함(채도)를 기준으로 10단계를 만들기 때문에 0%에서 100%를 10단위로 나눠 쓸 수 있다.
  • 10단위로 딱 떨어지기 때문에, 중간에 50단위의 색상을 더 추가하기 쉽고 색상 간의 차이도 10단위다 보니 알아보기도 쉽다.

💡 대부분 10단계로 만들지만 필요와 목적에 따라 5단계로 더 줄여서 써도 되는 등 정해진 답은 없음!

• 그 이후엔 글자 등에 기본으로 사용할 흰색과 검은색을 만들고, 회색 색상도 골라서 10단계를 만든다. 

 

1:3:6 법칙

• 디자인하는 게 아직 낯설다면 1:3:6 법칙을 최대한 지키는 것이 좋다.
  (전체적인 균형을 만들어주고 사용자가 집중해야 하는 부분을 더 쉽게 보여줄 수 있음)
  

  

  출처: 체계적으로 배우는 피그마 기초 완전 정복 (3)

• 포인트 컬러의 비율을 화면의 10% 정도만 사용한다. 
• 전체적인 배경인 흰색이 60% 정도 차지하도록 한다. 
• 포인트 컬러를 돋보이게 하기 위한 세컨더리 컬러로 나머지 30%를 쓴다. 

 

• 컬러 스타일 실습 

(/: 슬러시 사용은 폴더로 나눠줌)

 

3-4) 폰트 스타일

 

폰트 스타일이란?

• 폰트 스케일이라고도 하는데, 스케일은 일정한 규칙에 따라 정렬된 하나의 세트를 뜻한다. 

 

폰트 스타일의 구성

• 패밀리, 굵기, 크기, 행간, 자간 5가지로 이루어져있다.
  
  
• 패밀리 Family: 폰트의 종류를 뜻한다. (= 폰트 이름)
• 굵기 Weight: 무게감을 나타낸다. 얼마나 더 중요한지를 알려준다.
  디자이너는 Thin, Light, Regular 등 굵기 이름으로 이야기하는 것을 선호한다.
  (개발자는 100, 200 등 굵기에 할당된 숫자로 이야기하는 걸 선호함)
• 크기 Size: 폰트의 크기를 뜻한다. 16px부터 시작하고, 2px 씩 줄이거나 늘린다.
  일반적으로 20px 미만은 본문에 사용하고, 이상은 제목에 사용한다. 

📌 왜 16px가 시작점인가?

웹 사이트의 기본 폰트 사이즈가 16px이다. 앱이 나오기 전부터 웹 사이트의 기본 폰트 사이즈를 16px로 사용했기 때문에 자연스럽게 16px가 본문의 기본값이 되었다. 

 

• 행간 Line-height:
  • 폰트의 높이를 조절할 때 행간, 즉 글자 줄 사이의 간격을 이용한다. 행간의 기본적인 개념은 글줄과 글줄 사이의 간격을 뜻한다.
    • %같은 상대적인 단위나, px처럼 고정 단위로 나타낼 수 있다. ▶️피그마에서는 %단위(폰트 크기 만큼의)
  • 절대적인 값은 없지만, 적당한 행간 값은 가독성에 큰 영향을 미친다.
  • 행간이 너무 짧으면? 시선을 이동할 때 다음 줄을 찾기 어렵다. 또한 위아래 붙은 줄들이 계속 시야에 같이 들어와 읽는 걸 방해한다.
  • 행간이 너무 넓으면? 시선을 이동하면서 다음 줄을 놓친다. 또한 전체적인 문단이 벌어져 보여서 레이아웃을 해치기도 한다. 

📌 적당한 행간을 찾아내는 방법
적당한 행간은 정해져 있지 않다. 디자이너가 꾸준히 글자를 쓰고 확인하면서 찾아내야 한다. 그러기 위해선 글자를 많이 보고 써보면서 익숙해지는 훈련이 필요하다. 

📌 서체마다 행간을 확인해야 하는 이유

• 폰트는 폰트 마다 자체가 가진 기본적인 여백이 있다. 
• 이 여백은 폰트를 처음 만들 때 생기기 때문에, 우리가 바꿀 수 없는 기본값이다. 
• 그 기본값은 폰트마다 모두 다르다. 
  (+ 프리탠다드, 노토산스, 애플산돌고딕의 기본 공간, 다른 서체에 비해 노토산스의 위아래가 넓다.)

• 일반적인 행간 값
  • 서체마다 모두 다르지만 일반적으로 통용되는 값은 있다.
  • 제목처럼 굵고 큰 폰트는 120~135%, 본문은 135~170% 사이로 하는 것이 좋다.
  • 본문의 경우는 150%로 하는 게 제일 좋다고 알려져 있다. 

📌 왜 150%인가?

• 150은 2로 나눈 값을 더한 값▶️ 100 + 100*1/2 ▶️ 150%은 2배수로 움직일 수 있다는 뜻
• 기본폰트 16px 일 때, 16/2 -= 8 ▶️ 행간 값은 폰트 사이즈 16px 절반인 8px 를 더한 24px가 된다. 
• 즉, 규칙을 만들기도 간편하고 계산하기도 어렵지 않아 150%를 많이 사용한다. 

 

• 자간 Letter-spacing:
  • 글자와 글자 사이의 간격이다. 행간과 마찬가지로 상대단위와 고정단위 모두 사용할 수 있다. 

 

• 폰트 스타일 실습