[Day3] 디자인 툴과 프로토타입

디자인 툴

• 디지털로 이미지를 만들거나 편집할 수 있는 컴퓨터 프로그램.
• 인터페이스 디자인 툴 : 다지털 제품의 화면 인터페이스를 그리기 위해 사용하는 툴. 
  대표적인 제품 : 피그마, 스케치, XD → 다양한 디바이스 화면에 대응해야 하기 때문에, 디자인한 화면을 여러 크기로 늘리고 줄여도 문제 없도록 하기 위해서 주로 벡터 방식을 기반으로 한다.
  
  
• 그래픽 디자인 툴 : 주로 사진을 편집하거나 일러스트를 직접 그려 원하는 비주얼 그래픽 이미지를 만들 때 사용하는 툴. 
  대표적인 제품 : 포토샵, 일러스트레이터
  
  
• 3D 그래픽 디자인 툴 : 3차원의 그래픽을 만들 때 사용하는 툴.
  대표적인 제품 : 시네마 4D, 블렌더
  
  
• 모션 그래픽 디자인 툴 : 그래픽 리소스를 활용해서 영상을 만들거나 촬용한 영상을 편집할 때 사용하는 툴.
  대표적인 제품 : 프리미어, 애프터이펙트

비트맵과 벡터

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

▶ 픽셀 : 디지털 이미지를 구성하는 최소 단위의 점. 
▶ 카메라로 찍은 사진이나 컴퓨터 상에서 주고받는 이미지의 대부분의 비트맵 이미지이다.
▶ 장점 : 픽셀 하나하나가 이미지를 이루는 요소이기 때문에 벡터보다 정교하게 이미지를 표현할 수 있다.
▶ 단점 : 이미지 내의 픽셀 수가 많을수록 품질이 좋아지지만, 용량도 같이 커진다. 또한, 이미지의 크기를 편집하는 과정에서 원본 이미지의 픽셀 수가 변할 경우, 이미지 자체에 손상이 생긴다.

 

• 벡터 이미지 : 그래픽을 함수 공식을 통해 표현.

▶ 그래픽을 점과 점을 연결해서 만든 선을, 다시 선끼리 연결하여 면을 만드는 방식으로 그린다.

▶ 이렇게 만들어진 그래픽은 함수 공식 형태로 표현되어 좌표가 적힌 텍스트 파일 형태로 저장된다.

▶ 장점 : 벡터 이미지는 좌표계(x.y)의 점으로 표현하는 것이기 때문에 이미지를 줄이거나 키워도 손상이 생기지 않으며, 용량도 비트맵과 비교해 용량이 매우 적다.

▶ 단점 : 색 표현에 한계가 있어 사진 같은 섬세한 이미지 그래픽의 작업은 어렵다. 또한, 그래픽을 좌표로 저장하여, 복잡한 이미지의 경우는 파일의 용량이 매우 커지며 사용처에 따라선 호환성에도 문제가 생긴다.

 

프로토타이핑 툴

• 제품을 실제로 개발하지 않고 화면의 움직임이나 인터랙션 같이 아이디어나 컨셉을 테스트하기 위해서 사용한다.
• 테스트 용도 외에도 팀원들에게 디자인을 효과적으로 공유하고 싶을 경우에도 활용할 수 있다.
• Lo-fi(Low fidelity) 프로토타입 : 디지털 툴을 사용하지 않고 펜으로 종이에 그려서 테스트하는 등 단순한 시각적인 부분이 크게 고려되지 않은 와이어프레임 수준으로 움직임을 구현한 프로토타입.
• Hi-fi(High fidelity) 프로토타입 : 색상과 텍스트 스타일 등의 비주얼과 인터렉션의 움직임 모두 실제 제품 컨셉과 유사한 수준으로 구현한 프로토 타입.
• 인터랙션 디자인 : 인터랙션이란 사용자가 제품을 사용하면서 반응을 주고 받는 것으로, 디자인을 통해 사용자가 제품을 사용하면서 적절한 반응을 주고받고 막힘없이 서로 소통하는 것을 돕는다.
  →프로토타입은 인터랙션 디자인을 테스트를 위해 사용되며, 이는 중요하다.
• 디자인은 정지된 화면이기에 실제로 동작하는 UX에서 사용자가 이용하는 과정까지 담지는 못한다. 이를 해결하기 위해서, 프로토타입으로 테스트하는 것을 통해 사용자가 어려움 없이 화면 간 이동과 기능 탐색을 확인할 수 있다.