[디자인입문] UXUI Introduction4_UXUI 디자인 툴

[디자인 툴]

01. 디자인 툴

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

- 디자이너에게 디자인 툴은 강력한 무기, 상황에 맞는 디자인 툴이 무엇인지 알고 잘 활용해야 함 

1-1. 디자인 툴의 종류

1) 인터페이스 디자인 툴 

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

- 피그마, 스케치, XD

- (참고) 인터페이스 디자인 툴은 주로 벡터 기반

인터페이스 디자인 => 다양한 디바이스 화면에 대응 필요

디자인한 화면을 여러 크기로 늘리고 줄여도 문제가 없도록 하기 위한 목적

2) 그래픽 디자인 툴 

: 비주얼 그래픽 이미지를 만들 때 사용하는 툴

- 포토샵, 일러스트레이터

- 사진을 편집하거나 일러스트를 그려서 원하는 이미지 제작

3) 3D 그래픽 디자인 툴

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

- 시네마 4D(유료), 블렌더(무료)

4) 모션 그래픽 디자인 툴

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

-  프리미어(영상을 늘리거나 줄이는 편집을 할 때), 애프터이펙트(그래픽 리소스로 움직이게 할 때)

1-2. 비트맵과 벡터의 이해

픽셀 : 디지털 이미지를 구성하는 최소 단위의 점

1) 비트맵 이미지

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

비트맵 이미지를 가까이 보면 ⬇️

- 카메라로 찍은 사진이나 컴퓨터상에서 주고받는 이미지의 대부분

- 비트맵 이미지 파일 확장자 : .jpeg .jpg .png .gif

1-1) 장점 

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

1-2) 단점

- 이미지 안의 픽셀 수가 많을수록 품질이 좋아지지만, 용량도 함께 커짐

- 이미지의 크기를 편집하면 원본 이미지의 픽셀 수가 변해 손상됨

2) 벡터 이미지 

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

- 점과 점을 연결해 선을 만들고, 선과 선을 연결해 면을 만드는 방식으로 이미지를 그림

- 벡터 이미지 파일 확장자 : .svg .eps .ai

1-1) 장점

- 벡터 이미지는 좌표계(x.y)의 점으로 표현하는 것 => 이미지를 줄이거나 키워도 손상이 생기지 않음

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

1-2) 단점

- 색 표현에 한계가 있어 사진 같은 이미지 그래픽의 섬세한 작업이 어려움

- 그래픽의 모양을 좌표로 저장하기 때문에 복잡한 이미지를 벡터로 만들면 파일 용량이 매우 커짐 

- 사용하는 곳에 따라 호환성에 문제

[피그마, 스케치, XD]

02. 피그마, 스케치, XD

* 피그마, 스케치, XD의 주요 공통 기능

- 벡터 기반 그래픽 편집

- 간단한 Lo-fi 프로토타이핑

- dev mode를 통한 그래픽 → 코드 변환

1) 피그마

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

- 피그마는 전 세계에서 가장 많이 쓰는 인터페이스 툴

- 파일을 클라우드에 저장해 인터넷이 가능한 곳에서는 언제든지 파일을 열고 편집 가능 

 - 멀티 플랫폼을 지원해 데스크톱에 설치해서 사용하는 것은 기본이고, 구글 크롬 같은 브라우저에서도 피그마 사용 가능 

2) 스케치

- 스케치는 개인의 로컬 컴퓨터 기반으로 동작하기 때문에 안정적이라는 장점

- MacOS 기반 프로그램이라 애플 컴퓨터를 가진 사람만 사용할 수 있다는 단점

3) XD

- 어도비 Creative Cloud 플랜을 구독한다면 추가 비용을 없이 무료로 사용할 수 있다는 것이 강점

- 평소 어도비의 인터페이스가 익숙한 분들은 어렵지 않게 적응할 수 있다는 장점

- 파일을 로컬 파일로 저장하는 방식이라 여러 사람이 다 함께 작업하기 좋지 않음 

[프로토타이핑 툴]

03. 프로토타이핑 툴

1) 프로토타이핑 툴이란?

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

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

- 사용자 테스트뿐만 아니라 팀원들에게 디자인을 효과적으로 공유하고 싶을 때도 활용

- 구현 정도에 따라 Lo-fi 프로토타이핑 툴과 Hi-fi 프로토타이핑 툴로 나뉨

* Lo-fi, Hi-fi 프로토타입

<Fidelity (정확도, 충실도) : 최종 제품과 얼마나 유사하게 구현했는지의 정도>

Lo-fi : 시각적인 부분이 크게 고려되지 않은 와이어프레임 수준으로 움직임을 구현Hi-fi : 최종 제품과 유사한 수준으로 구현한 프로토타입

2) 인터랙션 디자인

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

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

