[Figma] 피그마 활용 1-3

• 1. 플러그인에서 고른 색상을 복사해서, 피그마에 사각형을 만들고 각각 배경색으로 넣어 주세요.
  
• 
  1. 각각의 사각형을 10개씩 복제해 주세요.
• 
  1. 포인트 컬러 사각형을 눌러서, 색상 피커를 열어 주세요.
• <aside> 💡 명도를 10단계로 나눠볼 거예요.
• </aside>
  1. 색상 피커에서 HEX 눌러, 색상 코드를 HSL로 바꿔 주세요
• <aside> 💡 HSL은 Hue(색조), Saturation(채도), Lightness(밝기)로 색을 구분하는 방법이에요.
• </aside>
  1. 포인트 컬러 사각형의 L값이 얼마인지 확인해주세요.
• <aside> 🧔🏻 제가 고른 색은 L(밝기)가 47이네요!
• </aside>
  1. L값을 기준으로 10씩 빼거나 더해서 사각형들의 색상을 맞춰 주세요
• <aside> 💡 제가 고른 색상을 기준으로, 밝기를 10씩 줄이거나 늘려서 자연스럽게 밝고 어두워지는 색상을 만들 거예요!<aside> 🧔🏻 제가 고른 값은 L이 47이므로, 10씩 뺀 색상들은 L 값이 37, 27, 17, 7이 될 거예요. 7에서는 더 이상 10을 뺄 수 없으니, L이 7인 색이 가장 어두운 포인트 컬러 색상이 돼요.</aside>
  • 포인트 컬러로 된 10개 사각형의 L값을 10씩 빼고 더하면서 색상을 바꿔주세요.
  이런 그라데이션 팔레트를 얻을 수 있어요!
• 
• L값을 10 단위로 바꿔서 적용하면…
• 반대로 10씩 더하게 되면 57, 67, 87, 97이 되고, 밝기가 97인 색이 가장 밝은 색이 될 거예요.
• </aside>
  1. 나머지 색상들도 모두 같은 방식으로 만들어 주세요.
• 패밀리(Family)
  • 말 그대로 폰트의 종류를 뜻해요.
  • 폰트 이름이라고 생각하셔도 무방합니다.
• 굵기(=무게감, Weight)
  • 일반적으로 굵기라는 뜻이지만, 더 정확하게는 ‘무게감’을 나타낸다고 알아주세요.
  • 단순히 굵은 게 아니라 이 글자가 얼마나 더 중요한지를 알려주기 때문에 ‘무게감’이라는 표현을 사용해요. 그래서 더 먼저 중요하게 읽어야 한다는 걸 나타내준답니다.
  • 디자이너는 Thin, Light, Regular 등 굵기 이름으로 이야기하는 걸 더 선호해요.
  • 개발자는 100, 200 등 굵기에 할당된 숫자로 이야기하는 걸 더 선호해요.
  
• 크기(Size)
  • 폰트의 크기를 뜻해요. 일반적으로 16px 부터 시작하고, 2px 씩 줄이거나 늘려요.
  • 크기가 너무 작으면 읽기 힘들어 지기 때문에 10px 미만으로는 사용하지 않는 걸 권장해요.
  • 폰트 크기가 20px 이상일 때는 4px 씩 차이나게 하는 게 일반적이에요.</aside>
  • <aside> 💡 폰트 크기가 커지면 2만큼의 폰트 크기 차이는 육안으로 구분하기 힘들어요.
  • 일반적으로 20px 미만인 폰트들은 본문에 사용하고, 20px 이상부터는 제목에 사용해요.
  • 왜 16px이 시작점인가요?웹사이트의 기본 폰트 사이즈는 16px이에요. 앱이 나오기 이전부터 웹사이트의 기본 폰트 사이즈를 16px으로 사용했기 때문에 자연스럽게 16px이 본문의 기본값이 됐답니다.
  • </aside>
  • <aside> 📌 웹사이트의 기본 폰트 사이즈
• 
• 행간(Line-height)</aside>
  • 우리가 폰트의 높이를 조절할 때는 행간, 즉 글자 줄 사이의 간격을 이용해요.
  • 행간의 뜻</aside>
    • 행간의 기본적인 개념은 글줄과 글줄 사이의 간격을 뜻해요.
    • 
    • 행간은 % 와 같은 상대적인 단위나, px처럼 고정 단위로 나타낼 수 있어요.
    • 행간은 글자의 크기와 그 사이 간격을 합친 값이에요.
    • 
  • <aside> 📌 행간은 디지털 환경에서 글자 줄의 높이를 조정할 때 사용하는 중요한 폰트 속성이에요.
  • 적당한 행간을 적용해야 하는 이유
    • 절대적인 값은 없지만, 적당한 행간 값은 가독성에 큰 영향을 미쳐요.
    • 행간이 너무 짧으면 다음 줄을 읽기 위해 시선을 이동할 때 다음 줄을 찾기 어려워요. 또 위아래에 붙은 줄들이 계속 시야에 같이 들어와 읽는 걸 방해해요.
    • 행간이 너무 넓으면 다음 줄을 읽기 위해 시선을 이동하면 다음 줄을 놓쳐요. 또 전체적인 문단이 벌어져 보여서 레이아웃을 해치기도 해요.
    <aside> 📌 적당한 행간을 찾아 내는 방법</aside>
  • 적당한 행간은 정해져 있지 않아요. 디자이너가 꾸준히 글자를 쓰고 확인하면서 찾아내야 해요. 그러기 위해선 글자를 많이 보고 써보면서 익숙해지는 훈련이 필요하겠죠?
  • 
  • 서체마다 행간을 확인해야 하는 이유
    • 폰트는 폰트 자체가 가진 기본적인 여백이 있어요.
    • 이 여백은 폰트를 처음 만들 때 생기기 때문에, 우리가 바꿀 수 없는 기본값이에요.
    • 그 기본값은 폰트마다 모두 달라요.
    <aside> 📌 따라서 디자이너는 자신이 사용할 폰트가 어떤 모양인지, 공간은 어느 정도를 차지하는지 잘 알고 사용해야 해요.
  • 프리텐다드, 노토산스, 애플산돌고딕의 기본 공간이에요. 다른 서체에 비해 노토산스의 위아래가 더 넓죠?
  • </aside>
  • 일반적인 행간 값
    • 서체마다 모두 다르긴 하지만 일반적으로 통용되는 값은 있어요.
    • 제목처럼 굵고 큰 폰트는 120~135%, 본문의 경우 135~170% 사이로 하는 것이 좋아요.
    • 본문의 경우 150%로 하는 게 제일 좋다고 알려져 있어요.
    • 왜 150%인가요?즉, 150%는 2배수로 움직일 수 있다는 뜻이에요. 기본 폰트 사이즈가 16px일 때, 2로 나눈 값은 8이기 때문에 행간 값은 폰트 사이즈 16px에 절반인 8px을 더해 24px가 돼요.</aside>
    • 즉, 규칙을 만들기도 간편하고, 계산하기도 어렵지 않아 150%을 많이 사용한답니다.
    • <aside> 📌 150% 라는 건 2로 나눈 값을 더한 값이죠?(100 + 100*1/2).
