종류 인터페이스 디자인 툴 : 벡터 방식을 기반으로 된 디지털 제품의 화면 인터페이스를 그리기 위해 사용하는 툴. 그래픽 디자인 툴 : 주로 사진을 편집하거나 일러스트를 그려서 원하는 비주얼 그래픽 이미지를 만들 때 사용하는 툴. 3D 그래픽 디자인 툴 : 3차원의 그래픽을 만들 때 사용하는 툴. 모션 그래픽 디자인 툴 : 그래픽 리소스를 활용해서 영상을 만들거나 촬영한 영상을 편집할 때 사용하는 툴
비트맵과 벡터 비트맵(이미지) : 비트 정보를 가진 픽셀이 모여 만들어진 이미지. 대표적인 비트맵 이미지 파일 확장자로는 .jpeg, .jpg, .png, .gif.이 있다. 장점은 픽셀 하나하나가 이미지를 이루는 요소이기 때문에 벡터보다 정교하게 이미지를 표현할 수 있다. 단점은 이미지 안의 픽셀 수가 많을수록 품질이 좋아지지만, 용량도 함께 커지며, 크기를 편집하면 원본의 픽셀 수가 변해 손상이 생긴다.
벡터(이미지) : 점과 점을 연결해 선을 만들고, 선과 선을 연결해 면을 만드는 함수 공식으로 그래픽을 그리는 것. 대표적인 벡터 이미지 파일 확장자로는 .svg, .eps, .ai 가 있다. 장점은 벡터 이미지는 좌표계의 점으로 표현하는 것이기 때문에 이미지를 줄이거나 키워도손상이 생기지 않으며, 용량이 작다. 단점은 색 표현에 한계가 있어 사진 같은 이미지 그래픽의 섬세한 작업은 어려우며, 복잡한 이미지를 벡터로 만들면 파일 용량이 매우 커지면서 호환성 문제가 생길 수 있다.
인터페이드 디자인 툴 3인방 : 피그마, XD, 스케치
주요 공통 기능.
벡터 기반 그래픽 편집
간단한 Lo-fi 프로토타이핑
dev mode를 통한 그래픽을 코드 변환
피그마 : 클라우드 기반, 멀티 플랫폼 지원으로 여러 사용자가 동시에 파일을 열고 편집할 수 있는 것이 특징이자 장점.
어도비XD : 평소 어도비의 인터페이스가 익숙하면 어렵지 않게 적응가능하며 Creative Cloud 플랜을 구독한다면 추가 비용을 없이 무료로 사용할 수 있다는 것이 장점. 단점은 파일을 클라우드 형태로도 저장할 수 있지만, 기본적으로는 로컬 파일로 저장하는 방식이라 여러 명이서 공동 작업하기는 좋지 않다.
스케치 : 개인의 로컬 컴퓨터 기반으로 동작하기 때문에 안정적이나 MacOS 기반 프로그램이라 애플 컴퓨터를 가진 사람만 사용 가능하다.
프로토타이핑 툴 : 화면의 움직임이나 인터랙션을 구현할 수 있도록 도와주는 툴.
주로 제품을 실제로 개발하지 않고 아이디어나 컨셉을 테스트하거나 팀원들에게 디자인을 효과적으로 공유를 위해 사용.
구현 정도에 따라Lo-fi 프로토타이핑 툴과 Hi-fi 프로토타이핑 툴로 나뉜다. Lo-fi(Low fidelity) 프로토타입 - 시각적인 부분이 크게 고려되지 않은 와이어프레임 수준으로 움직임을 구현한 프로토타입. - 디지털 툴을 사용하지 않고 펜으로 종이에 그려서 테스트하거나, 클릭과 화면 전환 정도로 구현된 단순한 프로토타입이 여기에 속한다.
Hi-fi(High fidelity) 프로토타입 - 최종 제품과 유사한 수준으로 구현한 프로토타입을 의미. - 색상과 텍스트 스타일 등의 비주얼과 인터렉션의 움직임 모두 실제 제품 컨셉과 유사해야 한다.
인터랙션 디자인 : 사용자가 제품을 사용하면서 반응을 주고받는 것에 대한 디자인. 즉,사용자가 제품을 사용하면서 적절한 반응을 주고받고 막힘없이 서로 간에 소통하는 것을 돕는다.
프로토타입이 중요한 이유는 이러한 인터랙션 디자인을 테스트하는 것이 목적이기 때문이다.
디자인은 정지된 화면이기 때문에 실제 제품을 이용하는 과정을 담지 못하는 반면, UX는 정지된 화면이 아니기에 인터랙션 과정에서 생겨나는 경험을 데이터를 통해 알 수 있다. 그래서 사용 시에 어려움 없이 화면 이동하고, 원하는 기능을 찾고, 잘 사용하는지 확인하기 위해서는 프로토타입으로 테스트하는 게 정확하다.
프로토타이핑 툴 : 피그마, 프로토파이, 프레이머
피그마 : 디자인에 프로토타이핑으로의 빠른 전환이 가능하며, 경로 연결이 간편하다. 하지만 실제 데이터를 넣거나 복잡한 애니메이션을 구현하기에는 어렵다.
플레이머 : 코드 기반으로 실제 제품과 가장 유사한 수준으로 프로토타입을 만들 수 있는 Hi-fi 프로토타입 툴이면서 인터페이스 디자인 툴의 기능도 함께 제공해서 디자인부터 프로토타이핑까지 한 번에 할 수 있다.
프로토파이 : 실제 코드로 개발하는 제품과 거의 유사한 수준의 인터랙션을 구현할 수 있으며, GUI를 통해 작업이 가능해서 코드가 어려운 이들도 편리하게 사용 가능하다.