Ex. 회원가입 과정에서 사용자가 모든 정보를 입력하고 가입하기 버튼 -> 제품 안에서는 입력한 정보가 포맷에 맞게 제대로 입력이 됐는지 확인하고, 입력한 정보를 서버에 보냄 -> 이 과정에서 약간의 시간이 소요 -> 사용자는 버튼을 누른 이후 제품 안에서 이런 과정이 진행되는지 모름 => 만일 화면이 버튼을 누른 후 아무것도 변화하지 않는다면 사용자는 답답함을 느낌

==> 버튼에 로딩 애니메이션 넣은 화면을 보여주면 사용자의 답답함 해소 가능

3) 프로토타입이 중요한 이유 -> 인터랙션 디자인을 테스트하기 위해 

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

- UX는 정지된 화면이 아니라 서로 소통하는 인터랙션 과정에서 생겨나는 경험

- 사용자가 어려움 없이 화면 간을 이동하고, 원하는 기능을 찾고, 잘 사용하는지 보려면 동작하는 프로토타입으로 테스트하는 게 정확함

[피그마 프로토타이핑, 프로토파이, 프레이머]

04. 피그마 프로토타이핑, 프로토파이, 프레이머 

1) 피그마 프로토타이핑

: 피그마로 만든 화면을 가지고 간단하게 인터렉션을 제작

- 화면을 피그마로 디자인했다면 파일을 내보내거나 불러오는 과정 없이 간편하게 프로토타입을 만들 수 있는 것이 장점

- 하지만 실제 데이터를 넣거나 복잡한 애니메이션은 피그마 프로토타이핑 기능으로는 구현하기 어려움

1-1) 피그마 프로토타이핑의특징- 디자인 -> 프로토타이핑으로의 빠른 전환- 간편한 경로 연결* (참고) 피그마 프로토타이핑은 어떤 상황에서 쓰면 좋을까?- 피그마로 만든 화면을 가지고 단순한 동작을 시연할 때Ex. 버튼을 클릭하면 페이지를 이동하거나 팝업이나 모달을 노출하는 정도의 복잡하지 않은 인터랙션을 구현할 때 

2) 프로토파이

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

- 실제 코드로 개발하는 제품과 거의 유사한 수준의 인터랙션을 구현 가능

- 눈에 보이는 GUI를 클릭해서 작업할 수 있어 코드가 어려운 디자이너도 편리하게 사용

2-1) 피그마 프로토타이핑의특징

- Hi-fi 수준의 기능

- Lo-fi 수준인 피그마와 비교했을 때 가장 큰 차이점, 프로토파이는 실제 환경과 유사한 수준으로 구현 가능 

- 키패드로 텍스트를 입력하거나 입력한 텍스트를 전송하는 것처럼 보이게 할 수도 있음

- Conditions (조건부 트리거)

- Conditions는 특정 상황일 때 이동하거나 색상이 변하는 등의 조건을 걸 수 있는 기능

- 이 기능을 활용해서 실제와 매우 유사하게 동작할 수 있는 프로토타입 제작 가능 

* (참고) 프로토파이는 어떤 상황에서 쓰면 좋을까?

- 코드를 잘 모르더라도 다양한 애니메이션과 인터랙션을 구현하고 싶은 경우에 적합

3) 프레이머

: 코드 기반으로 실제 제품과 가장 유사한 수준으로 프로토타입 제작 가능

- 프레이머는 Hi-fi 프로토타입으로 코드 기반의 툴

- 인터페이스 디자인 툴의 기능도 함께 제공해서 디자인부터 프로토타이핑까지 한 번에

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

3-1) 프레이머의 특징

1. 재사용성

- 코드 재사용성 

프레이머는 개발 언어인 React를 기반으로 코드를 작성

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

- 컴포넌트 재사용성

특정 애니메이션이나 조건을 정의한 컴포넌트를 여러 번 재사용 가능 

2. CMS

: Content Management System의 약자로 콘텐츠 관리 시스템

- CMS 기능을 통해 콘텐츠를 작성하고 데이터를 관리 가능

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

- 배포된 화면을 분석할 수 있는 Analytics 기능 제공 =>  방문자 수와 어떤 경로로 들어왔는지 등을 확인 가능

* (참고) 프레이머는 어떤 상황에서 쓰면 좋을까?

- 실제 제품과 거의 같은 수준의 프로토타입을 만들어야 할 때 

- 코드를 다루는 데 익숙하면서, 혼자서 디자인과 개발까지 해보고 싶을 때

[피그마 프로토타이핑]

Navigate to : 화면과 화면을 이동할 때 사용

Back : 직전 페이지로 돌아갈 때 사용

Prototype animations 

Instant : 애니메이션 없이 즉각 화면 전환

Dissolve : 원본 화면 위에서 흐린 상태에서 진해지며 노출

Smart Animate : 이름이 같은 레이어끼리 자연스러운 움직임 적용

Move In : 새로운 화면이 원본 화면 위로 밀어 들어오며 노출

Move Out : 원본 화면이 밀려 나가며 아래로 새로운 화면 노출

Push : 새로운 화면이 원본 화면을 밀면서 노출