[UXUI 디자인 입문] Ch4: 디자인/프로토타이핑 툴

 

4-1) 디자인 툴

 

디자인 툴의 종류

• 인터페이스 디자인 툴
  • 디지털 제품의 화면 인터페이스를 그리기 위해 사용
  • 인터페이스 디자인 툴은 주로 벡터 방식을 기반으로 함
  • 피그마, 스케치 XD
• 그래픽 디자인 툴
  • 비주얼 그래픽 이미지를 만들 때 사용
  • 사진 편집 or 일러스트를 그려서 원하는 이미지를 만듦
  • 포토샵, 일러스트레이터
• 3D 그래픽 디자인 툴
  • 3차원의 그래픽을 만들 때 사용
  • 시네마 4D, 블렌더
• 모션 그래픽 디자인 툴
  • 그래픽 리소스를 활용해 영상을 만들거나 촬영한 영상을 편집할 때 사용
  • 프리미어, 애프터이펙트

 

비트맵과 벡터의 이해

• 비트맵은 확대하면 깨지고, 벡터는 자연스러움
• 비트맵
  • 픽셀: 디지털 이미지를 구성하는 최소 단위의 점
  • 비트 정보를 가진 픽셀이 모여 만들어진 이미지 ▶️ 비트맵 이미지
  • 카메라로 찍은 사진이나 컴퓨서 상에서 주고 받는 이미지의 대부분이 비트맵 이미지
  • .jpeg, .jpg, .png, .gif
  • 정교하게 이미지 표현 가능 but 용량도 함께 커짐
  • 이미지 크기를 편집하면 픽셀 수가 변해 손상이 생김
• 벡터
  • 그래픽을 수학적인 함수 공식으로 표현한 것
  • .svg, .eps, .ai
  • 이미지를 줄이거나 키워도 손상이 생기지 않음 
  • 비트맵에 비해 용량이 적음 but 섬세한 작업이 어려움 + 사용하는 곳에 따라 호환성에 문제가 생길 수도 있음

---

4-2) 피그마, 스케치, XD

 

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

• 벡터 기반 그래픽 편집 (반응형이기 때문에 비트맵보단 벡터 기반)
• 간단한 Lo-fi 프로토타이핑
• dev mode를 통한 코드 변환

 

피그마

• 클라우드 기반, 멀티 플랫폼 지원(데스크톱 설치가 기본, 구글·크롬 같은 브라우저도 가능)으로 여러 사용자 동시에 편집 가능
• 파일을 클라우드에 저장해서 인터넷이 가능한 곳 어디든지 편집 가능

 

스케치

• 피그마 이전까지 가장 많이 썼던 디자인 툴
• 로컬 컴퓨터 기반으로 동작하기 때문에 안정적임
• MacOS 기반

 

어도비XD

• Creative Cloud 플랜을 구독하면 추가 비용 없이 무료 사용 가능
• 클라우드 형태로 파일을 저장할 수 있지만, 기본적으로는 로컬 파일로 저장하는 방식이라 여러 사람이 다함께 작업하기는 어려움

---

4-3) 프로토타이핑 툴

 

프로토타이핑 툴

• 화면의 움직임이나 인터랙션 구현을 도와주는 툴
• 아이디어나 컨셉을 테스트하기 위해 사용
• 구현도에 따라 Lo-fi(와이어프레임 수준), Hi-fi(최종 제품과 유사한 수준)로 나뉨
• e.g. 피그마: 프로토타이핑, 프로토파이, 프레이머

 

인터랙션 디자인

• 제품에서 말하는 인터랙션은 사용자가 제품을 사용하면서 반응을 주고 받는 것
• 인터랙션 디자인은 사용자가 제품을 사용하면서 적절한 반응을 주고 받고 막힘없이 서로 간에 소통하는 것을 도움
• e.g. 제품과 사용자의 소통: 버튼을 눌렀으면 버튼에 로딩 애니메이션을 추가하거나 얼마 정도의 시간이 소요될 거라는 화면을 보여줘야 함 ▶️ 사용자는 더이상 막연한 답답함을 느끼지 않아도 됨
  (잠시만 기다려 주세요, 최대 30초 정도 걸릴 수 있어요)

 

프로토타입의 중요성

• 인터랙션 디자인을 테스트하기 위해
• UX는 정지된 화면이 아니라 서로 소통하는 인터랙션 과정에서 생겨나는 경험
• 사용자가 어려움 없이 화면을 이동하고, 원하는 기능 찾고, 잘 사용하는 지 보려면? ▶️ 동작하는 프로토타입으로 테스트하는 것이 정확함

---

4-4) 피그마 프로토타이핑, 프로토파이, 프레이머

 

피그마 프로토타이핑

• 피그마로 만든 화면을 가지고 간단하게 인터랙션을 만들어 볼 수 있음
• 실제 데이터를 넣거나 복잡한 애니메이션 불가능 ▶️ Lo-fi 정도
• 간편한 경로 연결이 가능함

프로토파이

• 코딩없이 실제 제품과 비슷한 수준으로 프로토타입을 만들 수 있음
• 눈에 보이는 GUI를 클릭해서 작업할 수 있음
• Lo-fi 수준의 피그마와 비교했을 때, 실제 환경과 유사한 수준으로 구현 가능 ▶️ 데이터 입력 가능함
• 특정 상황일 때 이동하거나 색상이 변하는 효과를 주는 등 조건을 걸 수 있음
• 코드를 잘 몰라도 다양한 애니메이션 + 인터랙션을 구현 가능 but 툴의 난이도는 있는 편

프레이머

• 코드 기반으로 실제 제품과 가장 유사한 수준으로 프로토타입을 만들 수 있음
• 리액트 기반
• 인터페이스 디자인 툴의 기능도 함께 제공 ▶️ 원툴 (배포까지 가능)
• 코드를 활용해 프로토타입을 만든 후 해당 코드를 개발자와 공유 가능 ->  원활한 소통을 도와줌 ▶️ 코드 재사용성
• 컴포넌트 재사용성: 특정 애니메이션이나 조건을 정의한 컴포넌트를 여러 번 재사용 가능
• CMS: 콘텐츠 관리 시스템으로 데이터 관리 가능함
• 코드에 익숙함 + 혼자서 디자인 + 개발 까지 해보고 싶다면 추천