🔥전 세계 기업들이 선택한 피그마 강좌 PS.이제는 마스터하셔야죠? (4K)

피그마 기초 툴 강의 정리

1. 피그마 시작하기

• 피그마란? UI/UX 디자인 필수 툴. 전 세계 글로벌 기업 및 국내 대기업에서 사용 중. 어도비 XD, 스케치 등 대체하며 사용 추세.
• 늦지 않았어요! 아직 많은 기업들이 피그마로 전환 중이라 지금 시작해도 늦지 않음.
• 디자이너만 위한 툴 X 기획자, 개발자, 퍼블리셔, 마케터 등 다양한 분야에서 협업 툴로 활용.
• 강의 목표: 실무에서 초보자가 알면 좋은 기능 위주로 설명. (모든 기능 X)
• 영상 구성: 타임라인 활용하여 필요한 부분만 골라 볼 수 있음. (약 2~3시간 예상)

2. 피그마 홈 화면 살펴보기

• 좌측 메뉴:
  • 프로필: 테마 설정 (다크/라이트 모드) 가능.
  • 검색: 최근 파일 및 검색으로 파일 찾기.
  • 최근 본 항목: 최근 디자인 파일 목록.
  • 내 팀: 속해 있는 팀 목록.
  • 드래프트: 디자인 초안 작업물 저장.
  • 팀: 폴더 개념. 프로젝트별로 분류 가능. (팀 이름, 프로젝트 이름 변경 가능)
• 무료 vs 유료:
  • 무료: 프로젝트 1개, 디자인 파일 3개, 피그잼 3개 생성 가능.
  • 유료: 무제한 생성, 고급 기능 사용 가능.
• 팀 그룹 생성:
  • 하단 '+' 아이콘 > 'Create new team' 선택.
  • 팀 이름 입력 후 생성.
  • 공동 작업자 이메일/피그마 ID 추가 가능.
• 프로젝트/디자인 파일 생성:
  • 팀 그룹 내 '+' 아이콘 > 'New project' 또는 'New design file' 선택.
  • 무료 버전은 프로젝트 1개, 디자인 파일 3개 제한 있음.
• 커뮤니티:
  • 피그마 오픈 소스 활용 가능. 아이콘, UI 디자인 등 참고 및 다운로드.
  • 'Open in Figma' 클릭 시 해당 파일 바로 열림.
• 피그잼:
  • 파워포인트, 문서 작업, 기록, 발표 자료 등 활용 가능.
  • 회의 시 협업 툴로도 많이 사용. 다양한 템플릿 제공.
• 파일 불러오기 (Import):
  • 'Import' > 'My computer' 클릭 후 파일 선택.
  • 파일 드래그 앤 드롭으로도 불러오기 가능.
• 파일 보기: 리스트 뷰, 그리드 뷰 등 다양한 보기 모드 제공.

3. 피그마 작업 화면 기본

• 상단 툴바: 프레임, 도형, 펜 툴, 텍스트 등 디자인 도구.
• 좌측 레이어 창: 디자인 요소 목록 확인 및 관리.
• 우측 이펙트 창: 컬러, 폰트, 그림자 등 디자인 효과 적용.

4. 파일 저장 및 버전 관리

• 저장: 'File' > 'Save to Figma' (자동 저장).
• 버전 관리:
  • 'File' > 'Save to Version History' (수동 저장).
  • 'File' > 'Show Version History' (버전 확인 및 복구).
  • 날짜/시간별 자동 저장 기록 확인 가능.
  • 버전 복사 및 붙여넣기 가능.

5. 공유 기능

• 'Share' 버튼:
  • Copy Link: 링크 복사하여 공유.
  • 이메일 초대: 특정 사용자에게 보기/편집 권한 부여.
  • 권한 설정: 'Can edit', 'Can view', 'Can view prototype'.
  • 링크 접근 권한: 'Anyone' (전체 공개), 'Anyone with password', 'Only people invited'.

6. 페이지 관리

• 페이지 생성: 상단 'Page 1' 옆 '+' 아이콘 클릭.
• 페이지 이름 변경: 페이지 더블 클릭 후 이름 입력.
• 페이지 삭제: 페이지 우클릭 > 'Delete page'.
• 커버 이미지 설정:
  • 커버로 사용할 디자인 프레임 선택.
  • 우클릭 > 'Thumbnail' > 'Set as thumbnail'.
  • 홈 화면에서 디자인 파일 썸네일로 표시됨.

7. 기본 도형 및 펜 툴

