brunch

You can make anything
by writing

C.S.Lewis

by Hyo 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(접미어)가 어떤 의미인지 알 수 있게 됩니다.

1. 피그마에 있는 준비된 예제를 클릭해 볼게요.

2. 더블클릭해서 에셋을 선택해 보겠습니다. 메인 프레임에 종속되어 있는 [asset] 영역이 선택되는 것을 확인할 수 있습니다.

3. 오른쪽 하단 Export 영역을 확인해 보면. [Export 'asset(레이어 이름)'] 버튼을 확인할 수 있습니다. 

4. [Export asset] 버튼을 눌러 주세요. 버튼을 누르기 전, @2x, @3x 영역을 잘 기억해 두세요. 만약 버튼이 보이지 않는다면, 오른쪽의 플러스 버튼을 눌러 주세요.

5. 원하는 폴더를 선택하고 [Save] 버튼을 눌러 주면, Export 완료! 비트맵 형식의 PNG파일로 저장됩니다.

6. 저장한 폴더를 열어 추출된 에셋을 확인해 보세요. asset, asset@2x, asset@3x... 이런 식으로 아까 입력된 @2x, @3x 이름이 추가된 채로 추출된 것을 확인할 수 있습니다. 폴더에 추출된 에셋 3개를 모두 선택해 보겠습니다. 

7. 피그마 창으로 드래그 & 드롭 하면 가져오기 완료! 세 파일이 예제의 To Be 처럼 각기 다른 해상도로 피그마 파일에 들어오게 됩니다.




벡터와 비트맵은 UI디자인 뿐 아니라 모든 영역의 디자인 전반에 걸쳐 매우 중요한 개념입니다. 이 글이 피그마에서 벡터와 비트맵의 차이를 이해하고 활용하는 데 도움이 되었기를 바랍니다. 

작가의 이전글 디자이너 연말 파티 디자인하기
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari