[내일배움캠프] UX/UI 6기 Day 4 - 피그마로 간단한 프로토타입 만들어보기

---

 

[수업 목표]

• 디자인 툴이 무엇이고 어떤 것들이 있는지 배웁니다.
• 인터페이스 디자인 툴에 대해 더 자세히 알아봅니다.
• 상황에 맞는 프로토타이핑 툴을 선택할 수 있습니다.

---

 

01. 디자인 툴

💡디자인 툴이란?

👉 일반적으로 디지털로 이미지를 만들거나 편집할 수 있는 컴퓨터 프로그램

 

☑️ 디자인 툴의 종류

• • 디지털 제품의 화면 인터페이스를 그리기 위해 사용하는 툴

1) 인터페이스 디자인 툴

• 주로 벡터 방식을 기반으로 함 
• 대표적으로 피그마, 스케치, XD가 있음

2) 그래픽 디자인 툴

• • 비주얼 그래픽 이미지를 만들 때 사용하는 툴
  • 대표적으로 포토샵, 일러스트레이터

3) 3D 그래픽 디자인 툴

• 대표적으로 시네마 4D, 블렌더
• 3차원의 그래픽을 만들 때 사용하는 툴

4) 모션 그래픽 디자인 툴

• 그래픽 리소스를 활용해서 영상을 만들거나 촬영한 영상을 편집할 때 사용하는 툴
• 대표적으로 프리미어, 애프터이펙트

 

💡비트맵 이미지

👉 비트 정보를 가진 픽셀이 모여 만들어진 이미지

장점	단점
- 픽셀 하나하나가 이미지를 이루는 요소이기 때문에 벡터보다 정교하게 이미지를 표현할 수 있음	- 이미지 안의 픽셀 수가 많을수록 품질이 좋아지지만 용량도 함께 커짐 - 이미지의 크기를 편집하면 원본 이미지의 픽셀 수가 변해 손상이 생김

 

💡벡터 이미지

👉 그래픽을 수학적인 함수 공식으로 표현한 것

장점	단점
- 벡터 이미지는 좌표계(x.y)의 점으로 표현하는 것이기 때문에 이미지를 줄이거나 키워도 손상이 생기지 않음 - 좌표가 적힌 텍스트 파일로 저장되기 때문에 비트맵과 비교해 용량이 매우 적음	- 색 표현에 한계가 있어 사진 같은 이미지 그래픽의 섬세한 작업은 어려움 - 그래픽의 모양을 좌표로 저장하기 때문에 복잡한 이미지를 벡터로 만들면 파일 용량이 매우 커질 수 있음 - 사용하는 곳에 따라 호환성에 문제가 생길 수도 있음

 

 

02. 피그마, 스케치, XD

공통 기능

• 벡터 기반 그래픽 편집
• 간단한 Lo-fi 프로토타이핑
• dev mode를 통한 그래픽 → 코드 변환

1) 피그마

👉클라우드 기반, 멀티 플랫폼 지원으로 여러 사용자가 동시에 파일을 열고 편집할 수 있는 것이 피그마의 가장 큰 특징이자 장점

• 전 세계에서 가장 많이 쓰는 인터페이스 툴
• 파일을 클라우드에 저장해 인터넷이 가능한 곳에서는 언제든지 파일을 열고 편집할 수 있음

2) 스케치

👉 스케치는 개인의 로컬 컴퓨터 기반으로 동작하기 때문에 안정적

 

3) 어도비XD

👉 어도비 Creative Cloud 플랜을 구독한다면 추가 비용을 없이 무료로 사용할 수 있다는 것이 큰 강점

• 기본적으로는 로컬 파일로 저장하는 방식이라 여러 사람이 다 함께 작업하기는 좋지 않음

03. 프로토타이핑 툴

1) 피그마 프로토타이핑

👉 피그마로 만든 화면을 가지고 간단하게 인터렉션을 만들어볼 수 있음

• 화면을 피그마로 디자인했다면 파일을 내보내거나 불러오는 과정 없이 간편하게 프로토타입을 만들 수 있는 것이 큰 장점
• 하지만 실제 데이터를 넣거나 복잡한 애니메이션은 피그마 프로토타이핑 기능으로는 구현하기가 어려움

☑️ 피그마 프로토타이핑의 특징

• 1) 디자인 → 프로토타이핑으로의 빠른 전환
• 2) 간편한 경로 연결

 

2) 프로토파이

👉 코딩 없이 실제 제품과 비슷한 수준의 프로토타입을 만들 수 있다는 것이 큰 장점

• 실제 코드로 개발하는 제품과 거의 유사한 수준의 인터랙션을 구현
• 눈에 보이는 GUI를 클릭해서 작업할 수 있어 코드가 어려운 디자이너도 편리하게 사용

☑️ 프로토파이의 특징

• Hi-fi 수준의 기능
• Conditions (조건부 트리거)

3) 프레이머

👉 코드 기반으로 실제 제품과 가장 유사한 수준으로 프로토타입을 만들 수 있음

• Hi-fi 프로토타입으로 코드 기반의 툴
• 인터페이스 디자인 툴의 기능도 함께 제공해서 디자인부터 프로토타이핑까지 한 번에 할 수 있음
• 만든 프로토타이핑을 실제 제품으로 배포까지 가능

☑️ 프레이머의 특징

• 코드, 컴포넌트 재사용성
• CMS(Content Management System) 콘텐츠 관리 시스템

---

 

[숙제] 피그마로 간단한 프로토타입 만들어보기

 

---

 

와 나 이 프로토타입할 때 너무 재밌다