TIL_디자인 시스템

디자인 시스템 관련 강의를 들으며 정리*

 

UI디자인에 가장 중요한 디자인 시스템.

디자인 시스템의 개념

-> 디자인 시스템이 필요한 이유

- 웹사이트나 앱을 디자인할때. 이 웹과 앱을 제품 (프로덕트)이라고 부른다.

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

 

컬러 스타일

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

핸드폰에서 봤던 걸 컴퓨터로 보면 색깔이 조금 다르게 느껴졌던 경험.

컴퓨터나 핸드폰에 문제가 있던게 아니라, 원래 빛이라는게 그렇다. 자연스러운 현상

디지털 화면을 디자인하는 사람들이기 때문에, 이 디지털 화면의 원리를 이해하면 더 좋겠졍?

 

RGB와 Hex Code

디스플레이는 빛의 3원색으로 구현되는 화면이다.

-> 즉, 빛의 농도와 명암을 조절해 여러가지 색으로 만든다.

1)빛의 3원색은 빨강, 초록, 파랑이고, 모일수록 밝아진다.

빛을 더해가며 다른 색을 만들기 때문에 가산혼합이라고 부른다. 

/

2)색의 3원색은 빵강(Magenta마젠타),노랑(Yellow;옐로), 파랑(Cyan사이안)이에요.
색은 모두 섞으면 까만색이고, 덜어내야 하기 때문에 감산혼합이라고 불른다.

 

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

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

 

RGB색상을 사용할 때 '255, 255, 255' 처럼 작성하는 이유가 이거임.

 

컬러스타일의 개념.

• 컬러 스타일은 디자인 시스템에서 사용할 색상을 모아두는 팔레트예요.
• 사용할 색상을 모아둘 때는, 색상이 어두워지고 밝아지는 규칙을 만들어서 가져와요.
• 색상을 아무렇게나 사용하는 것이 아니라, 사용할 색상들을 미리 정리해두고 그 안에서 사용해요.

 

 

포인트 컬러, 메인컬러, 세컨더리 컬러 이렇게 3가지 색상을 선택하는데.

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

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

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

 

1:3:6 법칙 이게 젤 중요하다.

색상을 사용할땐 1:3:6 법칙을 최대한 지키는게 좋다.

가장 중요한 색상(포인트 컬러)는 디자인 제작시 화면 비율의 10% 정도만 쓴다.

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

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

 

 

컬러시스템 다시 복습해서 제작해보았다.

그후 

Auto Documentation 플러그인을 실행 하면 하단 이미지 처럼 저렇게 자동으로 컬러 칩 파일들이 자동 생성된다. 너무 좋댱

우리가 만든 스타일을 자동으로 컬러 칩으로 만들어서 캔버스에 정리해주는 플러그인

 

 

내가 등록한 스타일을 캔버스에 색상 카드로 만들어 주는 플러그인이에요. 개발자, 다른 디자이너들과 ‘우리 제품의 색상 팔레트’를 공유하고 논의할 때 매우 유용하기 때문에 프로덕트 디자이너나 UIUX디자이너들은 실무에서 필수 플러그인.

 

---

실무 환경에서 다루는 컬러 스타일 방법

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

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

https://emotion.co.kr/magazine/42/

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

(2)UI 색상의 시각적인 원리

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

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

06화 UI를 위한 색

(3)UI 디자인 - 색상

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

https://brunch.co.kr/@chulhochoiucj0/17

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

참고하기*

---

 

 

 

<폰트>

 

굵기(=무게감, Weight)

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

단순히 굵은게 아니라 이 글자가 얼마나 중요한지 중요도를 나타낼수 있기 때문에 무게감이라는 표현을 사용한다.

굵기를 주는것=먼저 중요하게 읽어야 하는 부분 을 의미한다.

디자이너는 Thin, Light, Regular 등 굵기 이름으로 얘기하는걸 선호하는 편이고.

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

 

 

 

 

폰트는 일반적으로 16px부터 시작하고 2px씩 줄이거나 늘린다.

크기가 너무 작으면 읽기 힘들어 지기 때문에 10px미만으로는 왠만해서 사용 잘 안함.

폰트 크기가 20px이상일때는 4px씩 차이나게 하는게 일반적임.

일반적으로 20px미만인 폰트들은 본문에 사용

20px이상 부터 제목에 사용.

 

-> 왜 16px이 기준인가?

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

웹사이트의 기본 폰트 사이즈는 16px.

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

 

행간(Line- height)

일반적인 행간 값에 관하여.

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

본문은 150%가 제일 좋다고 알려져 있음.

왜? 150%인가

-

150%라는 것은, 2로 나눈 값을 더한 값 (100+100*1/2).

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

 

기본 폰트 사이즈가 16px일때-> 2로 나눈 값이 8이기 때문에

행간 값은 폰트 사이즈 16px에 절반인 8px을 더해 24px가 돼요.

 

즉, 규칙을 만들기가 편하고, 계산하기도 어렵지 않아서 150%을 많이 사용한다.

 

본문 스타일 만들기

본문에 사용할 폰트 스타일 3개 만들기

 

먼저 사용할 폰트 패밀리를 하나 생각해준다.

UI추천하는 폰트 패밀리

쓰기 무난하고 글자 모양이 튀지 않아 UI에 사용하기 좋은 국문 폰트로는

Noto Sans 노토 산스 : 유명하죵~

밑에 있는 폰트들은 노트산스폰트에서 더 디벨롭 되어서 나온 폰트라구 한다 

Pretendard 프리텐다드: https://cactus.tistory.com/306

Spoqa Han Sans 스포카 한 산스: https://spoqa.github.io/spoqa-han-sans/

Min Sans 민 산스: https://github.com/poposnail61/min-sans

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

하단링크 클릭시 민산스 체험해볼수 있듬 굵기 조절이 용이해서 UI제작시 찰떡 인것 같다.

https://poposnail61.github.io/write/

 

SUIT 수트: https://sun.fo/suit/

수트 예전에 내가 애용하던 폰뚜

첨에 이 폰트 나왔을때 오와오와오앙 넘 좋자냐? 함서 다운받았었는데 널리널리 알려졌군 역시 UI에 최적화~수트폰뚜

뭔가 글쓰는데 병맛이 되어 가는 중  졸려서구럼 피고넹ㅜ^ㅡ

 

 

[폰트 스타일 제작시 참고하기 좋은 개념 및 방법론 링크]

UI 폰트 속성 소개

폰트 속성의 개념을 잘 설명해준 글

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

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

 

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

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

https://mesign.tistory.com/23

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

머티리얼 디자인 - 폰트

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

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

Typography – Material Design 3

 

 

 

 

암튼 폰트 스타일 제작 까지 완료해보았다~! 3주차 강의 까지 수강했구

 

팀원들과 어디까지 들었는지 등등 스몰토크 하구

현재 TIL작성 끝XD 

 

기초 탄탄하기 좋은 시간이였다. ^_<

낼은 아예 완강하고 그담날은 맘편히 꼼꼼히 복습해야지