• 프레임: XD의 아트보드와 유사. 다양한 디바이스 사이즈 제공.
• 도형: 사각형, 라인, 원, 삼각형, 별 등.
  • Shift 키 활용: 비율 유지하며 도형 크기 조절.
  • 모서리 라운드: 직접 조절 또는 수치 입력. 각 모서리별 다르게 설정 가능.
  • 삼각형/별: 꼭짓점 개수, 각도 조절 가능.
• 이미지/비디오 삽입:
  • 'Fill' > 'Image' > 'Choose image'.
  • 비디오 삽입은 유료 버전에서 가능.
• 펜 툴: 직선, 곡선 등 자유로운 드로잉.
• 펜슬: 자유로운 손그림 스타일 드로잉. (UI 디자인에서는 활용도 낮음)
• 텍스트 툴: 텍스트 입력 및 편집.
• 손바닥 툴 (Spacebar): 화면 이동.
• 확대/축소:
  • Z 키: 확대/축소 모드 전환.
  • Ctrl/Cmd + 마우스 휠: 확대/축소.
  • Z + 드래그: 영역 확대.
  • Z + Alt/Option + 드래그: 영역 축소.
• 말풍선 (Comment): 디자인에 대한 코멘트 작성 및 확인.
• 실시간 채팅: 마우스 우클릭 > '/' (슬래시) 입력 후 채팅.
• 화면 모드 전환: 마우스 우클릭 > 'Hide UI' (Ctrl/Cmd + )

8. 레이어 및 정렬

• 셀렉트 매칭 레이어: 동일한 종류의 레이어 한 번에 선택 및 수정.
  • 도형, 텍스트, 아이콘 등 다양한 요소에 적용 가능.
• 정렬:
  • 좌측 정렬, 가운데 정렬, 우측 정렬.
  • 상단 정렬, 가운데 정렬, 하단 정렬.
  • 격자 정렬: 여러 요소 간 간격 자동 맞춤.
• 도형 크기/각도 조절:
  • X, Y 좌표, W (가로), H (세로) 값 조절.
  • 비율 유지 (클립 아이콘): 가로/세로 비율 유지하며 크기 조절.
  • 각도 조절, 라운드 값 조절.
  • iOS 값: 라운드 곡선 미세 조절.

9. 오토 레이아웃 (Auto Layout)

• 개념: 요소 간 간격, 크기, 위치 등을 자동으로 조절하여 반응형 디자인 구현.
• 활용:
  • 텍스트 길이에 따라 말풍선 크기 자동 조절.
  • 요소 추가/삭제 시 간격 자동 유지.
  • 마진: 요소 간 간격 설정.
  • 패딩: 요소 내부 여백 설정.
  • 방향: 가로/세로 배치.
  • 정렬: 좌측, 우측, 가운데 등 정렬 방식 설정.
  • 픽스(Fix) vs 허그(Hug) vs 필(Fill):
    • 픽스: 고정 크기 유지.
    • 허그: 내용물에 맞춰 크기 자동 조절.
    • 필: 부모 요소 크기에 맞춰 자동 확장/축소.
• 반응형 디자인: 오토 레이아웃과 컨스트레인츠를 함께 활용하여 다양한 해상도 대응.

10. 마스크 기능

• 개념: 특정 도형 안에 이미지를 삽입하여 원하는 형태로 표현.
• 활용:
  • 도형 위에 이미지 올리고 마스크 적용.
  • 마스크 안의 이미지 위치, 크기 조절 가능.
  • 마스크 자체에 라운드 등 효과 적용 가능.
  • 그룹화 (Ctrl/Cmd + G): 마스크와 이미지 함께 이동.

11. 도형 합치기 (Boolean Operations)

• 개념: 여러 도형을 합치거나 빼서 새로운 모양 만들기.
• 옵션:
  • Union: 도형 합치기.
  • Subtract: 도형 빼기 (맞닿는 부분).
  • Intersect: 교집합 부분만 남기기.
  • Exclude: 교집합 부분 제외하고 남기기.
• 계층 구조 이해: 위에 있는 레이어가 상위 계층으로 적용됨.

12. 스트록 (Stroke)

• 개념: 도형 테두리 선.
• 설정:
  • 컬러: 선 색상 변경.
  • 오퍼시티: 선 투명도 조절.
  • 그라디언트: 선에 그라디언트 효과 적용.
  • 두께: 선 두께 조절.
  • 위치: 인사이드, 센터, 아웃사이드 (UI 디자인에서는 인사이드 주로 사용).
  • 끝선 모양: 각진 선, 둥근 선, 사선 선.
  • 점선: 점선 길이, 간격 조절.
  • 개별 설정: 각 면별로 다른 두께, 라운드, 점선 설정 가능.

13. 이펙트 (Effect)

