#피그마 강의 (2) 이미지 표현 방식과 8포인트 그리드

컴퓨터가 그림을 묘사하는 방법은 '해당 픽셀에 데이터를 채운다'에 더 가깝다. 컴퓨터가 데이터를 채워서 그림을 표현하는 방법은 크게 2가지가 있다.

1) 래스터 (Raster) 방식: 비트맵 형식이라고도 부르며, 픽셀 칸에 색깔칩을 하나씩 담는 형식을 말한다.

- 포토샵이 래스터 형식의 태표적인 툴이며

- 파일 형식(확장자)으로는 jpg.bmp.gif.png 등이 있다. (jpg가 가장 가볍다)

특징으로는,

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

- 확대와 축소를 반복하면 색상 정보가 사라지며, 단순한 방식이라 고해상도 이미지를 표현하기 좋다.

2) 벡터 (Vector) 방식: 그림을 수식으로 표현하는 형식이다.

- 일러스트레이터, 피그마가 대표적인 툴이며

- 수식으로 표현하기 때문에, 이미지보다는 코드 파일에 더 가깝다. 대표적으로는 svg가 있다.

특징으로는,

- 확대 및 축소 등 크기 변형이 자유롭고 (수식은 변함없기 때문에)

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

래스터 형식인 이미지는 벡터 틀에서 작업한다고 벡터 개체가 되지 않는다.

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

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

왜 하필 8일까?

- 8은 나누더라도, 곱하더라도 짝수로 깔끔하게 떨어지기 때문.

- 따라서 해상도가 변하면서 업스케일, 다운스케일될 때 유연하게 대처할 수 있다.

- 다만 최근에는 디바이스의 해상도가 워낙 선명하고 좋아져서, 디자인도 더 세밀하고 복잡하게 만들기 위해 8 대신 4배수나 2배수까지도 사용하는 경우도 많다. 실무에서는 4배수를 쓰는 경우가 더 많다.

왜 10이나 5는 안될까?

10이나 5를 곱하거나 나누면 홀수가 되는데, 홀수는 확대 또는 축소할 때 소수점이 생기며, 이 소수점은 픽셀 한 칸을 완전히 채우는 것이 아니라 희미하게 채우게 된다. 이러면 디자인이 깨져 보이게 된다.

- 이러면 아래 맨 오른쪽 네모처럼 가장자리가 반투명하게 색칠되는 레이어싱 현상이 벌어지게 된다.

즉, 디자인이 깨지기 훨씬 더 쉽기 때문에 용이한 8의 배수를 차용하는 것이다.

멋쟁이호랑이처럼