[내일배움캠프] 피그마 - 디스플레이, 해상도, 1배수 디자인, 8포인트 그리드, 레스터 방식, 벡터 방식

<피그마>
UI 디자인에 사용하는 가장 대중화되고 범용성 높은 디자인 툴

 

● 피그마

제품을 만드는 모든 사람들을 위한 디자인 툴이자 협업 도구

디자이너를 중심으로 개발자, 기획자, 마케터 등이 같은 화면을 보며 협업할 수 있는 툴

와이어프레임부터 핸드오프 과정 전부를 하나의 툴에서 진행할 수 있는 효율적인 툴

 

●피그마의 특징

1) 접근성

어플과 웹 모두에서 사용할 수 있으며 데이터가 서버에 저장되므로 접근성이 매우 높음

2) 범용성

디자인과 개발의 과정이 모두 가능한 툴

3) 정보력

피그마 커뮤니티의 바ㅇ대한 정보력(디자인 자료, 플러그 등)

4) 낮은 난이도

디자인 기초부터 고급까지 피그마로 커버 가능

 

● UI/UX 기초이론

1) 디스플레이

일상생활에서 보는 픽셀로 이루어진 디지털 화면

2) 해상도

디스플레이 안 픽셀의 개수로 디스플레이의 선명한 정도

[가로 픽셀 수 x 세로 픽셀 수] 로 표현

해상도가 같다면 화면 크기가 클수록 픽셀 한 칸의 크기가 커지므로 화질이 떨어짐

▶ 제작하는 디자인의 픽셀 < 기기의 해상도인 경우

랜더링을 통해 ViewPoint Size만큼 확장 / 업스케일과 다운스케일을 통해 정확한 해상도로 조정한다

▶기종별 해상도 보는 곳 https://yesviz.com/viewport/

Viewport Size for Devices | Screen Sizes, Phone Dimensions and Device Resolution | YesViz.com

3) 1배수 디자인

1배수 디자인을 기준으로 UI가 만들어지기 때문에 화면이 달라도 동일한 레이아웃이 유지된다

▶권장 1배수 사이즈: 아이폰 375 812, 안드로이드 360 800

앱 사용자 기준 가장 많이 쓰는 사이즈로 설정

4) 8포인트 그리드

화면에 배치된 버튼 창 메뉴 등 UI를 디자인할 때 UI를 8의 배수에 맞춰 배치하는 레이아웃 규칙

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

 

● 래스터 방식 vs 백터 방식

1) 래스터 방식(비트맵 방식)

픽셀 칸에 색깔 칩을 하나씩 담는 형식. 포토샵이 대표적인 툴이며 확장자는 jpg,bmp,gif,png 등

단순한 방식이기 때문에 고해상도 이미지를 표현하기 좋다

해상도가 높을수록 화지ㄹ이 좋지만 해상도가 낮은 이미지르ㄹ 확대해도 확질은 그대로

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

2)  백터 방식

그림을 수식으로 표현하는 형태. 일러스트레이터와 피그마가 대표적인 툴이며 확장자는 svg

확대나 축소가 이루어져도 그림이 꺠지지 않아  크기 변형이 자유롭다

이미지가 크고 복잡하면 수식이 복잡하고 파일 크기가 커진다