• <aside> 💡 행간은 라인-하이트라고 읽어요!
• 자간(Letter-spacing)
• 패밀리(Family)
  • 말 그대로 폰트의 종류를 뜻해요.
  • 폰트 이름이라고 생각하셔도 무방합니다.
• 굵기(=무게감, Weight)
  • 일반적으로 굵기라는 뜻이지만, 더 정확하게는 ‘무게감’을 나타낸다고 알아주세요.
  • 단순히 굵은 게 아니라 이 글자가 얼마나 더 중요한지를 알려주기 때문에 ‘무게감’이라는 표현을 사용해요. 그래서 더 먼저 중요하게 읽어야 한다는 걸 나타내준답니다.
  • 디자이너는 Thin, Light, Regular 등 굵기 이름으로 이야기하는 걸 더 선호해요.
  • 개발자는 100, 200 등 굵기에 할당된 숫자로 이야기하는 걸 더 선호해요.
  
• 크기(Size)
  • 폰트의 크기를 뜻해요. 일반적으로 16px 부터 시작하고, 2px 씩 줄이거나 늘려요.
  • 크기가 너무 작으면 읽기 힘들어 지기 때문에 10px 미만으로는 사용하지 않는 걸 권장해요.
  • 폰트 크기가 20px 이상일 때는 4px 씩 차이나게 하는 게 일반적이에요.</aside>
  • <aside> 💡 폰트 크기가 커지면 2만큼의 폰트 크기 차이는 육안으로 구분하기 힘들어요.
  • 일반적으로 20px 미만인 폰트들은 본문에 사용하고, 20px 이상부터는 제목에 사용해요.
  • 왜 16px이 시작점인가요?웹사이트의 기본 폰트 사이즈는 16px이에요. 앱이 나오기 이전부터 웹사이트의 기본 폰트 사이즈를 16px으로 사용했기 때문에 자연스럽게 16px이 본문의 기본값이 됐답니다.
  • </aside>
  • <aside> 📌 웹사이트의 기본 폰트 사이즈
• 
• 행간(Line-height)</aside>
  • 우리가 폰트의 높이를 조절할 때는 행간, 즉 글자 줄 사이의 간격을 이용해요.
  • 행간의 뜻</aside>
    • 행간의 기본적인 개념은 글줄과 글줄 사이의 간격을 뜻해요.
    • 
    • 행간은 % 와 같은 상대적인 단위나, px처럼 고정 단위로 나타낼 수 있어요.
    • 행간은 글자의 크기와 그 사이 간격을 합친 값이에요.
    • 
  • <aside> 📌 행간은 디지털 환경에서 글자 줄의 높이를 조정할 때 사용하는 중요한 폰트 속성이에요.
  • 적당한 행간을 적용해야 하는 이유
    • 절대적인 값은 없지만, 적당한 행간 값은 가독성에 큰 영향을 미쳐요.
    • 행간이 너무 짧으면 다음 줄을 읽기 위해 시선을 이동할 때 다음 줄을 찾기 어려워요. 또 위아래에 붙은 줄들이 계속 시야에 같이 들어와 읽는 걸 방해해요.
    • 행간이 너무 넓으면 다음 줄을 읽기 위해 시선을 이동하면 다음 줄을 놓쳐요. 또 전체적인 문단이 벌어져 보여서 레이아웃을 해치기도 해요.
    <aside> 📌 적당한 행간을 찾아 내는 방법</aside>
  • 적당한 행간은 정해져 있지 않아요. 디자이너가 꾸준히 글자를 쓰고 확인하면서 찾아내야 해요. 그러기 위해선 글자를 많이 보고 써보면서 익숙해지는 훈련이 필요하겠죠?
  • 
  • 서체마다 행간을 확인해야 하는 이유
    • 폰트는 폰트 자체가 가진 기본적인 여백이 있어요.
    • 이 여백은 폰트를 처음 만들 때 생기기 때문에, 우리가 바꿀 수 없는 기본값이에요.
    • 그 기본값은 폰트마다 모두 달라요.
    <aside> 📌 따라서 디자이너는 자신이 사용할 폰트가 어떤 모양인지, 공간은 어느 정도를 차지하는지 잘 알고 사용해야 해요.
  • 프리텐다드, 노토산스, 애플산돌고딕의 기본 공간이에요. 다른 서체에 비해 노토산스의 위아래가 더 넓죠?
  • </aside>
  • 일반적인 행간 값
    • 서체마다 모두 다르긴 하지만 일반적으로 통용되는 값은 있어요.
    • 제목처럼 굵고 큰 폰트는 120~135%, 본문의 경우 135~170% 사이로 하는 것이 좋아요.
    • 본문의 경우 150%로 하는 게 제일 좋다고 알려져 있어요.
    • 왜 150%인가요?즉, 150%는 2배수로 움직일 수 있다는 뜻이에요. 기본 폰트 사이즈가 16px일 때, 2로 나눈 값은 8이기 때문에 행간 값은 폰트 사이즈 16px에 절반인 8px을 더해 24px가 돼요.</aside>
    • 즉, 규칙을 만들기도 간편하고, 계산하기도 어렵지 않아 150%을 많이 사용한답니다.
    • <aside> 📌 150% 라는 건 2로 나눈 값을 더한 값이죠?(100 + 100*1/2).
• <aside> 💡 행간은 라인-하이트라고 읽어요!
• 자간(Letter-spacing)

01. 디스플레이와 픽셀, 배수

1. 디스플레이와 픽셀의 개념 

1) 디스플레이와 픽셀

- 디지털 화면들을 디스플레이(Display)라고 부름 

- 디스플레이는 픽셀(Pixel)이라는 작은 칸들로 이루어짐

- 픽셀의 크기는 따로 정해져 있지 않음 칸 자체를 부르는 단위일 뿐 

2) 해상도

