[사전캠프] 피그마_UXUI 기초 개념 이해

1. UXUI 기초 개념 이해

 

1. 개념

• 피그마: 제품을 만드는 모든 사람을 위한 협업 도구

 

• 제품 제작 과정

- 아이디에이션 - 와이어프레임 플로우차트 - UI 설계 디자인 시스템 - 프로토타이핑 - 개발 핸드오프

---

2. 디스플레이와 배수 이해하기

 

1) 디스플레이와 픽셀

(1) 개념

• 디스플레이: 웹사이트, 앱, 키오스크, 전광판, TV 등을 본다는 건 디지털 화면을 본다는 것. 디지털 화면.

• 픽셀: 디스플레이는 픽셀(Pixel)이라는 작은 칸들로 이루어져 있다. 

• 해상도: 디스플레이의 선명한 정도, 디스플레이 안에 들어가 있는 픽셀의 개수

• 픽셀의 개수: 가로 줄의 픽셀 개수 + 세로 줄의 픽셀 개수

- 1920 * 1080: 가로 줄에 1930개, 세로 줄에 1080개

 

(2) 해상도와 픽셀의 관계

- 해상도가 같다면, 화면 크기가 클수록 픽셀 한 칸의 크기도 커진다. 

- 화면 크기가 같다면, 해상도가 높아질수록 픽셀 한 칸의 크기는 작아진다.

- 화면 크기가 클수록 해상도도 높다. 픽셀은 물리적으로 작게 만들기 어렵기 때문이다. 

- (예외) 맥북 - 화면 크기는 작지만, 많은 픽셀이 들어가 있는 상품.

- 면적 당 픽셀 개수가 많다면, 더 세밀한 묘사가 가능하다.

ex)  8*8 해상도는 4*4 해상도보다 면적 당 픽셀 개수가 4배 많기에 4배 더 선명하다.  

 

2) 1배수 디자인

(1) 모바일 앱의 사이즈

- 같은 앱이라면 어떤 스마트폰으로 열어도 항상 화면에 보이는 디자인의 위치나 배치가 동일하다. 

- 디바이스마다 맞는 디자인을 일일이 다 만들지 않기 때문이다. 

 

(2) 개념

• 1배수 디자인: 디자인을 할 때 기준이 되는 사이즈

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

- 내가 만들 앱을 쓸 사람들 파악하는 게 중요하다. 

 

(3) 디자인을 정하는 방법

• 권장하는 1배수 사이즈

- 픽셀 배율 확인할 수 있는 곳: Pixel Ratio

- 아이폰 375 * 812 / 안드로이드 360 * 800 

 

(4) 디자인 사이즈와 실제 사이즈의 원리

• Device Resolution (기기 해상도)

• 1배수 디자인이 실제 스마트폰에서 구현되는 과정

- 렌더링: 픽셀 비율이, 우리가 만든 1배수 디자인을 몇 배 확대할 건지 결정해준다. 

- 업스케일, 다운스케일: 모든 기기들의 가로-세로 비율이 모두 같지 않기에, 조정하는 과정

---

3. 이미지 표현 방식, 벡터와 래스터

 

1) 컴퓨터가 그림을 그리는 방법

(1) 래스터(Raster) 방식

•  비트맵(Bitmap) 형식

- Photoshop

- 픽셀 칸에 색깔 칩을 하나씩 담는 형식

- 파일 형식 (확장자): jpg, bmp, git, png 등 

 

(2) 벡터(Vector) 방식

• 그림을 수식으로 표현하는 방식

- 일러스트레이터, 피그마

- 수식으로 표현하는 형식 이미지라기보다는 코드 파일에 더 가깝다.

- 파일 형식: sgv

 

(3) 래스터 방식의 특징

•  해상도가 높을수록 화질이 좋다.

- 일정한 칸 안에 색깔을 칠하는 모자이크 같은 형식이라, 픽셀 갯수가 많을수록 화질이 좋다. 

- 해상도가 낮은 이미지를 크게 만든다고 화질이 좋아지지 않는다. 

• 확대와 축소를 반복하면 색상 정보가 사라진다. 

- 사라진 색상 정보는 다시 원본 크기로 만들어도 복구할 수 없다. 

- 이런 경우, '깨진다', '열화됐다'고 표현한다. 

• 단순한 방식이라 고해상도 이미지를 표현하기 좋다.

- 확장자에 따라 파일 크기가 천차만별이다. 파일 크기를 결정하는 속성으로는 압축률이나 색상 표현 범위 등이 있다. 

 

(4) 벡터 방식의 특징

• 확대 및 축소 등 크기 변형이 자유롭다. 

- 픽셀 개수로 만들어진 게 아니라 일종의 함수라서 확대 및 축소하더라도 문제 없다. 

• 이미지가 크고 복잡하면 수식도 복잡해진다. 

- 고해상도의 많은 색을 표현하는 경우 수식이 매우 복잡해져 파일 크기가 커진다. 

- 어떤 이미지를 어떻게 보여줄 건지에 따라 적합한 확장자를 선택해서 사용해야 한다. 

---

4. 8포인트 그리드

- 화면 디자인에도 규칙이 있다.

- 일반적으로 디자인 요소들은 8의 배수로 만든다는 규칙을 갖고 있다. 

 

1) 개념

• 8포인트 그리드: 8의 배수에 맞춰 배치하는 레이아웃 규칙

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

- Why? UI 디자인에 일정한 규칙이 있다면 번거로움과 비효율성이 사라진다. 

 

! 딱 떨어지는 정답을 찾는 게 아니라, 논리적으로 끌고가기 위해 고민하는 과정 자체가 디자인이다.

 

2) 8의 배수

- 디자인을 축소할 때 디자인을 망가뜨리지 않고 축소할 수 있다. 

 

• 안티 앨리어싱: 계단 현상을 없애는 과정

---

5. 피그마

 

[레이어]

• 가로 (Width)

• 세로 (Height)

• 높이 (z-index)

 

[패스]

• Outlline: 테두리 정보 삭제

-  ex) 글자 - Outline - 글자처럼 생긴 도형

• Flatten: 도형의 회전, 곡률 등 변화된 내용에 대한 정보 삭제

- (주의) 기존 정보 내용 삭제하는 기능

---

숙제