UXUI디자인입문_4주차 디자인 툴

• 디자인 툴이 무엇이고 어떤 것들이 있는지 배웁니다.
• 인터페이스 디자인 툴에 대해 더 자세히 알아봅니다.
• 상황에 맞는 프로토타이핑 툴을 선택할 수 있습니다.

---

✅ 디자인 툴
- 디자인 툴이란? 디지털로 이미지를 만들거나 편집할 수 있는 컴퓨터 프로그램
[디자인 툴 4종류]
① 인터페이스 디자인 툴 : 피그마, 스체치, XD- 화면에 인터페이스를 그리기 위한 툴, 벡터 방식
② 그래픽 디자인 툴 : 어도비 포토샵(비트맵,사진), 일러스트레이터(벡터,그래픽)
③ 3D 그래픽 디자인 툴 : 시네마 4D, 블렌더
④ 모션 그래픽 디자인 툴 : 프리미어(찍은 영상), 애프터이팩트(그래픽 모션)-움직이는 영상을 만드는 툴
- 비트맵과 벡터의 이해
① 비트맵 이미지 : 픽셀 확장자(jpeg, jpg, pngm gif), 픽셀수=용량, 이미지 손상O, 정교한 색 표현 가능.
② 벡터 이미지 : 수학적 함수 공식, 벡터 확장자(svg, eps, ai=이미지에 따라서 호환성 여부 확인), 용량 적음, 이미지 줄이거나 키워도 손상X, 색 표현에 한계가 있음

✅ 피그마, 스케치, XD
*공통점 = 벡터기반, 반응형으로 디자인 해야 하기 때문, 간단한 Low-fi 프로토타이핑을 가지고 있음, dev-mode(코드 변환 가능)
엔지니어와의 협업이 용이해짐.
- 피그마 : 클라우드 기반, 멀티 플랫폼 지원.(툴 설치 없이 사용) 이러한 이유로 전세계에서 점유율이 높음.
- 스케치 : 가장 많이 쓰는 툴이었지만, 2020부터 빼았겼음.MacOS에서 밖에 사용할 수 없음.
- 어도비XD : 어도비사 제품 사용하면 금방 적응, 로컬 파일로만 저장 가능.

✅ 프로토타이핑 툴
- 프로토타이핑 툴이란? 화면의 움직임, 인터렉션을 구현, 효과적으로 공유할 때.
① Low-fi : 가벼운 수준
② Hi-fi : 최종 제품이랑 유사한 수준
- 인터랙션 디자인 : 사용자와 제품이 소통→ 프로토타이핑이 중요한 이유는 인터랙션 디자인을 테스트하기 위해

✅ 피그마 프로토타이핑, 프로토파이, 프레이머
- 피그마 프로토타이핑(Lo-fi-간단한 이터랙션이라면 피그마 내 프로토타이핑으로 충분히 가능.)
- 이미지 기반 컴포넌트
① 디자인 → 프로토타이핑으로의 빠른 전환 : 탭만 바꿔서 이용할 수 있음
② 간편한 경로 연결 : 직관적인 연결 방법, 
- 프로토파이(Lo-fi와 Hi-fi 의 중간 정도의 프로토타입을 구현 할 수 있음, 코딩 없이 실제와 비슷하게 구현 가능)
① Hi-fi 수준의 기능 : 굉장히 높은 수준, 실제 환경과 유사하게 동작, 데이터를 넣을 수 있냐 없냐.
② Conditions (조건부 트리거) : 특정 상황일 때, 이동하거나 변할 수 있는 조건을 걸 수 있음.
-프레이머(난이도가 어렵고, 구현도가 높은 수준, 코드 기반으로 가장 유사한 수준으로 프로토타입을 구현, 배포까지 가능)
① 재사용성 : React 언어를  기반으로 코드 작성, 코드로 의사소통 하면 정확/원활, 컴포넌트(애니메이션) 재사용성 높음
② CMS(콘텐츠 관리 시스템) : 콘텐츠 발행도 지원, 코드를 다루는데 익숙하고 혼자 디자인과 개발을 해보고 싶다면 추천.

 ❗️숙제 : 피그마로 간단한 프로토타입 만들어보기