- 해상도는 디스플레이의 선명도 = 디스플레이 안에 들어가 있는 픽셀의 개수

- 픽셀의 갯수는 가로 줄의 픽셀 개수 * 세로 줄의 픽셀 개수 

Ex. 1920 * 1080 디스플레이의 경우, 가로 줄에는 픽셀이 1920개, 세로 줄에는 1080개가 들어감

-> 가로 1920개, 세로 1080개니까, 1920*1080 디스플레이는 총 2,073,600개의 픽셀

2. 해상도와 픽셀의 관계 

Q. 픽셀이 많으면 왜 선명하다고 할까?

1) 해상도가 같다면 (개수가 같음), 화면 크기가 클수록 픽셀 한 칸의 크기가 커짐

2) 화면 크기가 같다면, 해상도가 높아질 수록 픽셀 한 칸의 크기는 작아짐

- 화면 크기는 같은데, 가로와 세로 픽셀 개수가 더 많을 수록 픽셀 한칸의 크기는 더 작아짐

- 5*3 해상도와 10*6 해상도가 있을 때, 가로와 세로가 2배라서 총 픽셀 수는 4배가 됨

3) 일반적으로 화면 크기가 클 수록 해상도가 높음 

4) 면적 당 픽셀 갯수가 더 많다면, 더 세밀한 묘사가 가능

3. 모바일 앱의 사이즈

- 아이폰, 갤럭시, 샤오미, 화웨이, HTC, 에이서, 구글 픽셀 등 스마트폰은 수십~수백 가지

- 이 모든 사이즈를 디자이너가 다 고려해서 디자인할 수 없음

=> 기준이 되는 사이즈를 하나 정해서 디자인 (=1배수 디자인, 1배수 사이즈)

4. 1배수 디자인의 개념

디자인할 때 기준이 되는 사이즈 => 1배수 디자인 

- 1배수의 뜻은 1배(100%), 즉 원본 사이즈라는 뜻

5. 1배수 디자인을 정하는 법

1) 일반적인 1배수 디자인 사이즈

1배수 디자인 사이즈는 내가 만든 앱을 쓸 사람들이 가장 많이 쓰는 사이즈로 함

 📌 1배수 사이즈를 정할 때 유의할 것

만약 내가 만들 앱을 사용할 사람들이 안드로이드 기기를 더 많이 사용한다면, 디자인도 안드로이드 기기를 기준으로 하는 것이 좋음

- 사람들이 안드로이드 기기를 더 많이 사용하는데 아이폰을 기준으로 디자인한다면, 실제 사용하는 사람들을 고려하기 어렵기 때문

2) 권장하는 1배수 사이즈

 📎 픽셀 배율 확인할 수 있는 곳

- 아래 웹사이트의 표에서 확인하고 싶은 기기를 찾은 뒤, Pixel Ratio(픽셀 배율) 확인, 2.0이라고 써져 있다면 ‘이 기기는 2배수 사이즈’라는 뜻

https://yesviz.com/viewport/

Viewport Size for Devices | Screen Sizes, Phone Dimensions and Device Resolution | YesViz.com

- 아이폰의 경우 375 * 812, 안드로이드의 경우 360 * 800을 권장

6. 디자인 사이즈와 실제 사이즈의 원리 

- 앞서 정한 1배수 사이즈는 375 x 812인데 아이폰 15 프로의 기기 해상도는 1179 x 2556

- 기기마다 다 정해진 픽셀 배율이 있고 픽셀 배율이, 우리가 만든 1배수 디자인을 몇배 확대할 건지 정해줌

구현 과정

1) 1배수 사이즈를 디자인하고 개발

- 375 * 812 사이즈로 디자인하고 개발

2) 기기는 코드를 읽고 디자인으로 바꾼다음, 자기 배율만큼 확대 또는 축소 => 렌더링 

- 아이폰 15프로 기기의 경우, 375 * 812의 디자인을 3배 확대해서 1125 * 2436으로 만듦 => 렌더링 

3) 기기 실제 해상도에 맞게 미세하게 조정을 마친 후 화면에 띄움

 📌 업스케일, 다운스케일

모든 기기들의 가로-세로 비율이 항상 같지 않음

디자인을 배율만큼 확대하거나 축소하면 실제 해상도와 차이가 조금씩 생기는데 이때 실제 해상도가 더 크다면 조금 더 키우고, 실제 해상도가 더 작다면 조금 더 줄임

=> 줄이는 건 다운스케일, 키우는 건 업스케일

- 아이폰 15프로 기기의 실제 해상도는 1125 * 2436보다 조금 더 큰 1179 * 2556. 따라서 조금 더 크게 키워서 화면에 출력

02. 분기점과 그리드 

1. 분기점 (Breakpoint)

1) 분기점이란

Breakpoint = Break(쪼개지는) Point(지점)

디스플레이의 해상도에 따라 각각 다른 화면을 보여주기 위한 기준점

- 사전적인 뜻으로는 ‘나뉘어 갈라지다’라는 뜻 (분기라는 표현 = 경우의 수가 나누어진다.)

2) 분기점이 중요한 이유

- 웹사이트를 방문할 때 여러 디바이스로 방문 => 웹사이트는 우리가 쓰는 디바이스 화면 크기에 따라 다른 디자인을 보여줌

- 노트북으로 접속했는데 모바일 화면이 나온다면? => 불편함

- 사용자의 디바이스 화면 크기를 고려해 디자인을 나눌 수 있어야 함 => 나누는 기준점이 분기점

3) 일반적인 분기점 정하기

일반적으로 데스크탑, 태블릿, 모바일의 3가지 기준점

분기점 읽는 방법

분기점 : 가로 길이를 기준으로

• 가로가 1024px 이상이라면 데스크탑 화면
• 가로가 768px 이상, 1024px 미만이라면 태블릿 화면
• 가로가 768px 미만이라면 모바일 화면

- 모바일 최소 가로 사이즈를 정해주는 것이 좋음. 더 이상 작아지지 않는 지점이 있어야 레이아웃이 깨지는 걸 막을 수 있기 때문

4) 분기점을 정할 때 생각하면 좋은 것 

1) 태블릿 해상도 대응

태블릿은 생략하거나, 태블릿 해상도 전체를 모바일 분기점으로 통합하는 경우가 많음

태블릿 사용자가 데스크톱과 모바일에 비하면 매우 적고, 디자인과 개발해야 하는 화면 세트가 1개씩 더 늘어나기 때문

- 반드시 태블릿 분기점을 고려해야 하는 경우

