[5/24] 18기 클래스 리뷰 #13

Chapter 3-4. 피그마 소개

 

피그마 

 

새로운 디자인 패러다임이 등장하면서 본격적으로 사용이 시작됨

 

 

스마트 폰 등장으로 본격적으로 사용됨

포토샵, 일러스트레이터 >> 해상도 문제로 대체됨

 

 

해상도가 높을수록 화질이 뛰어나고 색감이 선명하게 구현되는 상황

스마트 폰 등장이후 >> 다양한 해상도로 스마트폰이 출시

>> 밀도에 대한 문제 발생

10PPI 일때 1픽셀 & 30 PPI 일때 1픽셀의 크기가 어떤 해상도로 사용하고 있는지 판단측정이 어려움

+ 디자이너 역시 어떤 해상도를 기준으로 작업해야 하는지 판단하기 어려운 상황

 

>> 픽셀 사이즈 개념 - 더이상 사용하기 어려워

 

문제점 : 기존 해상도 시스템 - LCD 모니터 72 DPI (프린터 스캐너 등의 정밀도를 재는 단위)

DPI : Dots Per Inch

 

 

해상도 MDPI 

X1 160dpi = mdpi  (해상도 160 수치)

X2 320dpi = xhdpi  (해상도 160 수치)

X3 480dpi = xxhdpi  (해상도 160 수치)

X4 640dpi = xxxhdpi  (해상도 160 수치)

 

 

PX단위 디자인의 문제점

같은 1PX .이지만 해상도에 따라 크기가 다르게 보임

>> 구글에서 제시한 모든 환경에서 같은 크기로 보이도록 정의된 독립적인 단위 수치

DP, 포인트 >> 변환할 수 있는 방법을 알아야 함!

 

 

 

X1 = 1DP = 1픽셀 (X2, X3, X4)

우리는 1배율의 환경에서 작업을 해야지만  x2 환경에서넌 4픽셀이 필요함..

 

 

 

피그마를 사용해야하게되면, 복잡한 공식을 통해서 사이즈 계산하거나 여러번 작업할 필요가 없음

 

 

Export 기능으로 자동 계산이 되어서 사용 >> 효율적으로 사용가능

 

 

빠르게 사람들의 의견 반영, 디자이너, 개발자 >> UXUI 프로세스 협업과 의사소통이 유기적으로 소통

 

실시간 소통, 가볍고, 효율적인 UXUI 프로그램

 

 

>> 현재 

 

피그마 차별점 5가지

 

1. 웹 기반의 프로그램

>> 접근성이 뛰어남 

프로그램 설치가 아님 / 웹 브라우저 안에서 사용이 가능함 / 디자이너가 아니더라도 빠르게 실행할 수 있음

자신의 PC에 폰트들 사용가능

 

 

2. 기획 + 디자인 + 협업 기능 - 업무 속도 향상

>> 실시간 공유 가능 / 효율성 高

 

3. OS 호환 및 가격 정책

>> 모든 OS 호환 (맥 / 윈도움)

 

 

>> 무료 버전에도 기능의 제약이 거의 없음 / 충분히 모든 기능을 무제한으로 가능함!

 

 

4. 피그마의 강력한 기능

>> 디자인 속도 향상 + UI 규격화

 

5. 활발한 업데이트 기능

>> 디자인, 디자인 가이드, 커뮤니티 생성, 피그잼 런칭, 통합 플랫폼으로 거듭남

 

전세계적으로 활용이 되고 있기에 반드시 사용해야할 프로그램

 

 

 

Chapter 3-5. 피그마 인터페이스 알아보기

 

구글 아이디로 가볍게 가입 가능

 

Recents >> 최근 오픈 파일 기능

 

커뮤니티 >> 유용한 파일 (각종 플러그 인 파일들..)

 

 

Team Project

>> 팀들과 작업 공유

 

 

New Design file

>> 작업 환경 (새로운 환경 파일)

 

 

인터페이스 구조

>> 3가지 구역 (상단 / 좌측 / 우측 패널로 구분 : 기능이 구분되어 있음)

피그마 세팅 환경

 

상단 : 도구모음 

주요기능 (Preference / Theme / System Theme)

저장방식 (자동 저장 프로그램) >> 웹으로 실시간 저장이 됨

>> 별도의 디자인 파일을 저장하려면 (File >> Save as)

 

 

Move

 

Frame (아트 개념 : 디자인 할 수 있는 공간)

>> 우측 패널에 각종 플랫폼 有 (원하는 사이즈를 선택이후 디자인 진행)

만들어진 크기는 조절이 가능함 (이름 수정 가능)

- 복제가능 / 드레그 이후 수정 가능 / 복제 Ctrl+D, Atl + 드레그

 

 

도형 툴 (도형 그리기)

부가 기능으로 가능

 

펜 기능 

>> 점으로 선 - 면으로 바꿀 수 있음

 

편집 모드 >> 도형을 쉽게 편집가능 >> 점으로 

 

텍스트 기능

폰트 시리즈 (구글 기본) / 추가원할 시 (PC 로컬 폰트 사용가능)

사이즈, 행간, 자간, 행폭(행간과 같은 인식이나 다름) 

타입 세팅 >> 부가적 옵션

 

리소스 툴 (최신 업데이트된 기능)

핸드 툴 (화면 이동하고 싶을 때 >> 스페이스바 누르고 가능)

 

 

 

디자이너가 작업하고 있을 때 팀원들을 공유해두면 디자이너가 작업하는 것을 실시간으로 볼 수 있음

>> 소통하기 위한 기능 (피드백..)

 

 

 

중앙 파일명 설정, 변경

 

 

우측

Share >> 편집권한, 보기 권한 설정 

 

미리보기 이미지 

>> Share Proto Type 

 

화면 비율 설정

 

 

우측 패널

 

인스펙트 모드

>> 만들어진 모든 스펙이 다 보

 

 

Chapter 3-6. 피그마 아이콘 제작하기

 

 

 

도형 툴 - 피그마 아이콘 제작 실습

>> 5가지 도형으로 구성

 

 

컬러 변경 >> 스포이트 (단축키 i )