• 드롭 섀도우 (Drop Shadow): 그림자 효과.
  • X, Y 좌표, 블러, 스프레드, 컬러, 오퍼시티 조절.
  • 스프레드: 그림자 번짐 정도 조절.
  • 이너 섀도우 (Inner Shadow): 안쪽 그림자 효과.
  • 레이어 블러 (Layer Blur): 오브젝트 자체를 흐릿하게 만들기.
  • 백그라운드 블러 (Background Blur): 배경 오브젝트를 흐릿하게 만들기. (오퍼시티와 함께 사용)

14. 익스포트 (Export)

• 개념: 디자인 파일을 이미지 파일로 내보내기.
• 설정:
  • 사이즈: 1x, 1.5x, 2x, 3x, 4x 등 배율 설정. (벡터 기반이라 확대해도 깨짐 없음)
  • 파일 형식: PNG, JPG, SVG, PDF.

15. 스타일 등록

• 개념: 자주 사용하는 컬러, 폰트, 이펙트 등을 등록하여 재사용.
• 장점: 디자인 일관성 유지, 작업 효율 증대.
• 등록 방법:
  • 요소 선택 > 우측 속성 패널에서 'Style' 옆 점 네 개 아이콘 클릭 > '+' 아이콘 클릭.
  • 그룹화: 슬래시(/)를 사용하여 그룹명 지정 (예: Brand/Primary/Red).
  • 폰트 스타일: 폰트 크기, 행간, 자간, 두께 등 함께 등록 가능.
  • 이펙트 스타일: 드롭 섀도우, 이너 섀도우 등도 등록 가능.
• 스타일 적용: 등록된 스타일 클릭하여 바로 적용.
• 스타일 수정: 등록된 스타일 수정 시, 해당 스타일을 사용하는 모든 요소에 일괄 적용.

16. 컴포넌트 (Component)

• 개념: 재사용 가능한 디자인 요소 (버튼, 아이콘, 카드 등).
• 장점: 디자인 일관성 유지, 수정 용이성, 효율적인 작업.
• 컴포넌트 생성:
  • 요소 선택 > 상단 'Create component' (Ctrl/Cmd + Alt + K).
  • 컴포넌트 세트 (Component Set): 여러 상태/변형을 하나의 컴포넌트로 묶어 관리. (가장 많이 사용)
• 컴포넌트 속성 (Properties):
  • 사이즈, 스타일, 상태 (기본, 비활성화, 로딩 등), 아이콘 변경, 텍스트 변경 등 다양한 속성 추가 가능.
  • 네스티드 (Nested): 다른 컴포넌트를 포함시켜 관리.
• 에셋 (Assets): 생성된 컴포넌트 목록.
• 컴포넌트 활용: 에셋 패널에서 컴포넌트 드래그 앤 드롭으로 사용.
• 인스턴스 (Instance): 컴포넌트를 복제하여 사용한 것. 원본 컴포넌트 수정 시 인스턴스도 함께 변경됨.
• 아이콘 컴포넌트화: 다양한 아이콘을 컴포넌트로 만들어 버튼 등에서 쉽게 교체 가능.

17. 그리드 (Grid)

• 개념: 디자인 레이아웃을 정렬하고 일관성 있게 구성하기 위한 가이드라인.
• 활용:
  • 컬럼 그리드: 웹 디자인 시 12, 14, 16 컬럼 등으로 레이아웃 구성.
  • 로우 그리드: 세로 간격 조절.
  • 도형 그리드: 아이콘 디자인 시 가이드라인으로 활용.
• 설정: 프레임 선택 > 우측 'Layout grid' > '+' 아이콘 클릭.
  • 컬럼, 로우, 그리드 등 타입 선택.
  • 개수, 간격, 색상, 투명도 등 조절.

18. 컨스트레인츠 (Constraints)

• 개념: 부모 프레임 크기 변경 시 자식 요소의 위치 및 크기 자동 조절 설정.
• 활용: 반응형 디자인 구현에 필수적.
• 설정: 요소 선택 > 우측 'Constraints'에서 설정.
  • 좌우: Left, Right, Center, Left & Right.
  • 상하: Top, Bottom, Center, Top & Bottom.
  • 텍스트: 텍스트 길이에 따라 자동 줄바꿈, 말줄임 설정.

마무리

• 피그마 학습: 기초 기능 숙지 후 꾸준히 연습하는 것이 중요.
• 추가 학습: 플러그인, 프로토타입, 고급 컴포넌트 등은 추후 별도 강의로 제공 예정.
• 실무 적용: 배운 내용을 바탕으로 다양한 디자인 실습.

긴 강의 시청해주셔서 감사합니다!