-> 온라인 강의나 교육은 태블릿으로 많이 하기 때문에, 이런 경우에는 태블릿 해상도도 신경 써야 함 

2) 일반적인 해상도 말고 다른 해상도를 정하고 싶다면?

일반적인 분기점 외에 다른 분기점을 정해도 상관없음

- 데스크톱, 태블릿, 모바일 각각에 해당하는 해상도로 잘 나눠줘야 함 

(그렇지 않으면 태블릿으로 열었는데 데스크톱 디자인이 나온다든가, 데스크톱을 열었는데 태블릿 디자인으로 나오는 경우가 생김)

- 사람들이 사용하는 기기의 해상도 통계를 참고하면, 어디서부터 데스크톱으로 하면 좋은지 알 수 있음 

 📎 디자인에 유용한 통계자료

디자인할 때 필요한 웹브라우저 점유율, 해상도, SNS 점유율 등의 통계를 제공하는 웹사이트

https://gs.statcounter.com/screen-resolution-stats

Screen Resolution Stats Worldwide | Statcounter Global Stats

2. 그리드 (Grid)

1) 그리드의 개념

그리드(Grid)는 화면에 디자인을 배치하는 가이드라인

- 일반적으로는 세로 방향의 기둥들을 좌우로 세우는데, 가로 줄을 추가로 사용하는 경우도 있음

- 디자인을 배치할 기준선이 되는 가상의 선을 긋고, 그 선에 맞춰서 레이아웃을 짜게 됨

2) 그리드를 사용하는 이유

반응형 웹이 분기점마다 디자인을 바꿀 때, 그리드를 따라 정렬됨 => 규칙적으로 디자인을 하기 위해 

=> 균형감과 완성도, 일관성을 위해 그리드를 사용 

3) 그리드 만드는 법

배치할 수 있는 방법을 굉장히 다양하게 가져갈 수 있다는 장점

- 그리드는 일반적으로 세로 방향의 기둥(=칼럼(Column))들을 몇 개를 둘지 정하는 게 우선

- 일반적으로 데스크톱 화면을 기준으로 기둥은 12개를 사용

- 12개를 사용하는 레이아웃 => 12칼럼 그리드(12 Column Grid)

📌 왜 하필 12개일까?

12개는 짝수면서 1, 2, 3, 4, 6, 8, 10, 12로 나눠서 유연하게 배치할 수 있다는 장점

- 모바일 웹디자인에서 기둥 4개를 배치해서 사용하기 시작했는데, 디자인을 반응형으로 확장하기 위해 태블릿에선 2배인 8개, 데스크톱에선 3배인 12개로 사용하면서 12개가 일반적인 기둥 수가 됨 

4) 그리드의 구조

- 칼럼은 유닛(Unit)과 거터(Gutter)로 이루어짐

- 유닛은 실제 콘텐츠를 정렬하는 기준선이고, 거터는 유닛과 유닛 사이의 여백

- 한 개의 칼럼은 유닛 1개와 양쪽에 거터 절반씩을 합친 크기

- 맨 양끝의 칼럼 끝에는 거터 절반이 남음 => 좌우 여백으로 사용

좌우측 끝에는 초록색 블록이 한 줄씩밖에 없음

5) 자주 사용하는 그리드 예시

* 960 12 Column Grid

유닛 너비	거터 너비
60	20

* 1200 12 Column Grid

유닛 너비	거터 너비
76	24

03. 8포인트 - 그리드 디자인 

1. UI를 배치할 때의 가이드라인

- 우리는 그리드를 사용해서 레이아웃을 배치하기 때문에 그리드는 레이아웃을 배치하는 규칙이라고 볼 수 있음

- 레이아웃 뿐만 아니라 UI를 디자인할 때도 규칙이 필요

2. 8포인트 - 그리드 디자인의 개념

8포인트 그리드는 간격이나 크기 등을 8, 16, 24, 32, …로 맞추는 방법

- UI를 디자인하고 배치하는 규칙이 바로 8포인트 그리드 디자인

- UI 사이의 간격, UI의 여백, 크기 등을 8의 배수 단위로 조정해서 사용

3. 8포인트 그리드를 사용하는 이유

버튼 3개를 디자인한다면, 

각 버튼의 폰트 사이즈와 여백에 규칙 -> 폰트 사이즈는 2씩 움직이고, 여백은 4씩 움직임

1) UI 디자인에 일정한 규칙이 있다면 다른 디자이너와 함께 일할 때도, 개발자가 디자인을 보고 개발할 때도 편하고 효율적임

=> 위의 버튼을 보면서 폰트 사이즈는 2씩, 여백은 4씩 변경하면 된다는 걸 모두 이해 가능 

2) 규칙이 있기 때문에 다른 디자이너나 개발자는 처음 보는 디자인을 보더라도 그 규칙을 적용하기만 하면 됨

Q. XLarge 버튼의 폰트 사이즈와 여백은 어떻게 될까?

폰트 사이즈는 2를 더해 20, 여백은 4를 더한 20.

3) 여백이나 간격, 높이나 너비 등 UI 수치를 키우거나 줄일 땐 최대한 8의 배수 단위로 한다는 약속

4) 어떤 디자인을 보더라도 8의 배수만 머릿속에 기억하고 보면 되기 때문에 더 효율적인 커뮤니케이션, 개발, 디자인이 가능 

4. 8포인트 그리드가 8인 이유

8은 1.5배, 2배, 3배, 4배 하더라도 깔끔하게 떨어져요! (심지어 0.75배를 해도 정수, 1.25배를 해도 정수임

- 8은 1, 2, 4, 8로 나눌 수 있음. (2로 3번이나 쪼갤 수 있고 나눈 숫자도 다시 짝수) 그만큼 디자인을 축소할 때 디자인을 망가뜨리지 않고 축소 가능하다는 장점

- 반대로 커질 때도 다른 수에 비해 딱 떨어지게 만들기 쉬움. 따라서 해상도가 변하면서 업스케일, 다운스케일될 때 유연하게 대처 가능

- 최근에는 디바이스의 해상도가 워낙 선명하고 좋아졌기 때문에, 디자인도 더 세밀하고 복잡하게 만들기 위해 8 대신 4배수로 많이 사용하는 편

05. 반응형과 적응형 

1. 해상도에 맞게 움직이는 유동적인 디자인

데스크탑부터 모바일까지 화면의 크기가 다양하기 때문에 디자인도 화면의 크기에 대응해서 레이아웃이 달라야 함

- 해상도에 따라 레이아웃을 변경하는 방법은 대표적으로 반응형 디자인과 적응형 디자인이 있음 

2. 반응형 디자인과 적응형 디자인

1) 반응형 디자인

