디자인 툴

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

디자인 툴의 종류

• 인터페이스 디자인 툴 :피그마,스케치,XD
• 그래픽 디자인 툴 : 포토샵, 일러스트레이터
• 3D 디자인 툴 : 시네마 4D, 블렌더
• 모션그래픽 디자인 툴 : 프리미어, 애프터이펙트

비트맵과 벡터

비트맵 (Bitmap)

• 비트맵 이미지는 작은 점(픽셀)들이 모여서 하나의 그림을 이루는 방식

• 사진처럼 정교하고 다양한 색상을 표현하기에 적합

• 이미지를 확대하거나 축소할 때 픽셀이 깨지는 현상 발생

• 확장자 : jpeg,jpg,png,gif,bmp

  벡터 (Vector)

• 수학적 공식으로 이미지를 표현하는 방식

• 이미지를 키우거나 줄여도 손상이 가지 않아 로고, 아이콘, 일러스트에 많이 사용한다.

• 수정과 편집이 쉽다.

• 확장자 : svg, eps, ai

  인터페이스 디자인 툴

  피그마, 스케치 XD의 주요 공통 기능

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

피그마

클라우드 기반, 멀티 플랫폼 지원으로 여러 사용자가 동시에 파일을 열고 편집 할 수 있다.

스케치

• 개인 로컬 컴퓨터 기반으로 동작하기 때문에 안정적이다.
• MacOS 기반 프로그램

어도비 XD

• 어도비 크리에이티브 클라우드를 구독하고 있다면 앱의 연동성이 크다.

프로토타이핑 툴

화면의 움직임이나 인터랙션을 구현할 수 있도록 도와주는 툴

피그마 프로토타이핑

피그마로 만든 화면을 가지고 간단하게 인터랙션을 만들수있다.

• 피그마로 디자인했다면 파일을 내보내거나 불러오는 과정 없이 프로토타입을 만들 수 있다.
• 드래그앤드롭으로 화면을 쉽게 연결할 수 있다.

프로토파이

코딩 없이 실제 제품과 비슷한 수준의 프로토타입을 만들 수 있다.

• 코드를 잘 모르더라도 다양한 애니메이션과 인터랙션을 구현하고 싶은 경우에 적합하다.
• Conditions(조건부 트리거)
  Conditions는 특정 상황일 때 이동하거나 색상이 변하는 등의 조건을 걸 수 있는 기능

프레이머

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

• 인터페이스 디자인 툴의 기능도 함께 제공해, 디자인부터 프로토타이핑까지 모두 사용할 수 있다.
• 만든 프로토타이핑을 실제 제품으로 배포 가능하다.
  
  

프레이머의 특징

재사용성
1.코드 재사용성
- 프레이머는 개발 언어인 React를 기반으로 코드를 작성한다.

2. 컴포넌트 재사용성
- 특정 애니메이션이나 조건을 정의한 컴포넌트를 여러번 재사용할 수 있다.

CMS (Content Management System : 콘텐츠 관리 시스템)
- CMS에 등록한 데이터를 이용해 리스트나 상세화면에 노출되도록 활용할 수 있다.
- 배포된 화면을 Analytics 기능도 제공한다.(방문자 수, 어떤 경로로 들어왔는지)