UXUI TIL 0530

오늘의 학습

Figma 활용법 (1)  3주차

 

1. 디스플레이 픽셀과 배수 

 

디지털 화면 = 디스플레이 = 픽셀 단위로 이루워져있다

 

<해상도>

• 디스플레이 선명도 = 디스플레이안네 픽셀 개수 
• 화면크기가 크다면? 해상도가 높을 수록 픽셀 한칸크기가 작아짐
• 일반적으로 화면크기와 해상도는 비례함 그러나 아이폰이나 맥북 같은 경우는 다름.

<모바일 사이즈>

1. 기준이 되는 사이즈 = 1배수=사람들이 제일 많이 쓰는 사이즈
2. 아이폰 375 * 812 안드로이드 360*800
3. *** 배수는 픽셀의 비율/ 얼마나 확대 / 축소했는 가 
4. 1배수가 화면에 그대로 쓰이지 않음

<배수 디자인이 구현되는 과정>

1. 1배수 디자인 + 개발
2. 코드를 읽고 기기에서 알아서 비율대로 바꿈 = 렌더링
     ex) 아이폰 15프로 1배수 393 * 852 =>  렌더링 => 3배수 1179*2356 => 화면
3. 미세한 조정 => 정해진 픽셀 수에 따라 업 스케일, 다운 스케일 시킴

 

<분기점, 그리드>

• 분기점 : 디바이스를 별 디자인 사이즈 나누는 기준

데스크탑 1024px 이상 / 테블릿 768 ~ 1024 / 모바일 768 미만

• 그리드 : 컨텐츠 배치 기준 (세로줄)

*** 그리드는 분기점마다 디자인 바뀔 때 균형있게 배치하기 위해 사용
일반적으로 12개를 써야 나머지가 짝수로 떨어진다
- 960px 12 그리드 60/20 (유닛/거터)
- 1200px 12 그리드 76/24
- 1440px 12 그리드 96/24

 

< 8포인트>

• 8배수로 ui 디자인 간격, 크기를 결정함
• 규칙이 있으면 예측이 가능해서 여러사람이 통일감있게 작업이 가능하다
• 8은 8 / 12 / 16 / 24 / 32로 모두가 짝수이고 축소, 확대가 유연함

=> 요즘은 디바이스 크기의 다양화로 4배수를 많이쓴다.

* Responsive - 피그마 플러그인

 

<디자인 시스템>

• 매번 ui를 만들기 어렵다.
• 이해관계자 모두가 일관성있게 일할 수 있다.
• 규칙적인 원칙과 원리를 위계 만듬

 

장점

1. 반복적인 디자인으로 시간과 비용절감

2. 품질저하를 막을 수 있음

 

단점

1. 통일과정이 어려움 = "왜이렇게 썼지?"가 모두가 받아들여져야함.

2. 한번 만들면 계속 업데이트가 필요함.= 너무 방대해짐.

3. 새로운 디자인 아이디어가 줄어듬

 

*ui키트가 디자인 시스템인가?
- ui키트는 규칙이 아니다.
- 개인이 이해하는 대로만 디자인하고, 개발을 하게 된다.
- ui키트 = 재료 / 디자인 시스템 = 사용서 

 

 

• 구성요소

-기초재료(컬러, 폰트, 레이아웃) = 파운데이션 

-기초 재료로 만든 구성품 = 컨포넌트 (버튼, 탭, 모달)

 

• 아토믹 시스템

- 파운데이션으로 컨포넌트를 만드는 방법 => 최소단위로 컨포넌트를 만듬.

 

<컬러 스타일>

• 컴퓨터는 빨강, 초록, 파랑색이 256색까지 나타낼 수 있는 데 이걸 16값으로 변환해서 계산함 = HEX

* 컬러프로파일은 컴퓨터나 프로그램마다 색을 나타내는 게 달라서 컴퓨터 RGB를 HEX로 바꿀때의 기준됨

  

*컬러 팔레트
컬러를 규칙적으로 나열

선정기준
- 포인트 컬러 > 제품, 브랜드 에서 핵심 색
- 메인컬러 > 전체적 배경색
- 세컨더리 컬러 > 배경색에서 포인트 뒷받침 색

 

 

컬러 스타일 만드는 방법

1. 기본컬러 3가지를 정한다

2. 10단계로 만듬 - 밝기를 0 ~ 100, 10단위로 쓸 수 있음

3. 회색조 10단계 - 0 ~ 100, 10단위로 쓸 수 있음 / 100%는 없음

=> 1;3;6 법칙 (1포인트 ; 3 세컨 ; 6배경) *중요도를 정하기 위함

 

<폰트 스타일>

• 구성 

- 패밀리 > 종류, 폰트이름

- 굵기(weight)

- 크기 > 16px 기본 2px씩 업/다운

*20px 이상으로는 4px씩 올라감 / 20px 미만은 본문, 이상은 제목

 

• 행간(= 라인하이트) > 줄과 줄 사이 간격 

* 제목 120~135% // 본문 135~170% > best 150%

=>계산이 쉽다. 100%+100/50

* min sans / suit / 스포카 한 산스 추천 글꼴