반응형 디자인은 말 그대로 반응하는 디자인

- 해상도의 변화에 실시간으로 반응 (변화가 점진적)

- 반응(Respond)한다고 해서, 반응형은 영어로 Responsive 라고 함 

2) 적응형 디자인

적응형 디자인은 한번 적응하면 움직이지 않은 고정된 디자인

- 해상도가 변하더라도 반응을 하지 않거나 실시간으로 변하지 않음

- 적응(Adapt)한다고 해서, 적응형은 영어로 Adaptive라고 함

3. 반응형과 적응형의 차이 및 특징

반응형과 적응형의 가장 큰 특징은 변화의 과정이 실시간인지 아닌지

1) 반응형 디자인과 적응형 디자인의 움직임

반응형 : 해상도가 변해도 디자인은 이미 처음 해상도에 적응한 상태 그대로 적응형 : 해상도가 변하면 디자인이 실시간으로 반응

2) 디자인을 브라우저에 띄울 때의 차이

- 모든 웹사이트가 반응형 또는 적응형으로 딱 나뉘어지진 않음 

- 대부분의 서비스들은 필요에 따라 두 가지를 섞어서 사용하는 것이 일반적임

4. 반응형 웹사이트 그리드 만들기 

그리드 보기 Shift+G

1) 데스크탑 그리드 만들기 

960 12칼럼 그리드를 데스크톱에 적용 - 카운트 12, 타입 Center, Width 60, Gutter 20

2) 태블릿, 모바일 그리드 만들기

태블릿과 모바일은 해상도만 다르고 원리는 같음 

- 태블릿 카운트 8, 타입 Stretch, Margin 20 모바일 카운트 4, 타입 Stretch, Margin 20

데스크탑 :

실제로 모니터 사이즈는 960보다 더 크기 때문에 양옆 공간을 확보할 수 있음 (태블릿은 확장 X, 마진 줘야 함)

태블릿 :

왜 마진? 더이상 양옆으로 확장이 안 되기 때문에 억지로 공간을 줘야 함

왜 센터 아니고 Stretch? 펼쳐져 있어야 데스크탑 해상도까지 확장될 수 있음

3) 반응형 그리드 적용하기

- 플러그인 : Responsive 사용

1) 너비가 1920, 높이가 1080인 프레임을 생성하고 이름을 Display로 변경

2) 빈 캔버스에 마우스 오른쪽 버튼을 누르고, Plugins에서 Responsive 플러그인을 실행

3) Display 프레임을 선택한 상태로 Responsive 플러그인 창에서 Responsive Frame

4) 만들어뒀던 데스크탑, 태블릿, 모바일 프레임을 모두 선택하고, Reponsive 플러그인에서 Input Frames

기기별 그리드 프레임을 전체 선택 -> 플러그인 'Input frames' +버튼 

디스플레이 프레임 선택 -> 플러그인 'Responsive frame +버튼 

프레임을 줄이고 늘려서 해상도에 따라 변하는 그리드 확인 

06. 디자인 시스템

1. 디자인 시스템의 개념

1) 디자인 시스템이 필요한 이유

우리는 웹사이트나 앱을 디자인하는데, 이 웹과 앱을 **제품(프로덕트)**이라고 부름 

프로덕트를 만드는 디자이너들은 사용자들이 겪는 문제를 찾아 디자인으로 개선함

-> 빠르게 반복하다 보면 UI를 매번 새로 만들기 어려움

=> UI를 만들어 놓고 필요할 때 가져와서 사용하면 편함!

혼자 일하는 것이 아닌 다른 디자이너들, 개발자와도 일해야 함 

=> UI는 다른 디자이너도 똑같은 방법으로 써야하고, 개발자와도 같은 생각을 해야 .. 

2) 디자인 시스템의 목적

♻️ 반복적인 UI를 효율적으로 관리

반복적으로 사용하는 UI를 미리 만들어서 효율적으로 사용할 수 있음

🗣 팀 전체가 일관적으로 이해

어떤 디자이너가 UI를 쓰더라도 일관된 사용법을 지킬 수 있고, 개발자가 UI를 개발하더라도 디자이너의 생각을 이해하고 만들 수 있음

2. 디자인 시스템의 장단점

디자인 시스템은 결국 팀 전체의 속도와 효율을 위해서 만들지만 간혹 효율을 매우 떨어뜨리는 경우가 생길 수도?

장점

1) 디자인을 반복해서 사용할 수 있어서 시간과 비용이 줄어듦

- 반복되는 디자인에 개발 코드까지 연결해서 저장해두면, 필요할 때 단순히 꺼내 쓰는 것만으로도 많은 일이 감소

- 일이 줄어든다는 건 시간과 비용을 아낄 수 있다는 뜻이고, 그만큼 디자이너들도 더 중요한 일에 집중할 수 있음

2) 누가 만들어도 동일한 품질의 제품을 설계 가능 

- UI를 만드는 사람마다 매번 다른 디자인이 나온다면, 다른 부분을 이해하기 위한 불필요한 미팅이 매번 생김

- 따라서 누가 만들어도 같은 형태와 구조, 기능을 만들 수 있도록 가이드라인을 만들어두면 팀 전체가 한 사람처럼 일할 수 있음

단점

1) 다양한 형태의 UI를 모아 하나로 통일하는 과정이 매우 오래 걸림

- 디자인 시스템은 결국 UI를 통일하는 과정이 필요한데, UI를 통일하려면 디자이너는 물론이고 개발자와 기획자도 모두 맥락을 이해해야 함

- 팀 전체와 논의하고 준비하는 과정이 매우 오래 걸리기 때문에 일을 위한 일로 변질되기 쉬움

2) 필요한 건 몇개 없는데, 그에 비해 UI가 과하게 많아질 수 있음

- 디자인 시스템도 계속해서 손을 보고, 더 나은 게 있다면 꾸준히 업데이트를 해야 함

- 그런데, 정작 사용하는 UI는 많지 않은데 디자인 시스템이 너무 방대해서 오히려 업데이트하는 데 들어가는 노동력이 너무 커질 수도 있음

3) 새로운 디자인이 필요할 때, 디자인 시스템을 활용하려다 보니 혁신이 줄어듦

- 효율적으로 일하기 위해 디자인 시스템을 도입하지만 .. 또 새로운 디자인이 필요한 상황에서도 디자인 시스템을 최대한 활용하려고 하다보니 새로운 아이디어나 다양한 형태의 UI를 만드는 거에 소극적으로 변하게 됨 (그만큼 팀 전체가 경직될 가능성 높음)

