[내일배움캠프 PM 4기] 8일차 - 🎨 디자인 협업의 새로운 시대, 피그마(Figma) 핵심 기능 총정리

🚀 챕터 1 요약: 피그마, 왜 대세인가? (기본 개념 & 필수 지식)

안녕하세요! 오늘은 디자인 툴 피그마(Figma)를 시작하기 전에 반드시 알아야 할 핵심 개념과 기본 기능들을 정리해 봤습니다. 피그마가 단순히 툴을 넘어 '대세'가 된 이유부터 디자인의 기본 원리까지, 빠르게 훑어봅시다!

1. 피그마는 "모두"를 위한 협업 도구

핵심	설명
피그마란?	제품을 만드는 모든 사람을 위한 협업 도구. 디자이너, 기획자, 개발자, 마케터 등 모든 직군이 같은 화면에서 실시간으로 작업해요.
활용 범위	제품 제작의 전 과정 (기획 → 디자인 → 개발 → 테스트/출시)에 모두 활용 가능한 올인원(All-in-one) 툴이에요.
다른 툴 vs 피그마	포토샵, 일러스트레이터는 그래픽 디자인에 더 적합하며, 스케치, 제플린, 프레이머 등 다른 UI 툴 대비 피그마는 협업성과 범용성이 가장 높습니다.

---

2. 피그마의 진정한 힘: 강력한 커뮤니티

피그마가 대세가 된 가장 큰 원동력은 바로 커뮤니티입니다.

• 서드파티(3rd-party) 자료: 다른 사용자들이 직접 만든 UI 키트, 디자인 시스템, 일러스트, 플러그인, 위젯 등 방대한 자료를 공유합니다.
• 주의점:
  • 자료 사용 전 가격(유/무료)과 저작권/라이선스를 반드시 확인해야 합니다.
  • 커뮤니티 자료 사용 중 문제 발생 시, 피그마가 아닌 제작자에게 직접 문의해야 합니다.

---

3. 디자인의 기초 이론: 픽셀, 벡터, 8포인트 그리드

디지털 화면을 정밀하게 설계하기 위해 알아야 할 필수 지식입니다.

지식	핵심 내용
디스플레이/배수	화면을 이루는 픽셀과 해상도의 개념 이해. 디바이스 환경과 관계없이 일관된 디자인을 위해 1배수 디자인을 기준으로 작업합니다.
벡터 vs 래스터	벡터(피그마)는 그림을 수식으로 표현하여 확대/축소해도 깨지지 않으며, 래스터(포토샵)는 픽셀 기반이라 확대 시 화질이 열화됩니다.
8포인트 그리드	UI 요소의 크기, 간격, 여백 등을 8의 배수 단위로 설정하는 디자인 규칙. 디자인 및 개발 과정의 커뮤니케이션 효율을 높이고, 다양한 해상도 변화에 유연하게 대처할 수 있도록 합니다.

---

4. 피그마 기본 개체 조작 및 레이어

🔨 크기 조정: 무브 툴(V) vs 스케일 툴(K)

피그마에서 크기를 조정하는 방법은 두 가지가 있습니다.

• 무브 툴 (Move, V): 기본 커서. 주로 사용하며, 내부 UI 크기는 그대로 둔 채 상자 크기만 조절합니다.
• 스케일 툴 (Scale, K): 내부 UI까지 비율에 맞춰 크기를 강제로 변경합니다. 원래 의도한 속성이 변경될 수 있어 주의해야 하며, 특별한 경우가 아니면 컨스트레인트나 오토 레이아웃으로 크기를 조정하는 것이 권장됩니다.

층(Layer)의 높이와 Z-index

우리가 만든 도형이나 텍스트 하나하나가 레이어를 이룹니다.

• 레이어의 높이: 캔버스 위에 쌓이는 층의 순서를 의미하며, 화면상에서 겹치는 원근을 결정합니다.
• 실무 용어: 가로(width), 세로(height)와 함께 이 높이 개념을 Z-index라고 부르며, 개발에서도 사용되는 용어입니다.

벡터 개체 편집: 패스(Path)와 아웃라인

• 패스(Path): 벡터 형식으로 된 모든 모양(선, 도형)을 뜻합니다.
• 아웃라인(Outline): 도형의 테두리(선) 정보를 없애고 테두리 모양 그대로 **면(Fill)**으로 바꾸는 기능입니다.
  • 흔히 '도형을 깬다'고 표현하며, 아이콘 등을 만들 때 크기 조정 시 굵기 비율을 균일하게 유지하고 싶을 때 유용합니다.
• 평탄화(Flatten): 회전된 개체를 회전하지 않은 상태(0∘)로 초기화합니다. 회전된 도형을 패스파인더 등으로 조작하려면 습관처럼 평탄화를 적용하는 것이 좋습니다.

---

피그마를 시작하기 위한 기초 다지기를 완료했습니다. 이제 이 개념들을 바탕으로 실제 디자인 파일에서 레이어와 도형을 능숙하게 다뤄봅시다! 다음 챕터에서 만나요! 👋