TIL(Today I Learn)

[TIL 5일차] 디자인 툴과 프로토타입 툴

hohyeon99 2025. 1. 24. 17:16

디자인 툴

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

 

디자인툴 종류 

인터페이스 디자인 툴

디지털 제품의 화면 인터페이스를 그리기 위해 사용하는 툴

EX.피그마, 스케치, XD

 

3D 그래픽 디자인 툴

3차원의 그래픽을 만들 때 사용하는 

EX.시그마 4D, 블렌

 

모션 그래픽 디자인 툴

그래픽 리소스를 활용해서 영상을 만들거나 촬영한 영상을 편집할 때 사용하는 툴

EX. 프리미어, 에프터이펙트

 

비트맵과 백터 사진

 

비트맵

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

벡터보다 정교하게 이미지를 표현할 수 있으나 이미지 안의 픽셀 수가 많을수록 품질이 좋아지지만, 용량도 함께 커지며

이미지의 크기를 편집하면 원본 이미지의 픽셀 수가 변해 손상이 생긴다. 

대표적인 파일 확장자는 .jpeg, .jpg, .png, .gif 

 

백터 이미지

그래픽을 수학적인 함수 공식으로 표현한 것

벡터 이미지는 좌표계(x.y)의 점으로 표현하는 것이기 때문에 이미지를 줄이거나 키워도 손상이 생기지 않고. 용량이 매우 적으나 색 표현에 한계가 있어 사진 같은 이미지 그래픽의 섬세한 작업은 어렵고 그래픽의 모양을 좌표로 저장하기 때문에 복잡한 이미지를 벡터로 만들면 파일 용량이 매우 커질 수 있으며 사용하는 곳에 따라 호환성에 문제가 생길 수도 있디.

대표적인 파일 확장자는.svg, .eps, .ai

 

프로토타이핑 

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

 

Lo-fi(Low fidelity)프로토타이핑

시각적인 부분이 크게 고려되지 않은 와이어프레임 수준으로 움직임을 구현한 프로토타입을 의미한다

디지털 툴을 사용하지 않고 펜으로 종이에 그려서 테스트하거나, 클릭과 화면 전환 정도로 구현된 단순한 프로토타입

 

Hi-fi 프로토타이핑

최종 제품과 유사한 수준으로 구현한 프로토타입을 의미한다

색상과 텍스트 스타일 등의 비주얼과 인터렉션의 움직임 모두 실제 제품 컨셉과 유사해야 한다.

 

 

인터렉션 디자인

제품에서 말하는 인터랙션은 사용자가 제품을 사용하면서 반응을 주고받는 것을 말한다.

인터랙션 디자인은 사용자가 제품을 사용하면서 적절한 반응을 주고받고 막힘없이 서로 간에 소통하는 것을 돕는다