피그마로 알아보는 벡터와 비트맵

피그마 구성 요소 이해하고 제대로 다루기

Mar 10. 2022

이번에는 피그마가 어떤 특징을 갖고 있는지 본격적으로 살펴보고 실제로 써 보려고 하는데요, 특히 에셋을 만들 때 우리가 다룰 오브젝트는 어떻게 구성되어 있는지 벡터와 비트맵 개념과 함께 다뤄 보도록 하겠습니다.

벡터 vs 비트맵?

벡터

점/선/면으로 이루어진 도형 형태의 오브젝트입니다. 위치와 색상 값을 기억하는 방식이라 아무리 크게 확대해도 깨지지 않습니다. 도형, UI, 아이콘 등의 비교적 단순한 오브젝트를 저장하는 데 효과적입니다. (SVG 등) 벡터를 비트맵으로 저장하면, 벡터 속성을 잃어버리게 됩니다.

비트맵

이미지의 가로, 세로 픽셀 개수와 그 픽셀이 갖고 있는 색상 값을 일일이 기억하는 방식입니다. 사진, 스크린샷, 복잡한 그림 등을 저장하는 데 효과적입니다. 원본 화질보다 크기를 키우면 예시 이미지처럼 화질 깨짐 현상이 발생합니다. (PNG, JPG 등) 비트맵은 벡터 형식으로 저장할 수 없습니다.

피그마는 벡터 기반 디자인 툴입니다

https://www.figma.com/design 에 표현되어 있는 벡터 드로잉

피그마 드로잉을 잘 활용하면 일러스트레이터와 같은 별도의 벡터 드로잉 툴 없이도 UI디자인에 필요한 거의 모든 에셋을 제작할 수 있습니다. 다양한 디바이스 사이즈에 대응해 디자인해야 하는 UI디자인 특성상, 해상도에 관계없이 깨지지 않는 벡터 기반 툴로 디자인하는 것이 효율을 높여줍니다.

에셋

아이콘, 로고, 이미지 등 실제 개발에 사용되는 다양한 그래픽 요소를 통칭해 부르는 말입니다. 보통 jpg, svg 등 별도 파일 형태로 추출해 관리할 요소를 말합니다.

오브젝트

도형, 텍스트, 프레임 등 피그마에서 디자인할 때 사용하는 모든 타입의 물체를 폭넓게 부르는 말입니다.

비트맵 기반 디자인도 놓치지 않습니다

언스플래시로 가져온 비트맵 이미지

피그마는 벡터 기반 툴이지만 비트맵 타입의 에셋을 집어넣고 관리하는 것도 상당히 빠르고 효과적입니다. Fill, Stroke 값에 이미지 파일을 넣어볼 수도 있고, 우측 패널의 Effects 를 활용해 그림자를 만들어볼 수도 있습니다. 여러 효과를 조합하는 것으로 다채로운 표현이 가능합니다.

원하는 대로 자유롭게 Export할 수 있습니다

디자인 작업이 완료되면 상황에 맞는 형식으로 에셋을 추출(Export)할 수 있습니다. 기본적으로 SVG, PNG, JPG, PDF 네 가지 확장자를 지원하며, 디바이스에 필요한 배수별로 뽑는 것도 가능합니다. 스크린샷 우측 하단 패널의 @3x 부분을 수정하면 Export 시 파일명 끝에 수정된 텍스트가 반영됩니다.

원하는 화면으로 어떻게 이동할 수 있나요?

스페이스 바를 누르고 있으면 화면을 이동할 수 있는 Hand Tool 이 활성화됩니다. 이 상태로 마우스를 드래그하면 화면을 자유롭게 이동할 수 있어요. 화면을 확대하고 싶다면 [+], 축소하고 싶으면 [-]를 눌러 손쉽게 원하는 크기로 화면을 바라볼 수 있습니다.

Export 하고 피그마에 다시 넣어 보기

Export 기능에 대해 전부 설명 드렸지만, 실제 써 보는 것만큼 좋은 연습도 없는 것 같습니다. 실습과 함께 피그마의 에셋을 원하는 형태로 추출하고, 추출한 에셋을 다시 피그마에 넣어 보겠습니다. Export 폴더 규칙과 해상도 배수, Suffix(접미어)가 어떤 의미인지 알 수 있게 됩니다.