- 디자인 시스템은 효율적인 제품 설계를 할 수 있도록 하는 강력한 방법이지만 그만큼 준비하는 과정이 힘들고 어려움

- 따라서 디자인 시스템을 만든다면 어디까지 만들지 팀원들과 매우 신중하게 의논하는 과정이 필요

3. UI키트가 디자인 시스템인가?

- UI 키트 : 사용하는 규칙과 방법은 없고, 단순히 UI를 모아둔 것

- 디자인 시스템 : UI 구조, 쓰는 방법, 유의해야 하는 부분까지 상세하게 적혀 있는 문서 => '문서'의 형태 

비유 

재료와 레시피 : UI키트는 재료 목록만 있고, 디자인 시스템은 레시피까지 상세하게 적혀 있는 것

단어와 문법 : UI키트는 단어만 있고 디자인 시스템은 단어를 조합하고 연결하는 문법

유의할 점 

디자인 시스템이 아니라 UI키트라고 해서 무조건 나쁜 건 아님 

디자이너와 개발자가 서로 합이 잘 맞고, 또 팀 인원이 적다면 오히려 UI키트로 빠르게 만드는 게 더 효율적일 수 있 있음

4. 디자인 시스템의 구성요소

디자인 시스템의 구성 요소는 크게 2가지 

- 기초 재료가 되는 파운데이션과, 기초 재료를 이용해 만든 구성품인 컴포넌트 

- 컬러, 폰트, 레이아웃, 곡률, 간격 등은 기초 재료인 파운데이션이에요.

- 이 재료들을 조합하고 합성해서 버튼, 체크박스, 탭, 바텀시트 같은 컴포넌트를 만들어요.

5. 아토믹 디자인 시스템 (Atomic Design System)

1) UI를 구성하고 있는 요소

- 버튼 하나를 뜯어보면 다양한 요소들로 구성되어 있음

- 이 요소들은 그 자체로는 기능을 가지고 있지 않음

- 이 요소들을 모아서 버튼이라는 UI로 결합해야, ‘눌러서 작동시킨다’ 라는 기능이 생김

- 이 요소들은 기능을 가지고 있진 않지만, UI를 만드는 기초 재료들

2) 아토믹 디자인 시스템

원자는 영어로 Atom =>  ‘원자를 결합하는 개념의 디자인 시스템’을 Atomic Design System

- 기초 재료들을 세상을 구성하는 가장 작은 알갱이인 원자에 비유

- 원자를 모아서, 분자를 만드는 게 아토믹 디자인 시스템의 핵심 개념

=> 즉, 원자(파운데이션)를 결합해서 기능할 수 있는 최소 단위의 분자(컴포넌트)를 만듦

📌 대부분의 디자인 시스템은 이 원리를 바탕으로 가장 작은 원자 요소들을 설계하고, 그 원자들을 모으고 결합하는 규칙을 만들어서 우리가 아는 버튼, 체크박스, 바텀시트, 모달 등을 만들어 냄

6. 참고할 수 있는 디자인 시스템

📌 디자인 시스템의 방대함

- 디자인 시스템은 내용도 많고, 또 어려운 개념들도 많기 때문에, 수업을 통해 모든 걸 다 이해하시기 어려움

- 이럴 때 가장 좋은 방법은, 이미 잘 만들어진 디자인 시스템을 분석하고, 따라 해보고, 비교하고 연구해 보면서 내 이해도를 올리는 방법

1️⃣ 머리티얼 디자인 Material Design

UI의 설계에 있어서는 가장 복잡하고 정교한 디자인 체계. 구글이 만든 구글의 디자인 시스템

https://m3.material.io/

Material Design

07. 파운데이션

1. 파운데이션이란?

- 파운데이션은 디자인 시스템을 이루는 기본 재료

- 구성품인 컴포넌트를 만들기 위해 사용하는 공통 재료

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

2. 파운데이션의 구성

크게 4가지로 분류

1) 색상(Color)

2) 서체(Font, Typography)

3) 아이콘(Icon)

4) 레이아웃(Layout)

• 간격, 여백(Spacing, Gap)
• 곡률(Radius)
• 그리드(Grid)
• 고도(Elevation)

08. 컬러 스타일 

1. 디지털 환경에서 색상이 보이는 원리 

RGB와 Hex Code

디스플레이는 빛의 3원색으로 구현되는 화면 => 빛의 농도와 명암을 조절해 여러가지 색을 만듦

- 빛의 3원색은 빨강, 초록, 파랑이고, 모일수록 밝아짐 (빛은 뺄 수록 까매지기 때문에 감산혼합)

- 빛의 3원색의 첫글자를 따서 쓰면 RGB가 되고, 이게 우리가 아는 RGB색상의 뜻

- 컴퓨터는 빨강, 초록, 파랑을 각각 256가지의 값으로 보여줄 수 있음

- 이 각각의 숫자를 컴퓨터는 16진수(Hexadecimal)로 변환해서 읽어줌

- 16진수 값이 우리가 흔히 아는 헥스코드

- Hexadecimal Code(16진법으로 작성된 코드)를 줄여서 Hex Code

컬러 프로파일

- 빛의 색상에는 절대적인 기준이 없음. 그래서 디스플레이는 색상을 자기만의 기준으로 해석

- 디스플레이가 코드를 해석할 때 사용하는 색 기준표 : 컬러 프로파일(Color Profile)

- 컬러 프로파일은 전 세계적으로 사용할 수 있어야 해서 공신력이 있는 기관이나 기업에서 만들어서 배포 (Adobe RGB나 sRGB 등이 이런 프로파일의 한 종류)

컬러 프로파일마다 더 잘 보여주는 색상들이 조금씩 다름 

2. 컬러 스타일의 개념

컬러 스타일은 디자인 시스템에서 사용할 색상을 모아두는 팔레트

- 사용할 색상을 모아둘 때는, 색상이 어두워지고 밝아지는 규칙을 만들어서 가져옴

- 색상을 아무렇게나 사용하는 것이 아니라, 사용할 색상들을 미리 정리해두고 그 안에서 사용

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

1) 컬러 스타일은 기본적으로 2~3가지 색상으로 만듦

1️⃣ 포인트 컬러

우리 제품에서 정말 중요하고 핵심적인 부분에만 써야 하는 색상

- 프라이머리 컬러 또는 엑센트 컬러

2️⃣ 메인 컬러

