0104 UX/UI (+디자인시스템, 디자이너의 글쓰기)

UI키트와 디자인 시스템은 이런 차이가 있어요.

 

1. UI 키트 : 사용하는 규칙과 방법은 없고, 단순히 UI를 모아둔 것에 지나지 않아요.

 

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

*디자인 시스템은 '문서'의 형태를 갖추고 있어야 해요.

 

디자인 시스템의 구성 요소

- 디자인 시스템의 구성 요소는 크게 2가지로 나뉜다.

- 기초 재료가 되는 파운데이션과 기초 재료를 이용해서 만든 구성품인 컴포넌트로 나뉜다.

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

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

 

07. 파운데이션

- 디자인 시스템을 이루는 기본 재료

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

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

 

파운데이션의 구성

파운데이션 요소는 팀, 회사에 따라 디자인 시스템마다 조금씩 다르다.

크게 4가지로 분류

- 색상

- 서체(Font, Typography)

- 아이콘

- 레이아웃(간격, 여백/ 곡률 / 그리드 / 고도)

 

08. 컬러 스타일

컬러 스타일의 개념

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

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

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

- 만약 규칙 없이 색상을 사용한다면?

(팀원 간에 색상을 사용하는 규칙을 알아차리기 어려워진다. 그만큼 커뮤니케이션을 불편하게 만든다)

 

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

- 컬러 스타일은 기본적으로 2~3가지 색상으로 만들어요.

- 포인트 컬러: 우리 제품에서 정말 중요하고 핵심적인 부분에만 써야 하는 색상이에요. 프라이머리 컬러 또는 엑센트 컬러라고도 불러요.

- 메인 컬러 : 우리 제품의 전체적인 분위기를 만들어 줄 배경색이에요. 백그라운드 컬러라고도 합니다.

- 세컨더리 컬러: 배경색에서 도드라지는 부분을 만들어서 포인트 컬러를 뒷받침하는 색상이에요. 서브 컬러라고도 불러요.

 

 

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

1. 색상의 밝고 어두움(명도), 연하고 진함(채도)을 기준으로 10단계를 만들기 때문에, 0%에서 100%를 10단위로 나눠 쓸 수 있어요.

2. 10단위로 딱 떨어지기 때문에, 중간에 50단위의 색상을 더 추가하기 쉽고 색상 간의 차이도 10단위다 보니 알아보기도 쉬워요.

 

✔️ 1:3:6 법칙

- 가장 중요한 색상, 즉 포인트 컬러의 비율을 화면의 10% 정도만 씁니다.

- 전체적인 배경인 메인 컬러가 60% 정도 차지하도록 합니다.

- 포인트 컬러를 돋보이게 하기 위한 세컨더리 컬러로 나머지 30%을 씁니다.

 

✔️ 컬러 스타일 만들기

🧩 플러그인 소개 : Coolers

1) 빈 캔버스에 오른쪽 마우스 버튼을 눌러 Coolers 플러그인을 실행해 보세요.

- 내가 선택한 색상과 어울리는 다른 색상들을 랜덤하게 생성해주는 플러그인.

- 변경하지 않을 색상은 자물쇠를 눌러 잠가두면 바뀌지 않아요.

- 색상을 더 추가하거나 지울 수 있어요.

- 색상을 모두 고르고 나면 헥스 코드를 복사할 수 있어요.

 

2) 먼저 포인트 컬러로 사용할 색상을 하나 임의로 정해 주세요.

3) 포인트 컬러가 바뀌지 않게 자물쇠를 눌러 잠그고, 색상을 3개만 남겨 주세요.

4) 하단의 Genereate를 누를 때 마다 잠근 색상을 제외하고 랜덤으로 색상이 계속 나와요.

 

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

🧩 플러그인 소개 : Styler

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

 

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

 

 

 

 

----

[특강: 좋은 블로그 작성법, 아티클/레퍼런스 적재하는 방법 안내] 

어떻게 글을 쓰고 읽어야 하는지.

 

글을 써 봅시다.

왜 해야하는지?

먼저 왜 써야 하는지. 생각을 해보려고 한다. 디자이너가 글을 써야 하는이유.

UXUI디자이너는 문제 해결력이 굉장히 중요하다.

사용자의 문제를 찾고 이 문제의 원인을 파악 해서 좋은 솔루션으로 문제를 해결하는 사람.

 

과정에서 중요한 게. 

문제 해결력이 중요하다. 글을 쓴다고 했을 때 일기를 쓰는게 아니라. 생각을 하게 된다. 어떤 글을 쓸지 주제를 먼저 생각하고 그 안에서의 뼈대를 구성하고 필요하면 

 

디자이너에게 필요한 높은 커뮤니케이션 역량

 

글이 기회와 연결이 된다!!

 

왜? 글을 써야 하는지, 

글이 대체 어떻게 써야하지?

 

글을 쓸 때는 많은 경험을 해봤고 앞으로도 할 수 있다 이런걸 담아야 한다.

 

학습 일지 쓰는 게 너무 좋은 습관이다.

본인의 경험을 꾸준히 기록하는게 굉장히 중요하다.

경험을 글로 남겨 놓는 게 

 

TIL(today I Learned)

+ WIL(Weekly I Learned)

 

매일매일 배운 걸 쌓고 한주에 배운 것을 정리해라.

TIL과 WIL을 꾸준히 정리하는 게 중요하다.

 

어떻게 쓰는지.

 

 

짧게라도 내가 하루를 잘 정리해야한다는 포인트

레슨런.

매일매일의 레슨런을 잘 쌓아보는 게 중요하다.

 

WIL은