강의자료

UXUI 디자인 입문 - 4주차

HYEMI_PARK 2025. 4. 15. 17:07

디자인 툴

종류

1. 인터페이스 디자인 툴

- 피그마

- 스케치

- XD

 

2. 그래픽 디자인 툴

- Photoshop

- illustrator

 

3. 3D 그래픽 디자인 툴

- 시네마 4D

- 블렌더

 

4. 모션 그래픽 디자인 툴

- 프리미어

- 애프터이펙트


비트맵과 벡터

비트맵

  • 비트 정보를 가진 픽셀이 모여 만들어진 이미지를 비트맵 이미지라고 말해요.
  • 카메라로 찍은 사진이나 컴퓨터상에서 주고받는 이미지의 대부분이 비트맵 이미지예요.
  • 대표적인 비트맵 이미지 파일 확장자로는 .jpeg, .jpg, .png, .gif가 있어요.

벡터

  • 그래픽을 수학적인 함수 공식으로 표현한 것을 말해요.
  • 점과 점을 연결해 선을 만들고, 선과 선을 연결해 면을 만드는 방식으로 이미지를 그립니다.
  • 대표적인 벡터 이미지 파일 확장자로는 .svg, .eps, .ai 가 있어요.

프로토타이핑 툴

피그마

  • 화면을 피그마로 디자인했다면 파일을 내보내거나 불러오는 과정 없이 간편하게 프로토타입을 만들 수 있는 것이\큰 장점입니다.
  • 하지만 실제 데이터를 넣거나 복잡한 애니메이션은 피그마 프로토타이핑 기능으로는 구현하기가 어렵습니다.

프로토파이

  • 실제 코드로 개발하는 제품과 거의 유사한 수준의 인터랙션을 구현할 수 있어요.
  • 눈에 보이는 GUI를 클릭해서 작업할 수 있어 코드가 어려운 디자이너도 편리하게 사용할 수 있어요.

프레이머

  • 프레이머는 Hi-fi 프로토타입으로 코드 기반의 툴이에요.
  • 인터페이스 디자인 툴의 기능도 함께 제공해서 디자인부터 프로토타이핑까지 한 번에 할 수 있어요.
  • 만든 프로토타이핑을 실제 제품으로 배포까지 가능해요.

 과제 - 피그마로 프로토타이핑