Figma-1

📘 [내일배움캠프 사전캠프] Figma 1주차

📌 수업 목표

• 피그마 인터페이스를 배우고 사용할 수 있다
• 레이어의 개념을 이해하고 만들 수 있다
• 도형을 생성하고 원하는 대로 편집할 수 있다

---

🗂️ 목차

1. 피그마란?
2. 피그마 설치 및 계정 생성
3. 디스플레이 & 해상도 이해
4. 벡터 vs 래스터 이미지
5. 8포인트 그리드 시스템
6. 피그마 인터페이스
7. 기본 도형 & 텍스트 만들기
8. 이미지 첨부하기
9. 레이어의 개념
10. 패스와 펜툴

---

1. 🧩 피그마란?

• 디자인 + 협업 툴 (디자이너, 기획자, 개발자 모두 사용 가능)
• 웹 기반 툴, 크로스 플랫폼 지원 (Windows/Mac)
• 실시간 협업, 버전 관리, 댓글 기능 우수

---

2. 🚀 피그마 시작하기

• 피그마 공식 홈페이지

• 계정 생성 (이메일 or 구글 연동)

• 웹 vs 데스크탑 앱

  • 데스크탑 앱 추천 (성능/알림/폰트 호환성 우수)

• 폰트 인스톨러 설치 필수 (웹 사용 시)

---

3. 🖥 디스플레이 & 배수 개념

• 픽셀(Pixel): 디지털 화면의 최소 단위
• 해상도: 픽셀 수로 결정, 높을수록 선명
• 1배수 디자인: 기준 디바이스(예: 375x812)를 중심으로 디자인

---

4. 🖼 이미지 방식: 벡터 vs 래스터

구분	벡터 (Vector)	래스터 (Raster)
원리	수식 기반	픽셀 기반
대표 형식	svg, figma	jpg, png, gif
장점	크기 조정에 유리	표현력이 풍부
단점	복잡하면 용량 증가	확대 시 깨짐 (열화 현상)

---

5. 📏 8포인트 그리드 시스템

• UI 간격, 여백, 크기를 8의 배수로 정렬
• 일관된 디자인 구조 유지
• 디자이너-개발자 간 협업 효율 상승
• 💡 왜 8? → 2, 4로 쉽게 나누고 배율 조정에 강함

---

6. 🧭 피그마 인터페이스 구성

• 홈 화면: 최근 파일, 팀, 커뮤니티 탐색

• 디자인 화면:

  • 도구 메뉴, 캔버스, 레이어 패널, 속성 패널, 페이지 패널 등

• 커뮤니티에서 플러그인/템플릿/아이콘 다운로드 가능

---

7. 🔷 도형 & 텍스트 만들기

• 사각형(R), 원(O), 다각형, 선(L)
• 곡률(Radius) 적용 → 둥근 모서리 생성
• 텍스트 도구(T): 글자 입력 후 사이드 패널로 스타일 조정

---

8. 🖼 이미지 삽입

• 드래그 앤 드롭으로 사진 첨부

• Fill 옵션:

  • Fill: 비율 유지, 넘치는 부분 숨김
  • Fit: 비율 유지, 도형 안에 맞춤
  • Crop: 잘라내기
  • Tile: 반복

---

9. 🧱 레이어 구조 이해

• 각 요소 = 하나의 레이어
• 레이어 순서 = Z축 (높이) 개념
• 정렬: Bring to Front / Send to Back
• 레이어 패널에서 드래그로 순서 변경 가능

---

10. ✒️ 패스와 펜툴

• 펜툴(P)로 자유로운 벡터 도형 제작 가능
• 곡선 그리기 → 클릭 후 드래그
• 아웃라인 기능: 테두리를 면으로 변경
• 평탄화 기능: 복잡한 도형을 단순화

11. 숙제