우리 제품의 전체적인 분위기를 만들어 줄 배경색

- 백그라운드 컬러

3️⃣ 세컨더리 컬러

배경색에서 도드라지는 부분을 만들어서 포인트 컬러를 뒷받침하는 색상

- 서브 컬러

 💡 색상의 개수는 제품에 따라 정해도 무방

2) 색상을 정했다면, 가장 밝은 단계부터 가장 어두운 단계까지 총 10단계를 만듦

왜 10단계? 색상의 확장성 확보를 위해 (적재적소에 색을 사용하기 위해)

3) 그 이후엔 글자 등에 기본으로 사용할 흰색부터 검은색의 회색조 10단계를 만듦

4. 1:3:6 법칙

- 색상을 사용할 땐 1:3:6 법칙을 최대한 지키는 것이 좋음 => 전체적으로 균형, 사용자가 집중해야 하는 부분을 더 쉽게 보여줄 수 있기 때문

- 가장 중요한 색상인 포인트 컬러의 비율을 화면의 10% 정도만 사용 (가장 적게 사용해야 함)

- 전체적인 배경인 메인 컬러가 60% 정도 

- 포인트 컬러를 돋보이게 하기 위한 세컨더리 컬러로 나머지 30% 정도 

5. 컬러 스타일 만들기

1) 색상 정하기 

플러그인을 통해 색상을 빠르게 셀렉!

 🧩 플러그인 소개 : Coolers

서로 어울리는 색상 조합을 만들 수 있게 해주는 플러그인

2) 피그마에 색상 팔레트 만들기

1. 플러그인에서 고른 색상을 복사해서, 피그마에 사각형을 만들고 각각 배경색으로 넣어 줌

2. 각각의 사각형을 10개씩 복제

3. 포인트 컬러 사각형을 눌러서, 색상 피커를 열어 줌

💡 명도를 10단계로 나눠보기 

4. 색상 피커에서 HEX 눌러, 색상 코드를 HSL로 바꿔 줌

💡 HSL은 Hue(색조), Saturation(채도), Lightness(밝기)로 색을 구분하는 방법

5) 포인트 컬러 사각형의 L값이 얼마인지 확인

L값 41

6) L값을 기준으로 10씩 빼거나 더해서 사각형들의 색상을 맞춰 줌

1, 11, 21, 31, ... 81, 91 까지 10개

💡고른 색상을 기준으로, 밝기를 10씩 줄이거나 늘려서 자연스럽게 밝고 어두워지는 색상을 만듦

- 포인트 컬러로 된 10개 사각형의 L값을 10씩 빼고 더하면서 색상을 바꿔주면 그라데이션 팔레트를 얻을 수 있음

- 나머지 색상들도 모두 같은 방식으로 만듦

3) 색상 스타일 추가하기

🧩 플러그인 소개 : Styler

레이어에 적용된 배경색이나 폰트를 자동으로 스타일에 추가해주는 플러그인

1. 포인트 컬러 색상이 적용된 사각형 10개의 이름을 Primary로 변경

💡 이 때 중요한 것

- 가장 어두운 색상은 Primary/900, 가장 밝은 색상은 Primary/50 으로 변경

- 나머지 색들은 800, 700, 600, … , 100 으로 100씩 차이나게 이름을 바꿔 주기

2. 메인 컬러의 이름을 Secondary로 변경

- 프라이머리와 동일하게 가장 어두운 색은 Secondary/900, 가장 밝은 색은 Secondary/50

3. 마지막 색상의 이름을 Tertiary로 변경

프라이머리와 동일하게 가장 어두운 색은 Tertiary/900, 가장 밝은 색은 Tertiary/50

4. 만들어둔 모든 사각형을 선택한 후, Styler 플러그인에서 Generate Style을 선택

💡이 플러그인은 레이어의 배경색과 이름을 컬러 스타일로 등록해주는 플러그인

우리가 지금까지 사각형을 만들고 색상을 적용하고 이름을 바꾼 건 이 플러그인을 사용해서 한꺼번에 컬러 스타일을 등록하기 위해서

* 사각형 이름을 변경할 때 /(슬래시)를 넣은 이유 : 피그마에선 이 슬래시를 폴더로 사용하기 때문

즉, 색상 이름/숫자를 적음으로써, 색상 이름으로 폴더가 생길 수 있도록

컬러 스타일이 등록된 모습, priamry 를 상단에 올려주면 보기 좋음

4) 색상 스타일 정리하기 

 🧩 플러그인 소개 : Auto Documentation

등록한 컬러와 폰트 스타일을 캔버스에 문서 형태로 정리해주는 플러그인

1. 캔버스에 있는 사각형들은 모두 지우기

2. Auto Documentation 플러그인을 실행

3. Document all colors 를 선택

문서로 정리된 모습

등록한 컬러를 빠르게 문서화

👩🏻‍💻 컬러 스타일을 만들 때 도움되는 개념 및 방법론

시맨틱 컬러의 개념과 적용 방법

색상 팔레트를 만들 때 사용하는 방법인 시맨틱 컬러 개념을 잘 설명해준 글

디자인 시스템에 적용 가능한 시멘틱 컬러를 알아보자 | e · motion

디자인 시스템에 적용 가능한 시멘틱 컬러를 알아보자 | e · motion

UI 색상의 시각적인 원리

UI 색상을 정할 때 고려해야 하는 시각 원리들의 개념을 자세하게 설명해둔 글

06화 UI를 위한 색

06화 UI를 위한 색

UI 디자인 - 색상

UI 디자인에서 색상이란 무엇인지 전체적으로 잘 설명 되어있는 글

모바일 UI 디자인 기본 요소 - 색채 Color

모바일 UI 디자인 기본 요소 - 색채 Color

09. 폰트 스타일

1. 폰트 스타일의 개념

폰트 스타일도 컬러 스타일과 마찬가지로, 디자인 시스템에서 사용할 폰트를 모아둔 목록

다른 말로는 폰트 스케일이라고도 하는데, 스케일은 일정한 규칙에 따라 정렬된 하나의 세트

2. 폰트 스타일의 구성 (5가지)

1) 패밀리(Family)

말 그대로 폰트의 종류 = 폰트 이름

Ex. 노토산스

2) 굵기(=무게감, Weight)

일반적으로 굵기라는 뜻이지만, 더 정확하게는 ‘무게감’을 나타냄 

- 중요함을 알려주기 때문에 ‘무게감’이라는 표현을 사용

- 디자이너는 Thin, Light, Regular 등 굵기 이름으로 이야기하는 걸 더 선호

