디자인 툴
디지털로 이미지를 만들거나 편집할 수 있는 프로그램
디자인 툴의 종류
- 인터페이스 디자인 툴
피그마. 스케치, XD 등
인터페이스 디자인 툴은 벡터 방식을 기반으로 사용 - 그래픽 디자인 툴
포토샵, 일러스트레이터
비주얼 그래픽 이미지에 사용 - 3D 그래픽 디자인 툴
시네마 4D, 블렌더 - 모션 그래픽 디자인 툴
영상편집은 프리미어, 그래픽은 애프터이펙트로 사용
비트맵과 백터
- 비트맵
비트 정보를 가진 픽셀이 모여 만들어진 이미지를 비트맵 이미지라고 부른다. 카메라로 찍은 사진. 컴퓨터상에서 주고받는 이미지가 비트맵이다. 확장자로는 jpeg,jpg,png,gif가 있다.
백터보다 정교하게 이미지를 표현 할 수 있지만, 용량도 함께 커진다. 이미지의 크기를 편집하면 원본 이미지의 픽셀 수가 변해 손상이 생긴다.
- 백터 이미지
그래픽을 수학적인 함수 공식으로 표현한 것.
점과 점을 연결해 선을 만들고, 선과 선을 연결해 면을 만드는 방식
svg, eps, ai 가 파일 확장자이다.
좌표계 점으로 표현하는 것이라서 이미지를 줄이거나 키워도 손상이 생기지 않는다. 좌표가 적힌 텍스트 파일로 저장되기 때문에 용량이 매우 적다. 하지만 색 표현에 한계가 있어서 이미지 그래픽의 섬세한 작업은 어렵다. 복잡한 이미지를 벡터로 만들면 파일용량이 커질 수 있어서 소수점이 나오지 않게 정수로 만들어야 한다.
사용하는 곳에 따라 호환성에 문제가 생길 수 있다.
인터페이스 디자인 툴
프로토타이핑 툴
화면의 움직임이나 인터랙션을 구현할 수 있도록 도와주는 툴
정지된 화면이기 때문에 실제 사용자가 제품을 이용하는 과정을 담지 못한다. 인터렉션 디자인을 테스트 하기위해 반드시 필요하다.
- 인터렉션 디자인
제품에서 말하는 인터랙션은 사용자가 제품을 사용하면서 반응을 주고받는 것을 말한다. 사용자가 제품을 사용하면서 적절한 반응을 주고받고 막힘없이 서로 간에 소통하는 것을 돕는다.
인터렉션 디자인의 예
- 피그마 프로토타이핑
실제 데이터를 넣거나 복잡한 애니메이션은 구현하기 어렵다 Hi-fi기능 어렵다. 버튼 클릭 시, 페이지를 이동하거나 팝업이나 모달을 노출하는 정도의 복잡하지 않은 인터렉션을 구현한다. - 프로토파이
코딩 없이 실제 제품과 비슷한 수준의 프로토타입을 만들 수 있다.
Lo-fi와 Hi-fi의 중간 - 프레이머
코드 기반으로 실제 제품과 가장 유사한 수준으로 만들 수 있다.
인터페이스 디자인 툴 기능도 함께 제공된다. 배포도 가능
