그동안 프로젝트를 진행하며 매번 피그마를 사용했었는데 어떤 기능이 있고 어떤 방식으로 디자인을 해야 하는지는 아무것도 몰랐다. 이번 수업을 통해서 피그마를 이해해보며 제대로 써보려고 한다!
기업들의 피그마 도입 이유
디자이너와 개발자에게 전달하는 과정에서 협업 툴로써 피그마를 통해 전달하는 현상이 늘어나고 있다.
현재 IT 뿐만 아닌 다른 직종에서도 많이 사용되고 있다.
UX에서는 디자인 시스템 설계 또한 피그마를 통해 진행한다.
많은 기업들이 피그마를 사용하는 가장 큰 이유는 생산성을 높이고 협업 능력을 높여줄 수 있다.
1. 워크 프로세스가 많이 개선된다.
- 이전에는 디자이너/개발자/협력사 등 코드, 사양서, 디자인 가이드, 이미지, 모션, 커뮤니케이션 등에 대한 툴을 따로 따로 다뤄야했다.
- 하지만 피그마는 하나의 툴로 통해 위 과정을 여러 부서와 함께 공유할 수 있다.
2. 디자인 툴 시장의 피그마 성장 추세
- 많은 기업들이 사용하므로 협업하기 위해서는 피그마를 배워야한다.
3. 피그마의 ROI
고객 인터뷰와 재무 분석 결과, 피그마의 투자 수익률(ROI)은 231%이라고 밝혀졌다.
그만큼 영향력이 높은 툴인 것이다.
피그마 장점
1. 워크프로세스 개선
- PPT를 합치는 과정에서도 매우 간결하다.
2. 디자인 일관성 유지
- 메인 컴포넌트를 복사하면 그 디자인 요소는 인스턴스가 되는데, 이 디자인을 모두 바꿔야 할 때 메인 컴포넌트만 바꾸면 나머지 인스턴스 또한 다 바뀐다. → 일관성 유지, 간편한 디자인 변경
- 피그마의 주기적인 업데이트
- Dev mode: 컴포넌트 디자인 시 개발자는 이를 코드로 옮길 수 있도록 코드가 자동으로 완성된다.
- Auto layout
- Variables: 디자인 패턴을 구축할 수 있다.
피그마의 이해
피그마의 특징
- 실시간 협업: 버전 관리와 팀원들의 작업을 같은 파일에서 동시 작업하고 확인할 수 있다.
- 항상 최신 버전: 모두가 항상 최신 디자인 파악 가능하다. 즉, 협업 시 이전 버전의 디자인과 혼용하여 작업하는 위험도가 떨어진다.
- 멀티 플레이어 편집: 여러 팀원들이 동시에 파일을 보고 편집이 가능하다.
- 상황별 피드백: 디자인한 컴포넌트에 코멘트를 작성하며 디자인과 프로토타입에 대한 직접적인 소통이 가능하다. 직접 디자인을 가르킬 수 있기 때문에 명확한 의사소통을 하기 좋다.
- 프로토타이핑: 컴포넌트끼리의 상호작용 및 User Flow를 미리볼 수 있다.
- 라이브 챗팅: 슬래시 키(/)를 클릭하면 말풍선이 활성화되어 메세지를 작성할 수 있다.
- 음성 챗팅: 우측 상단 헤드셋 아이콘 클릭 시 화면을 보며 팀원과 음성으로 이야기를 나눌 수 있다.
- Dev mode: 개발자가 디자인이 완료된 화면만 볼 수 있거나 디자인 관련 코드를 확인할 수 있다.(Export, Inspect, 개발자 플러그인)
dpi 개념
dpi란?
- dpi는 Dot Per Inch로 1인치에 들어가는 픽셀을 나타내는 단위
- 만약 100 dpi라는 것은 1인치당 픽셀이 100개가 포함된 것이다. 이는 개수가 많을수록 고밀도라는 뜻이다.
Android의 기준 dpi
- 160 dpi가 기준 dpi이다.
Android에서의 dpi 종류
- mdpit: 160dpi (기준)
- hdpi: 240dpi
- xhdpi: 320dpi
- xxhdpi: 480dpi
- xxxhdpi: 640dpi
⇒ 디자인을 만들 때 컴포넌트들을 1인치 단위로 만든다면 이를 디바이스에 넣으면 컴포넌트가 작아지며 디자인이 일그러진다. 그러므로 디자인을 만들 때 모든 디바이스에 대응이 가능하도록 4배 더 크게 만들어서 디바이스에 넣을 때 알맞게 들어가도록 한다.
피그마 배율 작업
디자인 작업 시 1배율 해상도로 작업 후 배율을 키워 내보내는 작업을 권장한다.
여러 디바이스 적용 시 해상도 및 비율이 망가지는 것을 방지하기 위함이다.
디자인 패널 하단에 Export에서 설정할 수 있다.
4dp 그리드
4dp 그리드란?
4의 배수로 간격을 통일시키는 것이다.
4단위로 하는 이유는 2의 배수이며 소수점이 나오지 않는 수이다.
저밀도 디바이스에 대응했을 때 디바이스에 맞춰서 줄어든다. 그러므로 디자인이 틀어지지 않는 것이다.
4dp 그리드를 사용하는 이유
- 4dp 그리드로 작업하는 경우 1.5x로 배율을 키워 Export해도 픽셀이 틀어지지 않음.
- 5dp 그리드로 작업하는 경우 1.5x로 배율을 키워 Export해도 픽셀이 틀어짐이 발생한다.
- 디바이스는 소수점을 표현하지 못하기 때문이다!
Layout grid 기능을 사용하여 Columns와 Rows를 설정하여 화면 규격을 정한다.
컬럼은 보통 짝수로 설정해야 한다.
화면 끝단에는 누르기 힘들기 때문에 이러한 UI를 고려하고 화면의 양 옆에 마진을 넣어주는 것이 좋다.
일관된 규격을 사용하기 위해 레이아웃 그리드를 사용하는 것이다.
피그마 인터페이스의 이해
픽셀 프리뷰
픽셀 프리뷰는 실제 사용자의 화면으로 볼 수 있는 기능이다.
위 이미지처럼 피그마에서 화면을 1518%까지 줌인을 하면 픽셀이 깨지지 않고 보인다.
하지만, 이는 실제 사용자가 사용하는 디바이스 상에서는 픽셀이 깨질 수 있음을 고려해야 하므로 '픽셀 프리뷰'를 사용한다.
이는 피그마 설정에서 view 메뉴로 가면 설정할 수 있다.
에셋패널
피그마 화면에 왼쪽 패널을 보면 Layers와 Assets 패널이 나누어져있다.
그 중 에셋패널에서 필요한 컴포넌트를 바로 꺼내쓸 수 있다.
굳이 넓은 화면에서 컴포넌트의 위치를 찾지 않아도 된다!
개발자 모드
개발자가 개발하기에 좋은 환경을 만들 수 있도록 mark as ready for dev 를 사용하여
개발 시 완성된 화면을 구현할 수 있도록 마크를 남길 수 있고 해당 화면의 디자인에 대한 코드도 확인할 수 있도록 한다.
mark as ready for dev를 하게 된다면 위 이미지처럼 초록색 마크가 나타난다.
Clip content
clip content는 clip content의 체크박스를 체크하면 프레임에 넘친 요소들을 숨겨준다.
쉐입 조합 종류
두가지 이상의 도형이 있을 때 여러가지의 쉐입 조합 종류를 선택하여 보여주는 방식을 다르게 설정할 수 있다.
Union selection은 두가지의 도형을 겹쳐서 모두 보여준다.
subtract selection은 한가지의 도형만 보여주고 겹친 부분은 보여주지 않는다.
Intersect selection은 두 도형의 겹친 부분만 보여준다.
Exclude selection은 겹친 도형 빼고 보여주는 것이다.
버전 관리
위에서 언급했다시피 피그마는 협업 시 버전 관리가 아주 용이하게 이루어진다.
상단에 파일 이름 옆에 아래쪽을 향하는 화살표를 누르면 Version History를 볼 수 있다.
해당 메뉴를 누르면 오른쪽 패널에 기록된 변경 사항을 모두 볼 수 있다.
이는 페이지 단위, 파일 단위로 버전을 관리할 수 있다!
피그마가 협업 툴로 굉장히 유명한 건 알고 있었지만 버전 관리, 프로토타입, 디자인, 개발까지 모든 팀이 사용할 수 있는 툴인지는 몰랐다,, 덕분에 정말 유용한 기능을 많이 알았고 앞으로 실무에서 다양하게 사용할 수 있을 것 같다!!
'UX 디자인' 카테고리의 다른 글
| [UX] 피그마 컴포넌트 (0) | 2023.11.29 |
|---|---|
| [UX] 피그마 프로토타입 (0) | 2023.11.28 |
| 데이터 수집 및 분석을 위한 엑셀 (1) | 2023.11.23 |
| 데이터 시각화를 위한 엑셀 (2) | 2023.11.22 |
| [UX] 프로젝트에 적용할 수 있는 세세한 방법론들 (1) | 2023.11.21 |