디자인 툴
디지털로 이미지를 만들거나 편집할 수 있는 컴퓨터 프로그램
디자인툴의 종류
인터페이스 디자인 툴
피그마, 스케치, XD 등
백터 방식을 기반 - 디자인한 화면을 여러 크기로 늘리고 줄여도 문제가 없도록 하기 위해서
그래픽 디자인 툴
포토샵(비트맵), 일러스트레이터(백터)
비주얼 그래픽 이미지를 만들 때 사용
사진편집, 일러스트 그리기
3D 그래픽 디자인 툴
시네마4D, 블랜더
3차원의 그래픽을 만들때 사용
모션 그래픽 디자인 툴
프리미어, 애프터이펙트
그래픽 리소스를 활용해서 영상을 만들거나 촬영한 영상을 편집할때 사용
비트맵과 백터
비트맵
픽셀 - 디지털 이미지를 구성하는 최소 단위의 점
비트 정보를 가진 픽셀이 모여 하나의 이미지를 만든다.
파일 확장자로 .jpeg, .jpg, .png, .gif가 있다.
디테일한 작업을 할 수 있다.
픽셀수가 많으면 많을 수록 화질이 좋아지고 무거워진다.
백터
그래픽을 함수 공식으로 표현함
파일 확장자로 .svg, .eps, .ai가 있다.
이미지를 줄이거나 키워도 손상이 가지 않는다.
좌표가 적힌 텍스트 파일로 저장돼 비트맵과 비교해 용량이 적다.
색 표현에 한계가 있다.
피그마, 스케치, XD
백터 기반 그래픽 - 반응형으로 디자인해야하기 때문
간단한 Lo-fi 프로토 타이핑 - 같은 화면에서 화면을 어어볼 수 있다.
dev mode를 통한 그래픽 → 코드 변환 - 화면 디자인을 하면 바로 코드로 볼 수 있다.
피그마
클라우드를 기반
멀티 플랫폼 지원
스케치
피그마 이전 가장 많이 사용하던 툴
MAC OS에서만 사용 가능
어도비 XD
크레이티브 클라우드 플랜을 구독한다면 추가 비용 없이 사용할 수 있다.
클라우드 형태로도 사용할 수 있지만 로컬 파일로 저장하는 방식이라 다함께 작업하기 좋지 않다.
프로토타이핑 툴
화면의 움직임이나 인터렉션을 구현할 수 있도록 도와주는 툴
아이디어나 컨셉을 테스트하기 위해 사용
팀원에게 디자인을 효과적으로 공유
Lo-fi 프로토타이핑 툴과 Hi-fi 프로토타이핑 툴로 나뉨
인터렉션 디자인
사용자가 제품을 사용하면서 주고 받는 것
프로토타입의 중요성
디자인 할때는 실제 사용자가 제품을 이용하는 과정을 담지 못 한다.
피그마 프로토타이핑, 프로토파이, 프레이머
피그마 프로토타이핑
Lo-fi 프로토타이핑 툴
실제 데이터를 넣거나 복잡한 애니메이션을 넣는 Hi-fi의 기능은 제공하지 않는다.
디자인에서 프로토타이핑으로 화면 전환이 빠르다.
간편하게 경로를 연결해서 프로토타이핑을 구성한다.
-클릭이나 화면 이동 정도의 간단한 인터렉션을 구현 할 수 있다.
프로토파이
Lo-fi와 Hi-fi의 중간
코딩 없이 실제와 비슷한 수준의 인터렉션을 구현 가능
눈에 보이는 GUI를 클릭하는 방식으로 코드를 직접 다루지 않아도 높은 수준의 인터렉션을 구성할 수 있다.
Lo-fi수준의 피그마와 비교했을대 실제 환경과 비슷하게 높은 수준으로 구현 할 수 있다.
Conditions (조건부 트리거)은 특정 상황일 대 이동하거나 색상이 변하는 등의 조건을 걸 수 있는 기능이다.
프로토파이는 코드를 잘 모르더라도 다양한 애니메이션과 인터렉션을 구현할 수 있다.
프레이머
Hi-fi 프로토타입으로 코드 기반의 툴
코드 기반으로 실제 제품과 가장 유사한 수준
인터페이스 디자인도 할 수 있다.
코드 재사용성 - 개발 언어인 리액트를 기반으로 코드를 작성한다.
컴포넌트 재사용성 - 특정 애니메이션이나 조건을 정의한 컴포넌트를 여러번 재사용할 수 있다.
CMS - Content Management System의 약자
컨텐츠를 등록하거나 삭제하고 데이터 값을 입력해서 활용하는 것
데이터를 등록해두고 컨텐츠를 발행하는 것, 리스트나 상세 화면에 노출되도록 활용할 수 있다.
실제 제품과 거의 같은 수준의 인터렉션이나 애니메이션을 만들때 사용하면 좋다.
디자인한 화면을 실제 배포까지 가능하다.
피그마로 간단한 프로토타입 만들어보기
