📌
1. 디자인 툴
2. 비트맵과 벡터
3. 인터페이스 디자인 툴
4. 프로토타이핑 툴
5. 과제

1. 디자인 툴

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

- 인터페이스 디자인 툴

피그마, 스케치, XD 등
디지털 제품의 화면 인터페이스를 그리기 위해 사용
다양한 디바이스의 화면에 대응하기 위한 벡터 방식 기반

- 그래픽 디자인 툴

포토샵, 일러스트레이터 등
비주얼 그래픽 이미지를 만들 때 사용

- 3D 그래픽 디자인 툴

블렌더, 시네마 4D 등
3차원의 그래픽을 만들 때 사용

- 모션 그래픽 디자인 툴

프리미어, 애프터 이펙트 등
그래픽 리소스를 활용하여 영상을 만들거나 촬영한 영상을 편집할 때 사용하는 툴

2. 비트맵과 벡터

- 비트맵

🟨 픽셀

디지털 이미지를 구성하는 비트 정보를 가진 최소 단위의 점

픽셀들이 모여 만들어진 이미지를 비트맵 이미지라고 한다.

파일 형식 : jpg, png, gif, jpeg

장점

픽셀 하나하나가 이미지를 이루는 요소이기 때문에 벡터보다 정교하게 이미지를 표현할 수 있다.

단점

이미지 안의 픽셀 수가 많을수록 품질은 좋아지지만 용량도 함께 커진다.

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

- 벡터

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

점과 점을 연결하여 선을 만들고 선과 선을 연결하여 면을 만드는 방식으로 이미지를 그린다.

파일 형식 : ai, svg, eps

장점

좌표계의 점으로 표현하는 것이기 때문에 이미지의 크기가 변경되어도 손상이 생기지 않는다.

좌표가 적힌 텍스트 파일로 저장되기 때문에 비트맵과 비교해 용량이 매우 적다.

단점

색 표현에 한계가 있어 이미지같은 그래픽의의 섬세한 작업은 어렵다.

복잡한 이미지를 벡터로 만들면 파일 용량이 매우 커진다.

사용하는 곳에 따라 호환성 문제가 생길 수도 있다.

3. 인터페이스 디자인 툴

디지털 제품의 화면 인터페이스를 그리기 위해 사용하는 툴로 피그마, XD, 스케치가 있다.

피그마, XD, 스케치의 공통점

1. 벡터 기반 그래픽 편집
2. 간단한 Lo-fi 프로토타이핑
3. dev mode 를 통해 그래픽을 코드로 변환 (엔지니어와의 협업에 용이)

피그마

클라우드 기반, 멀티 플랫폼 지원으로 여러 사용자가 동시에 파일을 열고 편집할 수 있다.

데스크탑에 설치해서 사용하는 것은 기본이고 구글 크롬과 같은 브라우저에서도 피그마를 사용할 수 있다.

스케치

로컬 컴퓨터 기반으로 동작 → 안정적

MacOS 기반 프로그램으로 애플 외의 다른 플랫폼 사용자는 사용할 수 없다는 단점이 있다.

XD

어도비 인터페이스에 익숙하다면 어렵지 않게 적응이 가능하다.

클라우드 형태로 저장할 수 있지만 기본적으로는 로컬 파일로 저장하는 방식이라 여러 사람이 다 함께 작업하는데 어려움이 있다.

4. 프로토타이핑 툴

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

주로 제품을 실제로 개발하지 않고 아이디어나 컨셉을 테스트하기 위해 사용

사용자 테스트 뿐만 아니라 팀원들에게 디자인을 공유하고 싶을 때 활용 가능

피그마의 프로토타이핑, 프로토파이, 프레이머 등

🙂‍↔️ 인터렉션

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

프로토타입과 인터렉션 디자인

인터렉션 디자인을 테스트하기 위해 프로토타입이 중요하다.

디자인은 정지된 화면이기 때문에 실제 사용자가 제품을 사용하는 과정을 담지는 못 한다.

사용자가 어려움 없이 제품을 잘 사용하는지 보기 위해서는 동작하는 프토로타입으로 테스트를 하는 것이 정확하다.

피그마의 프로토타이핑

피그마로 만든 화면을 가지고 간단한 인터렉션을 만들어 볼 수 있다. (Lo-fi)

파일을 내보내거나 불러오는 과정 없이 간편하게 프로토타입을 만들 수 있다.

실제 데이터를 넣거나 복잡한 애니메이션은 피그마의 프로토타이핑 기능으로 구현하기가 어렵다.

단순한 동작을 시연할 때 사용
ex. 버튼클릭 → 페이지 이동, 팝업 혹은 모달창 노출

프로토파이

코딩없이 실제 제품과 비슷한 수준의 프로토타입을 만들 수 있다.

GUI를 클릭하며 작업할 수 있어 편리하게 사용이 가능

실제 환경과 유사한 수준으로 구현이 가능하고 텍스트로 입력하거나 입력한 텍스트를 전송하는 것처럼 보이게 할 수 있다.

Condition (조건부 트리거) 이라는 기능을 사용하여 특정 상황일 때 이동하거나 색상이 변하는 등의 조건을 걸 수 있다.

프레이머

코드 기반(React) 으로 실제 제품과 가장 유사한 수준으로 프로토타입을 만들 수 있다.

인터페이스 디자인 툴의 기능도 함께 제공하여 디자인부터 프로토타이핑까지 한 번에 가능하다.

만든 프로토타이핑을 실제 제품으로 배포까지 가능하다.

코드를 활용해 프로토타입을 만든 후 해당 코드를 개발자와 공유하면 원할한 소통이 가능하다.

특정 애니메이션이나 조건을 정의한 컴포넌트를 여러번 재사용할 수 있다.

CMS에 등록한 데이터를 이용해 리스트나 상세 화면에 노출되도록 활용할 수 있다.

🐈 CMS (Contents Management System)

컨텐츠 관리 시스템
CMS 기능을 통해 컨텐츠를 작성하고 데이터를 관리할 수 있다.

5. 과제

👩‍💻

피그마 프로토타이핑 기능을 활용해 보면서 프로토타이핑에 대한 감을 잡아봅시다.

1. 장바구니 화면의 Button/Menu 버튼을 클릭하면 메뉴 화면으로 이동하도록 만들어보세요.
2. 메뉴 화면의 Button/Close 버튼을 클릭하면 장바구니 화면으로 이동하도록 만들어보세요.
3. 장바구니 화면의 List Item 3을 클릭하면 상세 화면으로 이동하도록 만들어보세요.
4. 상세 화면의 Button/Back을 클릭하면 장바구니 화면으로 이동하도록 만들어보세요.

🎙️ 소감

피그마나 XD는 다뤄봤지만 프로토타이핑 툴은 뭐가 있는지도 몰랐다.
프로토타이핑 툴에는 어떤 것들이 있고 어떤 기능이 있는지 알 수 있었던 챕터였다.
피그마툴의 프로토타이핑 기능을 적용하여 움직이는 것을 보니 괜히 뿌듯하고 그렇다. 😉

🍒 다음 시간에 학습할 내용
디자인 원칙
UX/UI 심리학 법칙
디자인 원칙의 실제 사례 찾아보기