- 개발자는 100, 200 등 굵기에 할당된 숫자로 이야기하는 걸 더 선호

3) 크기(Size)

폰트의 크기

- 일반적으로 16px 부터 시작하고, 2px 씩 줄이거나 늘림

- 크기가 너무 작으면 읽기 힘들어 지기 때문에 최소 12px 사용 권장 

- 폰트 크기가 20px 이상일 때는 4px 씩 차이나게 하는 게 일반적 (폰트가 커질수록 작은 차이는 육안으로 구분이 잘 안 되기 때문)

💡 일반적으로 20px 미만인 폰트들은 본문에 사용하고, 20px 이상부터는 제목에 사용

Q. 왜 16px이 시작점인가요?

📌 웹사이트의 기본 폰트 사이즈

- 웹사이트의 기본 폰트 사이즈는 16px. 앱이 나오기 이전부터 웹사이트의 기본 폰트 사이즈를 16px으로 사용했기 때문에 자연스럽게 16px이 본문의 기본값이 됨

4) 행간(Line-height)

1. 행간의 뜻

: 라인-하이트

📌 행간은 디지털 환경에서 글자 줄의 높이를 조정할 때 사용하는 중요한 폰트 속성

- 행간의 기본적인 개념은 글줄과 글줄 사이의 간격을 뜻함

- 행간은 % 와 같은 상대적인 단위나, px처럼 고정 단위로 나타낼 수 있음

- 행간은 글자의 크기와 그 사이 간격을 합친 값

Ex. 행간이 150%? (100+50%)

2. 적당한 행간을 적용해야 하는 이유

절대적인 값은 없지만, 적당한 행간 값은 가독성에 큰 영향

📌 적당한 행간을 찾아 내는 방법

적당한 행간은 정해져 있지 않음 디자이너가 꾸준히 글자를 쓰고 확인하면서 찾아내야 함

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

- 폰트는 폰트 자체가 가진 기본적인 여백이 있음

- 이 여백은 폰트를 처음 만들 때 생기기 때문에, 우리가 바꿀 수 없는 기본값 (기본값은 폰트마다 모두 다름)

📌 따라서 디자이너는 자신이 사용할 폰트가 어떤 모양인지, 공간은 어느 정도를 차지하는지 잘 알고 사용해야 함

다른 서체에 비해 노토산스의 위아래가 더 넓음

4. 일반적인 행간 값

서체마다 모두 다르긴 하지만 일반적으로 통용되는 값은 있음

- 제목처럼 굵고 큰 폰트는 120~135%, 본문의 경우 135~170% 사이로 하는 것이 좋음

- 본문의 경우 150%로 하는 게 제일 좋다고 알려짐

- 왜 150%인가요?

📌 150% 라는 건 2로 나눈 값을 더한 값(100 + 100*1/2)

즉, 150%는 2배수로 움직일 수 있다는 뜻

Q. 기본 폰트 사이즈가 16px일 때, 행간 150%?

16을 2로 나눈 값이 8이기 때문에 행간 값은 폰트 사이즈 16px에 절반인 8px을 더해 24px가 됨

- 규칙을 만들기도 간편하고, 계산하기도 어렵지 않아 150%을 많이 사용

5) 자간(Letter-spacing)

글자와 글자 사이의 간격

- 행간과 마찬가지로 상대단위와 고정단위 모두 사용

3. 폰트 스타일 만들기 

1) 본문 스타일 만들기

1. 사용할 폰트 패밀리 선택

Noto Sans 노토 산스

Noto Sans Korean - Google Fonts

Pretendard 프리텐다드

Pretendard

Spoqa Han Sans 스포카 한 산스

Spoqa Han Sans Neo

Min Sans 민 산스

GitHub - poposnail61/min-sans: 한·중·일 문자와 라틴 문자, 숫자를 조화롭게 만든 다국어 글꼴

SUIT 수트

https://sun.fo/suit/

2. 텍스트 레이어를 생성하고, 이름을 Body/16px 로 변경

3. 텍스트 레이어의 굵기를 Regular로 적용

4. 텍스트 레이어의 폰트 사이즈를 16px, 행간을 150%로 적용

H : 24 => 16(=100, 글자크기)+8(=50, 행간)

5. 텍스트 레이어를 2개 더 복사해서, 하나는 폰트 사이즈를 14px, 하나는 18px로 적용

6. 사이즈가 14px인 텍스트 레이어의 이름을 Body/14px, 사이즈가 18px인 텍스트 레이어는 Body/18px로 변경

2) 제목 스타일 만들기

1. 텍스트 레이어를 생성하고, 이름을 Title/16px로 변경

2. 텍스트 레이어의 굵기를 Bold로 적용

3. 텍스트 레이어의 폰트 사이즈를 16px, 행간을 135%로 적용

4. 텍스트 레이어를 2개 더 복사해서, 하나는 폰트 사이즈를 14px, 하나는 18px로 적용

5. 사이즈가 14인 텍스트 레이어의 이름을 Title/14px, 사이즈가 18인 텍스트 레이어는 Title/18px로 변경

3) 폰트 스타일 추가하기

🧩 플러그인 : Styler

레이어에 적용된 배경색이나 폰트를 자동으로 스타일에 추가해주는 플러그인

1. 만들어둔 텍스트 레이어를 모두 선택한 뒤, Styler 플러그인에서 Generate Styles를 선택

2. 빈 캔버스를 누르고, 오른쪽 패널에 스타일이 추가된 걸 확인

4) 폰트 스타일 정리하기

🧩 플러그인 : Auto Documentation

등록한 컬러와 폰트 스타일을 캔버스에 문서 형태로 정리해주는 플러그인

👩🏻‍💻 폰트 스타일을 만들 때 도움되는 개념 및 방법론

1️⃣ UI 폰트 속성 소개

폰트 속성의 개념을 잘 설명해준 글이에요.

https://brunch.co.kr/@blckschrl/40

07화 UI를 위한 타이포그래피

2️⃣ 폰트 스타일에 대한 실무 방법과 개념

실무적인 관점에서 폰트 스타일을 만드는 방법을 자세하게 설명한 글

https://mesign.tistory.com/23

디자인 시스템 구축하기 - 폰트 스타일 가이드

3️⃣ 머티리얼 디자인 - 폰트

머티리얼 디자인은 종합적인 디자인 시스템 교과서. 특히 타이포(폰트)를 사용하는 부분이 매우 정교하게 구축

https://m3.material.io/styles/typography/overview

Typography – Material Design 3

Gray Scale