[내배캠 베이스캠프] 피그마 기초 완전 정복 | 1주차

 

피그마란?

 

디자인 툴이자 협업 도구

디자이너를 중심으로, 개발자와 기획자, 마케터 등 모든 직군들이 같은 화면을 보며 작업할 수 있음

 

 

 

피그마 특징

 

1. 높은 접근성과 호환성: 웹에서도 접속 가능, 맥・윈도우 모두 사용 가능

2. 올인원: 디자인부터 개발까지 가능한 종합 협업 툴

3. 강력한 커뮤니티: 각종 플러그인과 디자인 자료들이 다수 공유됨

4. 쉬운 학습: 디자인 기초부터 고급 기능까지 피그마로 가능

 

 

 

피그마 설치

 

Figma 다운로드 | 데스크톱 및 모바일용 웹 디자인 앱

 

 

 

디스플레이와 배수 이해하기

 

디스플레이 (Display)

 

디지털 화면, TV・모니터 등을 통해 봄

 

해상도 (Resolution)

 

디스플레이의 선명한 정도, 값은 디스플레이 안에 들어가 있는 픽셀의 개수를 의미 → 1920 * 1080

 

해상도와 픽셀의 관계

 

- 해상도가 같다면, 화면 크기 ↑ 픽셀 한 칸 크기 ↑

- 화면 크기가 같다면, 해상도 ↑ 픽셀 한 칸 크기 ↓

- 일반적으로 화면 크기 ↑ 해상도 ↑, 예외는 있음

- 면적당 픽셀 개수가 많다면, 더 세밀한 묘사 가능

 

1배수 디자인

 

1배(100%), 디자인의 기준이 되는 원본 사이즈

'픽셀 배율'과도 비슷한 의미

 

참고: 픽셀 배율 확인 사이트(Viewport Size for Devices)로 가기

 

1배수 디자인을 정하는 법

 

보편적인 사이즈로 하는 것이 일반적이지만 내가 만들 앱을 쓸 사람들을 유의하여 정함

 

1배수 디자인이 실제 구현되는 과정

 

1. 제작자: 1배수 사이즈를 디자인하고 개발

2. 기기: 코드를 읽고 디자인으로 바꾼 다음, 자기 배율만큼 확대 혹은 축소 ← 이 과정을 렌더링이라고 함

3. 기기: 실제 해상도에 맞는 미세 조정 후 화면에 띄움 ← 이 과정을 업스케일, 다운스케일이라고 함

 

 

 

이미지 표현 방식, 벡터와 렉스터

 

래스터(Raster) 방식

 

비트맵(Bitmap) 형식, 픽셀 칸에 색깔 칩을 하나씩 담는 형식

 

대표 툴: 포토샵

파일 형식: jpg, bmp, gif, png 등

 

특징:

1) 해상도가 높을수록 화질이 좋음

2) 해상도가 낮은 이미지를 크게 만든다고 화질이 좋아지지 않음

3) 확대와 축소를 반복하면 색상 정보가 사라짐, 이를 '열화'라고 함

4) 단순한 방식이라 고해상도 이미지를 표현하기 좋음

 

 

벡터(Vector) 방식

 

그림을 수식으로 표현하는 형식, 이미지보다 코드 파일에 더 가까움

 

대표 툴: 일러스트레이터, 피그마

파일 형식: svg

 

특징:

1) 확대 및 축소 등 크기 변형이 자유로움

2) 이미지가 크고 복잡하면 수식도 복잡해짐 → 파일 크기가 커짐

 

QnA

 

- 이미 래스터 형식으로 만들어진 이미지를 벡터 툴에서 작업한다고 벡터 개체가 되지 않음

- 이미 열화된 이미지를 강제로 키워서 해상도만 늘리면 깨질 수 있음

 

 

 

8포인트 그리드

 

8포인트 그리드 디자인

 

일반적으로 디자인 요소들은 8의 배수로 만든다는 레이아웃 규칙

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

 

왜 사용할까?

 

규칙이 있어야 업무도 효율적으로 이루어지며, UI의 일관성이 유지됨

 

왜 하필 8일까?

 

8은 1, 2, 4, 8로 나눌 수 있음

즉, 2로 3번이나 쪼갤 수 있고 나눈 숫자도 다시 짝수

 

→ 디자인을 망가뜨리지 않고 확대 및 축소할 수 있음

 

 

 

피그마 둘러보기

 

홈 화면

 

 

디자인 화면

 

 

 

 

 

레이어 (Layer)

 

캔버스를 1층이라고 생각하고 그 위로 레이어 층이 올라감

사용자의 기준으로 볼 때는 층이 높을수록 가깝고 층이 낮을수록 먼 것

사용자에게 가까울수록 화면으로부터 떠 있다고 표현

 

디자인에서도 가로 x축, 세로 y축, 깊이 z축을 사용 ← z축이 레이어 높이

 

 

 

패스

 

패스 (Path)

 

벡터 형식으로 된 모양, 선・모양・복잡한 형태 모두 포함

도형 도구뿐만 아니라 펜 툴을 사용해서도 그릴 수 있음

 

아웃라인 (Outline)

도형의 테두리

패스를 기준으로 가운데・바깥쪽・안쪽으로 나눌 수 있음

도형의 크기와 테두리 크기는 별개이나, 스케일 툴을 사용하면 테두리 굵기도 같이 변함

윤곽선 처리를 통해 테두리를 선이 아닌 면으로 바꿀 수 있음 → 기존 도형에서 떼어내서 크기 조정 시 테두리 굵기를 달라지게 할 수 있음

 

평탄화 (Flatten)

 

정렬 기준을 맞추기 위해 도형의 회전 정보를 제거, 새로운 형태로 가공해주는 것

 

패스파인더

 

 

두 가지 패스를 선택했을 때 툴팁이 나오는 사각형 아이콘을 가리켜 패스파인더라고 함

패스를 결합하거나 분리할 수 있음

 

 

 

1주차 과제

 

 

제시된 8가지 모양 도형 툴로 똑같이 따라 그리기