티스토리 뷰
2025.01.28
피그마, 스케치, XD, 프로토타입
디자인툴
1) 인터페이스 디자인 툴
디지털 제품의 화면 인터페이스를 그리기 위해 사용한다.
벡터 기반의 툴
피그마, 스케치, XD
2) 그래픽 디자인 툴
사진 편집이나 일러스트를 그릴 때 사용한다.
포토샵, 일러스트레이터
3) 3D 그래픽 디자인 툴
시네마 4D, 블렌더
4) 모션 그래픽 디자인 툴
프리미어, 에프터 이펙트
비트맵 이미지
jpg, jpeg, png, gif
벡터보다 정교하게 이미지를 표현한다.
픽셀이 손상될 수 있다.
픽셀이 많을수록 용량이 크다.
벡터 이미지
svg, eps, ai
그래픽을 수학적인 함수 공식으로 표현한다.
점과 점을 연결해 이미지를 그린다.
좌표로 표현하기에 이미지를 키워도 손상이 없고 용량이 적다.
비트맵 만큼의 복잡한 표현을 하기 어렵고, 복잡한 이미지를 벡터로 만들면 용량이 매우 커진다.
피그마, 스케치, XD
공통 기능
벡터 기반, 간단한 Lo-fi 프로토타이핑, dev mode를 통한 그래픽 > 코드변환
1) 피그마
전세계에서 가장 많이 쓰는 인터페이스 툴이다.
클라우드 저장방식을 사용한다.
멀티 플랫폼을 지원함.
2) 스케치
개인 로컬 컴퓨터 기반이라 안정적이다.
MacOS에서만 사용 가능하다.
3) 어도비XD
클라우드 형식으로 저장할 수 있지만,
기본은 로컬 파일 저장이라 여러 사람이 다 함께 작업하기에 좋지 않다.
프로토타이핑 툴
화면의 움직임이나 인터렉션을 구현하는 툴
제품을 개발하기 전에 테스트하기 위해 사용한다.
구현 정도에 따라 Lo-fi와 Hi-fi로 나뉜다.
Lo-fi
와이어프레임 수준으로 움직임을 구현, 클릭과 화면 전환 정도로만 구현한다.
Hi-fi
최종 제품과 유사한 수준으로 구현한다.
제품에서 말하는 인터렉션은 사용자가 제품을 사용하면서 반응을 주고 받는 것이다.
프로토타입이 중요한 이유는 인터렉션 디자인을 테스트하기 위해서이다.
피그마 프로토타이핑, 프로토파이, 프레이머
1) 피그마 프로토타이핑
피그마에서 만든 화면을 인터렉션을 적용해서 만들 수 있다.
애니메이션이 복잡하거나 실제 데이터를 넣는 것은 구현하기 어렵다.
디자인하고 간단하게 테스트하기 좋다.
2) 프로토파이
코딩 없이 실제 제품과 비슷하게 프로토타입을 만들 수 있는 툴
제품과 유사한 수준의 인터렉션을 구현한다.
3) 프레이머
실제 제품과 가장 유사한 수준으로 프로토타입을 만들 수 있다.
코드 기반의 툴으로 디자인부터 프로토타이핑까지 한 번에 가능
실제 제품으로 배포까지 가능하다.
4주차 강의 숙제
피그마에서 프로토타입 연결하기
연결과 애니메이션까지 마친 모습이다.
Figma
Created with Figma
www.figma.com
오늘 하루를 돌아보며
오늘 하루는 디자인 툴에는 어떤 것들이 있는지, 프로토타입 툴은 어떤 것들이 있고 어느 상황에서 주로 사용하는지
알게 되었다. 직접 프로토타이핑을 하는 숙제도 있었는데 간단하게 해볼 수 있어서 재미있었다.
오늘은 강의와 숙제 모두 크게 어렵지 않아서 빠르게 마칠 수 있었다.
개인 과제를 하려면 5주차 강의까지 들어야해서 설날이 끝나기 전에 들을 계획이다.
내일 할 학습
UXUI 디자인 입문 5주차 강의 듣기
'내일배움캠프 UXUI 6기' 카테고리의 다른 글
| 내일배움캠프 UXUI 6기 9일차/ 개인 과제, AEIOU기법, 친화도 분석 (0) | 2025.02.04 |
|---|---|
| 나눔배움캠프 UXUI 6기 TIL / 레퍼런스 분석, UXUI 디자인 패턴 (0) | 2025.01.30 |
| 내일배움캠프 UXUI 6기 / 6일차 TIL / 제품팀, 협업, A/B 테스트, 테스트 케이스 (0) | 2025.01.27 |
| 내일배움캠프 UXUI 6기 / 1주차 WIL (0) | 2025.01.24 |
| 내일배움캠프 5일차 UXUI 6기 / 공감지도, 5whys, SCAMPER (1) | 2025.01.24 |