피그마 기초 완전 정복 - UXUI 기초 개념 이해 (피그마의 정의와 디자인 기초 개념 2편)
by SINI
2026. 6. 12. 20:02
1. 오늘 학습 키워드
- 이미지 표현 방식 - 벡터와 래스터
- 8포인트 그리드
2. 오늘 학습 한 내용을 나만의 언어로 정리하기
<컴퓨터가 그림을 그리는 방법>
- '컴퓨터가 그림을 그린다' = '데이터를 채운다'
- 컴퓨터가 데이터를 채워서 그림을 표현하는 2가지 방법 → 래스터 방식, 벡터 방식
<래스터(Raster) 방식> = 비트맵(Bitmap)형식
-픽셀 칸에 색깔 칩을 하나씩 담는 형식
- 래스터 방식의 대표적인 툴 → 포토샵
- 파일 형식 → jpg, bmp, gif, png 등 흔히 보는 이미지 형식들
*파일 형식 = '확장자' 라고 함
래스터 방식 특징
해상도가 높을수록 화질이 더 선명해짐
- 일정한 칸 안에 색깔을 칠하는 일종의 모자이크 같은 형식임 - 픽셀 개수가 많을 수록 화질이 더 선명해짐 - 픽셀 개수가 많음 = 해상도가 높음
해상도가 낮은 이미지를 크게 만든다고 화질이 좋아지지 않음
- 이미지 크기를 키우는 건 픽셀 크기가 커지는 것 뿐이므로 화질이 좋아지는 건 아님
확대와 축소를 반복하면 색상 정보가 사라짐
- 색을 표현할 수 있는 픽셀 개수가 강제로 줄었다가 늘어나는 과정에서 원본 색상 정보가 일부 손실될 수 있음 - 사라진 색상 정보는 다시 원본 크기로 만들어도 복구 불가함 → '화면이 깨진다', '열화됐다(= 나빠졌다)' 라고 표현함 - 기술의 발전으로 열화를 최소화하면서 이미지 크기를 조정할 수 있도록 많은 툴들이 점점 개선되고 있음
단순한 방식이므로 고해상도 이미지를 표현하기 좋음 - 모자이크 칸을 단순히 칠하기만 하면 됨 - 크고 화려한 이미지도 벡터에 비해 파일 크기가 작음 - 일반적으로 jpg가 가장 가볍고 png가 가장 무거움
<벡터(Vector) 방식>
-그림을 수식으로 표현하는 형식
- 벡터 방식의 대표적인 툴 → 일러스트레이터, 피그마
- 수식으로 표현하는 형식이라 이미지라기보다는코드 파일에 더 가까움
- 파일 형식 → svg
백터 방식 특징
확대 및 축소 등 크기 변형이 자유로움
- 픽셀 개수로 만들어진 게 아니라 일종의 함수라서 확대 및 축소하더라도 선명함이 유지됨
이미지가 크고 복잡하면 수식도 복잡해짐
- 고해상도의 많은 색을 표현하는 경우 수식이 매우 복잡해져 파일 크기가 커짐 → 화면이 깨지지 않는다고 무조건 svg형식으로 이미지를 만들면 안됨 → 이미지의 종류와 사용 목적에 따라 적절한 파일 형식을 선택
알아두면 좋은 상황
피그마는 벡터 형식인데 그래픽이 깨져서 나온 경우
- 모니터와 핸드폰 화면은 결국 픽셀 기반으로 보여줌 → 자세하게 보면 깨진 것처럼 보일 수 있음 - 피그마에서 사용하는 이미지가래스터 형식일 때 발생 → 래스터 이미지는 피그마에서 작업해도 벡터 개체로 변하지 않음
해상도는 충분히 큰데 그래픽이 깨지는 경우
- 작업 시 습관적으로 화면을 확대해서 보는 경우에 발생 → 실제 구현될 사이즈로 확인하기 - 이미열화된 이미지를 강제로 확대한 경우에 발생 → 이미 색상 정보가 사라진 이미지를 사용하는 걸 지양하기
< 8포인트 그리드 디자인(8-point grid design)>
- UI를 8의 배수에 맞춰 배치하는 레이아웃 규칙
- UI 사이의 간격, 여백, 크기 등을 8의 배수 단위로 조정
- 보편적으로 가장 많이 사용하는 규칙
8포인트 그리드의 중요성
- 디자인을 빠르고 정확하게 만들 수 있음
- 일정한 규칙을 사용하면 디자이너와 개발자 간의 비효율적인 소통이 줄어듬
- 규칙이 정해져 있기 때문에 다른 디자이너나 개발자가 처음 보는 디자인이라도 쉽게 이해할 수 있음
- 10배수인 경우, 1.25배를 하게 되면 12.5가 되면서 불완전 픽셀이 발생 - 8은 1.25배를 하더라도 10으로 깔끔하게 떨어짐
- 단위가 너무 커서 디자인을 줄이거나 키울 때 차이가 너무 큼
*안티 앨리어싱 - 계단 현상(흐릿한 부분)을 없애주는 옵션
3. 학습하며 겪었던 문제점 & 에러
1)
학습 과정에서 다양한 이미지 확장자가 등장했지만 각각 어떤 특징을 가지고 있는지 궁금했다.
이를 해결하기 위해 추가 학습을 진행한 결과, JPG는 사진과 같은 이미지를 압축하여 저장하는 형식이고, PNG는 투명 배경을 지원하는 형식이라는 것을 알게 되었다. 또한 GIF는 간단한 애니메이션을 표현할 수 있으며, SVG는 수학적 계산식을 기반으로 이미지를 표현하는 벡터 형식이라는 점을 이해할 수 있었다.
2)
학습 과정에서 벡터 이미지는 수학적 계산식으로 구성된다는 내용을 접하고 실제로 디자이너가 수식을 입력하는지 궁금했다.
이를 해결하기 위해 추가 학습을 진행한 결과, 대부분의 경우 디자이너가 직접 수식을 작성하지는 않는다는 것을 알게 되었다. 도형을 만들거나 패스를 수정하면 디자인 툴이 내부적으로 좌표와 계산식을 생성하여 벡터 이미지를 표현한다는 점을 이해할 수 있었다.
3)
학습 과정에서 8포인트 그리드가 널리 사용된다고 배웠지만, 어떤 상황에서 8의 배수를 사용하지 않는지 궁금했다.
이를 해결하기 위해 추가 학습을 진행한 결과, 텍스트 크기나 아이콘, 선 굵기처럼 세밀한 조정이 필요한 경우에는 4배수 또는 2배 단위를 함께 사용하는 경우가 있다는 것을 알게 되었다. 또한 시각적인 균형을 맞추기 위해 일부 요소를 예외적으로 조정하기도 한다는 점을 이해할 수 있었다.
