[Figma 활용법 (1)] 3주차 학습일지(2)

그리드
- 가로 선과 세로 선을 직각으로 교차되게 만든 것을 의미하며 화면에 디자인을 배치하는 가이드라인 역할을 한다.
- 일반적으로는 세로 방향의 기둥들을 좌우로 세우는데, 가로 줄을 추가로 사용하는 경우도 있다.
- 디자인을 배치할 기준선이 되는 가상의 선을 긋고, 그 선에 맞춰서 레이아웃을 짜게 된다.

8포인트 그리드 디자인☞8이라는 숫자를 쪼개거나 곱하여 UI가 유연하게 변하게 할 수 있도록 하는 UI에서의 규칙

- UI를 디자인하고 배치하는 규칙이 바로 8포인트 그리드 디자인이라고 한다.
- UI 사이의 간격, UI의 여백, 크기 등을 8의 배수 단위로 조정해서 사용한다.
- UI 디자인에 일정한 규칙이 있다면 다른 디자이너와 함께 일할 때도, 개발자가 디자인을 보고 개발할 때도 서로 물어보는 번거로움과 비효율성이 사라진다.
- 규칙이 있기 때문에 다른 디자이너나 개발자는 처음 보는 디자인을 보더라도 그 규칙을 적용하기만 하면 된다.
- 사전에 약속을 맺는 것이 바로 8포인트 - 디자인 규칙/그리드 디자인이라고 한다.

#왜 수많은 숫자중에 8일까?
- 8은 1.5배, 2배, 3배, 4배 하더라도 깔끔하게 떨어진다.
- 반대로 커질 때도 다른 수에 비해 딱 떨어지게 만들기 쉽다. 따라서 해상도가 변하면서 업스케일, 다운스케일될 때 유연하게 대처할 수 있다.
- 최근에는 디바이스의 해상도가 워낙 선명하고 좋아졌기 때문에,
디자인도 더 세밀하고 복잡하게 만들기 위해 8 대신 4배수로 많이 사용하는 편

반응형과 적응형
- 반응형 : 해상도의 변화에 실시간으로 반응하는 디자인
- 적응형 : 해상도가 변하더라도 반응을 하지 않거나 실시간으로 변하지 않는 디자인
 
그리드 ON/OFF Shift+G

만약 UI만 있고 규칙이 없다면?

보는사람마다 각각 이해하는 내용과 파악의도가 다르기에 제각각으로 작업물이 변화되어 혼란을 줄 수 있다.
디자인 시스템을 쓰는 장점이 사라지는 셈

UI키트는 사용하는 규칙과 방법은 없고 단순히  UI를 모아둔것
디자인 시스템은  UI구조, 쓰는 방법, 유의해야 하는 부분까지 상세하게 쓰여져 있는 문서
예시) UI키트는 음식재료, UI시스템은 요리법

※UI를 구성하고 있는 요소들
버튼 하나는 뜯어보면 굉장한 다양한 요소들로 구성되어 있지만 그 자체로는 기능을 가지고 있지는 않다.
요소들을 모아서 버튼이라는 UI로 결합해야 '눌러서 작동시킨다'라는 기능이 생긴다.
이 요소들은 각자 기능을 가지고 있지는 않지만, UI를 만드는 기초 재료들

아토믹 디자인 시스템 :  원자을 모아 분자를 만들고 분자를 모아서 유기체를 만든다는 개념
☞조금씩 구성요소들을 합쳐가면서 UI를 만든다.

파운데이션
- 디자인 시스템을 구성하는 가장 작은 알갱이이자 기초 재료(색상, 서체, 아이콘, 레이아웃)
※레이아웃 : 간격, 여백, 곡률, 그리드, 고도 등이 포함

컬러 스타일
디지털 환경에서 색상이 보이는 원리
휴대폰으로 봤을 때와 컴퓨터PC로 봤을 때 색깔이 조금 다르게 느껴졌던 경우 디지털 기기에 문제에 있던 것이 아니라 원래 빛이란 게 그렇게 보이는 자연스러운 현상
- 컬러 스타일은 디자인 시스템에서 사용할 색상을 모아두는 팔레트
- 사용할 색상을 모아둘 때는, 색상이 어두워지고 밝아지는 규칙을 만들어서 가져온다.
- 색상을 아무렇게나 사용하는 것이 아니라, 사용할 색상들을 미리 정리해두고 그 안에서 사용
 
만약 규칙 없이 색상을 사용한다면?
- 팀원 간에 색상을 사용하는 규칙을 알아차리기 어렵다.
- 그만큼 커뮤니케이션을 불편하게 만든다.